/* Базовые стили сайта. Значения — только из assets/css/tokens.css; правила — дизайн.md. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font: var(--fw-text) var(--fs-body) / var(--lh-text) var(--font-text);
}
main { padding: var(--section-y) var(--gutter); }
h1 {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-display);
}
p { margin: 0 0 var(--sp-6); max-width: var(--measure); }
a { color: var(--c-panel); }
:focus-visible { outline: var(--focus-w) solid var(--c-focus-light); outline-offset: var(--focus-offset); }

/* Шапка (С4): полоса цвета панели; телефон — логотип, «Materials», языки; кнопка заявки — только на компьютере
   (на телефоне её заменит закреплённая внизу кнопка, дизайн.md «Брейкпоинты»). 900px = --bp-desktop:
   переменные в media query не работают. */
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  background: var(--c-panel);
  color: var(--c-on-panel);
}
.hdr a { color: inherit; text-decoration: none; }
/* Шапка всегда наверху экрана (владелец 07.11). Главная и страницы материалов: лежит поверх заставки или фото первого экрана
   без заливки (сборка 31.10), а за первым экраном заливается — иначе светлый текст пропал бы на светлом фоне. Без JS заливка
   есть всегда (класс .js ставит строка в <head>, .is-solid — chrome.js) */
body:has(.intro, .mhero) .hdr { position: fixed; inset: 0 0 auto; z-index: 5; }
.js body:has(.intro, .mhero) .hdr:not(.is-solid) { background: transparent; }
.hdr :focus-visible { outline-color: var(--c-focus-dark); }
.hdr__logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  font: var(--fw-ui) var(--fs-ui) / var(--lh-ui) var(--font-text);
  letter-spacing: var(--tracking-logo);
  white-space: nowrap;
}
.hdr__bar { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-ui); }
.hdr__langs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
}
.hdr__langs { display: flex; }
.hdr__bar, .hdr__langs { min-inline-size: 0; }  /* иначе ссылки языков не могут сузиться и шапка выходит за край */
/* цель нажатия 44 px в ширину, где хватает места; на самых узких экранах (320, RU 360) ссылки ужимаются до текста,
   а не выталкивают шапку за край. Явного минимума нет: ширину держат текст и поля — на снимках 320–1440 EN/EL/RU
   не уже 24 px (WCAG 2.5.8), на другом шрифте или тексте перемерить (ревью Codex 26.10, круг 2) */
.hdr__langs a {
  inline-size: var(--control-min);  /* ширина, а не flex-basis: из неё считается ширина переключателя */
  justify-content: center;
  padding: 0 var(--sp-1);
  color: var(--c-on-panel-muted);
}
.hdr__langs a[aria-current="page"] { color: var(--c-on-panel); font-weight: var(--fw-ui); }
.hdr__cta { display: none; }

@media (width >= 900px) {
  .hdr__logo { font-size: var(--fs-body); }
  .hdr__bar { gap: var(--sp-6); }
  .hdr .hdr__cta {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-min);
    padding: 0 var(--sp-5);
    border-radius: var(--radius-pill);
    background: var(--c-on-panel);
    color: var(--c-panel-deep);
    font: var(--fw-ui) var(--fs-small) / var(--lh-ui) var(--font-text);
  }
}

/* Меню «Materials» (шаг 14): <details> — раскрывается и без JS. Телефон — список во всю ширину под шапкой,
   компьютер — под пунктом меню */
.hdr { position: sticky; top: 0; z-index: 5; }  /* выше закреплённой полосы фасада */
html { scroll-padding-top: var(--header-h); }  /* переход по якорю и Tab не прячут цель под шапкой */
.hdr__menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--control-min);
  cursor: pointer;
  list-style: none;
}
.hdr__menu > summary::-webkit-details-marker { display: none; }
.hdr__menu > summary::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  margin-top: -0.2em;
  border-right: var(--focus-w) solid currentColor;
  border-bottom: var(--focus-w) solid currentColor;
  transform: rotate(45deg);
}
.hdr__menu[open] > summary::after { margin-top: 0.2em; transform: rotate(225deg); }
.hdr__list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin: 0;
  padding: var(--sp-2) var(--gutter) var(--sp-4);
  list-style: none;
  background: var(--c-panel-deep);
}
.hdr__list a { display: flex; align-items: center; min-height: var(--control-min); }
.hdr__list a[aria-current="page"] { font-weight: var(--fw-ui); }
@media (width >= 900px) {
  .hdr__menu { position: relative; }
  .hdr__list { left: auto; right: auto; width: max-content; padding: var(--sp-2) var(--sp-5); }
}

/* Кнопка «наверх»: внизу справа, появляется за первым экраном (chrome.js); без JS видна всегда */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--control-min);
  height: var(--control-min);
  border: var(--line-w) solid var(--c-on-panel-muted);  /* видна и на тёмном подвале */
  border-radius: 50%;
  background: var(--c-panel);
  color: var(--c-on-panel);
}
.js .to-top:not(.is-on) { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .to-top { transition: opacity 0.2s, visibility 0.2s; }
  .hdr { transition: background-color 0.2s; }
}
@media print {
  .to-top { display: none; }
  body:has(.intro, .mhero) .hdr { position: absolute; }
}

/* EL: заголовок разбит на буквы (reveal.js), поэтому длинное слово рвётся без дефиса, если не влезает в строку.
   На узком экране кегль ограничен так, чтобы оно входило целиком (--fit-word, разбор движения 05.11) */
:lang(el) :is(.gallery, .use) h2 { font-size: min(var(--fs-h2), var(--fit-word)); }
:lang(el) .mhero h1 { font-size: min(var(--fs-hero-material), var(--fit-word)); }
:lang(el) .mat__name { font-size: min(var(--fs-h3), var(--fit-word)); }
:lang(el) .say__text { font-size: min(var(--fs-say), var(--fit-word-caps)); }

/* Отклик на курсор (чеклист 4). Без плавного перехода: у кнопок свойство transition занято появлением (.rv-b, reveal.css).
   Только там, где есть курсор: на телефоне :hover залипал бы после касания */
@media (hover: hover) {
  a:hover, .hdr__menu > summary:hover { text-decoration: underline; text-decoration-thickness: 2px; }
  a.btn:hover, a.pill-link:hover, .hdr .hdr__cta:hover { text-decoration: none; }
  .to-top:hover { background: var(--c-panel-hover); }
  .btn:not(:disabled):hover { background: var(--c-panel-hover); }
  .btn--on-panel:not(:disabled):hover, .hdr .hdr__cta:hover { background: var(--c-on-panel-hover); }
  .pill-link:hover { background: var(--c-panel); color: var(--c-on-panel); }
  .pill input:not(:checked, :disabled):hover + span { background: var(--c-line); }
  .tile a:hover img, .photo-link:hover img { opacity: 0.85; }
}