/* ===== Зерно · сквозные хедер и футер =====
   Макеты: Header 63:257, Footer 171:595.
   Подключение на любой странице:
     <link rel="stylesheet" href="assets/chrome.css">
     <script src="assets/chrome.js" defer></script>
   Разметку вставляет chrome.js — в HTML страницы ничего писать не нужно.

   Токены берутся со страницы; значения в var(...) вторым аргументом — фолбэк,
   чтобы компоненты не разъезжались на странице без :root-токенов. */

/* ===== ХЕДЕР ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg, var(--sand-50, #FDFAF1) 0%, #FFFFFF 100%);
  border-bottom:1px solid var(--sand-300, #E4D8BD);
  /* 16 + 56 логотип + 16 + 1 обводка = 89px — на 1px больше макета (там обводка INSIDE,
     входит в те же 88px). Срезаем 1px с нижнего паддинга, чтобы высота осталась 88px:
     от неё зависит .sk-pin в блоке кухни */
  padding:16px 0 15px;
}
/* режим главной: хедер выезжает сверху после первого экрана */
.site-header--reveal{
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.22,.61,.21,1);
}
.site-header--reveal.show{ transform:none }

/* ===== ПРОГРЕСС ПРОКРУТКИ (макет 187:441) =====
   Самостоятельный элемент, а не часть шапки: висит поверх неё и живёт своей жизнью —
   появляется с началом прокрутки независимо от того, выехала шапка или нет.
   Заполняем через scaleX, а не width: transform не заставляет пересчитывать раскладку. */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; z-index:101; /* шапка — 100, полоса всегда над ней */
  height:4px;
  background:var(--gold-100, #FAEACF); overflow:clip;
  opacity:0; transition:opacity .25s ease;
  pointer-events:none; /* 4px поверх шапки не должны перехватывать клики по логотипу */
}
.scroll-progress.show{ opacity:1 }
.scroll-progress i{
  display:block; height:100%;
  background:var(--gold-500, #CB9C3F);
  transform:scaleX(0); transform-origin:left center; will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ transition:none }
}

.hd__in{
  width:var(--cw, min(100vw - 320px, 1600px)); margin-inline:auto;
  display:flex; align-items:center; gap:32px;
}
/* Меню строго по центру контейнера (макет 63:257). Приём тот же, что в макете: боковые
   блоки равны по ширине, и меню оказывается ровно посередине. В Figma это сделано фиксированной
   шириной 234px у header-contacts (примерно как знак); в CSS берём flex:1 1 0 — обе стороны получают
   поровну независимо от длины номера, поэтому центр не съедет, если телефон когда-нибудь изменится */
.hd__brand{ flex:1 1 0 }   /* колонка «знак + подпись»; flex:1 — тот самый приём центровки меню */
.hd__logo{ display:block; line-height:0 }
.hd__logo img{ width:228px; height:55px; display:block }

.hd__nav{ display:flex; align-items:center; gap:32px; flex:none }
.hd__right{ display:flex; align-items:center; gap:32px; flex:1 1 0; justify-content:flex-end }
/* макет 63:257: меню и телефон набраны Body/Base Medium 18/160 — без капса и разрядки,
   какими они были раньше (UI/Label 16). Medium = 500, чуть плотнее обычного текста */
.hd__nav a, .hd__nav span,
.hd__right a, .hd__right span{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-primary, #474134);
  white-space:nowrap; text-decoration:none;
}
/* Наведение — пункт становится золотым (стиль Link/Default). Именно gold/700:
   он и читается на фоне шапки (5.3:1), и заметно отличается от текста (1.8:1).
   Более тёмные золотые формально контрастнее к фону, но сливаются с текстом — проверено */
/* Ссылки подсвечиваются только под курсором: пункт текущей страницы в макете ничем не
   выделен, поэтому aria-current остался лишь подсказкой скринридеру, без оформления. */
