/**
 * Site header: desktop (with a compact "sticky" state applied via JS on
 * scroll) and a separate mobile layout, per the Figma navigation-components
 * frame (node 11:256). Desktop/tablet breakpoint is 1024px - the Figma page
 * only showed one mobile width (375px) and one desktop width (1440px), so
 * everything below 1024px uses the mobile layout until a tablet frame says otherwise.
 */

/* position:fixed, not sticky - sticky only stays stuck while its own
   containing block is in view, and on the homepage <header> used to live
   inside .home-hero (920px tall, far shorter than the full page), so the
   header stopped sticking the moment the hero scrolled out of view. fixed
   is anchored to the viewport unconditionally, regardless of what it's
   nested inside, so this can't recur. Since fixed removes the header from
   document flow entirely, every page needs to compensate: inner pages via
   .page-header-spacer (rendered by header.php whenever $headerTransparent
   is false - see that file), the homepage's hero via its own padding-top
   (see .home-hero__content in homepage.css). */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

/* Count badge on the Saved Properties icon - shared, unscoped by width
   since it's used identically on both .site-header__icon-button
   (desktop) and .site-header__mobile-icon-button (mobile/tablet).
   Populated client-side by public/assets/js/saved-properties.js - see
   includes/header.php's own comment on why this lives in localStorage,
   not the database. [hidden] by default so it never flashes a stale "0"
   before that script runs. */
.site-header__saved-count {
    position: absolute;
    top: -6px;
    right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background-color: var(--color-champagne-gold);
    color: var(--color-primary-green);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
}

/* ---- Desktop / tablet header (>= 1024px) ---- */

.site-header__desktop {
    display: none;
}

