/* ══════════════════════════════════════════════════════════════════════
   LARIANS DIGITAL AWNING — единый глобальный header
   ──────────────────────────────────────────────────────────────────────
   Один компонент на index / bots / examples / blog / статьях.
   Геометрия, логотип, контейнер, CTA и корзина одинаковы всегда;
   между страницами меняются только активный пункт и токены темы.

   Компоненты:
     .gh              — global-header            (fixed)
     .gh__inner       — global-header__inner     (общий контейнер)
     .gh__brand       — global-brand             (знак + LARIANS + Web Studio)
     .gh__nav         — global-nav
     .gh__link        — global-nav__link
     .gh__link--active— global-nav__link--active
     .gh__contacts    — global-contacts (dropdown)
     .gh__cta         — global-cta
     .gh__chip        — global-cart / theme-toggle (одна геометрия)
     .gh-drawer       — global-burger (drawer до 1199px)
     .gh-contact-list — раскладка списка контактов; карточки — общий
                        компонент .contacts-item (эталон главной, style.css)
     .page-subnav     — локальная навигация страницы (стили в style.css)

   Файл подключается ПОСЛЕДНИМ на странице.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Геометрия — одна на всех страницах ──────────────────────────── */
:root{
  --gh-h: 74px;
  --gh-max: 1280px;
  --gh-pad: 32px;
  --gh-gap: 24px;
  --gh-ease: cubic-bezier(.22,1,.36,1);
  --gh-z-header: 1000;
  /* drawer ниже шапки: шапка остаётся видимой и кликабельной,
     backdrop не затемняет логотип, корзину и крестик */
  --gh-z-drawer: 990;
  --gh-z-skip: 1300;
}
@media (max-width: 1199px){ :root{ --gh-pad: 24px; --gh-gap: 16px; } }
@media (max-width: 767px){  :root{ --gh-h: 63px; --gh-pad: 16px; --gh-gap: 12px; } }

/* ── 2. Токены темы ─────────────────────────────────────────────────── */
.gh, .gh-drawer{
  --surface:        rgba(248,246,252,.86);
  --surface-scroll: rgba(248,246,252,.94);
  --line:           rgba(60,40,90,.10);
  --line-strong:    rgba(60,40,90,.16);
  --ink:            #191223;
  --ink-2:          #5A5270;
  --ink-3:          #7B7392;
  --chip:           rgba(255,255,255,.62);
  --hover:          rgba(109,40,217,.07);
  --active-bg:      rgba(109,40,217,.10);
  --active-ink:     #5B21B6;
  --accent:         #6D28D9;
  --accent-2:       #8B5CF6;
  --sheen:          rgba(255,255,255,.80);
  --panel:          #FCFAFF;
  --shadow:         0 6px 22px rgba(60,40,90,.07);
  --drop-shadow:    0 18px 46px rgba(40,24,70,.16);
}

/* Тёмные страницы: та же геометрия, только другие токены.
   bots.html — тёмная всегда; Журнал — по выбранной теме. */
body.bots-light .gh,      body.bots-light .gh-drawer,
.gh.is-on-dark,           .gh-drawer.is-on-dark,
html[data-theme="dark"] .gh, html[data-theme="dark"] .gh-drawer{
  --surface:        rgba(12,8,20,.86);
  --surface-scroll: rgba(12,8,20,.93);
  --line:           rgba(255,255,255,.10);
  --line-strong:    rgba(255,255,255,.16);
  --ink:            #F5F2FA;
  --ink-2:          rgba(255,255,255,.70);
  --ink-3:          rgba(255,255,255,.55);
  --chip:           rgba(255,255,255,.06);
  --hover:          rgba(255,255,255,.08);
  --active-bg:      rgba(168,85,247,.18);
  --active-ink:     #FFFFFF;
  --accent:         #7C3AED;
  --accent-2:       #A855F7;
  --sheen:          rgba(255,255,255,.14);
  --panel:          #16101F;
  --shadow:         0 6px 26px rgba(0,0,0,.42);
  --drop-shadow:    0 18px 46px rgba(0,0,0,.55);
}

