/* ═══════════════════════════════════════════════════════
   ТехГазы РУ — extra.css
   Dropdown nav (4 уровня), scrolled header, reveal,
   mobile accordion, flyout
═══════════════════════════════════════════════════════ */

/* ── SCROLLED HEADER ── */
.site-header.scrolled {
  box-shadow: 0 4px 32px rgba(0, 0, 0, .45);
}

/* ══════════════════════════════════════════════════════
   DROPDOWN MENU — MULTI-LEVEL (до 4 уровней)
══════════════════════════════════════════════════════ */

/* Сброс list-style для всех уровней */
.primary-nav .nav-list,
.primary-nav .dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ── Все пункты меню ── */
.primary-nav .menu-item {
  position: relative;
  list-style: none;
}

/* ── Кнопка-триггер dropdown ── */
.primary-nav .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: rgba(255, 255, 255, .5);
  transition: color var(--transition), transform var(--transition);
  line-height: 1;
  vertical-align: middle;
}
.primary-nav .dropdown-toggle:hover {
  color: var(--white);
}

/* Top-level toggle: chevron вниз, поворот при hover/open */
.primary-nav > .nav-list > .menu-item.has-dropdown:hover > .dropdown-toggle svg,
.primary-nav > .nav-list > .menu-item.has-dropdown.dropdown-open > .dropdown-toggle svg {
  transform: rotate(180deg);
}
.primary-nav > .nav-list > .menu-item > .dropdown-toggle svg {
  transition: transform var(--transition);
}

/* Вложенный toggle (depth 1+): chevron вправо */
.primary-nav .dropdown-menu .dropdown-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px;
  color: rgba(255, 255, 255, .4);
}
.primary-nav .dropdown-menu .dropdown-toggle svg {
  transform: rotate(-90deg); /* chevron-down → chevron-right */
  transition: transform var(--transition);
}
.primary-nav .dropdown-menu .has-dropdown:hover > .dropdown-toggle {
  color: rgba(255, 255, 255, .85);
}
/* При открытом вложенном (мобайл): arrow вниз */
.primary-nav .dropdown-menu .has-dropdown.dropdown-open > .dropdown-toggle svg {
  transform: rotate(0deg);
}

/* ══════════════════════════════════════════════════════
   УРОВЕНЬ 1 — выпадает вниз от top-bar
══════════════════════════════════════════════════════ */
.primary-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  background: var(--blue-900);
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: 2px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  padding: 6px 0;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .04);
  z-index: 300;
  animation: dropFade .18s ease forwards;
}

/* Показ при hover или focus-within */
.primary-nav > .nav-list > .menu-item.has-dropdown:hover > .dropdown-menu,
.primary-nav > .nav-list > .menu-item.has-dropdown:focus-within > .dropdown-menu {
  display: block;
}

/* ══════════════════════════════════════════════════════
   УРОВНИ 2–4 — flyout вправо
══════════════════════════════════════════════════════ */
.primary-nav .dropdown-menu .dropdown-menu {
  top: -6px;
  left: 100%;
  margin-left: 4px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  animation: flyFade .18s ease forwards;
  min-width: 220px;
}

/* Flyout влево (класс добавляется JS когда нет места справа) */
.primary-nav .dropdown-menu .has-dropdown.open-left > .dropdown-menu {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 4px;
  border-left: 1px solid rgba(255, 255, 255, .1);
  border-right: 2px solid var(--accent);
  border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
  animation: flyFadeLeft .18s ease forwards;
}

/* Показ вложенных при hover/focus-within */
.primary-nav .dropdown-menu .has-dropdown:hover > .dropdown-menu,
.primary-nav .dropdown-menu .has-dropdown:focus-within > .dropdown-menu {
  display: block;
}

/* ── Ссылки внутри dropdown ── */
.primary-nav .dropdown-menu > .menu-item > .nav-link {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  padding-right: 36px; /* место под toggle-кнопку */
  font-size: 14px;
  font-weight: 500;
  color: var(--blue-200);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
  position: relative;
}
.primary-nav .dropdown-menu > .menu-item > .nav-link:hover {
  background: rgba(255, 255, 255, .07);
  color: var(--white);
  padding-left: 22px;
}
.primary-nav .dropdown-menu > .menu-item.current-menu-item > .nav-link {
  color: var(--accent-light);
  background: rgba(232, 80, 26, .08);
}
.primary-nav .dropdown-menu > .menu-item.current-menu-ancestor > .nav-link {
  color: var(--white);
}

