/* Шапка сайта — одна на все шаблоны (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). Шторка «Рейтинги» (#hdr-ratings.is-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}

/* ---------- шторка «Рейтинги» (компьютер) ----------
   Пункт «Рейтинги» в разметке — ссылка на /ratings/ со стрелкой; menu.js меняет её на кнопку с теми же классами
   (aria-expanded, aria-controls="hdr-ratings"), поэтому кнопка повторяет ссылку до пикселя и шапка не сдвигается.
   Шторка — карточка под шапкой по центру «пилюли», поверх страницы (страница под ней не сдвигается); закрытая —
   невидима и вне порядка Tab (visibility — после того, как погаснет). Без скрипта она не открывается: пункт ведёт на хаб. */
.site-header .hdr-drop-btn{display:inline-flex;align-items:center;gap:4px}
/* сброс кнопки — с весом одного класса (:where), чтобы размер и начертание пункта (.hdr-link, в меню телефона — свои) брались как у ссылки */
.site-header :where(button.hdr-link){margin:0;border:0;background-color:transparent;font:inherit;text-align:inherit;
  cursor:pointer;-webkit-tap-highlight-color:transparent}
.site-header .hdr-chev{width:12px;height:12px;opacity:.7;transition:transform .2s ease}
.site-header .hdr-drop-btn[aria-expanded="true"]{color:#fff}
.site-header .hdr-drop-btn[aria-expanded="true"] .hdr-chev{transform:rotate(180deg)}
.site-header .hdr-drawer{position:absolute;top:calc(100% + 8px);left:50%;width:min(960px,calc(100% - 40px));
  padding:20px 20px 12px;border:1px solid var(--d8-line-3);border-radius:16px;
  background:var(--d8-bg-glass-strong);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 24px 48px rgba(0,0,0,.45),var(--d8-button-glow);
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
.site-header .hdr-drawer.is-open{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s ease,transform .2s ease}
/* мостик над карточкой — на всю её ширину и на всю высоту от низа «пилюли» (72 − 34) / 2 = 19 px плюс щель 8 px, с запасом 1 px:
   указатель, идущий от пункта к любой колонке (и наискось, над «Брендами» и «Статьями»), не «выпадает» из шторки по пути.
   Ловит указатель, только пока шторка открыта (закрытая — visibility:hidden), остальным пунктам не мешает. */
.site-header .hdr-drawer::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px}
.site-header .hdr-dgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 16px}
.site-header .hdr-dtitle{margin:0 0 6px;padding:0 10px;color:var(--d8-text-3);font-size:.75rem;line-height:1rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase}
.site-header .hdr-dlist{margin:0;padding:0;list-style:none}
.site-header .hdr-dlist li{margin:0;padding:0;list-style:none}
.site-header .hdr-dlink{display:block;min-height:36px;padding:8px 10px;border-radius:8px;
  color:var(--d8-text-2);font-weight:400;transition:color .2s ease,background-color .2s ease}
.site-header .hdr-dlink:hover{color:var(--d8-text-1);background:var(--d8-surface-4)}
.site-header .hdr-dlink.is-current{color:var(--d8-text-1);background:var(--d8-accent-bg-strong)}
.site-header .hdr-dfoot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:12px}
.site-header .hdr-dall{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  color:var(--d8-lilac);transition:color .2s ease,background-color .2s ease}
.site-header .hdr-dall svg{width:16px;height:16px}
.site-header .hdr-dall:hover{color:var(--d8-text-1);background:var(--d8-surface-4)}
/* «RU» у ссылки на русскую страницу на странице другого языка — как LangMark short */
.site-header .hdr-lang{display:inline-block;margin-inline-start:.5em;padding:0 .5em;border:1px solid currentColor;border-radius:999px;
  font-size:.75rem;font-weight:500;line-height:1.5;white-space:nowrap}
/* одна строка вместо «RU» у каждой ссылки, когда ни один рейтинг на язык страницы ещё не переведён */
.site-header .hdr-dnote{margin:0;padding:0 10px;color:var(--d8-text-3);font-size:.8125rem;line-height:1.25rem}
.site-header .hdr-nw{white-space:nowrap}
.site-header .hdr-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- справа: «Поиск», кнопка, кнопка меню ---------- */
.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)}
  /* шторка «Рейтинги» в меню — раскрывается под пунктом и сдвигает остальные пункты вниз; ссылки — не меньше 44 px,
     в две колонки: до 600 px группы друг под другом, ссылки группы — в две колонки; шире — группы в две колонки */
  .site-header .hdr-drop-btn{display:flex;width:100%;justify-content:space-between;gap:12px;text-align:left}
  .site-header .hdr-chev{width:20px;height:20px}
  .site-header .hdr-drawer{position:static;display:none;width:auto;padding:8px 20px 20px;border:0;border-radius:0;
    background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
    opacity:1;visibility:visible;transform:none;transition:none}
  .site-header .hdr-drawer.is-open{display:block;transform:none;animation:hdr-drop .25s ease}
  .site-header .hdr-drawer::before{content:none}
  .site-header .hdr-dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 16px}
  .site-header .hdr-dlink,.site-header .hdr-dall{min-height:44px;padding:12px;font-size:1rem;line-height:1.25rem}
  .site-header .hdr-dtitle,.site-header .hdr-dnote{padding:0 12px}
  .site-header .hdr-dlink:hover{background:var(--d8-surface-3)}
}
@media (max-width:599.98px){
  .site-header .hdr-dgrid{grid-template-columns:minmax(0,1fr);gap:12px}
  .site-header .hdr-dlist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px}
}
@keyframes hdr-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* до 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}
  .site-header .hdr-drawer{padding:8px 12px 16px}
  .site-header .hdr-dlink,.site-header .hdr-dall{padding:12px;font-size:.9375rem}
}
/* телефон на боку: пункты меню ниже, все четыре помещаются на экране 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,.site-header .hdr-chev,.site-header .hdr-drawer,
  .site-header .hdr-drawer.is-open,.site-header .hdr-dlink,.site-header .hdr-dall{transition:none;animation:none}
}