@media (min-width: 1024px) {
    .site-header__desktop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--header-height-desktop);
        padding: 0 64px;
        background-color: var(--color-white);
        border-bottom: 1px solid var(--color-stone);
        transition: box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    }

    .site-header__logo {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .site-header__logo-image {
        display: block;
        height: 34px;
        width: auto;
    }

    /* Hidden by default (solid/sticky state shows the green mark); the
       transparent variant below swaps this in for the pre-scroll hero state. */
    .site-header__logo-image--white {
        display: none;
    }

    .site-header__nav {
        display: flex;
        align-items: center;
        gap: 24px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-header__nav-link {
        font-family: var(--font-body);
        font-weight: 500;
        font-size: 13px;
        text-transform: uppercase;
        color: var(--color-charcoal);
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .site-header__nav-link:hover,
    .site-header__nav-link.is-active {
        color: var(--color-champagne-gold);
    }

    .site-header__controls {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    /* Structural placeholder for the future currency toggle - see header.php. */
    .currency-toggle-placeholder {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 1px solid var(--color-stone);
        border-radius: 4px;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.05em;
        color: var(--color-charcoal);
        user-select: none;
    }

    /* Same mask-image + currentColor recolor technique as the hero search
       fields' dropdown chevrons - purely decorative here (no dropdown
       actually opens), just signaling "this has options" consistently with
       every other selectable-looking control in the header. */
    .currency-toggle-placeholder__chevron {
        width: 10px;
        height: 10px;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask-image: url('/assets/images/icons/icon-form-chevron-down.svg');
        mask-image: url('/assets/images/icons/icon-form-chevron-down.svg');
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }

    .site-header__icons {
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .site-header__icon-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
    }

    .site-header__icon-button img {
        width: 100%;
        height: 100%;
    }

    .site-header__phone {
        display: flex;
        align-items: center;
        gap: 8px;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 13px;
        color: var(--color-primary-green);
        text-decoration: none;
        white-space: nowrap;
    }

    .site-header__phone img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    /* Icon-only in every state - the number itself only ever showed in the
       pre-scroll/transparent state before, which made the phone control a
       different size/shape than its scrolled self for no functional
       reason. Matches what the scrolled state already did. */
    .site-header__phone-label {
        display: none;
    }

    .site-header__cta {
        display: inline-flex;
        align-items: center;
        padding: 10px 16px;
        background-color: var(--color-primary-green);
        color: var(--color-light-gold);
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 2px;
        transition: opacity 0.15s ease;
    }

    .site-header__cta:hover {
        opacity: 0.9;
    }

    /* ---- Sticky state: JS adds this once the page has scrolled past the
       top. Color/background/shadow only - sizing (height, logo, nav gap/
       font-size, controls gap, CTA padding/font-size/radius) is identical
       between this and the base/transparent states above, so none of that
       is repeated here any more. ---- */
    .site-header__desktop.is-sticky {
        background-color: rgba(255, 255, 255, 0.9);
        border-bottom-color: transparent;
        box-shadow: 0px 4px 16px 0px rgba(26, 26, 26, 0.06);
        backdrop-filter: blur(4px);
    }

    /* ---- Transparent variant (e.g. homepage hero): only applies before the
       page has scrolled. Once header.js adds .is-sticky, all of this is
       overridden by the sticky rules above and the header goes solid. ---- */
    .site-header--transparent .site-header__desktop:not(.is-sticky) {
        background-color: rgba(0, 0, 0, 0.15);
        border-bottom-color: transparent;
    }

    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__logo-image--green {
        display: none;
    }

    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__logo-image--white {
        display: block;
    }

    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__nav-link {
        color: var(--color-white);
    }

    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__nav-link:hover,
    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__nav-link.is-active {
        color: var(--color-champagne-gold);
    }

    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__phone {
        color: var(--color-white);
    }

    .site-header--transparent .site-header__desktop:not(.is-sticky) .currency-toggle-placeholder {
        border-color: rgba(255, 255, 255, 0.25);
        color: var(--color-white);
    }

    /* The search/phone icon SVGs are drawn in a dark color for the white
       header; this filter turns them white without needing separate assets. */
    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__icon-button img,
    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__phone img {
        filter: brightness(0) invert(1);
    }

    .site-header--transparent .site-header__desktop:not(.is-sticky) .site-header__cta {
        border: 1px solid var(--color-champagne-gold);
    }
}

/* ---- Mobile header (< 1024px) ---- */

/* Solid dark green with the white logo/icons is the persistent default
   state (confirmed from mobile-nav-closed, node 54:16) - not just a
   transparent-hero moment. This applies on every page, whether or not
   $headerTransparent is set, and is also what the transparent-hero variant
   below settles back into once header.js adds .is-sticky. */
.site-header__mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height-mobile);
    padding: 0 16px;
    background-color: var(--color-primary-green);
    border-bottom: none;
}

@media (min-width: 1024px) {
    .site-header__mobile {
        display: none;
    }
}

.site-header__mobile-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-header__mobile-logo-image {
    display: block;
    height: 32px;
    width: auto;
}

.site-header__mobile-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.site-header__mobile-icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

.site-header__mobile-icon-button img {
    display: block;
    /* Icon SVGs are drawn dark; this turns them white to sit on the
       dark-green header without needing separate white-icon assets. */
    filter: brightness(0) invert(1);
}

.site-header__mobile-icon-button--search img {
    width: 20px;
    height: 20px;
}

.site-header__mobile-icon-button--menu img {
    width: 22px;
    height: 22px;
}

/* Tablet-only CTA shown inline in the header bar next to the icons (Figma
   tablet-nav-closed, node 63:202). Hidden on phone widths by default; shown
   within the 768-1023px tier below, and hidden again while the drawer is
   open (the open frame's header has no inline CTA). */
.site-header__mobile-advisor-cta {
    display: none;
}

/* ---- Transparent variant on mobile (e.g. homepage hero). Confirmed from
   the dedicated mobile homepage Figma frame (node 27:5) - this header is
   taller (72px vs the standard 64px), more generously padded, and fully
   see-through over the hero photo, only until the page scrolls. Logo and
   icon colors are already white/inverted by default now (the persistent
   solid state), so this override only needs to touch size/background -
   header.js adds .is-sticky once the page scrolls past the hero, at which
   point it reverts to the standard solid dark-green header above; mobile
   has no separate "compact sticky" size the way desktop does, just
   transparent-vs-solid. ---- */
.site-header--transparent .site-header__mobile:not(.is-sticky) {
    height: 72px;
    padding: 16px 20px;
    background-color: transparent;
    border-bottom-color: transparent;
}

.site-header--transparent .site-header__mobile:not(.is-sticky) .site-header__mobile-logo-image {
    height: 42px;
}

/* The header stays solid whenever the drawer is open, even if the page
   hasn't scrolled yet and would otherwise still be in the see-through
   pre-scroll state above - confirmed from mobile-nav-open (node 54:64),
   which shows the header always solid #0C3B2A regardless of scroll
   position. header.js adds .is-drawer-open on open/removes it on close.
   Same specificity (3 classes) as the transparent:not(.is-sticky) rule
   above, and placed after it, so this wins the tie whenever both could
   otherwise apply. Height/padding/logo size stay at the transparent
   variant's own generous 72px sizing (also confirmed in that frame) -
   only the background actually needs to change here. */
.site-header--transparent .site-header__mobile.is-drawer-open {
    height: 72px;
    padding: 16px 20px;
    background-color: var(--color-primary-green);
    border-bottom-color: transparent;
}

.site-header--transparent .site-header__mobile.is-drawer-open .site-header__mobile-logo-image {
    height: 42px;
}

/* ---------------------------------------------------------------------
 * Mobile/tablet navigation drawer - a full-screen overlay opened by the
 * hamburger button (which JS swaps to a close icon), matching Figma's
 * mobile-nav-open (54:63) and tablet-nav-open (63:214): the same header
 * bar stays in place and the menu list appears directly beneath it,
 * rather than a side panel sliding in over a dimmed backdrop. Desktop-and-up
 * never shows it, regardless of .is-open (belt and braces - header.js also
 * only wires the toggle button that exists on the mobile header, but this
 * keeps the drawer inert if that ever changes).
 *
 * Markup lives in includes/mobile-nav-drawer.php, a separate include from
 * header.php - see that file's doc comment for why. `top` assumes the
 * standard 64px solid mobile header height; while a page is showing the
 * taller (72px) pre-scroll transparent-hero header, the drawer can sit
 * ~8px higher than the header's bottom edge if opened immediately, before
 * any scroll - a minor, momentary gap not worth a JS fix for.
 * --------------------------------------------------------------------- */

.mobile-nav-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--header-height-mobile);
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: var(--color-primary-green);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

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

