/* Ochag — 05-header.css
   Шапка: отточенный десктоп + полноценное мобильное меню на чистом CSS
   (checkbox-hack, без JS). Тёплый минимализм, токены §2, motion §6 плейбука.
   Подхватывается авто-глобом между 00-base.css и 10-hero.css.
   Переопределяет старые header-правила из 00-base.css (00-base не редактируем). */

/* ============================================================
   БАЗА ШАПКИ (sticky сохраняем, hairline снизу — как в 00-base)
   ============================================================ */
.ochag-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Вертикальный ритм задаём переменной, чтобы .is-scrolled её ужимал.
     (Инлайн-padding из header.html убран — управляем только отсюда.) */
  --ochag-header-pad: 1rem;
  padding-block: var(--ochag-header-pad);
  border-bottom: 1px solid var(--wp--preset--color--line);
  /* Плавное «сжатие» + лёгкая опора при скролле — остаёмся на hairline. */
  transition:
    padding var(--dur-base) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    background-color var(--dur-base) var(--ease-standard);
}

/* Живое скролл-поведение: класс навешивает motion.js (прогрессивное усиление).
   Без JS шапка полностью функциональна — просто без сжатия. */
.ochag-header.is-scrolled {
  --ochag-header-pad: 0.55rem;
  border-bottom-color: var(--wp--preset--color--line-strong);
  /* Опора — очень мягкая тёплая тень (фон остаётся paper: WP держит
     .has-paper-background-color с !important, поэтому surface тут не навязываем). */
  box-shadow: var(--shadow-soft);
}

/* Пока меню открыто — поднимаем стекинг-контекст шапки выше плавающей
   Telegram-кнопки (200) и sticky-бара (150), чтобы оверлей (z-index 300)
   гарантированно был поверх всего. */
.ochag-header:has(.ochag-nav-toggle:checked) {
  z-index: 300;
}

/* Раскладку строки задаём ЯВНО в CSS, не полагаясь на WP-классы is-layout-flex
   (WP их иногда не эмитит для этой группы). Два ребёнка в потоке: слева
   .ochag-brand, справа .ochag-nav (или бургер на мобайле) — space-between.
   Чекбокс/бургер/оверлей — вне потока или display:none, в раскладке не участвуют. */
.ochag-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-s);
  position: relative;
}

/* ============================================================
   ЛОГО-ЛОКАП: знак-марка (терракота) + вордмарк «Ochag»
   ============================================================ */
.ochag-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  -webkit-tap-highlight-color: transparent;
}
/* Знак-марка — единственный носитель терракоты в лого; масштабируется классом,
   поэтому реальный лого встанет на его место без правок разметки. */
.ochag-brand__mark {
  display: inline-flex;
  flex: none;
  color: var(--wp--preset--color--accent);
  transition: transform var(--dur-base) var(--ease-emphasized);
}
.ochag-brand__mark svg {
  display: block;
}
.ochag-brand__mark-img {
  display: block;
  height: 28px;
  width: auto;
}
.ochag-brand__word {
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 700;
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.28rem);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--wp--preset--color--ink);
  transition: color var(--dur-fast) var(--ease-standard);
}
.ochag-brand:hover .ochag-brand__word,
.ochag-brand:focus-visible .ochag-brand__word {
  color: var(--wp--preset--color--accent-dark);
}
.ochag-brand:hover .ochag-brand__mark {
  transform: rotate(-4deg) scale(1.04);
}
.ochag-brand:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 6px;
  border-radius: var(--radius);
}

/* ============================================================
   ДЕСКТОП-НАВИГАЦИЯ
   ============================================================ */
/* Полный сайтмап (6 пунктов) + CTA в одну строку — телефон живёт в мобильном
   оверлее и футере, поэтому в десктоп-строке его нет. Гэп между блоком ссылок
   и CTA. */
.ochag-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Ряд пунктов навигации. Раньше flex+gap эмитил WP (is-layout-flex/wp-container-*)
   из блочной разметки header.html; теперь шапка — наш PHP-рендер без этих классов,
   поэтому раскладку задаём явно (blockGap был 1.25rem). */
.ochag-nav__links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
/* <p>-обёртки пунктов — сбрасываем блочные отступы, чтобы не сбивали ряд. */
.ochag-nav__links p {
  margin: 0;
}

/* Ссылки: аккуратный «прорисовывающийся» слева-направо андерлайн. */
.ochag-nav__links a {
  position: relative;
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  font-weight: 500;
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.ochag-nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--wp--preset--color--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-fast) var(--ease-out);
}
.ochag-nav__links a:hover,
.ochag-nav__links a:focus-visible {
  color: var(--wp--preset--color--accent-dark);
}
.ochag-nav__links a:hover::after,
.ochag-nav__links a:focus-visible::after {
  transform: scaleX(1);
}
/* Активная страница (если тема проставит aria-current — статично без JS) */
.ochag-nav__links a[aria-current]:not([aria-current="false"]) {
  color: var(--wp--preset--color--accent-dark);
}
.ochag-nav__links a[aria-current]:not([aria-current="false"])::after {
  transform: scaleX(1);
}
.ochag-nav__links a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
  border-radius: 3px;
}

