/* The site header, shared by every page. Pages link this file and style
   nothing about the header themselves; the markup is written into every page
   by scripts/gen-seo-pages.mjs, so a menu change happens in one place.
   Tokens (--header-h, --ease, --transition, --radius-sm, --pill, --ff) come
   from each page's :root, with fallbacks here. */

#header{
  position:fixed;inset:0 0 auto 0;z-index:99;height:var(--header-h,68px);
  background:rgba(10,10,12,.92);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:background var(--transition,.4s ease),border-color var(--transition,.4s ease);
}
.scrolled#header{background:rgba(10,10,12,.97);border-bottom-color:rgba(255,255,255,.14)}
/* A backdrop-filter makes the header the containing block for its fixed
   children, which squeezed the phone menu into the header strip. Drop the
   blur while the menu is open so the menu covers the screen. */
.nav-open #header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,10,12,.98)}

/* The bar runs wider than page content so the menu isn't cramped on large screens. */
#header .container{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  height:100%;width:min(1320px,calc(100% - 48px));max-width:none;margin-inline:auto;padding:0;
}
@media(max-width:640px){#header .container{width:calc(100% - 32px)}}

#logo a{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  font-family:var(--ff,inherit);font-weight:650;font-size:17px;line-height:1;letter-spacing:-.02em}
#logo a .logo-text{color:#fff}
#logo a .logo-text span{color:#E0B45C}
#logo svg{flex-shrink:0;width:26px;height:26px}

.nav-main{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)}
#primary-menu{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);list-style:none;margin:0;padding:0}
#primary-menu>li{position:relative}
#primary-menu>li>a{
  display:inline-flex;align-items:center;gap:5px;
  color:rgba(255,255,255,.88);text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:-.01em;text-transform:none;
  white-space:nowrap;padding:8px 0;transition:color .25s var(--ease,ease);
}
#primary-menu>li>a:hover,#primary-menu>li:hover>a,#primary-menu>li.current>a{color:#E0B45C}
#primary-menu .menu-item-has-children>a::after{
  content:'';width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:var(--transition,.4s ease);opacity:.55;
}
.sub-menu{
  position:absolute;top:100%;left:-16px;min-width:246px;list-style:none;margin:0;
  background:rgba(20,20,24,.97);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm,12px);
  padding:8px;box-shadow:0 20px 50px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:var(--transition,.4s ease);
}
.sub-menu.sub-menu--wide{min-width:430px;columns:2;column-gap:4px}
.sub-menu li{break-inside:avoid}
#primary-menu>li:hover .sub-menu,#primary-menu>li:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.sub-menu a{display:block;padding:9px 14px;border-radius:8px;color:rgba(255,255,255,.75);text-decoration:none;font-size:14px;font-weight:450;transition:var(--transition,.4s ease)}
.sub-menu a:hover{color:#fff;background:rgba(255,255,255,.09)}

.header-cta{display:flex;align-items:center;gap:10px}
.header-cta .btn-1{min-height:38px;font-size:14px;font-weight:600;padding:0 20px;box-shadow:none;background:#E0B45C;color:#0A0A0C;border-color:#E0B45C}
.header-cta .btn-1:hover{background:#EDC474;border-color:#EDC474;color:#0A0A0C}
.header-cta .call{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.88);text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border-radius:var(--pill,980px);border:1px solid rgba(255,255,255,.22);white-space:nowrap;transition:var(--transition,.4s ease)}
.header-cta .call:hover{border-color:#E0B45C;color:#E0B45C}
.nav-main .header-cta{display:none}
@media(max-width:1180px){.header-cta .call{display:none}.nav-main .header-cta .call{display:inline-flex}}

.nav-btn{display:none;width:40px;height:40px;border:none;background:none;cursor:pointer;padding:11px 8px;z-index:120}
.nav-btn span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:var(--transition,.4s ease)}
.nav-btn span+span{margin-top:5px}
.nav-open .nav-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-open .nav-btn span:nth-child(2){opacity:0}
.nav-open .nav-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Phone and small tablet: the menu becomes a full-screen dark sheet. */
@media(max-width:980px){
  .nav-btn{display:block}
  .nav-main{
    position:fixed;inset:0;z-index:110;
    flex-direction:column;justify-content:center;
    background:#0A0A0C;
    padding:88px 26px 40px;overflow-y:auto;
    transform:translateY(-100%);transition:transform .5s var(--ease,ease);
  }
  .nav-open .nav-main{transform:translateY(0)}
  #logo{position:relative;z-index:120}
  #primary-menu{flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:420px;margin-inline:auto}
  #primary-menu>li{border-bottom:1px solid rgba(255,255,255,.12)}
  #primary-menu>li>a{justify-content:space-between;width:100%;padding:16px 4px;font-size:17px;font-weight:500;letter-spacing:-.02em}
  #primary-menu .menu-item-has-children>a::after{transform:rotate(45deg) translate(-2px,-2px)}
  #primary-menu>li.open>a::after{transform:rotate(-135deg) translate(-2px,-2px)}
  .sub-menu,.sub-menu.sub-menu--wide{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;border:none;box-shadow:none;padding:0 0 12px;backdrop-filter:none;-webkit-backdrop-filter:none;
    display:none;min-width:0;columns:1;
  }
  #primary-menu>li.open .sub-menu{display:block}
  .sub-menu a{padding:9px 14px;font-size:15px}
  .header-cta{display:none}
  .nav-main .header-cta{display:flex;flex-direction:column;width:100%;max-width:420px;margin:24px auto 0}
  .nav-main .header-cta .btn-1,.nav-main .header-cta .call{width:100%;min-height:50px;font-size:16px;justify-content:center}
}