/* =============================================================================
 * SPA — HEADER  (spa-header.css)
 *
 * Fixed transparent navigation that transitions to a solid background once
 * the user scrolls past the hero section.
 *
 * States:
 *   default          — fully transparent, white text (over hero image)
 *   .is-scrolled     — semi-opaque white background, dark text (JS adds this)
 *   .drawer-open     — mobile menu is open (JS adds this)
 *
 * Breakpoints handled in spa-responsive.css (≤768px shows hamburger).
 * ============================================================================= */


/* ── Base header ────────────────────────────────────────────────────────── */

.spa-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: calc(env(safe-area-inset-top, 0px) + 28px) 24px 0;
    background: linear-gradient(180deg, rgba(16, 22, 18, 0.72) 0%, rgba(16, 22, 18, 0.18) 70%, rgba(16, 22, 18, 0) 100%);
    transition: background var(--spa-transition-base), padding var(--spa-transition-base);
}

/*
 * .is-scrolled — added by JS (SpaHeader module in spa-home.js) when
 * window.scrollY exceeds HEADER_SCROLL_THRESHOLD.
 */
.spa-header.is-scrolled {
    background: linear-gradient(180deg, rgba(14, 18, 16, 0.1) 0%, rgba(14, 18, 16, 0) 100%);
    padding-top: calc(env(safe-area-inset-top, 0px) + 18px);
}


/* ── Inner layout ───────────────────────────────────────────────────────── */

.spa-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    max-width: var(--spa-max-width);
    margin: 0 auto;
    min-height: 76px;
    padding: 10px 20px 11px;
    gap: 18px;
    border: 1px solid var(--spa-shell-border);
    border-radius: 999px;
    background: var(--spa-shell-bg);
    box-shadow: var(--spa-shell-shadow);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
    transition: padding var(--spa-transition-base), min-height var(--spa-transition-base), background var(--spa-transition-base), border-color var(--spa-transition-base), box-shadow var(--spa-transition-base);
}

/* Tighter padding when scrolled for a compact bar feel */
.spa-header.is-scrolled .spa-header__inner {
    min-height: 72px;
    padding-top: 9px;
    padding-bottom: 10px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(247, 239, 228, 0.92));
    border-color: rgba(196, 171, 134, 0.28);
    box-shadow: 0 22px 54px rgba(40, 34, 24, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

:root[data-theme='dark'] .spa-header.is-scrolled .spa-header__inner {
    background:
        linear-gradient(135deg, rgba(26, 31, 27, 0.9), rgba(15, 19, 16, 0.96));
    border-color: rgba(211, 175, 114, 0.18);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}


/* ── Logo ───────────────────────────────────────────────────────────────── */

.spa-header__logo {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-family: var(--spa-font-serif);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 1px;
    color: var(--spa-white) !important;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: color var(--spa-transition-base);
}

.spa-header .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

/* Logo custom image (set via WP Customizer → Site Identity → Logo) */
.spa-header__logo img,
.spa-header__logo .custom-logo {
    width: auto;
    height: 60px;
    max-width: none;
    max-height: 60px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1); /* White tint over hero */
    transition: filter var(--spa-transition-base);
}

.spa-header.is-scrolled .spa-header__logo {
    color: var(--spa-dark) !important;
}
.spa-header.is-scrolled .spa-header__logo img {
    filter: none;   /* Restore original colours */
}


/* ── Primary navigation menu ────────────────────────────────────────────── */

.spa-header__menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 1.9vw, 24px);
    list-style: none;
    margin: 0;
    padding: 0;
}

.spa-header__nav {
    justify-self: center;
    min-width: 0;
    width: 100%;
}

.spa-header__menu li a {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: var(--spa-tracking-wide);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    transition: color var(--spa-transition-base), opacity var(--spa-transition-base);
}
.spa-header__menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(201, 169, 110, 0), var(--spa-gold), rgba(201, 169, 110, 0));
    transform: scaleX(0.4);
    opacity: 0;
    transition: transform var(--spa-transition-base), opacity var(--spa-transition-base);
}
.spa-header__menu li a:hover,
.spa-header__menu li.current-menu-item > a,
.spa-header__menu li.current_page_item > a,
.spa-header__menu li.current-menu-ancestor > a,
.spa-header__menu li.current_page_ancestor > a,
.spa-header__menu li.current-menu-parent > a,
.spa-header__menu li.current-page-parent > a {
    color: var(--spa-sage) !important;
}
.spa-header__menu li a:hover::after,
.spa-header__menu li.current-menu-item > a::after,
.spa-header__menu li.current_page_item > a::after,
.spa-header__menu li.current-menu-ancestor > a::after,
.spa-header__menu li.current_page_ancestor > a::after,
.spa-header__menu li.current-menu-parent > a::after,
.spa-header__menu li.current-page-parent > a::after {
    opacity: 1;
    transform: scaleX(1);
}

