/* ============================================================
   ege easy — единая шапка сайта (единственный источник разметки).
   Тот же приём, что у футера: разметка живёт в js/site-header.js,
   стили — здесь. Палитра берёт токены хоста (--header-bg, --text …),
   а где их нет — эталон статус/404.

   Подключение на новой странице (две строки + слот):
     <link rel="stylesheet" href="/css/site-header.css?v=1">
     <div data-ege-header></div>
     <script defer src="/js/site-header.js?v=1"></script>
   Варианты слота:
     data-ege-header="back"  — вместо CTA ссылка «← К практике»
                               (ege-result.html);
     data-cta-href / data-cta-text — свой CTA вместо
                               «начать подготовку»;
     data-maxw="720" — ширина шапки под контент (ege-result).
   Лендинг (main.html) держит свою шапку с якорными ссылками:
   туда ставится только кнопка <button class="eh-toggle"> —
   site-header.js сам её раскрашивает и вешает клик.
   ============================================================ */

.eh-header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg, rgba(255,255,255,0.85));
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border-bottom:1px solid var(--hairline, rgba(15,23,42,0.08));
}
:root[data-theme="dark"] .eh-header{
  background:var(--header-bg, rgba(5,7,12,0.85));
  border-bottom-color:var(--hairline, rgba(255,255,255,0.06));
}
.eh-inner{
  max-width:960px;margin:0 auto;width:100%;min-width:0;
  padding:0 clamp(20px,4vw,32px);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding-block:clamp(12px,2vw,18px);
}
.eh-logo{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display, 'Manrope', system-ui, sans-serif);
  font-weight:700;font-size:clamp(16px,2.2vw,19px);
  letter-spacing:-0.02em;white-space:nowrap;min-width:0;
  color:var(--text, #0E1526);text-decoration:none;
}
:root[data-theme="dark"] .eh-logo{color:var(--text, #F8F9FB);}
.eh-badge{
  width:clamp(32px,5vw,42px);height:clamp(32px,5vw,42px);
  border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#22c07a 0%,#38BDF8 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px -8px rgba(56,189,248,0.5);
}
.eh-badge svg{width:20px;height:20px;display:block;}
.eh-logo-text em{font-style:normal;color:var(--brand, #16a34a);}
:root[data-theme="dark"] .eh-logo-text em{color:var(--brand, #6EE7B7);}
.eh-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.eh-toggle{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--card-border, rgba(15,23,42,0.10));
  background:var(--surface-2, var(--surface-1, #FFFFFF));
  color:var(--text, #0E1526);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;flex:0 0 auto;
  transition:border-color .15s ease,transform .15s ease;
}
:root[data-theme="dark"] .eh-toggle{
  border-color:var(--card-border, rgba(255,255,255,0.08));
  background:var(--surface-2, var(--surface-1, #0A0D12));
  color:var(--text, #F8F9FB);
}
.eh-toggle:hover{
  border-color:var(--card-border-hover, rgba(15,23,42,0.20));
  transform:translateY(-1px);
}
:root[data-theme="dark"] .eh-toggle:hover{
  border-color:var(--card-border-hover, rgba(255,255,255,0.12));
}
.eh-toggle svg{width:18px;height:18px;display:block;}
.eh-toggle:focus-visible{outline:2px solid var(--accent, #0277B6);outline-offset:2px;}
.eh-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:clamp(11px,2vw,14px) clamp(20px,4vw,28px);
  border-radius:999px;border:none;cursor:pointer;white-space:nowrap;
  font-family:var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight:600;font-size:clamp(13px,1.8vw,15px);
  background:linear-gradient(135deg,#38BDF8 0%,#3B82F6 50%,#2563EB 100%);
  color:#fff;text-decoration:none;
  box-shadow:0 16px 32px -12px rgba(56,189,248,0.5);
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),box-shadow 0.3s cubic-bezier(0.16,1,0.3,1);
}
.eh-btn:hover{transform:translateY(-2px);}
.eh-btn:active{transform:translateY(0) scale(0.98);}
@media (max-width:480px){
  .eh-inner .eh-btn{padding:10px 16px;font-size:13px;}
}