/* =========================================
   NAV & HEADER SYSTEM (Home + Interior)
   ========================================= */

/* ---- Core palette & tokens ---- */
:root{
  --olive: #4B5E36;
  --olive-dark: #2f3a25;
  --cream: #f6ead1;

  --ribbon-rail: 20px;               /* vertical rails above/below inset */
  --ribbon-shadow: 0 0 16px rgba(0,0,0,.22);
  --chevron-w: 56px;                  /* left chevron width */

  --nav-logo-h: 56px;                 /* desktop logo height */
  --nav-logo-h-sm: 42px;              /* mobile logo height */
}

/* =========================================================
   HERO (video + centered overlay logo + hero ribbon nav)
   ========================================================= */
.hero-header{ position:relative; width:100%; height:100vh; overflow:hidden; margin:0; }
.hero-header video,
.hero-header img{ object-fit:cover; width:100%; height:100%; position:absolute; inset:0; transition:opacity 1s ease-in-out; z-index:1; }
.overlay-logo{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:10; width:70vw; max-width:1000px; }
.overlay-logo img{ width:100%; height:auto; display:block; }

/* Hero ribbon container (FULL BAR = CREAM) */
.hero-header > .hero-nav{
  position:absolute; left:0; right:0; bottom:0; z-index:20; margin:0;
  background: var(--cream);
  box-shadow: var(--ribbon-shadow);
  padding-block: var(--ribbon-rail);
  padding-left:max(16px, calc((100vw - var(--inner-max, 1200px))/2));
  padding-right:max(16px, calc((100vw - var(--inner-max, 1200px))/2));
}
/* Olive chevron inset behind links */
.hero-header > .hero-nav::after{
  content:""; position:absolute; left:0; right:0;
  top:var(--ribbon-rail); bottom:var(--ribbon-rail);
  background: var(--olive);
  clip-path: polygon(var(--chevron-w) 0, 100% 0, 100% 100%, var(--chevron-w) 100%, 0 50%);
  z-index:0; pointer-events:none;
}
.hero-header > .hero-nav > *{ position:relative; z-index:2; }

