/* nav.css: utility bar, header, logo, primary nav, dropdowns, mobile drawer.
   The backdrop-filter trap and the drawer's visibility/transition rules:
   agent/nav.md. */

/* --------------------------------------------------------------------------
   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;
}

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

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

.site-header .vbp-header-region__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    width: 100%;
    max-width: var(--container-max);
    min-width: 0;
    margin-inline: auto;
    padding: var(--space-3) var(--gutter);
}

.site-header .vbp-header-region__content {
    display: contents;
}

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

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

/* Else the button shrinks below its content (a flex item's min-content is its
   longest word) and breaks the phone number onto two lines. See agent/nav.md. */
.site-header .btn {
    flex: none;
}

/* Nav ---------------------------------------------------------------------- */
.vbp-header-navigation {
    display: flex;
    align-items: center;
}

.vbp-header-navigation__list {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.vbp-header-navigation 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;
}

.vbp-header-navigation a:hover {
    color: var(--blue-text);
}

/* A persistent underline, distinct from the hover colour, marks the current
   page and a dropdown child's parent toggle. Colour alone is not a state. */
.vbp-header-navigation a[aria-current="page"],
.vbp-header-navigation__toggle--current {
    color: var(--blue-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    text-decoration-color: var(--blue-fill);
}

.vbp-header-navigation__group {
    position: relative;
}

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

.vbp-header-navigation__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;
}

.vbp-header-navigation__disclosure-icon {
    width: 0.7rem;
    height: 0.7rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    transition: rotate var(--dur) var(--ease-out);
}

.vbp-header-navigation__toggle[aria-expanded="true"] .vbp-header-navigation__disclosure-icon {
    rotate: 225deg;
}

.vbp-header-navigation__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.
       `allow-discrete` is what lets `display` transition at all. */
    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;
    margin: 0;
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    list-style: none;
}

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

@starting-style {
    .vbp-header-navigation__toggle[aria-expanded="true"] + .vbp-header-navigation__panel {
        opacity: 0;
        scale: 0.97;
    }
}

/* Before enhancement, desktop hover and keyboard focus keep every dropdown
   reachable. The ::before bridge lets the pointer travel from trigger to panel
   without the group losing :hover. Ready navigation follows aria-expanded. */
@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
    .vbp-header-navigation:not([data-ready]) .vbp-header-navigation__group:hover > .vbp-header-navigation__panel {
        display: block;
        opacity: 1;
        scale: 1;
        transition-duration: var(--dur);
    }

    .vbp-header-navigation:not([data-ready]) .vbp-header-navigation__group:hover > .vbp-header-navigation__toggle .vbp-header-navigation__disclosure-icon {
        rotate: 225deg;
    }

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

@media (min-width: 900px) {
    .vbp-header-navigation:not([data-ready]) .vbp-header-navigation__group:focus-within > .vbp-header-navigation__panel {
        display: block;
        opacity: 1;
        scale: 1;
        transition-duration: var(--dur);
    }

    .vbp-header-navigation:not([data-ready]) .vbp-header-navigation__group:focus-within > .vbp-header-navigation__toggle .vbp-header-navigation__disclosure-icon {
        rotate: 225deg;
    }
}

.vbp-header-navigation__panel-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: var(--text-sm);
}

.vbp-header-navigation__panel-link:hover {
    background: var(--blue-wash);
}

/* Grouped and column-flowed, with a link out to the full list: as one list the
   25 cities were a memory test. */
.nav__panel--areas {
    min-width: min(56rem, 86vw);
    columns: 2;
    column-gap: var(--space-4);
}

.nav__panel--areas > .vbp-header-navigation__panel-item:last-child > .vbp-header-navigation__panel-link {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}

.vbp-header-navigation__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* The call FAB already covers this action on phones. */
@media (max-width: 560px) {
    .vbp-header-navigation__actions .btn--primary {
        display: none;
    }
}

.vbp-header-navigation__control {
    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;
}

.vbp-header-navigation__control-icon {
    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. */
.vbp-header-navigation__close .vbp-header-navigation__control-icon {
    box-shadow: none;
    rotate: 45deg;
}

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

@media (max-width: 899px) {
    /* backdrop-filter makes the header the containing block for its fixed
       descendants, which un-fixes the drawer. Do not restore it here.
       See agent/nav.md. */
    .site-header {
        backdrop-filter: none;
        background: var(--surface-raised);
    }

    /* visibility, not display: it leaves the tab order and the a11y tree while
       keeping the slide, which display: none cannot do. */
    .vbp-header-navigation {
        flex-direction: column;
        align-items: stretch;
    }

    .vbp-header-navigation__list {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
    }

    .vbp-header-navigation[data-ready] {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        padding: var(--space-8) var(--gutter) var(--space-6);
        background: var(--surface-raised);
        overflow-y: auto;
        visibility: hidden;
        translate: 100% 0;
    }

    /* The transition is withheld until the controller marks an intentional
       state change, so a media-query crossing cannot slide a closed drawer. */
    .vbp-header-navigation[data-animated] {
        transition: translate var(--dur-slow) var(--ease-out),
                    visibility 0s linear var(--dur-slow);
    }

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

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

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

    .vbp-header-navigation:not([data-ready]) .vbp-header-navigation__panel {
        display: block;
        opacity: 1;
        scale: 1;
    }

    .nav__panel--areas {
        columns: 1;
    }

    .vbp-header-navigation__open[data-ready],
    .vbp-header-navigation[data-ready] .vbp-header-navigation__close {
        display: inline-flex;
    }

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

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

/* The z-300 FAB paints over the drawer (nested in the z-100 header). Reserve
   room below the drawer's logo so it clears the button. */
@media (max-width: 720px) {
    .vbp-header-navigation[data-ready] {
        padding-bottom: calc(var(--space-9) + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .vbp-header-navigation__panel {
        transform: none !important;
        translate: none !important;
        scale: none !important;
    }
}