/**
 * Мобільна гілка — фундамент. Полотно 402px (iPhone 17), макети Figma 138:3740 …
 * Усі правила заскоуплені під html[data-layout="mobile"] (атрибут виставляє скрипт
 * у header.php разом із --k), тому на десктоп цей файл не впливає.
 *
 * Правила гри для всієї мобільної гілки:
 *  - числа беруться з макета 402 і пишуться в px як є — zoom робить решту;
 *  - vw/vh/dvh ЗАБОРОНЕНІ: під html{zoom} вони рахуються від візуального вікна
 *    і множаться ще раз (100vw на 402 дає 93.5px);
 *  - селектор = десктопний селектор із префіксом [data-layout="mobile"], щоб
 *    специфічність завжди була на одиницю вищою за десктопну.
 */

/* ------------------------------------------------------------ Полотно */

[data-layout="mobile"] {
  /* .container = min(1366, 100% - 2*30) = 342 на полотні 402 */
  --pad: 30px;
}

/* Полотно рівно 402: на телефоні k = ширина/402, тож body займає весь екран;
   на планшеті k упирається в стелю 2.0 і колонка стоїть по центру, поля
   добираються кольором фону. */
[data-layout="mobile"] body {
  width: 402px;
  margin-inline: auto;
  overflow-x: clip;
}

/* ------------------------------------------------------------- Шапка */
/* Макет (усі 5 сторінок однакові): ряд x=30 y=55 w=342 h=38,
   логотип 70.3×38 зліва, бургер 24×24 справа (правий край 372). */

[data-layout="mobile"] .site-header { padding-top: 55px; }

[data-layout="mobile"] .site-header__inner {
  min-height: 38px;
  align-items: flex-start;
  gap: 0;
}

[data-layout="mobile"] .site-logo img { width: 70.3px; }

/* Бургер: три смуги 20×2 з кроком 6 (чорнило y 60..74 при верху боксу 55) */
[data-layout="mobile"] .nav-toggle {
  display: block;
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
/* Зона дотику 44×44 навколо іконки 24 — самої іконки не змінює */
[data-layout="mobile"] .nav-toggle::before {
  content: "";
  position: absolute;
  inset: -10px;
}
[data-layout="mobile"] .nav-toggle__bar {
  position: absolute;
  left: 2px;
  width: 20px;
  height: 2px;
  background: currentColor;
}
[data-layout="mobile"] .nav-toggle__bar:nth-child(1) { top: 5px; }
[data-layout="mobile"] .nav-toggle__bar:nth-child(2) { top: 11px; }
[data-layout="mobile"] .nav-toggle__bar:nth-child(3) { top: 17px; }

/* Панель меню (макет 175:1426): суцільний #1D1D1D без блюру, список
   по центру, перший рядок починається на 116 (ем-бокс), крок базових ліній 67.
   У фреймі логотипа немає — панель лежить поверх шапки і закриває його. */
[data-layout="mobile"] .nav { display: none; }

[data-layout="mobile"].is-menu-open .nav {
  display: grid;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-content: start;
  justify-items: center;
  row-gap: 47.8px;               /* 67 − 19.2 */
  padding-top: 113.9px;          /* ем-бокс 116 − півінтерліньяж 2.1 */
  background: var(--bg);
  overflow-y: auto;
}

[data-layout="mobile"] .nav li { line-height: 0; }

[data-layout="mobile"] .nav a {
  padding: 0;
  border-bottom: 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 19.2px;
  color: var(--ink);
}

/* Активний пункт — кольором тексту, підкреслень на мобільному немає */
[data-layout="mobile"] .nav .current-menu-item > a,
[data-layout="mobile"] .nav .current_page_item > a,
[data-layout="mobile"] .nav .current-menu-ancestor > a {
  color: var(--accent);
  border-bottom: 0;
}

/* «Закрити»: чорнило 14×14, штрих 2.5, центр (346, 58.5) — виміряно по рендеру.
   Кнопка 44×44 — зона дотику; svg 23.2 у viewBox 24 зі stroke 2.5 дає рівно це. */
[data-layout="mobile"] .nav__close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 36.5px;
  left: 324px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

/* ------------------------------------------------------------- Футер */
/* Макет (138:3740, y=9873..10443): один стовпчик від x=30. Лого 81.4×44;
   меню 15/19.2 крок 34; месенджери 15/19.2 крок 26; іконки 18 з гапом 16.8;
   контакти 12/15.4 крок 23. Виміряно по чорнилу рендера, звірено compare.py. */

[data-layout="mobile"] .site-footer { padding-bottom: 100.4px; }
[data-layout="mobile"] body.home .site-footer { padding-top: 0; }
/* На внутрішніх сторінках футера в макеті НЕМА — беремо уніфікований
   міжсекційний проміжок 135 (питання до дизайнерки зафіксовано). */
[data-layout="mobile"] body:not(.home) .site-footer { padding-top: 135px; }

[data-layout="mobile"] .site-footer__inner {
  display: grid;
  justify-content: start;
  gap: 0;
  padding-left: 0;
}

[data-layout="mobile"] .site-footer__logo { flex: none; }
[data-layout="mobile"] .site-footer__logo img { display: block; width: 81.4px; }

[data-layout="mobile"] .site-footer__nav {
  flex: none;
  gap: 14.8px;
  margin-top: 45.5px;
}
[data-layout="mobile"] .site-footer__nav a {
  font-size: 15px;
  line-height: 19.2px;
}

[data-layout="mobile"] .site-footer__messengers {
  gap: 6.8px;
  margin-top: 42.8px;
}
[data-layout="mobile"] .site-footer__messengers a {
  font-size: 15px;
  line-height: 19.2px;
}

[data-layout="mobile"] .site-footer__social {
  gap: 16.8px;
  margin-top: 14.3px;
}
[data-layout="mobile"] .site-footer__social svg {
  display: block;
  width: 18px;
  height: 18px;
}

[data-layout="mobile"] .site-footer__contacts {
  flex: none;
  gap: 7.6px;
  margin-top: 44.4px;
}
[data-layout="mobile"] .site-footer__contacts a,
[data-layout="mobile"] .site-footer__contacts p {
  font-size: 12px;
  line-height: 15.4px;
}