/* CTA-кнопка в шапке: терракота из theme.json, добавляем press-микроотдачу. */
.ochag-header .wp-block-button__link {
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-out);
}
.ochag-header .wp-block-button__link:active {
  transform: translateY(1px) scale(0.98);
}

/* Трейлинг-стрелка CTA: чуть уезжает вправо на hover. */
.ochag-cta__arrow {
  display: inline-block;
  margin-left: 0.5em;
  transform: translateX(0);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ochag-cta:hover .ochag-cta__arrow,
.ochag-header .wp-block-button__link:hover .ochag-cta__arrow,
.ochag-nav-overlay__cta:hover .ochag-cta__arrow {
  transform: translateX(3px);
}

/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА RU|UZ
   ============================================================ */
/* Минимал: одна ссылка «глобус + название другого языка». Тихо, терракота на ховер.
   В десктоп-шапке живёт в .ochag-nav рядом с CTA; в мобильном оверлее — строкой под CTA. */
.ochag-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--wp--preset--color--muted);
  transition: color var(--dur-fast) var(--ease-standard);
}
.ochag-lang:hover,
.ochag-lang:focus-visible {
  color: var(--wp--preset--color--accent-dark);
}
.ochag-lang__globe {
  flex: none;
  width: 18px;
  height: 18px;
  opacity: 0.9;
}
.ochag-lang__label {
  font-weight: 600;
  letter-spacing: 0.03em;
}
.ochag-lang:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
/* В оверлее — крупнее, зона тапа ≥44px. */
.ochag-nav-overlay__panel > .ochag-lang {
  min-height: 44px;
  font-size: 1.0625rem;
}
.ochag-nav-overlay__panel > .ochag-lang .ochag-lang__globe {
  width: 20px;
  height: 20px;
}

/* ============================================================
   БУРГЕР + ЧЕКБОКС (скрыты на десктопе)
   ============================================================ */
/* Сам чекбокс — визуально спрятан, но фокусируем (Space открывает меню). */
.ochag-nav-toggle {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  border: 0;
  transform: translateY(-50%);
  -webkit-appearance: none;
  appearance: none;
  pointer-events: none;
}

.ochag-burger {
  display: none; /* по умолчанию скрыт — включим в мобильной медиа */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px;                 /* компенсируем зону тапа, не раздувая шапку */
  cursor: pointer;
  color: var(--wp--preset--color--ink);
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.ochag-burger:hover {
  color: var(--wp--preset--color--accent-dark);
}
/* Фокус-кольцо на бургере, когда сфокусирован спрятанный чекбокс. */
.ochag-nav-toggle:focus-visible + .ochag-burger {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.ochag-burger__box {
  position: relative;
  display: block;
  width: 24px;
  height: 16px;
}
/* Средняя линия + две псевдолинии = три штриха бургера. */
.ochag-burger__lines,
.ochag-burger__lines::before,
.ochag-burger__lines::after {
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--dur-base) var(--ease-emphasized),
    opacity var(--dur-fast) var(--ease-standard);
}
.ochag-burger__lines {
  top: 50%;
  transform: translateY(-50%);
}
.ochag-burger__lines::before {
  content: "";
  top: -7px;
}
.ochag-burger__lines::after {
  content: "";
  top: 7px;
}
/* Открыто: бургер превращается в крестик. */
.ochag-nav-toggle:checked + .ochag-burger .ochag-burger__lines {
  opacity: 0;
}
.ochag-nav-toggle:checked + .ochag-burger .ochag-burger__lines::before {
  top: 0;
  transform: rotate(45deg);
}
.ochag-nav-toggle:checked + .ochag-burger .ochag-burger__lines::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ============================================================
   ОВЕРЛЕЙ МОБИЛЬНОГО МЕНЮ
   ============================================================ */
.ochag-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;                 /* выше tg-float (200) и sticky-cta (150) */
  display: none;                /* включаем только в мобильной медиа */
  flex-direction: column;
  background: var(--wp--preset--color--paper);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-base) var(--ease-in),
    visibility 0s linear var(--dur-base);
}
.ochag-nav-toggle:checked ~ .ochag-nav-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--dur-base) var(--ease-out),
    visibility 0s;
}

/* Скрим-подложка (тап мимо панели закрывает меню). */
.ochag-nav-overlay__scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
  display: block;
}

/* Панель с контентом — въезжает сверху. */
.ochag-nav-overlay__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: calc(1rem + 8px) var(--gutter) var(--space-2xl);
  background: var(--wp--preset--color--paper);
  border-bottom: 1px solid var(--wp--preset--color--line);
  transform: translateY(-16px) scale(0.98);
  transform-origin: top center;
  transition: transform var(--dur-base) var(--ease-out);
}
.ochag-nav-toggle:checked ~ .ochag-nav-overlay .ochag-nav-overlay__panel {
  transform: none;
}