/* ── 3. Поверхность-маркиза ─────────────────────────────────────────── */
.gh{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--gh-z-header);
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
          backdrop-filter: blur(20px) saturate(120%);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--sheen), 0 1px 0 rgba(60,40,90,.03);
  transition: background-color .22s var(--gh-ease),
              border-color .22s var(--gh-ease),
              box-shadow .22s var(--gh-ease);
}
/* fallback без backdrop-filter — поверхность становится плотной */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  .gh{ background: #F8F6FC; }
  body.bots-light .gh,
  .gh.is-on-dark,
  html[data-theme="dark"] .gh{ background: #0C0814; }
}
.gh.is-scrolled{
  background: var(--surface-scroll);
  border-bottom-color: var(--line-strong);
  box-shadow: inset 0 1px 0 var(--sheen), var(--shadow);
}

.gh__inner{
  position: relative;
  max-width: var(--gh-max);
  margin: 0 auto;
  padding: 0 var(--gh-pad);
  height: var(--gh-h);
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: var(--gh-gap);
}

/* ── 5. Логотип-локап (один на всех страницах) ──────────────────────── */
.gh__brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  border-radius: 14px;
  min-width: 0;
}
.gh__plate{
  width: 42px; height: 42px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--chip);
  box-shadow: inset 0 1px 0 var(--sheen);
}
.gh__mark{ width: 30px; height: 30px; display: block; }
.gh__brand-text{ font-family:'Unbounded',sans-serif; line-height:1.2; min-width:0; }
.gh__brand-text b{
  display:block; font-weight:800; font-size:14px;
  letter-spacing:-.02em; color: var(--ink);
}
.gh__brand-text em{
  display:block; font-style:normal; font-weight:400; font-size:11px;
  letter-spacing:.01em; color: var(--ink-3);
}
/* Тёмная тема — светлая цветовая версия того же знака, геометрия не меняется */
body.bots-light .gh__mark-body,
.gh.is-on-dark .gh__mark-body,
html[data-theme="dark"] .gh__mark-body{ fill:#191223; stroke:#F5F2FA; }
body.bots-light .gh__mark-line,
.gh.is-on-dark .gh__mark-line,
html[data-theme="dark"] .gh__mark-line{ stroke:#F5F2FA; }
body.bots-light .gh__mark-g1,
.gh.is-on-dark .gh__mark-g1,
html[data-theme="dark"] .gh__mark-g1{ stop-color:#A855F7; }
body.bots-light .gh__mark-g2,
.gh.is-on-dark .gh__mark-g2,
html[data-theme="dark"] .gh__mark-g2{ stop-color:#7C3AED; }

/* ── 6. Глобальная навигация ────────────────────────────────────────── */
.gh__nav{
  justify-self: center;
  display: flex; align-items: center; gap: 2px;
}
.gh__link{
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 15px;
  border-radius: 11px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px; font-weight: 500; line-height: 1;
  color: var(--ink-2);
  text-decoration: none;
  background: transparent; border: 0; cursor: pointer;
  white-space: nowrap;
  transition: color .18s var(--gh-ease), background-color .18s var(--gh-ease);
}
.gh__link:hover{ color: var(--active-ink); background: var(--hover); }
.gh__link--active{
  color: var(--active-ink);
  font-weight: 600;
  background: var(--active-bg);
  box-shadow: inset 0 1px 0 var(--sheen);
}
.gh__link--active::after{
  content:''; position:absolute; left:14px; right:14px; bottom:5px;
  height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:.9;
}

/* ── 7. Правая группа: контакты, CTA, корзина, theme-toggle ─────────── */
.gh__actions{ display:flex; align-items:center; gap:10px; }
.gh__contacts{ position: relative; }
.gh__chev{ transition: transform .2s var(--gh-ease); }
.gh__link[aria-expanded="true"]{ color: var(--active-ink); background: var(--hover); }
.gh__link[aria-expanded="true"] .gh__chev{ transform: rotate(180deg); }

.gh__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height: 45px; padding: 0 20px;
  border-radius: 15px;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14px; font-weight:600; line-height:1;
  white-space: nowrap; text-decoration:none;
  color:#fff;
  background: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 5px 16px rgba(109,40,217,.22);
  border: 0; cursor: pointer;
  transition: box-shadow .2s var(--gh-ease);
}
.gh__cta:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 8px 20px rgba(109,40,217,.30); }
.gh__cta svg{ opacity:.85; flex-shrink:0; }

.gh__chip{
  position: relative;
  width: 45px; height: 45px; flex-shrink: 0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: var(--chip);
  box-shadow: inset 0 1px 0 var(--sheen);
  color: var(--ink);
  text-decoration:none; cursor:pointer;
  transition: color .18s var(--gh-ease), border-color .18s var(--gh-ease), background-color .18s var(--gh-ease);
}
.gh__chip:hover{ color: var(--active-ink); border-color: var(--accent-2); background: var(--hover); }
.gh__count{
  position:absolute; top:-5px; right:-5px;
  min-width:19px; height:19px; padding:0 5px;
  border-radius:10px;
  background: var(--accent); color:#fff;
  font-family:'Inter',system-ui,sans-serif;
  font-size:10px; font-weight:700; line-height:19px; text-align:center;
  border: 2px solid var(--panel);
}
/* theme-toggle: иконки переключаются вместе с темой страницы */
.gh__toggle-sun, .gh__toggle-moon{ position:absolute; }
.gh__toggle-moon{ display:none; }
html[data-theme="dark"] .gh__toggle-sun{ display:none; }
html[data-theme="dark"] .gh__toggle-moon{ display:block; }

/* ── 8. Бургер ──────────────────────────────────────────────────────── */
.gh__burger{ display:none; }
.gh__burger-box{ position:relative; display:block; width:18px; height:12px; }
.gh__burger-box i{
  position:absolute; left:0; width:100%; height:2px; border-radius:2px;
  background: currentColor;
  transition: transform .28s var(--gh-ease), opacity .18s linear;
}
.gh__burger-box i:nth-child(1){ top:0 }
.gh__burger-box i:nth-child(2){ top:5px }
.gh__burger-box i:nth-child(3){ top:10px }
.gh__burger[aria-expanded="true"] .gh__burger-box i:nth-child(1){ transform: translateY(5px) rotate(45deg) }
.gh__burger[aria-expanded="true"] .gh__burger-box i:nth-child(2){ opacity:0 }
.gh__burger[aria-expanded="true"] .gh__burger-box i:nth-child(3){ transform: translateY(-5px) rotate(-45deg) }

/* ── 9. Dropdown «Контакты» ─────────────────────────────────────────── */
.gh__dropdown{
  position:absolute; top: calc(100% + 12px); right:0;
  /* фиксированная геометрия: не наследует ширину узкой кнопки «Контакты» */
  width: 360px; min-width: 360px; max-width: calc(100vw - 32px);
  padding: 8px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: var(--drop-shadow);
  z-index: 5;
}
.gh__dropdown[hidden]{ display:none; }

/* Список быстрых контактов (dropdown + drawer) — только раскладка.
   Сами карточки — единый компонент .contacts-item (style.css, эталон
   главной страницы): иконки, цвета, стекло, hover и скругления идентичны. */
/* Раскладка списка: колонка. Ширину задаёт контекст (dropdown = 360px,
   drawer = 100% панели) — базовый width:100% здесь ломал бы dropdown,
   т.к. он position:absolute и брал бы ширину узкой кнопки «Контакты». */
.gh-contact-list{ display:flex; flex-direction:column; gap:10px }
.gh-contact-list > .contacts-item{ width:100% }
.gh-drawer .gh-contact-list{ width:100% }

/* ── 10. Tablet и mobile ────────────────────────────────────────────── */
@media (max-width: 1199px){
  .gh__nav, .gh__contacts, .gh__cta{ display:none }
  .gh__actions{ grid-column: 3 }
  .gh__burger{ display:inline-flex }
}
@media (max-width: 767px){
  .gh__plate{ width:38px; height:38px; border-radius:11px }
  .gh__mark{ width:27px; height:27px }
  .gh__chip{ width:42px; height:42px; border-radius:13px }
  .gh__actions{ gap:8px }
}
@media (max-width: 359px){
  .gh__brand{ gap:9px }
  .gh__brand-text b{ font-size:13px }
  .gh__brand-text em{ font-size:9.5px }
  .gh__actions{ gap:6px }
}

/* ── 10a. Журнал: theme-toggle в мобильной/планшетной шапке ──────────────
   Кнопка стоит в ряду «theme-toggle | корзина | burger» и должна выглядеть
   ровно как корзина. На ≤767px легаси-правило .journal-index-page
   .journal-theme-toggle (0,2,0) перебивало .gh__chip и давало 38px/круг —
   перебиваем адресно тем же весом (0,2,0), но позже по каскаду.
   Блок действует только ≤1199px, поэтому desktop-вид не меняется.
   Логика темы, state и listener — общие с desktop (один [data-theme-toggle]). */
@media (max-width: 1199px){
  .gh .journal-theme-toggle{
    width: 45px; height: 45px;
    /* сбрасываем легаси flex:0 0 38px — иначе flex-basis держит ширину 38px */
    flex: 0 0 auto;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    background: var(--chip);
    box-shadow: inset 0 1px 0 var(--sheen);
    color: var(--ink);
  }
  .gh .journal-theme-toggle:hover{
    color: var(--active-ink);
    border-color: var(--accent-2);
    background: var(--hover);
  }
}
@media (max-width: 767px){
  .gh .journal-theme-toggle{ width: 42px; height: 42px; border-radius: 13px }
}

/* ── 11. Drawer — продолжение маркизы ───────────────────────────────── */
.gh-drawer{
  position: fixed;
  inset: 0;
  z-index: var(--gh-z-drawer);
}
.gh-drawer[hidden]{ display:none }
.gh-drawer__backdrop{
  position:absolute; top: var(--gh-h); left:0; right:0; bottom:0;
  background: rgba(16,12,26,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity:0; transition: opacity .26s var(--gh-ease);
  border:0; padding:0; cursor:default;
}
.gh-drawer__panel{
  position:absolute;
  top: var(--gh-h); left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:16px;
  padding: 16px var(--gh-pad) calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
          backdrop-filter: blur(20px) saturate(120%);
  border-top: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--sheen);
  overflow-y:auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(-10px); opacity:0;
  transition: transform .3s var(--gh-ease), opacity .22s var(--gh-ease);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))){
  .gh-drawer__panel{ background: #F8F6FC }
  body.bots-light .gh-drawer__panel,
  html[data-theme="dark"] .gh-drawer__panel{ background: #0C0814 }
}
.gh-drawer.is-open .gh-drawer__backdrop{ opacity:1 }
.gh-drawer.is-open .gh-drawer__panel{ transform: translateY(0); opacity:1 }

.gh-drawer__nav{ display:flex; flex-direction:column; gap:2px }
.gh-drawer__link{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px;
  width:100%; min-height:56px; padding:0 14px; border-radius:13px;
  font-family:'Unbounded',sans-serif; font-size:16px; font-weight:600; line-height:1.2;
  color:var(--ink); text-decoration:none;
  transition: background-color .18s var(--gh-ease), color .18s var(--gh-ease);
}
.gh-drawer__link:hover{ background: var(--hover) }
.gh-drawer__link--active{
  background:var(--active-bg); color:var(--active-ink);
  box-shadow: inset 0 1px 0 var(--sheen);
}
.gh-drawer__link svg{ color: var(--ink-3); flex-shrink:0 }
.gh-drawer__link--active svg{ color: var(--active-ink) }

.gh-drawer__cta{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:54px; border-radius:16px;
  font-family:'Inter',system-ui,sans-serif; font-size:15px; font-weight:700;
  color:#fff; text-decoration:none;
  background: linear-gradient(135deg,#6D28D9,#8B5CF6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 8px 22px rgba(109,40,217,.24);
}
.gh-drawer__title{
  margin:0 0 8px; padding:0 2px;
  font-family:'Unbounded',sans-serif; font-size:13px; font-weight:700; line-height:1;
  color:var(--ink-3);
}
/* Состояние «drawer открыт» */
body.gh-drawer-open{ overflow: hidden }
body.gh-drawer-open .mobile-bottom-nav,
body.gh-drawer-open .lari,
body.gh-drawer-open .lari-panel,
body.gh-drawer-open .lari-fab,
body.gh-drawer-open .bd-lari,
body.gh-drawer-open .mob-sticky-cta,
body.gh-drawer-open .page-subnav{ display: none !important }

/* ── 12. focus-visible ──────────────────────────────────────────────── */
.gh a:focus-visible, .gh button:focus-visible,
.gh-drawer a:focus-visible, .gh-drawer button:focus-visible{
  outline:2px solid var(--accent-2); outline-offset:3px; border-radius:14px;
}

/* ── 13. reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  .gh, .gh__cta, .gh__chip, .gh__link, .gh__chev,
  .gh__burger-box i,
  .gh-drawer__backdrop, .gh-drawer__panel{ transition-duration:.01ms !important }
  .gh-drawer__panel{ transform:none }
}

/* ══════════════════════════════════════════════════════════════════════
   14. ИНТЕГРАЦИЯ СО СТРАНИЦАМИ
   Локальный subnav — строго под маркизой, отдельным уровнем.
   Top-offsets приводятся к единой высоте --gh-h.
   ══════════════════════════════════════════════════════════════════════ */
.page-subnav{ top: var(--gh-h) }
body.bots-light .page-subnav.bd-snav{ top: var(--gh-h) }

/* Журнал и статьи */
.journal-page main{ padding-top: var(--gh-h) }
@media (max-width: 767px){
  .journal-page main{ padding-top: var(--gh-h) }
  .journal-index-page main#journal-content{ padding-top: var(--gh-h) }
}
/* Skip-link — над шапкой, вне потока, виден только при фокусе */
.journal-skip{ z-index: var(--gh-z-skip) }
.journal-skip:focus-visible{ translate: 0 }

/* Статья на blog.css (body.jrnl) */
body.jrnl .art-shell{ padding-top: var(--gh-h) }

/* Страница Примеров: сцена целиком начинается строго под шапкой.
   Элементы сцены позиционированы absolute от .showroom, поэтому
   смещаем сам контейнер, а высоту уменьшаем на высоту шапки —
   полноэкранное ощущение сохраняется, визуал не обрезается. */
body.examples-page .showroom{
  box-sizing: border-box;
  margin-top: var(--gh-h);
  height: calc(100vh - var(--gh-h));
  min-height: calc(760px - var(--gh-h));
}
@media (max-width: 767px){
  body.examples-page .showroom{ min-height: 0 }
}

/* Главная: якоря учитывают шапку + локальный subnav */
body.home-page section[id],
body.home-page #addons{ scroll-margin-top: calc(var(--gh-h) + 58px) }
@media (max-width: 767px){
  body.home-page section[id],
  body.home-page #addons{ scroll-margin-top: calc(var(--gh-h) + 52px) !important }
}