@media (min-width: 1024px) {
    .mobile-nav-drawer {
        display: none;
    }
}

.mobile-nav-drawer__menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding: 32px 40px 12px;
    box-sizing: border-box;
}

.mobile-nav-drawer__item {
    display: block;
    width: 100%;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 22px;
    line-height: normal;
    color: var(--color-champagne-gold);
    text-decoration: none;
}

.mobile-nav-drawer__item-label--tablet {
    display: none;
}

.mobile-nav-drawer__footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 8px 40px 40px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.mobile-nav-drawer__divider {
    width: 100%;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
}

.mobile-nav-drawer__currency {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-nav-drawer__currency-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #999999;
    white-space: nowrap;
}

.mobile-nav-drawer__currency-toggle {
    display: flex;
    align-items: center;
}

.mobile-nav-drawer__currency-option {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    box-sizing: border-box;
    font-family: var(--font-body);
    font-size: 12px;
    white-space: nowrap;
    /* Now a real <button> (was a <span>) now that the toggle works - reset
       default button chrome so it still renders exactly like the span did. */
    border: none;
    background: none;
    cursor: pointer;
}

.mobile-nav-drawer__currency-option--active {
    background-color: var(--color-champagne-gold);
    color: #0c1f16;
    font-weight: 600;
    border-radius: 4px 0 0 4px;
}

.mobile-nav-drawer__currency-option:not(.mobile-nav-drawer__currency-option--active) {
    border: 1px solid #666666;
    color: #999999;
    font-weight: 500;
    border-radius: 0 4px 4px 0;
}

.mobile-nav-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    box-sizing: border-box;
    background-color: var(--color-champagne-gold);
    border-radius: 100px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-primary-green);
    text-decoration: none;
}

