/* ==========================================================================
   nav.css - site header: utility bar, logo, primary nav, dropdown menus,
   and the mobile off-canvas drawer. Extracted from components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Utility bar + header
   -------------------------------------------------------------------------- */
.utility-bar {
    background: var(--surface-ink);
    color: var(--on-ink-soft);
    font-size: var(--text-sm);
}

.utility-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block: var(--space-2);
}

.utility-bar__trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    list-style: none;
}

.utility-bar__trust li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.utility-bar__trust svg {
    flex: none;
    fill: var(--star);
}

.utility-bar__contact {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
}

.utility-bar a {
    color: var(--on-ink);
    text-decoration: none;
}

.utility-bar a:hover {
    color: var(--ink-on-dark);
    text-decoration: underline;
}

@media (max-width: 720px) {
    /* Above the fold on phones belongs to the hero. The phone number is still
       reachable from the header and the floating call button. */
    .utility-bar {
        display: none;
    }
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-3);
}

.logo {
    display: block;
    text-decoration: none;
}

.logo img {
    max-width: 16rem;
    width: 100%;
    height: auto;
}

/* A flex item's min-content is its longest word, so between 981px and 1079px
   the header's call button shrank and broke "(647) 500-5100" onto a second
   line, taking the header to 107px. The header has ~112px of free space there;
   the button was not cramped, it was shrinking below its content. Hold it. */
.site-header .btn {
    flex: none;
}

/* Nav ---------------------------------------------------------------------- */
.nav {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* Shown only inside the mobile drawer (see the max-width: 980px block). */
.nav__logo {
    display: none;
}

.nav a {
    display: inline-flex;
    align-items: center;
    color: var(--ink-body);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

/* Touch pointers need a 44px target; mouse pointers do not, and inflating the
   header for them would cost vertical space above the fold. */
.nav a:hover {
    color: var(--blue-text);
}

/* Active page: a persistent underline — distinct from the hover colour — marks
   the current page, and for a dropdown child its parent section toggle. */
.nav a[aria-current="page"],
.nav__toggle[data-current] {
    color: var(--blue-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--blue-fill);
}

.nav__group {
    position: relative;
}

html[data-source="gads"] .nav__group--areas {
    display: none;
}

.nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    background: none;
    border: 0;
    color: var(--ink-body);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.nav__toggle svg {
    transition: transform var(--dur) var(--ease-out);
}

.nav__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.nav__panel {
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 50%;
    translate: -50% 0;
    z-index: var(--z-dropdown);
    display: none;
    /* A popover belongs to its trigger, so it grows from the top, not the
       centre. `allow-discrete` lets `display` participate in the transition. */
    transform-origin: top center;
    opacity: 0;
    scale: 0.97;
    /* Exit is faster than enter: the user has already decided. */
    transition: opacity var(--dur-press) var(--ease-out),
                scale var(--dur-press) var(--ease-out),
                display var(--dur-press) allow-discrete;
    min-width: 32rem;
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.nav__toggle[aria-expanded="true"] + .nav__panel {
    display: block;
    opacity: 1;
    scale: 1;
    transition-duration: var(--dur);
}

@starting-style {
    .nav__toggle[aria-expanded="true"] + .nav__panel {
        opacity: 0;
        scale: 0.97;
    }
}

/* Desktop: open the dropdowns on hover (and on keyboard focus), not just click.
   The `::before` bridges the gap between the trigger and the panel so the
   pointer can travel down onto the panel without the group losing :hover. The
   click handler still runs, so touch and a deliberate click both keep working. */
@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
    .nav__group:hover > .nav__panel,
    .nav__group:focus-within > .nav__panel {
        display: block;
        opacity: 1;
        scale: 1;
        transition-duration: var(--dur);
    }

    .nav__group:hover > .nav__toggle svg,
    .nav__group:focus-within > .nav__toggle svg {
        transform: rotate(180deg);
    }

    .nav__panel::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: calc(-1 * var(--space-3));
        height: var(--space-3);
    }
}

.nav__panel a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: var(--text-sm);
}

