/* ═══════════════════════════════════════════════════════════════
   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); }

/* 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; }

@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-link.hide-xs{ display:none; }
  .mcs-hd-logo-txt{ font-size:13px; letter-spacing:.05em; }
  .mcs-hd-inner{ gap:8px; }
  .mcs-hd-actions{ gap:6px; }
}