.hd__nav a:hover, .hd__right a:hover{ color:var(--link-default, #896100) }
.hd__nav a:focus-visible, .hd__right a:focus-visible, .hd__logo:focus-visible{
  outline:2px solid var(--gold-600, #A97C19); outline-offset:4px; border-radius:2px;
}

/* ===== ПОДПИСЬ ПОД ЗНАКОМ (макеты 456:1932 шапка, 430:1451 футер) =====
   Юридическое требование: знак «Зерно» не используется без подписи. Типографика вне шкалы
   проекта (8px), поэтому размеры заданы вручную. Геометрия: ширина 159 и сдвиг 69 ставят
   строку ровно под словом «ЗЕРНО» (колос занимает первые 30.4% знака шириной 228),
   а -12px у знака поднимают её в пустое поле под словом. */
.hd__brand, .ft__brand{ display:flex; flex-direction:column; align-items:flex-start }
.hd__brand .hd__logo, .ft__brand .ft__logo{ margin-bottom:-12px }
.hd__tagline, .ft__tagline{
  width:159px; margin-left:69px; text-align:center; white-space:nowrap;
  font:400 8px/1.52 var(--font-body, 'Onest', system-ui, sans-serif);
  letter-spacing:.1em; text-transform:uppercase;
}
.hd__tagline{ color:var(--graphite-600, #5F5A52) }        /* Text/Secondary — на светлой шапке */
.ft__tagline{ color:var(--text-secondary-dark, #BDB194) } /* Text/Secondary (on dark) — в футере */

/* ===== ХЕДЕР · вариант 2 (макет 430:1292) =====
   На второй главной шапки две: «2 (on dark)» лежит на видео первого экрана и уезжает
   вместе с ним, «2» — стики, выезжает сверху, когда первый экран прокручен. Разметку
   обеих вставляет chrome.js в режиме data-header="v2". */

/* Стики-шапка: механика та же (.site-header--reveal), отличается раскладкой — логотип,
   меню и контакты разнесены по краям, поля 32px вместо сетки контейнера */
.site-header--v2 .hd__in{ width:auto; margin-inline:32px; justify-content:space-between }
.site-header--v2 .hd__brand, .site-header--v2 .hd__right{ flex:none }

/* Кнопка брони — Button M 44 из макета (компонент 47:86). Она компактнее кнопок страницы
   (те L 56), поэтому описана здесь, а не общим классом .btn */
.hd__btn{
  display:inline-flex; align-items:center; flex:none; height:44px; padding:0 24px;
  border:0; border-radius:8px; corner-shape:squircle; cursor:pointer;
  /* Цвета те же, что у Primary L (компонент 47:86). Раньше M начинался на ступень
     темнее — gold-700/800/900; в Figma это выровняли, здесь догоняем */
  background:var(--gold-600, #A97C19); color:var(--button-primary-label, #FFFFFF);
  font:600 16px/1.1 var(--font-body, 'Onest', system-ui, sans-serif);
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  transition:background .2s ease;
}
.hd__btn:hover{ background:var(--gold-700, #896100) }
.hd__btn:active{ background:var(--gold-800, #674800) }
.hd__btn:focus-visible{ outline:2px solid var(--gold-600, #A97C19); outline-offset:3px }

/* Шапка первого экрана: прозрачная, поверх видео. Не fixed и не sticky — обычный элемент
   в потоке страницы, поэтому просто уезжает вверх вместе с первым экраном */
.hero-header{
  position:absolute; top:0; left:0; right:0; z-index:90;
  display:flex; align-items:center; gap:64px; /* макет 430:1358: боковых полей нет, между группами 64 */
  padding:24px 0;
}
/* Знак посередине, по бокам две равные группы — меню и контакты. Содержимое каждой
   группы стоит по центру своей половины, поэтому знак остаётся строго в центре страницы. */
.hero-header__nav{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:32px }
.hero-header__brand{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:12px;
  text-decoration:none;
}
.hero-header__contacts{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:32px }
.hero-header__brand img{ width:205px; height:100px; display:block }
/* та же обязательная подпись, но под вертикальным знаком — крупнее и по центру (макет 430:1656) */
.hero-header__tagline{
  font:400 10px/1.52 var(--font-body, 'Onest', system-ui, sans-serif);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-secondary-dark, #BDB194); white-space:nowrap;
}
/* Меню и контакты набраны одним цветом — Text/Primary (on dark), в том числе текущая
   страница: в макете она ничем не выделена. aria-current в разметке остаётся — это
   подсказка скринридеру, а не оформление. */
.hero-header__nav a{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-inverse, #F9F3E4); text-decoration:none; white-space:nowrap;
}
/* на тёмном наведение светлеет до Link/Hover (on dark) — то же правило, что и в футере */
.hero-header__nav a:hover{ color:var(--link-hover-dark, #E2BF7E) }
.hero-header__contacts a, .hero-header__contacts span{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif);
  color:var(--text-inverse, #F9F3E4); text-decoration:none; white-space:nowrap;
}
.hero-header__contacts a:hover{ color:var(--link-hover-dark, #E2BF7E) }
.hero-header a:focus-visible{
  outline:2px solid var(--gold-400, #D3A856); outline-offset:4px; border-radius:2px;
}

/* ===== ФУТЕР ===== */
.site-footer{
  /* тёмный футер (макет 257:383): вертикальный градиент graphite-900 → sand-900 к середине */
  background:linear-gradient(180deg, var(--graphite-900, #1D1911) 0%, var(--sand-900, #3D372A) 50%);
  border-top:2px solid var(--gold-500, #CB9C3F); /* макет 171:595: обводка сверху 2px, gold-500 */
}
.ft__in{
  width:var(--cw, min(100vw - 320px, 1600px)); margin-inline:auto;
  display:flex; align-items:flex-start; justify-content:space-between; gap:48px;
  padding:32px 0 48px;
}
.ft__brand{ flex:none }
.ft__logo{ display:block; line-height:0 }
.ft__logo img{ width:228px; height:55px; display:block } /* тот же размер, что в шапке */

.ft__col{
  flex:none; display:flex; flex-direction:column; gap:8px;
  /* 12px ставит первые строки колонок на базовую линию слова «ЗЕРНО» (макет 171:595) */
  padding-top:12px;
}
.ft__col a, .ft__col span{
  font:500 18px/1.6 var(--font-body, 'Onest', system-ui, sans-serif); /* макет 171:595: Body/Base Medium 18/160 */
  color:var(--text-inverse, #F9F3E4); /* Text/Primary (on dark) */
  white-space:nowrap; text-decoration:none;
}
/* правая колонка (политика, копирайт, разработчик) — Text/Secondary (on dark).
   Контраст 5.6:1 на светлом конце градиента футера — проходит AA для основного текста */
.ft__col--secondary a, .ft__col--secondary span{ color:var(--text-secondary-dark, #BDB194) }
/* Наведение на тёмном — стиль Link/Hover (on dark), gold/300. Не gold/highlight:
   тот стоит на тоне 48°, тогда как вся золотая шкала бренда — 38-41°, и на глаз он
   читается жёлтым, а не золотым. gold/300 втрое насыщеннее песочного цвета ссылки,
   поэтому переход виден, хотя формальный контраст по яркости всего 1.2 */
.ft__col a:hover{ color:var(--link-hover-dark, #E2BF7E) }
.ft__col a:focus-visible, .ft__logo:focus-visible{
  outline:2px solid var(--gold-600, #A97C19); outline-offset:4px; border-radius:2px;
}
.ft__soc{ display:flex; gap:8px }   /* макет: шаг 40 при кнопке 32 */
/* Кнопка-иконка соцсети (макет Icon button 352:474). Плашка намеренно тихая:
   золото у нас — цвет главного действия, и на сплошной заливке 32×32 оно перетягивало
   внимание с контактов. Золото включается на наведении — как отклик, а не как фон */
/* Селектор с .ft__col не для красоты: правило .ft__col a выше по специфичности и
   перекрашивало иконку — на наведении она становилась золотой на золотом фоне и пропадала */
.ft__col .ft__soc-btn{
  width:32px; height:32px; flex:none;
  display:grid; place-items:center;
  border-radius:8px; corner-shape:squircle;      /* как у всех кнопок, см. РЕШЕНИЯ.md */
  background:var(--dark-surface-raised, #474134);
  color:var(--button-primary-label, #FFFFFF);    /* иконка наследует через currentColor */
  transition:background .2s ease;
}
/* меняется только фон — иконка остаётся белой в обоих состояниях */
.ft__col .ft__soc-btn:hover{
  background:var(--button-primary-bg, #A97C19);
  color:var(--button-primary-label, #FFFFFF);
}
.ft__soc-btn svg{ width:24px; height:24px; display:block; fill:currentColor }
.ft__soc-btn:focus-visible{
  outline:2px solid var(--gold-400, #D3A856); outline-offset:3px;
}

/* ===== адаптив: макет десктопный, ниже — чтобы ничего не разъезжалось ===== */
/* Шапки варианта 2 свёрстаны на 1920: меню, логотип и контакты занимают там 1360px
   (стики с кнопкой брони — 1587px). На узких экранах убираем правую часть по очереди,
   начиная с адреса: он повторён и в блоке контактов, и в футере. */
@media (max-width:1599px){
  .site-header--v2 .hd__right span{ display:none }
}
@media (max-width:1439px){
  .hero-header__contacts span{ display:none }
}
@media (max-width:1365px){
  .site-header--v2 .hd__right a{ display:none } /* остаётся одна кнопка брони */
}
@media (max-width:1199px){
  .hd__in{ gap:24px }
  .hd__nav, .hd__right{ gap:24px }
  .ft__in{ gap:32px }
  .site-header--v2 .hd__in{ margin-inline:24px }
  .site-header--v2 .hd__right{ display:none }        /* кнопка брони уже не встаёт рядом с меню */
  .site-header--v2 .hd__nav{ margin-inline:auto }    /* без правой части меню держится по центру свободного места */
  .hero-header{ padding:24px 32px; gap:24px }
  .hero-header__nav, .hero-header__contacts{ gap:24px }
}
@media (max-width:1023px){
  .hero-header{ justify-content:space-between; padding:16px 24px; gap:16px }
  .hero-header__contacts{ display:none }
  .hero-header__nav, .hero-header__brand{ flex:none }
  .hero-header__nav{ gap:16px }   /* иначе пять пунктов и логотип не встают в 768px */
  .hero-header__brand img{ width:164px; height:80px }
  /* контакты скрыты — центрировать больше не от чего, возвращаем логотип к своей ширине,
     иначе flex:1 растянул бы его и вытолкнул меню вправо */
  .hd__right{ display:none }
  .hd__brand{ flex:none }
  .hd__in{ justify-content:space-between }
  .ft__in{ flex-wrap:wrap; row-gap:40px }
  .ft__brand{ flex:1 0 100% } /* знак с подписью занимает свою строку целиком */
  .ft__col{ padding-top:0 }
}
@media (max-width:767px){
  .hd__nav{ display:none } /* мобильное меню — отдельная задача */
  .hero-header__nav{ display:none }
  .hero-header{ justify-content:center }
  .ft__in{ flex-direction:column; row-gap:32px; padding-bottom:40px }
  .ft__col a, .ft__col span{ white-space:normal }
  /* знак здесь не уменьшаем: подпись под ним привязана к его ширине (159 и 69 из макета),
     и при другом размере она перестала бы попадать под слово «ЗЕРНО» */
}
@media (prefers-reduced-motion: reduce){
  .site-header--reveal{ transition:none }
}