/*
 * header.css — Site header:fixed,responsive,scroll-aware
 *
 * Two visual states:*   Default (top of page):transparent background
 *   Scrolled:solid background + shadow
 *
 * All colors through tokens → GP vars. Zero hex values.
 */

/* Sentinel
   Sits in document flow before the fixed header.
   IntersectionObserver toggles .gpre-header--scrolled
   when this element leaves the viewport. */
.gpre-header__sentinel{position:absolute; top:0; left:0; width:100%; height:1px; pointer-events:none; visibility:hidden;}
/* ── Header Shell ─────────────────────────────────── */
.gpre-header{position:sticky; top:0; left:0; width:100%; z-index:1000; background:var(--color-primary); transition:background var(--transition-base),box-shadow var(--transition-base); padding:var(--space-md) 0;backdrop-filter: blur(4px);}
/* Scrolled state — solid background + shadow */
.gpre-header--scrolled{background:var(--color-primary); box-shadow:var(--shadow-md);}

/* property single override */
.single-property #masthead{background:var(--color-primary); box-shadow:var(--shadow-md);}
/* ── Spacer ──────────────────────────────────────────
   Pushes page content below the fixed header.
   JS updates the height to match .gpre-header on resize. */
.gpre-header__spacer{height:72px; /* Fallback — JS updates this to actual header height */}
/* ── Inner Container ──────────────────────────────── */
.gpre-header__inner{display:flex; align-items:center; justify-content:space-between; 	width: min(100% - 3rem, var(--gb-container-width, 1560px))
; margin:0 auto; padding:0; gap:var(--space-lg);}
/* ── Logo ─────────────────────────────────────────── */
.gpre-header__logo{flex-shrink:0;}
.gpre-header__logo-link{display:block; text-decoration:none; transition:opacity var(--transition-base);}
.gpre-header__logo-link:hover{opacity:0.82;}
.gpre-header__logo-img{display:block; height:50px; width:auto;}
.gpre-header__logo-text{font-family:var(--font-heading); font-size:var(--text-xl); font-weight:700; color:var(--color-text); white-space:nowrap;}
/* ── Desktop Navigation ───────────────────────────── */
.gpre-header__nav{flex:1; display:flex; justify-content:center;}
.gpre-header__menu{display:flex; list-style:none; margin:0; padding:0; gap:var(--space-xl);}
.gpre-header__menu > .menu-item > a{display:block; padding-block:var(--space-sm); font-family:var(--font-body); font-size:var(--text-base);text-transform:uppercase; font-weight:400; color:var(--color-surface); text-decoration:none; border-bottom:1px solid transparent; transition:color var(--transition-base),background var(--transition-base);}
.gpre-header__menu > .menu-item > a:hover,.gpre-header__menu > .menu-item > a:focus-visible{ border-color: 1px solid var(--color-accent);}
.gpre-header__menu > .current-menu-item > a{border-color: var(--color-surface);}
/* Dropdown support */
.gpre-header__menu .menu-item-has-children{position:relative;}
.gpre-header__menu .sub-menu{position:absolute; top:100%; left:0; min-width:200px; list-style:none; margin:0; padding:var(--space-sm) 0; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-sm); box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity var(--transition-base),visibility var(--transition-base),transform var(--transition-base);}
.gpre-header__menu .menu-item-has-children:hover > .sub-menu,.gpre-header__menu .menu-item-has-children > a:focus-visible + .sub-menu{opacity:1; visibility:visible; transform:translateY(0);}
.gpre-header__menu .sub-menu .menu-item a{display:block; padding:var(--space-sm) var(--space-lg); font-size:var(--text-sm); color:var(--color-text); text-decoration:none; transition:background var(--transition-base),color var(--transition-base);    text-transform: uppercase;}
.gpre-header__menu .sub-menu .menu-item a:hover{background:var(--color-bg-alt); color:var(--color-accent);}
/* ── Desktop CTA ──────────────────────────────────── */
.gpre-header__cta{flex-shrink:0;}
.gpre-header__cta-link svg{width: 24px; height: 24px;}
/* .gpre-header__cta-link{display:inline-flex; align-items:center; gap:var(--space-xs); padding:var(--space-sm) var(--space-lg); font-family:var(--font-body); font-size:var(--text-sm); font-weight:600; color:var(--color-surface); background:var(--color-primary); border-radius:var(--radius-full); text-decoration:none; transition:background var(--transition-base),opacity var(--transition-base);} */
.gpre-header__cta-link:hover{opacity:0.9;}
.gpre-header__cta-icon{flex-shrink:0;}
/* ── Mobile Toggle Button ─────────────────────────── */
.gpre-header__toggle{display:none; /* Hidden on desktop */
    flex-direction:column; justify-content:center; align-items:center; width:44px; height:44px; padding:0; border:none; background:transparent; cursor:pointer; border-radius:var(--radius-sm); transition:background var(--transition-base);}
