/* ============================================================================================
   Каркас телефона (UX-2.5): шапка с тремя значками, нижняя панель TabBar, панель действий ActionBar,
   отступ страницы под панелями и слои. Подключается после ds-components.css.
   Только переменные токенов (псевдонимы style.css и --wp--preset--*, --wp--custom--*): без цветовых
   литералов, без принудительных приоритетов, без внешних адресов. Родительская тема и плагины не меняются.

   Слои (z-index): нижнее меню (TabBar) 30, панель действий (ActionBar) 31, окно конфигуратора 1000 (задаёт плагин
   конфигуратора; его CSS в этом репозитории не лежит, значение 1000 взято из родительского style.css). Оверлей меню
   сайта (меню WordPress) своего слоя не получает: у него штатный слой ядра.
   Панели прячутся, пока открыто меню, виден конфигуратор, на экране форма заявки или в поле ввода
   фокус, поэтому перекрытия между ними на деле не возникает: слои лишь страхуют порядок.
   ============================================================================================ */

:root {
  --ag-z-tabbar: 30;
  --ag-z-actionbar: 31;
  /* Высота панели действий: отступы сверху и снизу, кнопка и верхняя граница 1 px. */
  --ag-actionbar-h: calc(var(--sp-10) + var(--sp-10) + var(--btn-m) + 1px);
  /* Родитель берёт эту переменную для собственной закреплённой панели; у нас её роль выполняет ActionBar. */
  --mobile-cta-height: var(--ag-actionbar-h);
}

/* На компьютере нижних панелей и значков телефона нет (макет компьютера — UX-2.6). */
.ag-tabbar, .ag-header-actions { display: none; }

/* ---------- 1. Шапка телефона: знак, три значка (звонок, WhatsApp, Telegram) и меню ---------- */
/* Граница 599 px — та же, где ядро WordPress переключает меню на оверлей. Выше — разметка родителя (меню в строку, телефоны). */
@media (max-width: 599px) {
  .site-header { align-items: center; display: flex; flex-wrap: nowrap; gap: var(--sp-4); justify-content: space-between; padding: var(--sp-8) var(--sp-12) var(--sp-8) var(--sp-16); }
  /* Строка региона не помещается рядом с четырьмя кнопками: на телефоне скрыта (есть в первом экране). */
  .site-header .brand-region { display: none; }
  .site-header .brand { flex: 0 1 auto; min-width: 0; order: 1; }
  .site-header .brand-word, .site-header .brand-word a { font-size: 16px; }
  .site-header .header-phone { display: none; }
  .site-header > nav { flex: none; order: 3; }

  .ag-header-actions { align-items: center; display: flex; flex: none; gap: var(--sp-6); margin-left: auto; order: 2; }
  /* Все значки — зона касания hit-min (44 px); подпись — aria-label ссылки. Значок мессенджера рисует родительский ::before (маска). */
  .ag-header-actions a {
    align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius-pill); box-sizing: border-box; color: var(--ink); display: inline-flex;
    flex: none; font-size: 0; height: var(--hit-min); justify-content: center; min-height: var(--hit-min); min-width: var(--hit-min); padding: 0; text-decoration: none; width: var(--hit-min);
  }
  .ag-header-actions a:hover { background: var(--fill-tag); }
  .ag-header-actions a.header-call { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
  .ag-header-actions a.header-call:hover { background: var(--ink); opacity: .88; }
  .ag-header-actions a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

  /* Кнопка «Меню» — значок без подписи (подпись «Открыть меню» у кнопки ядра есть в aria-label), квадрат hit-min. */
  .site-header .wp-block-navigation__responsive-container-open {
    align-items: center; background: transparent; border: 1.5px solid var(--ink); border-radius: var(--radius-lg); box-sizing: border-box; color: var(--ink); display: flex;
    flex: none; gap: 0; height: var(--hit-min); justify-content: center; min-height: var(--hit-min); min-width: var(--hit-min); padding: 0; width: var(--hit-min);
  }
  .site-header .wp-block-navigation__responsive-container-open svg { display: block; height: 24px; width: 24px; }
  .site-header .wp-block-navigation__responsive-container-open::before,
  .site-header .wp-block-navigation__responsive-container-open::after { content: none; }
}
/* 320–358 px: знак меньше, поля и промежутки уже, чтобы четыре кнопки по 44 px не налезали на знак. */
@media (max-width: 358px) {
  .site-header { gap: var(--sp-4); padding-left: var(--sp-8); padding-right: var(--sp-8); }
  .site-header .brand-word, .site-header .brand-word a { font-size: 14px; }
  .ag-header-actions { gap: var(--sp-4); }
}