.spa-header__menu li.current-menu-item > a,
.spa-header__menu li.current_page_item > a {
    font-weight: 700;
}

.spa-header.is-scrolled .spa-header__menu li a {
    color: var(--spa-dark) !important;
}
.spa-header.is-scrolled .spa-header__menu li a:hover,
.spa-header.is-scrolled .spa-header__menu li.current-menu-item > a,
.spa-header.is-scrolled .spa-header__menu li.current_page_item > a,
.spa-header.is-scrolled .spa-header__menu li.current-menu-ancestor > a,
.spa-header.is-scrolled .spa-header__menu li.current_page_ancestor > a,
.spa-header.is-scrolled .spa-header__menu li.current-menu-parent > a,
.spa-header.is-scrolled .spa-header__menu li.current-page-parent > a {
    color: var(--spa-sage) !important;
}


/* ── CTA button + actions row ───────────────────────────────────────────── */

.spa-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    justify-self: end;
    white-space: nowrap;
}

.spa-header__cta.spa-btn-primary {
    padding: 10px 18px;
    font-size: 10px;
    background: linear-gradient(135deg, #d8bc85 0%, #c9a96e 45%, #b88b4f 100%);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--spa-white) !important;
    box-shadow: 0 14px 30px rgba(164, 118, 44, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.spa-header__cta.spa-btn-primary:hover {
    background: linear-gradient(135deg, #e1c896 0%, #cfae76 50%, #c08d4a 100%);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--spa-white) !important;
    transform: translateY(-1px);
}
.spa-header.is-scrolled .spa-header__cta.spa-btn-primary {
    color: var(--spa-white) !important;
}

/* ── Mobile hamburger ───────────────────────────────────────────────────── */

.spa-header__toggle {
    display: none;         /* Shown via spa-responsive.css on ≤768px */
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: -8px; /* Offset for better edge alignment */
}

.spa-header__toggle-box {
    position: relative;
    width: 24px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.spa-header__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--spa-white);
    border-radius: 4px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                background 0.3s ease;
}

.spa-header.is-scrolled .spa-header__bar {
    background: var(--spa-dark);
}

/* Animate bars into × when drawer is open */
.spa-header.drawer-open .spa-header__bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.spa-header.drawer-open .spa-header__bar:nth-child(2) {
    opacity: 0;
    transform: translateX(4px);
}
.spa-header.drawer-open .spa-header__bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}


/* ── Mobile nav drawer ──────────────────────────────────────────────────── */

.spa-header__drawer {
    display: none;          /* Shown on ≤768px via spa-responsive.css */
    flex-direction: column;
    align-items: center;
    gap: var(--spa-space-sm);
    padding: var(--spa-space-md) var(--spa-space-md) var(--spa-space-lg);
    background: var(--spa-white);
    border-top: 1px solid var(--spa-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    /* Collapsed by default; JS toggles aria-hidden + max-height */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

:root[data-theme='dark'] .spa-header__drawer {
    background: var(--spa-surface);
}
.spa-header__drawer.is-open {
    max-height: 480px;
}

.spa-header__drawer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.spa-header__drawer-menu li + li {
    border-top: 1px solid var(--spa-border);
}
.spa-header__drawer-menu li a {
    display: block;
    padding: 14px 0;
    font-size: var(--spa-text-xs);
    font-weight: 600;
    letter-spacing: var(--spa-tracking-wide);
    text-transform: uppercase;
    color: var(--spa-dark) !important;
    text-decoration: none !important;
}
.spa-header__drawer-menu li a:hover {
    color: var(--spa-sage) !important;
}

.spa-header__drawer-menu li.current-menu-item > a,
.spa-header__drawer-menu li.current_page_item > a,
.spa-header__drawer-menu li.current-menu-ancestor > a,
.spa-header__drawer-menu li.current_page_ancestor > a,
.spa-header__drawer-menu li.current-menu-parent > a,
.spa-header__drawer-menu li.current-page-parent > a {
    color: var(--spa-sage) !important;
    background: rgba(107, 143, 113, 0.08);
}

.spa-header__drawer-cta {
    margin-top: var(--spa-space-sm);
}