/*
 * blair-handyman-kit — bhs-pages.css
 * Supplemental utilities for the inner-page widgets (service index, service
 * detail, sub-service detail, blog, booking, contact). Everything here is
 * scoped under #bhs-root-wrapper exactly like bhs-widgets.css, and only adds
 * classes that stylesheet does not already define — nothing is overridden.
 *
 * The inner-page markup was authored against a "brand-red" accent token. The
 * Blair palette's accent is --brand-accent, so the brand-red utilities below
 * are aliases onto it: one accent colour across the whole site.
 */

/* ---- Accent aliases: brand-red -> Blair's brand-accent ---- */
#bhs-root-wrapper .bg-brand-red { background-color: hsl(var(--brand-accent)); }
#bhs-root-wrapper .bg-brand-red\/5 { background-color: hsl(var(--brand-accent) / .05); }
#bhs-root-wrapper .text-brand-red { color: hsl(var(--brand-accent)); }
#bhs-root-wrapper .text-brand-red-foreground { color: hsl(var(--brand-accent-foreground)); }
#bhs-root-wrapper .border-brand-red { border-color: hsl(var(--brand-accent)); }
#bhs-root-wrapper .border-brand-red\/30 { border-color: hsl(var(--brand-accent) / .3); }
#bhs-root-wrapper .border-brand-red\/40 { border-color: hsl(var(--brand-accent) / .4); }
#bhs-root-wrapper .accent-brand-red { accent-color: hsl(var(--brand-accent)); }
#bhs-root-wrapper .hover\:bg-brand-red-deep:hover { background-color: hsl(var(--brand-accent-deep)); }
#bhs-root-wrapper .hover\:border-brand-red\/50:hover { border-color: hsl(var(--brand-accent) / .5); }
#bhs-root-wrapper .hover\:border-brand-red\/40:hover { border-color: hsl(var(--brand-accent) / .4); }
#bhs-root-wrapper .group:hover .group-hover\:bg-brand-red { background-color: hsl(var(--brand-accent)); }
#bhs-root-wrapper .\[\&\[data-state\=open\]\]\:bg-brand-red[data-state="open"] { background-color: hsl(var(--brand-accent)); }
#bhs-root-wrapper .\[\&\[data-state\=open\]\]\:text-primary[data-state="open"] { color: hsl(var(--primary)); }

/* ---- Colour / opacity utilities ---- */
#bhs-root-wrapper .bg-primary\/10 { background-color: hsl(var(--primary) / .1); }
#bhs-root-wrapper .text-foreground\/85 { color: hsl(var(--foreground) / .85); }
#bhs-root-wrapper .text-primary-foreground\/70 { color: hsl(var(--primary-foreground) / .7); }
#bhs-root-wrapper .fill-white { fill: #fff; }
#bhs-root-wrapper .hover\:border-primary\/40:hover { border-color: hsl(var(--primary) / .4); }
#bhs-root-wrapper .hover\:no-underline:hover { text-decoration-line: none; }

/* ---- Layout / spacing ---- */
#bhs-root-wrapper .aspect-\[16\/9\] { aspect-ratio: 16 / 9; }
#bhs-root-wrapper .border-l-2 { border-left-width: 2px; }
#bhs-root-wrapper .h-0 { height: 0; }
#bhs-root-wrapper .pl-6 { padding-left: 1.5rem; }
#bhs-root-wrapper .pt-10 { padding-top: 2.5rem; }
#bhs-root-wrapper .pb-16 { padding-bottom: 4rem; }
#bhs-root-wrapper .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
#bhs-root-wrapper .py-12 { padding-top: 3rem; padding-bottom: 3rem; }
#bhs-root-wrapper .space-y-7 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.75rem; }
#bhs-root-wrapper .max-h-\[88vh\] { max-height: 88vh; }
#bhs-root-wrapper .max-w-\[92vw\] { max-width: 92vw; }
#bhs-root-wrapper .left-\[-9999px\] { left: -9999px; }
#bhs-root-wrapper .overflow-x-auto { overflow-x: auto; }
#bhs-root-wrapper .uppercase { text-transform: uppercase; }

/* ---- Truncation ---- */
#bhs-root-wrapper .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* ---- Shadows ---- */
#bhs-root-wrapper .shadow-soft { box-shadow: var(--shadow-soft); }
#bhs-root-wrapper .shadow-\[0_4px_20px_-4px_rgba\(0\,0\,0\,0\.12\)\] { box-shadow: 0 4px 20px -4px rgba(0, 0, 0, .12); }

