/* Шапка сайта — одна на все шаблоны (src/components/SiteHeader.astro; docs/CHANGES.md Ш1, решение владельца 15).
   Образец — шапка главной: знак-кольцо и имя, меню-«пилюля» по центру, справа «Поиск» и кнопка.
   Файл подключают макеты после стилей страницы (src/lib/head.ts withHeaderStyle). Правила начинаются с
   .site-header (вес не меньше двух классов): общие правила страниц — «body.ratings-premiumtech a» в ratings.css,
   «*:focus» в reflect.css, «* { margin: 0 }» в hub.css — шапку не перекрашивают.
   Высота — --hdr-h: 72 px, 56 px на телефоне (до 560 px) и на телефоне на боку. От неё считают отступ страницы
   под шапкой, липкие панели и якоря стили шаблонов (site.css и main.css — через --header-h, ratings.css, hub.css).
   Меню (до 1023 px) — панель во весь экран под шапкой; открывает его /assets/js/menu.js: #site-nav.is-open,
   html.nav-open. Ссылки шапки над открытым меню рабочие (menu.js). Цвета — общие цвета сайта (/assets/css/tokens.css,
   Ц1): шапка главной и есть их образец. */

/* веса как у шапки главной: пункты «пилюли» — 400, логотип, «Поиск» и кнопки — 500 (Ш1-а); файлы шрифта — те же,
   что объявляют site.css, hub.css и home/reflect.css */
@font-face{font-family:"Inter V";src:url(/home/fonts/InterV/regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter V";src:url(/home/fonts/InterV/medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{--hdr-h:72px}
@media (max-width:560px),(orientation:landscape) and (max-height:420px){:root{--hdr-h:56px}}

/* ---------- каркас ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--hdr-h);margin:0;padding:0;border:0;
  color:#fff;font:500 .875rem/1.25rem "Inter V",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:normal;
  text-align:left;text-transform:none;font-feature-settings:"ss01" on,"cv10" on,"calt" off,"liga" off;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}
/* фон и размытие — на псевдоэлементе: backdrop-filter на самой шапке сделал бы её содержащим блоком для
   position:fixed, и панель меню сжалась бы до высоты шапки (как было на рейтингах до MOB-3) */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--d8-bg-glass);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:radial-gradient(62.87% 100% at 50% 100%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 100%)}
.site-header .hdr-bar{position:relative;height:100%;max-width:1336px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:16px}
.site-header a{color:inherit;text-decoration:none}
.site-header a:focus-visible,.site-header button:focus-visible{outline:2px solid var(--d8-focus);outline-offset:2px}
.site-header svg{display:block;flex:none}

