/* The Weddings Dot - shared site header.
   Brand values (navy, gold #fdcf90 / #cb963a, Outfit, uppercase nav) come from the approved header in index.html.
   All rules are scoped to .site-topbar / .site-header / .site-header-mount so they cannot affect other page elements.

   Desktop size: top strip 33px + header 134px (133px nav row + 1px border) = ~167px.
   Background: transparent at the top of the page; once scrolled, site-header.js adds .is-scrolled
   (rgba(29,39,66,.88) + blur, 300ms). It also sets --sh-h (header height) for the hero overlap. */

/* Placeholder reserves only the strip's height until site-header.js inserts the header. */
.site-header-mount{min-height:0}

/* Top strip above the header (scrolls away; the header below stays sticky) */
.site-topbar{background:#24221e;color:#e5dac8;padding:7px 0;font:11.2px/1.7 Outfit,Arial,sans-serif;letter-spacing:.08em;box-sizing:border-box}
.site-topbar *{box-sizing:border-box}
.site-topbar .sh-wrap{width:min(1440px,calc(100% - 64px));margin:auto;display:flex;justify-content:space-between;gap:12px}

.site-header,.site-header *{box-sizing:border-box}
.site-header{
 --sh-nav-h:clamp(104px,9.25vw,133px);
 position:sticky;top:0;z-index:1030;
 background:rgba(29,39,66,.30);   /* frosty glass: see glass-system.css */
 border-bottom:1px solid rgba(255,255,255,.28);
 box-shadow:0 10px 30px rgba(10,14,28,.16);
 -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
 color:rgba(255,255,255,.92);
 font:16px/1.7 Outfit,Arial,sans-serif;
 text-align:left;
 transition:transform .35s ease;
}
/* Scrolled: same 20% tint (the class only drives --sh-h bookkeeping) */
.site-header.is-scrolled{background:rgba(29,39,66,.30)}
/* Hero pages: header floats over the hero (the hero starts at the top of the header) */
.site-header.sh-overlay{margin-bottom:calc(-1 * var(--sh-h,134px))}
.site-header.nav-hidden{transform:translateY(-100%)}
.site-header a{color:inherit;text-decoration:none;background:transparent}
.site-header img{display:block;max-width:none}

.site-header .sh-wrap{width:min(1440px,calc(100% - 64px));margin:auto}
.site-header .sh-nav{min-height:var(--sh-nav-h);display:flex;align-items:center;justify-content:space-between;gap:24px}

.site-header .sh-brand{display:flex;align-items:center;flex-shrink:0}
.site-header .sh-brand img{width:auto;height:clamp(78px,7.6vw,112px);object-fit:contain}

.site-header .sh-links{
 display:flex;align-items:center;gap:clamp(12px,2.2vw,32px);
 font-size:clamp(11px,1.04vw,15px);letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;
 color:rgba(255,255,255,.9);
}
.site-header .sh-links>a{display:inline-block;transform-origin:center;transition:transform .25s ease,color .25s ease}
.site-header .sh-links>a:hover{color:#fdcf90}
.site-header .sh-links>a:focus-visible{outline:2px solid #fdcf90;outline-offset:4px}

/* Book Now button */
.site-header .sh-links>a.sh-book{
 padding:.95em 1.65em;border:1px solid #cb963a;background:transparent;color:#fff;
 font-size:.9em;letter-spacing:.1em;text-transform:uppercase;
 transition:transform .25s ease,color .25s ease,background-color .2s,border-color .2s;
}
.site-header .sh-links>a.sh-book:hover{color:#fdcf90}
.site-header .sh-links>a[aria-current="page"]{color:#fdcf90}

/* Subtle zoom on individual items (fine-pointer hover devices only) */
@media (hover:hover) and (pointer:fine) and (min-width:621px){
 .site-header .sh-links>a:hover{transform:scale(1.06)}
}

.site-header .sh-toggle{
 display:none;background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;
 padding:8px 12px;font-family:Arial,sans-serif;font-size:19.2px;line-height:normal;cursor:pointer;border-radius:0;
}
.site-header .sh-toggle:focus-visible{outline:2px solid #fdcf90;outline-offset:3px}

@media(max-width:1100px){
 .site-header .sh-brand img{height:76px}
}
@media(max-width:980px){
 .site-header .sh-nav{flex-wrap:wrap;padding:14px 0;min-height:0}
 .site-header .sh-links{gap:16px;flex-wrap:wrap}
}
@media(max-width:620px){
 .site-topbar .sh-wrap{width:calc(100% - 32px);justify-content:center;text-align:center}
 .site-topbar .sh-wrap span:last-child{display:none}
 .site-header .sh-wrap{width:calc(100% - 32px)}
 .site-header .sh-nav{min-height:72px;padding:0;flex-wrap:nowrap;position:relative}
 .site-header .sh-brand img{height:54px}
 .site-header .sh-toggle{display:block}
 .site-header .sh-links{
  display:none;position:absolute;top:100%;left:-16px;right:-16px;padding:20px 22px;
  background:rgb(29,39,66);border-bottom:1px solid rgba(255,255,255,.1);
  flex-direction:column;align-items:stretch;gap:16px;font-size:12.32px;
  max-height:calc(100vh - 72px);overflow-y:auto;
 }
 .site-header .sh-links.open{display:flex}
 .site-header .sh-links>a.sh-book{text-align:center}
}

@media(prefers-reduced-motion:reduce){
 .site-header,.site-header::before{transition:none}
 .site-header .sh-links>a{transition:color .25s ease}
 .site-header .sh-links>a.sh-book{transition:color .25s ease,background-color .2s,border-color .2s}
}

/* Top strip removed site-wide: the header is the first thing on the page and the hero starts at the very top behind it. */
.site-topbar{display:none!important}