/* ---- Scroll snap / scrollbar ---- */
#bhs-root-wrapper .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); }
#bhs-root-wrapper .snap-mandatory { --tw-scroll-snap-strictness: mandatory; }
#bhs-root-wrapper .snap-start { scroll-snap-align: start; }
#bhs-root-wrapper .\[scrollbar-width\:none\] { scrollbar-width: none; }
#bhs-root-wrapper .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { display: none; }

/* ---- Focus ---- */
#bhs-root-wrapper .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* ---- Breakpoints ---- */
@media (min-width: 640px) {
    #bhs-root-wrapper .sm\:aspect-\[2\/1\] { aspect-ratio: 2 / 1; }
    #bhs-root-wrapper .sm\:py-12 { padding-top: 3rem; padding-bottom: 3rem; }
    #bhs-root-wrapper .sm\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    #bhs-root-wrapper .sm\:pb-20 { padding-bottom: 5rem; }
    #bhs-root-wrapper .sm\:\[\&\:nth-last-child\(-n\+2\)\]\:border-b-0:nth-last-child(-n+2) { border-bottom-width: 0; }
}
@media (min-width: 768px) {
    #bhs-root-wrapper .md\:gap-4 { gap: 1rem; }
    #bhs-root-wrapper .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; }
    #bhs-root-wrapper .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1024px) {
    #bhs-root-wrapper .lg\:mb-12 { margin-bottom: 3rem; }
}

/* ==========================================================================
   Service-area landing pages.

   These pages are built from native Elementor widgets (heading, text-editor,
   image, icon-box, icon-list, button) so they render without Elementor Pro.
   Left alone they inherit theme defaults and look nothing like the rest of the
   site.

   Elementor applies custom CSS classes to widgets but NOT to containers, so
   every hook here is on a widget: .bhs-a-h (headings), .bhs-a-p (copy),
   .bhs-a-box (cards), .bhs-a-list (tick lists), .bhs-area-img (photos),
   .bhs-area-btn (buttons). Layout stays with Elementor's own container
   settings. Not scoped to #bhs-root-wrapper - these sit outside the kit wrapper.
   ========================================================================== */

.bhs-a-h, .bhs-a-p, .bhs-a-box, .bhs-a-list, .bhs-area-img, .bhs-area-btn {
    --bhs-a-fg:      hsl(213 50% 15%);
    --bhs-a-muted:   hsl(213 18% 40%);
    --bhs-a-primary: hsl(213 53% 37%);
    --bhs-a-accent:  hsl(28 92% 52%);
    --bhs-a-line:    hsl(213 20% 88%);
    --bhs-a-soft:    hsl(213 45% 97%);
}

/* ---- Headings ---- */
.bhs-a-h .elementor-heading-title {
    font-family: Archivo, system-ui, sans-serif;
    color: var(--bhs-a-fg);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.15;
}
.bhs-a-h-h2 .elementor-heading-title { font-size: clamp(1.55rem, 2.9vw, 2.4rem); }
.bhs-a-h-h3 .elementor-heading-title { font-size: 1.12rem; }

/* ---- Body copy ---- */
.bhs-a-p {
    font-family: Inter, system-ui, sans-serif;
    color: var(--bhs-a-muted);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
}
.bhs-a-p p { margin: 0 0 .9em; }
.bhs-a-p p:last-child { margin-bottom: 0; }

/* ---- Hero ---- */
.bhs-a-hero-h .elementor-heading-title {
    color: #fff;
    font-size: clamp(1.9rem, 4.2vw, 3.4rem);
    letter-spacing: -0.03em;
    text-shadow: 0 2px 18px rgb(0 0 0 / .35);
}
.bhs-a-hero-p {
    color: rgb(255 255 255 / .9);
    max-width: 64ch;
    margin-inline: auto;
    font-size: 1.03rem;
    text-shadow: 0 1px 10px rgb(0 0 0 / .3);
}

/* ---- Buttons ---- */
.bhs-area-btn .elementor-button,
.bhs-area-btn-alt .elementor-button {
    border-radius: 0;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 700;
    font-size: .875rem;
    padding: 14px 26px;
    background-color: var(--bhs-a-accent);
    color: hsl(213 50% 11%);
    transition: filter .2s ease, transform .2s ease;
}
.bhs-area-btn .elementor-button:hover,
.bhs-area-btn-alt .elementor-button:hover {
    filter: brightness(.94);
    transform: translateY(-1px);
    color: hsl(213 50% 11%);
}
.bhs-area-btn-alt .elementor-button {
    background-color: #fff;
    color: var(--bhs-a-fg);
}