.gpre-header__toggle:hover,.gpre-header__toggle:focus-visible{background:unset;}
.gpre-header__toggle-icon{display:flex; flex-direction:column; gap:5px;}
.gpre-header__toggle-bar{display:block; width:22px; height:2px; background:#ffffff; border-radius:2px; transition:transform var(--transition-base),opacity var(--transition-base);}
/* Hamburger → X animation when open */
.gpre-header__toggle[aria-expanded="true"] .gpre-header__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.gpre-header__toggle[aria-expanded="true"] .gpre-header__toggle-bar:nth-child(2){opacity:0;}
.gpre-header__toggle[aria-expanded="true"] .gpre-header__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* ── Mobile Panel ─────────────────────────────────── */
.gpre-header__mobile-panel{border:none;display:none; max-height:0; overflow:hidden; background:var(--color-surface); transition:max-height var(--transition-slow),padding var(--transition-slow);}
.gpre-header__mobile-panel[aria-hidden="false"] {
    background: var(--primary);
    min-height: 100vh;
    overflow-y: auto;
}
.gpre-header__mobile-menu{list-style:none; margin:0; padding:var(--space-md) var(--space-lg);}
.gpre-header__mobile-menu .menu-item a{display:block; padding:var(--space-md) 0; font-family:var(--font-heading); font-size:var(--text-lg); font-weight:600; color:var(--color-surface); text-decoration:none; border-bottom:1px solid var(--color-border); transition:color var(--transition-base);}
.gpre-header__mobile-menu .menu-item a:hover,.gpre-header__mobile-menu .menu-item a:focus-visible{color:var(--color-accent);}
.gpre-header__mobile-menu .current-menu-item > a{color:var(--color-surface);}
/* Mobile dropdown — nested items indented */
.gpre-header__mobile-menu .sub-menu{list-style:none; margin:0; padding:0 0 0 var(--space-lg);}
.gpre-header__mobile-menu .sub-menu .menu-item a{font-family:var(--font-body); font-size:var(--text-base); font-weight:400;}
.gpre-header__mobile-cta{padding:var(--space-md) var(--space-lg);}
.gpre-header__mobile-cta .gpre-btn{width:100%; justify-content:center;}
.gpre-header__mobile-cta .gpre-btn:hover{color:#ffffff;}
/* ── Responsive Breakpoints ───────────────────────── */

/* Tablet and below — show mobile layout */
@media (max-width:1023px){
  .gpre-header__nav,.gpre-header__cta{display:none;}
  .gpre-header__toggle{display:flex;}
  .gpre-header__mobile-panel{display:block;}
}
/* Desktop — hide mobile panel,show desktop nav */
@media (min-width:1024px){
  .gpre-header__toggle{display:none;}
  .gpre-header__mobile-panel{display:none !important; max-height:0 !important;}
  .gpre-header__nav{display:flex;}
  .gpre-header__cta{display:block;}
}
/* Small phones — tighter padding */
@media (max-width:480px){
  .gpre-header__inner{padding:0;}
  .gpre-header__logo-img{height:40px;
  }
}