.nav__panel a:hover {
    background: var(--blue-wash);
}

/* The 25-city list was a wall of options. Grouped and column-flowed, with a
   link out to the full list, it stops being a memory test. */
.nav__panel--areas {
    min-width: min(56rem, 86vw);
    columns: 2;
    column-gap: var(--space-4);
}

.nav__panel-footer {
    columns: 1;
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

@media (max-width: 560px) {
    /* The floating call button already covers this action on phones. */
    .site-header__actions .btn--primary {
        display: none;
    }
}

.nav__burger {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.nav__burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink);
}

/* The close control is the same button element, drawn as an X. */
.nav__close span {
    box-shadow: none;
    rotate: 45deg;
}

.nav__close span::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 20px;
    height: 2px;
    background: var(--ink);
    translate: -50% -50%;
    rotate: 90deg;
}

@media (max-width: 980px) {
    /* `backdrop-filter` makes an element the containing block for its
       `position: fixed` descendants. With it on the header, the drawer was
       never fixed to the viewport: it was pinned to the 96px header and
       translated 360px to the right of it, hanging off the document. The
       header is already 92% opaque, so the blur buys nothing here. */
    .site-header {
        backdrop-filter: none;
        background: var(--surface-raised);
    }

    /* Now genuinely fixed to the viewport, the off-canvas drawer adds nothing
       to the document's scrollable overflow. `visibility` (not `display`)
       takes it out of the tab order and out of the accessibility tree while
       keeping the slide, which a transition out of `display: none` cannot do.
       The visibility flip is delayed on exit so the slide finishes first. */
    .nav {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: var(--space-8) var(--gutter) var(--space-6);
        background: var(--surface-raised);
        overflow-y: auto;
        visibility: hidden;
        translate: 100% 0;
    }

    /* The transition is deliberately withheld until the drawer has been
       toggled. `data-open` is written only by the burger, so a media-query
       crossing (window resize, devtools, the first layout settling) moves the
       panel instantly instead of sliding a full-height white sheet across the
       page for 400ms. Transitions read the after-change style, so the first
       open still animates: it lands on a rule that has one.

       Residual: once the drawer has been opened, `data-open="false"` persists,
       so a later resize across 980px does slide it. That is the price of
       animating the close. The load path, which is what is seen, is covered. */
    .nav[data-open] {
        transition: translate var(--dur-slow) var(--ease-out),
                    visibility 0s linear var(--dur-slow);
    }

    .nav[data-open="true"] {
        visibility: visible;
        translate: 0 0;
        transition: translate var(--dur-slow) var(--ease-out),
                    visibility 0s linear 0s;
    }

    .nav a,
    .nav__toggle {
        padding-block: var(--space-4);
        border-bottom: 1px solid var(--border);
        font-size: var(--text-lg);
    }

    .nav__panel {
        position: static;
        translate: none;
        box-shadow: none;
        border: 0;
        padding-inline: var(--space-4);
    }

    .nav__panel--areas {
        columns: 1;
    }

    .nav__burger {
        display: inline-flex;
    }

    .nav__close {
        position: absolute;
        top: var(--space-4);
        right: var(--gutter);
    }

    /* Sits at the bottom of the open drawer; margin-top: auto pushes it there. */
    .nav__logo {
        display: block;
        margin-top: auto;
        padding-top: var(--space-7);
        max-width: 16rem;
        width: 100%;
        height: auto;
    }
}

@media (min-width: 981px) {
    .nav__close {
        display: none;
    }
}

/* At <=720px the FAB spans full-width at the viewport bottom and paints over
   the open drawer (the drawer is nested in the z-100 header, below the z-300
   FAB). Reserve room below the drawer's logo so it clears the button. */
@media (max-width: 720px) {
    .nav {
        padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
    }
}