/* Tablet-only line - absent from the mobile drawer entirely. */
.mobile-nav-drawer__call {
    display: none;
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-white);
}

.mobile-nav-drawer__whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.mobile-nav-drawer__whatsapp-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.mobile-nav-drawer__whatsapp span {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    color: var(--color-white);
    text-decoration: underline;
}

.mobile-nav-drawer__copyright {
    margin: 0;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    color: var(--color-white);
    opacity: 0.4;
    text-align: center;
    box-sizing: border-box;
}

/* ---- Tablet tier (768-1023px): both the header and drawer match Figma's
   tablet-nav-closed (63:202) / tablet-nav-open (63:214) frames exactly -
   taller header with an inline CTA, larger logo/menu/CTA, longer labels for
   Investment/Journal, no currency selector (mobile-only per the confirmed
   frame), and a plain-text "Call:" line + unstyled WhatsApp text instead of
   the mobile drawer's icon+underline link. ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    .site-header__mobile {
        height: 87px;
        padding: 16px 24px;
    }

    .site-header__mobile-logo-image {
        height: 55px;
    }

    .site-header__mobile-icon-button--search img,
    .site-header__mobile-icon-button--menu img {
        width: 24px;
        height: 24px;
    }

    .site-header__mobile-advisor-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 16px;
        box-sizing: border-box;
        background-color: var(--color-primary-green);
        border: 1px solid var(--color-champagne-gold);
        border-radius: 4px;
        font-family: var(--font-body);
        font-weight: 600;
        font-size: 11px;
        color: var(--color-white);
        text-decoration: none;
        white-space: nowrap;
    }

    .site-header__mobile.is-drawer-open .site-header__mobile-advisor-cta {
        display: none;
    }

    .mobile-nav-drawer {
        top: 87px;
    }

    .mobile-nav-drawer__menu {
        gap: 28px;
        padding: 48px 60px 24px;
    }

    .mobile-nav-drawer__item {
        font-size: 26px;
    }

    .mobile-nav-drawer__item.has-tablet-label .mobile-nav-drawer__item-label {
        display: none;
    }

    .mobile-nav-drawer__item.has-tablet-label .mobile-nav-drawer__item-label--tablet {
        display: inline;
    }

    .mobile-nav-drawer__footer {
        gap: 24px;
        padding: 24px 60px 48px;
    }

    .mobile-nav-drawer__currency {
        display: none;
    }

    .mobile-nav-drawer__cta {
        height: 100px;
        padding: 16px 32px;
        font-size: 16px;
    }

    .mobile-nav-drawer__call {
        display: block;
    }

    .mobile-nav-drawer__whatsapp {
        justify-content: flex-start;
    }

    .mobile-nav-drawer__whatsapp-icon {
        display: none;
    }

    .mobile-nav-drawer__whatsapp span {
        font-size: 14px;
        text-decoration: none;
    }

    .mobile-nav-drawer__copyright {
        font-size: 11px;
        opacity: 0.5;
        text-align: left;
    }
}

/* Locks background scroll while the drawer is open. overflow:hidden alone
   doesn't reliably block touch-scrolling on mobile Safari/Chrome; pinning
   <body> to position:fixed does. header.js sets the negative `top` offset
   (the scroll position at open time) and restores real scroll position on
   close via window.scrollTo. */
body.mobile-menu-open {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
}

/* Reserves the space the now-fixed header no longer occupies in flow.
   Rendered automatically by header.php on every page that sets
   $headerTransparent = false (i.e. has no hero of its own to handle this
   itself) - sitewide standard for any future inner page, not something
   each page has to remember to add by hand. Matches the header's static
   (non-sticky, non-transparent) height at each breakpoint; inner pages
   never show the transparent/sticky-compact sizes, so a single fixed
   height per breakpoint is exact, not an approximation. */
.page-header-spacer {
    height: var(--header-height-desktop);
}

@media (max-width: 1023px) {
    .page-header-spacer {
        height: var(--header-height-mobile);
    }
}