/* Акцентная левая полоса на текущем пункте */
.primary-nav .dropdown-menu > .menu-item.current-menu-item > .nav-link::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
}

/* Разделитель — класс «nav-separator» добавляется в Классе CSS пункта в admin */
.primary-nav .dropdown-menu > .menu-item.nav-separator {
  border-top: 1px solid rgba(255, 255, 255, .08);
  margin-top: 4px;
  padding-top: 4px;
}

/* ── Визуальная индикация: пункт с подменю ── */
.primary-nav .dropdown-menu > .menu-item.has-dropdown > .nav-link {
  font-weight: 600;
}

/* ── Глубина 3 и 4: чуть меньше шрифт ── */
.primary-nav .dropdown-menu .dropdown-menu > .menu-item > .nav-link {
  font-size: 13.5px;
  padding: 9px 16px;
  padding-right: 32px;
}

/* ══════════════════════════════════════════════════════
   АНИМАЦИИ
══════════════════════════════════════════════════════ */
@keyframes dropFade {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes flyFade {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes flyFadeLeft {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════
   МОБИЛЬНЫЙ АККОРДЕОН (max 960px)
══════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  /* Dropdown — статичный аккордеон, светлые цвета для white bottom sheet */
  .primary-nav .dropdown-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--gray-100);
    border-radius: 0;
    padding: 0;
    background: var(--gray-50);
    animation: none;
    min-width: 0;
    margin: 0;
  }

  .primary-nav .dropdown-menu .dropdown-menu {
    left: auto; right: auto; margin: 0;
    border-left: none; border-right: none;
    border-radius: 0;
    background: var(--gray-100);
  }

  .primary-nav .has-dropdown.dropdown-open > .dropdown-menu { display: block; }

  /* Chevron */
  .primary-nav .dropdown-toggle svg,
  .primary-nav .dropdown-menu .dropdown-toggle svg {
    stroke: var(--gray-400);
    transform: rotate(0deg);
    transition: transform var(--transition);
  }
  .primary-nav .has-dropdown.dropdown-open > .dropdown-toggle svg {
    transform: rotate(180deg);
    stroke: var(--blue-500);
  }
  .primary-nav .dropdown-menu .dropdown-toggle {
    position: static; transform: none; vertical-align: middle;
  }

  /* Ссылки внутри dropdown — тёмный текст */
  .primary-nav .dropdown-menu > .menu-item > .nav-link {
    padding: 12px 20px 12px 28px;
    padding-right: 48px;
    font-size: 14px; font-weight: 500;
    color: var(--gray-700);
    border-radius: 0;
  }
  .primary-nav .dropdown-menu > .menu-item > .nav-link:hover {
    background: var(--blue-50); color: var(--blue-700);
  }
  .primary-nav .dropdown-menu > .menu-item.current-menu-item > .nav-link {
    color: var(--blue-600); background: var(--blue-50);
  }

  .primary-nav .dropdown-menu .dropdown-menu > .menu-item > .nav-link {
    padding-left: 40px;
  }

  .primary-nav .dropdown-menu .menu-item.has-dropdown { position: relative; }
  .primary-nav .dropdown-menu .menu-item > .dropdown-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    padding: 8px; color: var(--gray-400);
  }
  .primary-nav .dropdown-menu .menu-item.dropdown-open > .dropdown-toggle {
    transform: translateY(-50%) rotate(180deg);
  }
}

/* ══════════════════════════════════════════════════════
   REVEAL ANIMATION
══════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── NAV-OPEN BODY SCROLL LOCK ── */
body.nav-open {
  overflow: hidden;
}

/* ── PRODUCT GALLERY KEYBOARD ── */
.product-thumb:focus-visible {
  outline: 3px solid var(--blue-400);
  outline-offset: 2px;
}

/* ── WPCF7 SPINNER ── */
.wpcf7-spinner {
  margin-left: 12px;
  vertical-align: middle;
}

/* ── WPCF7 SENT / INVALID ── */
.wpcf7-mail-sent-ok {
  background: rgba(27, 142, 86, .15);
  border: 1px solid rgba(27, 142, 86, .35);
  color: #1b8e56;
  border-radius: var(--radius);
}
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
  background: rgba(232, 80, 26, .1);
  border: 1px solid rgba(232, 80, 26, .35);
  color: var(--accent);
  border-radius: var(--radius);
}

/* ── ADMIN BAR OFFSET ── */
.admin-bar .site-header {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}