/* ---------- 2. Нижние панели телефона ---------- */
@media (max-width: 720px) {
  /* Отступ страницы = высоты видимых панелей + безопасная зона. Что видно, считают переменные на body: по умолчанию виден TabBar,
     а ActionBar добавляется на страницах, где он есть (главная, «Откатные ворота»), и пропадает вместе с панелями в состояниях ниже. */
  body {
    --ag-tabbar-now: var(--tabbar-h);
    --ag-action-now: 0px;
    padding-bottom: calc(var(--ag-tabbar-now) + var(--ag-action-now) + env(safe-area-inset-bottom, 0px));
  }
  body:has(.ag-actionbar) { --ag-action-now: var(--ag-actionbar-h); }
  /* Кнопки первого экрана ещё на виду: ActionBar скрыт (признак ставит sticky-cta.js родителя), TabBar остаётся. */
  html[data-avtogates-sticky-cta="pending"] body { --ag-action-now: 0px; }
  /* Обе панели скрыты: виден конфигуратор (признак ставит сам конфигуратор), на экране форма заявки (assets/js/bars.js),
     открыто меню, в поле ввода фокус (на телефоне открыта клавиатура). */
  html[data-avtogates-configurator-visible="true"] body,
  html[data-ag-form-visible="true"] body,
  body:has(.wp-block-navigation__responsive-container.is-menu-open),
  body:has(:is(input, select, textarea):focus) { --ag-tabbar-now: 0px; --ag-action-now: 0px; }

  /* Те же состояния — для самих панелей. */
  html[data-avtogates-configurator-visible="true"] body :is(.ag-tabbar, .mobile-cta.ag-actionbar),
  html[data-ag-form-visible="true"] body :is(.ag-tabbar, .mobile-cta.ag-actionbar),
  html[data-avtogates-sticky-cta="pending"] body .mobile-cta.ag-actionbar,
  body:has(.wp-block-navigation__responsive-container.is-menu-open) :is(.ag-tabbar, .mobile-cta.ag-actionbar),
  body:has(:is(input, select, textarea):focus) :is(.ag-tabbar, .mobile-cta.ag-actionbar) { display: none; }

  /* TabBar (пять вкладок, «Расчёт» — оранжевая плашка). */
  .ag-tabbar {
    background: var(--surface-raised); border-top: 1px solid var(--line); bottom: 0; box-sizing: border-box; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); left: 0; padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px)); position: fixed; right: 0; z-index: var(--ag-z-tabbar);
  }
  .ag-tab { -webkit-tap-highlight-color: transparent; align-items: center; border-radius: var(--radius-md); color: var(--ink-muted); display: flex; flex-direction: column; font-size: 11px; font-weight: 500; gap: var(--sp-4); justify-content: center; line-height: 14px; min-height: var(--hit-min); text-decoration: none; }
  .ag-tab svg { display: block; flex: none; }
  .ag-tab[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .ag-tab-primary { color: var(--ink); font-weight: 600; }
  .ag-tab-pill { align-items: center; background: var(--accent); border-radius: var(--radius-sm); color: var(--on-accent); display: flex; height: 30px; justify-content: center; width: var(--hit-min); }
  .ag-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

  /* ActionBar: закреплён прямо над TabBar, фон bar-glass. Это тот же блок .mobile-cta, что у родителя (аналитика считает его зоной
     «mobile», sticky-cta.js меняет «Рассчитать» на «Зафиксировать цену»); правила родителя перекрыты большей специфичностью. */
  body .mobile-cta.ag-actionbar {
    align-items: stretch; background: var(--bar-glass); border-top: 1px solid var(--line); bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); box-shadow: none; box-sizing: border-box;
    display: flex; gap: var(--sp-10); height: var(--ag-actionbar-h); left: 0; margin: 0; padding: var(--sp-10) var(--sp-16); position: fixed; right: 0; width: auto; z-index: var(--ag-z-actionbar);
  }
  .ag-actionbar .wp-block-button { flex: 1 1 0; margin: 0; min-width: 0; }
  .ag-actionbar .wp-block-button__link { box-sizing: border-box; height: 100%; min-height: var(--btn-m); width: 100%; }
  /* Одна primary («Рассчитать»); «Позвонить» — тёмная, как в ActionBar дизайн-системы. */
  .ag-actionbar .wp-block-button:first-child .wp-block-button__link { background: var(--ink); border: 0; color: var(--on-ink); }

  /* Плавающие кнопки родителя «Наверх» и «К конфигуратору» на телефоне не нужны: у TabBar и ActionBar те же переходы. */
  body .avtogates-floating-shortcuts { display: none; }
}