/* ---------- логотип ---------- */
.site-header .hdr-logo,.site-header .hdr-logo:hover{justify-self:start;display:inline-flex;align-items:center;gap:12px;
  font-size:1rem;line-height:1.5rem;white-space:nowrap;color:#fff}
.site-header .hdr-mark{width:36px;height:36px;color:rgba(255,255,255,.86)}

/* ---------- меню-«пилюля» (компьютер) ---------- */
.site-header .hdr-nav{justify-self:center}
.site-header .hdr-list{display:flex;align-items:center;margin:0;padding:3px 8px;list-style:none;
  border:1px solid var(--d8-line-2);border-radius:999px;background:var(--d8-surface-1)}
.site-header .hdr-list li{margin:0 2px;padding:0;list-style:none}
.site-header .hdr-link{display:block;padding:7px 10px;border-radius:999px;color:rgba(255,255,255,.9);font-weight:400;
  white-space:nowrap;transition:color .3s cubic-bezier(.6,.6,0,1),background-color .3s cubic-bezier(.6,.6,0,1)}
.site-header .hdr-link:hover{color:rgba(255,255,255,.6)}
.site-header .hdr-link.is-active{color:#fff;background:var(--d8-accent-bg-strong)}
.site-header .hdr-only-menu{display:none}

/* ---------- справа: «Поиск», кнопка, кнопка меню ---------- */
.site-header .hdr-actions{justify-self:end;display:flex;align-items:center;gap:16px}
.site-header .hdr-search{display:inline-flex;align-items:center;gap:8px;padding:8px 0;white-space:nowrap;
  color:#fff;transition:color .3s cubic-bezier(.6,.6,0,1)}
.site-header .hdr-search svg{width:18px;height:18px}
.site-header .hdr-search:hover{color:rgba(255,255,255,.6)}
.site-header .hdr-search.is-active{color:var(--d8-lilac)}
/* кнопка — .button.button-primary главной: фон, при наведении фон ярче, рамка-градиент */
.site-header .hdr-cta{position:relative;display:inline-flex;align-items:center;padding:8px 16px;border-radius:8px;
  color:var(--d8-text-1);white-space:nowrap;
  background:var(--d8-button);
  box-shadow:var(--d8-button-glow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.site-header .hdr-cta::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  transition:opacity .2s cubic-bezier(.6,.6,0,1);
  background:var(--d8-button-hover);
  box-shadow:inset 0 0 12px rgba(191,151,255,.44)}
.site-header .hdr-cta:hover::before{opacity:1}
.site-header .hdr-cta::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(180deg,rgba(207,184,255,.24) 0%,rgba(207,184,255,0) 100%),linear-gradient(0deg,rgba(207,184,255,.32),rgba(207,184,255,.32));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.site-header .hdr-cta--narrow{display:none}
/* кнопка меню: три полоски, в открытом меню — крестик; зона нажатия 44 × 44 */
.site-header .hdr-toggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;margin:0 -10px 0 0;padding:0;border:0;border-radius:10px;background:none;color:#fff;
  font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.site-header .hdr-toggle span{display:block;width:20px;height:1.5px;border-radius:500px;background:currentColor;
  transition:transform .3s ease-in-out,opacity .3s ease-in-out}
.site-header .hdr-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.site-header .hdr-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.site-header .hdr-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* открытое меню: страница под ним не прокручивается (menu.js ставит html.nav-open) */
html.nav-open,html.nav-open body{overflow:hidden}

/* ---------- телефон и планшет (до 1023 px): меню — панель во весь экран под шапкой ---------- */
@media (max-width:1023.98px){
  /* системный шрифт, как у главной на телефоне (и без загрузки Inter V ради шапки) */
  .site-header{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
  .site-header .hdr-bar{display:flex;justify-content:space-between;padding:0 16px;column-gap:12px}
  .site-header .hdr-actions{gap:12px}
  .site-header .hdr-cta--wide{display:none}
  .site-header .hdr-cta--narrow{display:inline-flex}
  .site-header .hdr-toggle{display:inline-flex}
  .site-header .hdr-nav{position:fixed;top:var(--hdr-h);left:0;right:0;bottom:0;justify-self:stretch;align-self:stretch;
    overflow-y:auto;overscroll-behavior:contain;
    background:var(--d8-bg-glass-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    transform:translateX(100%);visibility:hidden;transition:transform .45s ease,visibility 0s linear .45s}
  /* закрытое меню — вне порядка Tab и не для читалки (visibility — после выезда, открытое — сразу) */
  .site-header .hdr-nav.is-open{transform:none;visibility:visible;transition:transform .45s ease}
  .site-header .hdr-list{display:block;padding:0;border:0;border-radius:0;background:none}
  .site-header .hdr-list li{margin:0;border-top:1px solid rgba(255,255,255,.1)}
  .site-header .hdr-list li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
  .site-header .hdr-link{padding:20px 32px;border-radius:0;font-size:1.5rem;line-height:2rem;font-weight:500}
  .site-header .hdr-link:hover{color:#fff;background:var(--d8-surface-3)}
  .site-header .hdr-link.is-active{background:rgba(186,156,255,.1)}
  /* шапка над открытым меню — того же тёмного фона, что и панель */
  html.nav-open .site-header::before{background:var(--d8-bg-glass-strong)}
}
/* до 480 px «Поиск» — пункт меню, рядом с логотипом ему не хватает места */
@media (max-width:479.98px){
  .site-header .hdr-search{display:none}
  .site-header .hdr-only-menu{display:block}
}
@media (max-width:560px){
  .site-header .hdr-logo{gap:10px}
  .site-header .hdr-mark{width:32px;height:32px}
  .site-header .hdr-link{padding:18px 24px}
}
/* телефон на боку: пункты меню ниже, все четыре помещаются на экране 740 × 360 */
@media (orientation:landscape) and (max-height:420px) and (max-width:1023.98px){
  .site-header .hdr-link{padding:12px 32px;font-size:1.25rem;line-height:1.75rem}
}
/* до 360 px кнопка «Открыть рейтинги» не помещается — «Рейтинги» первым пунктом в меню */
@media (max-width:359.98px){
  .site-header .hdr-cta--narrow{display:none}
}
@media (prefers-reduced-motion:reduce){
  .site-header .hdr-nav,.site-header .hdr-nav.is-open,.site-header .hdr-link,.site-header .hdr-search,
  .site-header .hdr-cta::before,.site-header .hdr-toggle span{transition:none}
}