/* Шапка оверлея: лого-локап слева, крестик справа — на месте бургера. */
.ochag-nav-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ochag-brand--overlay .ochag-brand__word {
  font-size: 1.28rem;
}

/* Крестик — справа в шапке оверлея, зона тапа 44px без раздувания ряда. */
.ochag-nav-overlay__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;
  color: var(--wp--preset--color--muted);
  cursor: pointer;
  border-radius: var(--radius);
  transition: color var(--dur-fast) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.ochag-nav-overlay__close:hover {
  color: var(--wp--preset--color--accent-dark);
}

/* Крупные ссылки — много воздуха, вертикально, левая ось. */
.ochag-nav-overlay__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}
.ochag-nav-overlay__nav a {
  display: block;
  padding-block: var(--space-2xs);
  font-size: clamp(1.75rem, 8vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--wp--preset--color--ink);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
.ochag-nav-overlay__nav a:hover,
.ochag-nav-overlay__nav a:focus-visible {
  color: var(--wp--preset--color--accent-dark);
}
.ochag-nav-overlay__nav a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
  border-radius: var(--radius);
}

/* CTA во всю ширину. */
.ochag-nav-overlay__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.9rem 1.6rem;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  text-decoration: none;
  color: var(--wp--preset--color--on-accent);
  background: var(--wp--preset--color--accent);
  border-radius: 10px;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-out);
}
.ochag-nav-overlay__cta:hover,
.ochag-nav-overlay__cta:focus-visible {
  background: var(--wp--preset--color--accent-dark);
  color: var(--wp--preset--color--on-accent);
}
.ochag-nav-overlay__cta:active {
  transform: translateY(1px) scale(0.99);
}
.ochag-nav-overlay__cta:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-dark);
  outline-offset: 3px;
}

/* Telegram + телефон под CTA, за hairline. */
.ochag-nav-overlay__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-l);
  border-top: 1px solid var(--wp--preset--color--line);
}
.ochag-nav-overlay__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  font-size: 1.0625rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--wp--preset--color--muted);
  transition: color var(--dur-fast) var(--ease-standard);
}
.ochag-nav-overlay__contact svg {
  flex: none;
  color: var(--wp--preset--color--accent);
}
.ochag-nav-overlay__contact:hover,
.ochag-nav-overlay__contact:focus-visible {
  color: var(--wp--preset--color--ink);
}
.ochag-nav-overlay__contact:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

/* ============================================================
   БРЕЙКПОИНТЫ
   ============================================================ */
/* Узкий десктоп 1025–1180px: чуть поджимаем гэпы/трекинг ссылок, чтобы
   6 пунктов + CTA гарантированно держали одну строку без наезда. */
@media (max-width: 1180px) and (min-width: 1025px) {
  .ochag-nav {
    gap: 1.15rem;
  }
  .ochag-nav__links {
    gap: 0.9rem !important; /* перебиваем инлайновый blockGap из header.html */
  }
  .ochag-nav__links a {
    letter-spacing: -0.01em;
  }
}

/* Мобайл/планшет ≤ 1024px: 6 пунктов + CTA в строку не помещаются →
   прячем инлайн-навигацию, показываем бургер + полноэкранный оверлей.
   Специфичность .ochag-header ... гарантированно глушит правила 00-base. */
@media (max-width: 1024px) {
  .ochag-header .ochag-nav {
    display: none;
  }
  .ochag-header .ochag-burger {
    display: inline-flex;
  }
  .ochag-nav-overlay {
    display: flex;
  }
  /* Блокируем прокрутку фона, пока меню открыто (без прыжка контента). */
  html:has(.ochag-nav-toggle:checked) {
    overflow: hidden;
  }
}

/* Десктоп ≥ 1025px: бургер и оверлей недоступны в принципе. */
@media (min-width: 1025px) {
  .ochag-header .ochag-burger,
  .ochag-header .ochag-nav-toggle,
  .ochag-header .ochag-nav-overlay {
    display: none !important;
  }
  /* Возвращаем инлайн-навигацию (перебиваем старое max-width:600 из 00-base). */
  .ochag-header .ochag-nav {
    display: flex;
  }
  .ochag-header .ochag-nav__links {
    display: flex;
  }
  .ochag-header .wp-block-buttons {
    display: flex;
  }
}

/* ============================================================
   REDUCED MOTION — движение убираем, обратную связь оставляем.
   (глобальный предохранитель в 00-base уже обнуляет transition;
    здесь дублируем для ясности намерения по оверлею/бургеру.)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ochag-nav-overlay,
  .ochag-nav-toggle:checked ~ .ochag-nav-overlay,
  .ochag-nav-overlay__panel,
  .ochag-burger__lines,
  .ochag-burger__lines::before,
  .ochag-burger__lines::after,
  .ochag-nav__links a::after,
  .ochag-brand__mark,
  .ochag-cta__arrow,
  /* Сжатие при скролле остаётся — но переключается снапом, без анимации. */
  .ochag-header {
    transition: none;
  }
  .ochag-nav-overlay__panel {
    transform: none;
  }
}