/* ============================================================================
   Site header — utility bar, primary nav, mobile drawer.

   Two states, driven by header.js adding .is-stuck past the hero:
     • at rest  — transparent over the hero, white type, no shadow
     • stuck    — solid paper, ink type, hairline + shadow

   Pages without a hero opt out by setting .site-header--solid, which pins the
   stuck appearance from the first paint. Without that, the nav on (say) the
   contact page would render white-on-white until the visitor scrolled.
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    transition: background .3s var(--pt-ease), box-shadow .3s var(--pt-ease), border-color .3s var(--pt-ease);
}

/* ---------------------------------------------------------- utility bar -- */

.topbar {
    background: var(--pt-ink-900);
    color: rgba(255, 255, 255, .72);
    font-size: var(--pt-text-xs);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--pt-gap);
    min-height: 38px;
}

.topbar-contact { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .55rem;
    border-radius: var(--pt-radius-sm);
    color: rgba(255, 255, 255, .78);
    font-size: var(--pt-text-xs);
    font-weight: 500;
    transition: color .18s var(--pt-ease), background .18s var(--pt-ease);
}

.topbar-link:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.topbar-link svg { width: 13px; height: 13px; flex: none; }

.topbar-link-btn {
    border: 0;
    background: none;
    font-family: inherit;
    cursor: pointer;
}

.topbar-divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, .18);
    margin-inline: .25rem;
}

/* ------------------------------------------------------------ main nav -- */

.main-nav {
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: inherit;
}

.main-nav-inner {
    display: flex;
    align-items: center;
    gap: var(--pt-gap);
    min-height: var(--pt-header-h);
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    margin-right: auto;
    border-radius: var(--pt-radius);
    transition: background .3s var(--pt-ease), padding .3s var(--pt-ease), box-shadow .3s var(--pt-ease);
}

/* A white card behind the mark while it floats over the photo, rather than
   trying to recolour the logo itself: the logo is a client upload through
   the CRM, so it can arrive as anything — a transparent mark, or (as here)
   a PNG with its own opaque white canvas, which a forced white-silhouette
   filter would flatten to an invisible white-on-white block. A plain white
   backing card is the one treatment that reads correctly regardless of what
   the uploaded file actually contains. Dropped once the header goes solid,
   where the page itself is already that same white. */
.site-header:not(.is-stuck):not(.site-header--solid) .navbar-brand {
    padding: .5rem .9rem;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 16px rgba(10, 24, 48, .25);
}

.site-header:not(.is-stuck):not(.site-header--solid) .brand-logo { height: 54px; }

.brand-logo {
    height: 40px;
    width: auto;
    transition: height .3s var(--pt-ease);
}

.site-header.is-stuck .brand-logo,
.site-header--solid .brand-logo { height: 48px; }

/* -- links ---------------------------------------------------------------- */

.service-nav {
    display: flex;
    align-items: center;
    gap: .125rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.service-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .8rem;
    border-radius: var(--pt-radius-pill);
    color: rgba(255, 255, 255, .9);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-base);
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    /* Stands in for the hero's old dark wash, now that the photo behind the
       header is no longer darkened for it — dropped in the stuck/solid
       state below, where the nav sits on a solid light bar instead. */
    text-shadow: 0 1px 6px rgba(10, 24, 48, .5);
    transition: color .2s var(--pt-ease), background .2s var(--pt-ease);
}

.service-nav .nav-link svg { width: 16px; height: 16px; opacity: .75; }

.service-nav .nav-link:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* The active marker is a lime dot under the label rather than a filled pill —
   it survives both header states without needing a second colour rule. */
.service-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .18rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pt-blue-600);
    transform: translateX(-50%);
}

.site-header.is-stuck .service-nav .nav-link,
.site-header--solid .service-nav .nav-link { color: var(--pt-slate-700); text-shadow: none; }

.site-header.is-stuck .service-nav .nav-link:hover,
.site-header--solid .service-nav .nav-link:hover {
    background: var(--pt-blue-100);
    color: var(--pt-blue-700);
}

.site-header.is-stuck .service-nav .nav-link.active,
.site-header--solid .service-nav .nav-link.active { color: var(--pt-blue-700); font-weight: 600; }

/* -- header CTA ----------------------------------------------------------- */

.nav-cta { flex: none; margin-left: .5rem; }

/* Over the photo, a solid blue pill competes with the hero's own blue
   accents — a dark translucent pill (matching the reference header's own
   CTA treatment) sits on any photo without a colour clash, then hands off to
   the real brand blue once the header goes solid. */
.site-header:not(.is-stuck):not(.site-header--solid) .nav-cta .pt-btn--primary {
    --_bg: rgba(10, 24, 48, .55);
    --_bd: rgba(255, 255, 255, .22);
    backdrop-filter: blur(8px);
}

.site-header:not(.is-stuck):not(.site-header--solid) .nav-cta .pt-btn--primary:hover {
    --_bg: rgba(10, 24, 48, .72);
}

/* -- stuck / solid state -------------------------------------------------- */

.site-header.is-stuck .main-nav,
.site-header--solid .main-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom-color: var(--pt-line);
    box-shadow: 0 4px 24px rgba(17, 36, 74, .07);
}

.site-header.is-stuck .main-nav-inner { min-height: 66px; }

/* --------------------------------------------------------- mobile drawer -- */

.custom-toggler {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--pt-radius-sm);
    background: rgba(255, 255, 255, .1);
    cursor: pointer;
}

.site-header.is-stuck .custom-toggler,
.site-header--solid .custom-toggler {
    border-color: var(--pt-line);
    background: var(--pt-paper);
}

