/* ═══════════════════════════════════════════════════════════════
   MasterCloneSmurfs — SHARED SITE HEADER (single source of truth)
   Used by every static .html AND the WordPress theme (header.php).
   Edit the markup/links in mcs-header.js and the look here — once.
═══════════════════════════════════════════════════════════════ */
.mcs-hd{
  position:sticky; top:0; z-index:251; height:60px;
  background:linear-gradient(180deg,rgba(8,6,14,.42),rgba(8,6,14,.52)),url("/kda-crystal-dark.webp") center/cover no-repeat;
  border-bottom:1px solid rgba(165,235,255,.28);
  backdrop-filter:blur(6px) saturate(1.25); -webkit-backdrop-filter:blur(6px) saturate(1.25);
}
html[data-theme="light"] .mcs-hd{
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(232,240,255,.5)),url("/kda-crystal.webp") center/cover no-repeat;
  border-bottom-color:rgba(120,170,210,.4);
}
.mcs-hd-inner{ max-width:none; width:100%; margin:0; padding:0 clamp(20px,4vw,48px); height:100%; display:flex; align-items:center; gap:16px; }
.mcs-hd-logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.mcs-hd-logo-txt{ font-family:'Syne',sans-serif; font-size:19px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:#F0EAD8; -webkit-text-stroke:.5px rgba(0,0,0,.3); text-shadow:0 1px 8px rgba(0,0,0,.7); white-space:nowrap; }
.mcs-hd-logo-txt span{ color:#A5EBFF; -webkit-text-stroke:1px rgba(0,0,0,.5); }
html[data-theme="light"] .mcs-hd-logo-txt{ color:#14202B; text-shadow:none; -webkit-text-stroke:0; }
html[data-theme="light"] .mcs-hd-logo-txt span{ color:#0C7C99; -webkit-text-stroke:0; }

.mcs-hd-nav{ flex:1 1 auto; display:flex; align-items:center; justify-content:space-evenly; gap:0; margin-left:clamp(20px,4vw,48px); }
.mcs-hd-link{ font-family:'Syne',sans-serif; font-size:14px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; color:rgba(240,234,216,.82); text-decoration:none; padding:6px 2px; border-bottom:1px solid transparent; transition:color .15s ease,border-color .15s ease; }
.mcs-hd-link:hover,.mcs-hd-link.active{ color:#A5EBFF; border-bottom-color:rgba(165,235,255,.55); }
html[data-theme="light"] .mcs-hd-link{ color:rgba(20,32,43,.82); }
html[data-theme="light"] .mcs-hd-link:hover,html[data-theme="light"] .mcs-hd-link.active{ color:#0C7C99; border-bottom-color:rgba(12,124,153,.5); }

.mcs-hd-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.mcs-hd-iconbtn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:#A5EBFF; cursor:pointer; text-decoration:none; transition:all .15s ease; }
html[data-theme="light"] .mcs-hd-iconbtn{ color:#0C7C99; border-color:rgba(10,40,60,.18); background:rgba(10,40,60,.04); }
.mcs-hd-iconbtn:hover{ border-color:rgba(111,214,245,.4); background:rgba(111,214,245,.12); }
/* Keyboard focus — visible ring for a11y (was relying on faint hover only). */
.mcs-hd-link:focus-visible,.mcs-hd-iconbtn:focus-visible,.mcs-hd-logo:focus-visible{ outline:2px solid #6FD6F5; outline-offset:3px; border-radius:4px; }
html[data-theme="light"] .mcs-hd-link:focus-visible,html[data-theme="light"] .mcs-hd-iconbtn:focus-visible,html[data-theme="light"] .mcs-hd-logo:focus-visible{ outline-color:#0C7C99; }

/* hero / overlay variant (index.html): fixed over the full-bleed hero so it
   doesn't push the 100dvh hero out of the viewport. Same crystal look. */
.mcs-hd.mcs-hd--hero{ position:fixed; left:0; right:0; }
body.has-banner .mcs-hd{ top:36px; }

/* ═══════════════════════════════════════════════════════════════
   MOTION — waving-cloth header + illuminating background lights.
   Pure CSS/SVG (no video), site-wide from this one file. Respects
   reduced-motion. The SVG turbulence filter (#mcs-cloth) is injected
   once by mcs-header.js.
═══════════════════════════════════════════════════════════════ */
.mcs-hd{ overflow:hidden; }
.mcs-hd-inner{ position:relative; z-index:2; }

/* Header cloth — the crystal texture on ::before, rippled by an animated
   SVG turbulence displacement so it undulates like waving fabric.
   (No-JS / unsupported: ::before hides and the .mcs-hd base crystal shows
   static underneath — graceful fallback.) */
.mcs-hd::before{
  content:''; position:absolute; inset:-26px; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,6,14,.42), rgba(8,6,14,.52)),
    url("/kda-crystal-dark.webp") center/cover no-repeat;
  filter: url(#mcs-cloth); will-change: filter;
}
html[data-theme="light"] .mcs-hd::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(232,240,255,.5)),
    url("/kda-crystal.webp") center/cover no-repeat;
}
/* silk sheen sweeping across, reinforces the fabric feel */
.mcs-hd::after{
  content:''; position:absolute; top:0; left:-60%; width:42%; height:100%; z-index:1; pointer-events:none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
  transform: skewX(-18deg); will-change: left;
  animation: mcsHdSheen 7s ease-in-out infinite;
}
html[data-theme="light"] .mcs-hd::after{ background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.5) 50%, transparent 100%); }
@keyframes mcsHdSheen{ 0%{ left:-60%; } 55%,100%{ left:130%; } }

/* Background — the pattern's own lights pulse/illuminate IN PLACE (no zoom):
   a slow brightness+saturation pulse makes the neon in the art glow, plus a
   couple of soft light spots twinkling out of phase. */
#kda-bg{ will-change: filter; animation: mcsBgGlow 6.5s ease-in-out infinite; }
@keyframes mcsBgGlow{
  0%,100% { filter: brightness(.9)  saturate(1);   }
  50%     { filter: brightness(1.15) saturate(1.42); }
}
#kda-bg::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(24vmax 24vmax at 20% 28%, rgba(111,214,245,.16), transparent 60%),
    radial-gradient(20vmax 20vmax at 80% 26%, rgba(157,127,255,.15), transparent 60%),
    radial-gradient(26vmax 26vmax at 55% 88%, rgba(0,210,235,.14), transparent 62%);
  will-change: opacity;
  animation: mcsBgTwinkle 7.5s ease-in-out infinite;
}
@keyframes mcsBgTwinkle{ 0%,100%{ opacity:.4; } 50%{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .mcs-hd::before{ filter:none !important; }
  .mcs-hd::after, #kda-bg, #kda-bg::after{ animation:none !important; }
  #kda-bg{ filter:none !important; }
}

@media(max-width:1120px){
  .mcs-hd-link{ font-size:12px; letter-spacing:.05em; padding:6px 1px; }
  .mcs-hd-logo-txt{ font-size:16px; letter-spacing:.10em; }
  .mcs-hd-nav{ margin-left:16px; }
}
@media(max-width:768px){
  .mcs-hd-inner{ padding:0 16px; }
  .mcs-hd-link{ font-size:11px; letter-spacing:.04em; }
  .mcs-hd-nav{ margin-left:12px; }
}
@media(max-width:560px){
  .mcs-hd-logo-txt{ font-size:13px; letter-spacing:.05em; }
  .mcs-hd-inner{ gap:8px; }
  .mcs-hd-actions{ gap:6px; }
}

/* ═══ MOBILE NAV — hamburger dropdown (replaces the cramped inline links) ═══
   The header has overflow:hidden for the cloth effect, so the dropdown is
   position:fixed to avoid being clipped. Toggled by .nav-open (mcs-header.js). */
.mcs-hd-burger{ display:none; }
@media(max-width:760px){
  .mcs-hd-burger{ display:inline-flex; }
  .mcs-hd-nav{
    position:fixed; top:60px; left:0; right:0; margin:0; z-index:250;
    flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    background:rgba(10,7,17,.98); border-bottom:1px solid rgba(165,235,255,.22);
    backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3);
    padding:6px 0 10px;
    opacity:0; transform:translateY(-10px); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  html[data-theme="light"] .mcs-hd-nav{ background:rgba(238,243,250,.98); border-bottom-color:rgba(120,170,210,.4); }
  .mcs-hd.nav-open .mcs-hd-nav{ opacity:1; transform:none; pointer-events:auto; }
  body.has-banner .mcs-hd-nav{ top:96px; }
  .mcs-hd-nav .mcs-hd-link{ padding:14px 22px; font-size:14px; letter-spacing:.10em; border-bottom:none; }
  .mcs-hd-nav .mcs-hd-link.active{ border-bottom:none; box-shadow:inset 3px 0 0 currentColor; }
  .mcs-hd-link.hide-xs{ display:block; }  /* room for FAQ in the dropdown */
}
@media(prefers-reduced-motion:reduce){ .mcs-hd-nav{ transition:none; } }