/* ---- Cards (why-us + steps) ---- */
.bhs-a-box {
    border: 1px solid var(--bhs-a-line);
    background: #fff;
    padding: 22px 20px;
    height: 100%;
}
.bhs-a-box .elementor-icon-box-title,
.bhs-a-box .elementor-icon-box-title a {
    font-family: Archivo, system-ui, sans-serif;
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--bhs-a-fg);
    margin-bottom: .4em;
}
.bhs-a-box .elementor-icon-box-description {
    font-family: Inter, system-ui, sans-serif;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--bhs-a-muted);
    margin: 0;
}
.bhs-a-box .elementor-icon {
    color: var(--bhs-a-accent);
    font-size: 22px;
}

/* ---- Tick lists ---- */
.bhs-a-list .elementor-icon-list-item {
    font-family: Inter, system-ui, sans-serif;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--bhs-a-muted);
    padding: 4px 0;
}
.bhs-a-list .elementor-icon-list-icon svg,
.bhs-a-list .elementor-icon-list-icon i {
    color: var(--bhs-a-accent);
    font-size: 13px;
}
.bhs-a-list .elementor-icon-list-item > a { color: inherit; text-decoration: none; }
.bhs-a-list .elementor-icon-list-item > a:hover { color: var(--bhs-a-primary); }

/* ---- Photos ---- */
.bhs-area-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--bhs-a-soft);
    border: 1px solid var(--bhs-a-line);
}
.bhs-area-img { height: 100%; }
.bhs-area-img .elementor-widget-container,
.bhs-area-img .elementor-image { height: 100%; }

/* ---- Narrow screens ---- */
@media (max-width: 767px) {
    .bhs-a-box { padding: 18px 16px; }
    .bhs-a-hero-h .elementor-heading-title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
}

/* ==========================================================================
   Phone layout (<= 767px).

   The kit markup is Tailwind-derived and mostly responsive already, but the
   generated service-area pages use core Elementor widgets whose desktop
   percentage widths do not collapse on their own, and a few kit sections
   needed tightening on a narrow screen. Everything below is additive.
   ========================================================================== */
@media (max-width: 767px) {

    /* --- Service-area pages: force every percentage column to full width --- */
    .elementor-page .e-con.e-flex > .e-con,
    .elementor-page .elementor-widget-wrap > .e-con {
        width: 100% !important;
        flex-basis: 100% !important;
    }
    .elementor-page .e-con.e-flex { flex-wrap: wrap !important; }

    /* Photo grids stay two-up rather than collapsing to one tall column */
    .bhs-area-img { width: 100% !important; }

    /* Headings scale down instead of wrapping awkwardly */
    .bhs-a-hero-h .elementor-heading-title { font-size: clamp(1.6rem, 7.5vw, 2.1rem) !important; }
    .bhs-a-h-h2 .elementor-heading-title   { font-size: clamp(1.35rem, 5.8vw, 1.7rem) !important; }
    .bhs-a-p, .bhs-a-p p                   { font-size: .95rem; line-height: 1.7; }

    /* Flip boxes are tap-only on a phone, so show the front face at full height */
    .elementor-flip-box { min-height: 300px; }
    .elementor-flip-box__front { padding: 20px 16px; }

    /* Forms: full-width fields, comfortable tap targets */
    .elementor-field-group { width: 100% !important; flex-basis: 100% !important; }
    .elementor-field-group .elementor-field { min-height: 46px; font-size: 16px; }
    .elementor-field-group .elementor-button { width: 100%; min-height: 48px; }

    /* Google map never taller than it is useful */
    .elementor-widget-google_maps iframe { height: 260px !important; }

    /* --- Kit header --- */
    #bhs-root-wrapper .container-wide { padding-left: 16px; padding-right: 16px; }
    #bhs-root-wrapper .bhs-topbar,
    #bhs-root-wrapper [data-bhs-widget="bhs-header"] .bhs-topbar { font-size: 11px; }
    #bhs-root-wrapper .bhs-wordmark { font-size: 1.05rem; }
    /* drawer links get a real tap target */
    #bhs-root-wrapper .mobile-drawer-link,
    #bhs-root-wrapper .bhs-mobile-submenu-toggle { min-height: 48px; display: flex; align-items: center; }

    /* --- Kit footer: stack the columns, keep the contact block readable --- */
    #bhs-root-wrapper [data-bhs-widget="bhs-footer"] .grid { display: block; }
    #bhs-root-wrapper [data-bhs-widget="bhs-footer"] .grid > * { margin-bottom: 28px; }
    #bhs-root-wrapper [data-bhs-widget="bhs-footer"] a { word-break: break-word; }

    /* --- Kit sections: no horizontal scroll on a phone --- */
    #bhs-root-wrapper section { overflow-x: hidden; }
    #bhs-root-wrapper .grid { gap: 14px; }
}

/* Nothing anywhere should be able to push the page sideways on a phone. */
@media (max-width: 767px) {
    html, body { overflow-x: hidden; }
    img, iframe, table { max-width: 100%; }
}