.toggler-bar {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: #fff;
    transition: transform .3s var(--pt-ease), opacity .2s var(--pt-ease);
}

.site-header.is-stuck .toggler-bar,
.site-header--solid .toggler-bar { background: var(--pt-ink-800); }

.custom-toggler[aria-expanded="true"] .toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.custom-toggler[aria-expanded="true"] .toggler-bar:nth-child(2) { opacity: 0; }
.custom-toggler[aria-expanded="true"] .toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: rgba(10, 24, 48, .55);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--pt-ease), visibility .3s;
}

.nav-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 991.98px) {
    .custom-toggler { display: flex; }

    .nav-collapse {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 895;
        width: min(340px, 86vw);
        height: 100dvh;
        padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
        background: var(--pt-paper);
        box-shadow: var(--pt-shadow-xl);
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(102%);
        transition: transform .38s var(--pt-ease-out);
        display: flex;
        flex-direction: column;
        gap: var(--pt-gap-lg);
    }

    .nav-collapse.is-open { transform: none; }

    .service-nav { flex-direction: column; align-items: stretch; gap: 2px; }

    .service-nav .nav-link {
        justify-content: flex-start;
        gap: .75rem;
        padding: .8rem .85rem;
        border-radius: var(--pt-radius);
        color: var(--pt-slate-700);
        font-size: var(--pt-text-md);
        /* 48px minimum: this is the one nav most of the traffic uses. */
        min-height: 48px;
    }

    .service-nav .nav-link svg { width: 19px; height: 19px; opacity: 1; color: var(--pt-blue-600); }
    .service-nav .nav-link:hover { background: var(--pt-blue-100); }

    .service-nav .nav-link.active { background: var(--pt-blue-100); color: var(--pt-blue-700); font-weight: 600; }
    .service-nav .nav-link.active::after { position: static; transform: none; margin-left: auto; }

    .nav-cta { margin: 0; }
    .nav-cta .pt-btn { width: 100%; }
}

@media (min-width: 992px) {
    /* Without this the drawer container is a plain block and its three children
       — the link list, the CTA and the mobile contact block — stack down the
       page instead of sitting in a row beside the logo. */
    .nav-collapse {
        display: flex;
        align-items: center;
        gap: var(--pt-gap);
        margin-left: auto;
    }

    .nav-scrim { display: none; }
    .mobile-contact { display: none; }
    .drawer-top { display: none; }
}

/* Drawer header + contact block, mobile only. */
.drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--pt-gap);
    border-bottom: 1px solid var(--pt-line-soft);
}

.drawer-top .brand-logo { height: 40px; }

.drawer-close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--pt-line);
    border-radius: 50%;
    background: var(--pt-paper);
    color: var(--pt-slate-700);
    cursor: pointer;
}

.drawer-close svg { width: 18px; height: 18px; }

.mobile-contact {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: var(--pt-gap);
    border-top: 1px solid var(--pt-line-soft);
}

.mobile-contact-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .7rem .85rem;
    border-radius: var(--pt-radius);
    background: var(--pt-sand);
    color: var(--pt-slate-700);
    font-size: var(--pt-text-base);
    font-weight: 600;
    min-height: 48px;
}

.mobile-contact-link svg { width: 18px; height: 18px; color: var(--pt-blue-600); flex: none; }

@media (min-width: 992px) {
    .drawer-top { display: none; }

    /* Repeated here, at the end of the file, on purpose: the base
       .mobile-contact rule below the earlier media query set display:flex at
       the same specificity and therefore won, leaving the phone and email
       pills floating over the hero on desktop. */
    .mobile-contact { display: none; }
}

/* ---------------------------------------------------- Destinations dropdown -- */

.nav-dropdown { position: relative; }

.nav-dropdown__trigger {
    border: 0;
    background: none;
    font-family: var(--pt-font-display);
    cursor: pointer;
}

.nav-dropdown__trigger svg { transition: transform .25s var(--pt-ease); }
.nav-dropdown.is-open .nav-dropdown__trigger svg { transform: rotate(180deg); }

.nav-dropdown__panel {
    display: grid;
    gap: 2px;
}

@media (min-width: 992px) {
    .nav-dropdown__panel {
        position: absolute;
        top: calc(100% + .6rem);
        left: 0;
        width: 240px;
        padding: .5rem;
        background: var(--pt-paper);
        border: 1px solid var(--pt-line);
        border-radius: var(--pt-radius-lg);
        box-shadow: var(--pt-shadow-xl);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .22s var(--pt-ease), transform .22s var(--pt-ease-out), visibility .22s;
    }

    .nav-dropdown.is-open .nav-dropdown__panel {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

.nav-dropdown__item {
    display: block;
    padding: .7rem .8rem;
    border-radius: var(--pt-radius);
    color: var(--pt-slate-700);
    font-family: var(--pt-font-display);
    font-size: var(--pt-text-base);
    font-weight: 500;
    transition: background .18s var(--pt-ease), color .18s var(--pt-ease);
}

.nav-dropdown__item:hover { background: var(--pt-blue-050); color: var(--pt-blue-700); }
.nav-dropdown__item.active { background: var(--pt-blue-100); color: var(--pt-blue-700); font-weight: 700; }

@media (max-width: 991.98px) {
    /* On mobile the drawer is already a list — the panel just sits open under
       its label rather than becoming a second layer to tap through. */
    .nav-dropdown__trigger { display: none; }
    .nav-dropdown__panel { padding-top: .5rem; margin-top: .5rem; border-top: 1px solid var(--pt-line-soft); }
}