/* Menu (pipes + links are cream on the olive inset) */
.hero-header > .hero-nav ul,
.hero-header > .hero-nav .hero-menu{
  display:flex; align-items:center; justify-content:flex-end;
  gap:2.25rem; list-style:none; margin:0; padding:.9rem 0;
}
.hero-header > .hero-nav ul > li + li{ position:relative; padding-left:1.25rem; }
.hero-header > .hero-nav ul > li + li::before{
  content:"|"; position:absolute; left:0; top:50%; transform:translateY(-55%);
  font-weight:800; color:var(--cream); opacity:.95;
}
.hero-header > .hero-nav a{
  color:var(--cream); text-decoration:none; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; line-height:1;
  display:inline-block; padding:.35rem 0; font-size:1.25rem;
}
.hero-header > .hero-nav a:hover{ color:#fff; }

@media (max-width:900px){
  .hero-header > .hero-nav{ display:none; } /* home mobile bar takes over */
}

/* =========================================================
   SHARED RIBBON BAR (Sticky home + Interior)
   ========================================================= */

/* FULL BAR = CREAM on both sticky (home) and interior */
.sticky-menu,
.site-header.interior-header{
  position:sticky; top:0; z-index:1000;
  background: var(--cream);
  border-top: 1px solid rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(0,0,0,.10);
  box-shadow: var(--ribbon-shadow);
  padding-block: var(--ribbon-rail);
  padding-left:max(16px, calc((100vw - var(--inner-max, 1200px))/2));
  padding-right:max(16px, calc((100vw - var(--inner-max, 1200px))/2));
}

/* Olive chevron inset behind the menu links */
.sticky-menu::after,
.site-header.interior-header::after{
  content:""; position:absolute; left:0; right:0;
  top:var(--ribbon-rail); bottom:var(--ribbon-rail);
  background: var(--olive);
  clip-path: polygon(var(--chevron-w) 0, 100% 0, 100% 100%, var(--chevron-w) 100%, 0 50%);
  z-index:0; pointer-events:none;   /* never block clicks */
}

/* Home sticky sits fixed when shown */
.home .sticky-menu{ position:fixed; left:0; right:0; top:0; }

/* Inner layout */
.sticky-menu,
.interior-header__inner{
  display:flex; align-items:center; gap:1rem;
}
.interior-header__inner{ position:relative; z-index:1; justify-content:space-between; }

/* Logo tile = CREAM (so it matches the bar) */
.sticky-menu .sticky-logo,
.interior-header__inner .home-logo{
  background:var(--cream);
  display:flex; align-items:center;
  padding-left:20px; padding-right:16px;
  position:relative; z-index:3;        /* above inset + nav */
  pointer-events:auto;
}
.sticky-menu .sticky-logo img,
.interior-header__inner .home-logo img{
  height:var(--nav-logo-h); width:auto; display:block;
}
@media (max-width:900px){
  .sticky-menu .sticky-logo img,
  .interior-header__inner .home-logo img{ height:var(--nav-logo-h-sm); }
}

/* Menus sit on the inset; links/pipes are cream */
.sticky-menu .main-nav,
.site-header.interior-header .interior-primary-nav{ position:relative; z-index:2; margin-left:auto; }
.sticky-menu .main-nav > ul,
.sticky-menu .sticky-menu-nav,
.site-header.interior-header .interior-primary-nav > ul,
.site-header.interior-header .interior-primary-nav .menu{
  display:flex; align-items:center; justify-content:flex-end;
  gap:2.25rem; list-style:none; margin:0; padding:0;
}

/* Pipes */
.sticky-menu .main-nav > ul > li + li,
.sticky-menu .sticky-menu-nav > li + li,
.site-header.interior-header .interior-primary-nav > ul > li + li,
.site-header.interior-header .interior-primary-nav .menu > li + li{
  position:relative; padding-left:1.25rem;
}
.sticky-menu .main-nav > ul > li + li::before,
.sticky-menu .sticky-menu-nav > li + li::before,
.site-header.interior-header .interior-primary-nav > ul > li + li::before,
.site-header.interior-header .interior-primary-nav .menu > li + li::before{
  content:"|"; position:absolute; left:0; top:50%; transform:translateY(-55%);
  font-weight:800; color:var(--cream); opacity:.95;
}

/* Links */
.sticky-menu .main-nav a,
.sticky-menu .sticky-menu-nav a,
.site-header.interior-header .interior-primary-nav a{
  color:var(--cream);
  text-decoration:none; font-weight:800;
  letter-spacing:.02em; text-transform:uppercase; line-height:1;
  display:inline-block; padding:.35rem 0; font-size:1.25rem;
}
.sticky-menu .main-nav a:hover,
.sticky-menu .sticky-menu-nav a:hover,
.site-header.interior-header .interior-primary-nav a:hover{ color:#fff; }

/* Sticky reveal (home) */
.sticky-menu{ opacity:0; pointer-events:none; transition:opacity .25s ease; }
.sticky-menu.visible{ opacity:1; pointer-events:auto; }

/* =========================================================
   INTERIOR MOBILE (≤900px) — hamburger + dropdown
   ========================================================= */
.interior-menu-toggle{ display:none; }

@media (max-width:900px){
  .site-header.interior-header{
    position: sticky;
    top: 0;
    z-index: 1200;
    margin-bottom: .5rem;        /* keeps the page title from tucking under */
  }

  /* make sure the section under the header has clearance for in‑page jumps */
  .site-header.interior-header + main{
    scroll-margin-top: 84px;
    padding-top: 2px;
  }

  .interior-menu-toggle{
    display:inline-block;
    background:transparent; border:0; width:40px; height:40px;
    margin-left:auto; cursor:pointer; color:var(--olive);
    font-size:28px; line-height:1;
  }

  /* dropdown menu panel (full-width, below bar) */
  .site-header.interior-header .interior-primary-nav{ position:static; }
  .site-header.interior-header .interior-primary-nav > ul,
  .site-header.interior-header .interior-primary-nav .menu{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    background:var(--cream);
    flex-direction:column; gap:0;
    padding:.75rem 1rem 1rem;
    border-top:1px solid rgba(0,0,0,.2);
    z-index:1300;                 /* above inset & content */
  }

  /* open states */
  .site-header.interior-header.is-open .interior-primary-nav > ul,
  .site-header.interior-header.is-open .interior-primary-nav .menu,
  .interior-menu-toggle[aria-expanded="true"] + nav > ul,
  .interior-menu-toggle[aria-expanded="true"] + nav .menu{
    display:flex;
  }

  /* mobile dropdown link styling */
  .site-header.interior-header .interior-primary-nav > ul > li + li,
  .site-header.interior-header .interior-primary-nav .menu > li + li{ padding-left:0; }
  .site-header.interior-header .interior-primary-nav > ul > li + li::before,
  .site-header.interior-header .interior-primary-nav .menu > li + li::before{ content:none; }
  .site-header.interior-header .interior-primary-nav a{
    color:var(--olive);
    padding:.6rem 0; font-size:1rem;
  }
}

/* =========================================================
   HOME MOBILE NAV BAR (existing component)
   ========================================================= */
.mobile-nav{ display:none; }
@media (max-width:900px){
  .mobile-nav{ display:block; position:fixed; top:0; left:0; right:0; z-index:1400; }
  .mobile-nav-bar{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--cream); padding:.5rem .75rem;
    box-shadow:var(--ribbon-shadow); border-bottom:1px solid rgba(0,0,0,.1);
  }
  .mobile-logo{ height:40px; width:auto; display:block; }
  .mobile-menu-toggle{
    background:transparent; border:0; width:40px; height:40px; font-size:28px;
    color:var(--olive); cursor:pointer; line-height:1;
  }
  .mobile-menu{ display:none; background:var(--cream); border-top:1px solid rgba(0,0,0,.15); }
  .mobile-nav.open .mobile-menu{ display:block; }
  .mobile-menu-items{ list-style:none; margin:0; padding:.5rem 0; }
  .mobile-menu-items li + li{ border-top:1px solid rgba(0,0,0,.08); }
  .mobile-menu-items a{
    display:block; padding:.75rem 1rem; color:var(--olive); text-decoration:none;
    font-weight:800; text-transform:uppercase; letter-spacing:.02em;
  }

  /* on home, the dedicated mobile bar replaces the sticky & hero bars */
  .sticky-menu{ display:none; }
  .hero-header > .hero-nav{ display:none; }
}

/* Ensure the interior logo is always clickable above ornaments */
.site-header.interior-header::after{ pointer-events:none; }
.interior-header__inner .home-logo{ position:relative; z-index:3; display:inline-flex; align-items:center; }
.interior-header__inner .home-logo img{ display:block; }

/* Hide interior desktop ribbon bar on small screens so it doesn't sit under the mobile bar */
@media (max-width:900px){
  .site-header.interior-header{
    display: none !important;
  }
}
/* Reserve space for the fixed mobile bar on INTERIOR pages */
@media (max-width:900px){
  body:not(.home){ 
    /* bar is ~56–64px tall (40px logo + padding) */
    padding-top: 68px; 
  }

  /* Keep in‑page anchors from hiding under the bar */
  body:not(.home) main{ 
    scroll-margin-top: 84px; 
  }
}