/* Высоты строк хедера — фиксированные константы дизайна.
   Контент центрируется внутри строки, а не задаёт её высоту.
   Меняешь дизайн шапки — правишь токен здесь. */
:root { --row1-h: 64px; --row2-h: 0px; }
@media (min-width: 640px) { :root { --row1-h: 90px; } }
@media (min-width: 1024px) { :root { --row2-h: 52px; } }

.header-row1 { height: var(--row1-h); display: flex; align-items: center; }
.header-main { height: var(--row2-h); display: flex; align-items: center; }

/* Фон хедера */
.header-bg { background: var(--c-secondary); }

/* Прозрачный хедер поверх hero-видео на главной и hero калькулятора */
body[data-template="index"] .header-bg,
body[data-template="calculate"] .header-bg,
body[data-template="service"] .header-bg { background: transparent; }
body:has(#siteMenu.is-open) .header-bg { background: var(--c-secondary); }
body[data-template="index"] [data-block="main-hero"],
body[data-template="calculate"] [data-block="simple-hero"],
body[data-template="service"] [data-block="service-hero"] { margin-top: calc(-1 * (var(--row1-h) + var(--row2-h))); }

/* Прилипшая строка навигации при скролле — белая, текст тёмный */
body[data-template="index"] .header-main.is-stuck,
body[data-template="calculate"] .header-main.is-stuck,
body[data-template="service"] .header-main.is-stuck { background: #fff; color: #000; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Кнопка "Скачать прайс" — фон primary при наведении */
.btn-price-download { color: var(--c-primary); transition: background-color .25s ease, color .25s ease; }
.btn-price-download:hover { background: var(--c-primary); color: white; }

/* Hamburger menu */
.hamburger { display: flex; flex-direction: column; gap: 4px; width: 100%; height: 100%; justify-content: center; align-items: center; }
.hamburger-line { display: block; width: 24px; height: 2px; background: currentColor; transition: all 0.3s ease; }
.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Сдвиг крестика привязан к высоте линии и зазору — на узких экранах бургер мельче */
@media (min-width: 480px) {
    .hamburger { gap: 5px; }
    .hamburger-line { width: 32px; height: 3px; }
    .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* Меню. Разметка одна на оба вида (см. header.html), вид целиком задаётся здесь:
   до 1024px — выезжающая панель с аккордеонами, от 1024px — строка с выпадающими панелями. */

/* --- Мобильный вид (база) --- */
.site-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
    flex-direction: column; max-height: calc(100svh - var(--header-height, 100px));
    background: var(--c-bg); color: var(--c-dark);
    border-top: 1px solid var(--c-light); box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
}
.site-menu.is-open { display: flex; }

.menu-city { flex-shrink: 0; padding: 1rem; border-bottom: 1px solid var(--c-light); }
.menu-city .city-trigger { background: var(--c-light); border-color: var(--c-light); color: var(--c-dark); }
.menu-city .fa-chevron-down { color: var(--c-muted); }

.menu-list { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.menu-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem 1rem; border-radius: .25rem; cursor: pointer; }
.menu-head:hover { background: #f3f4f6; }
.menu-link, .mega-trigger { font-size: .875rem; font-weight: 500; text-transform: uppercase; }
.menu-chevron { font-size: .75rem; transition: transform .2s ease; }
.menu-item.is-open > .menu-head .menu-chevron { transform: rotate(180deg); }

/* Панели раскрываются по клику: класс вешает header.js на сам пункт */
.megamenu, .submenu { display: none; }
.menu-item.is-open > .megamenu, .menu-item.is-open > .submenu { display: block; }

.megamenu-close { display: none; }
.megamenu-body { margin-top: .75rem; }
/* Каталог в мегаменю: плитки категорий, а у двухуровневого — список родителей и плитки детей.
   Разметка одна на оба вида; до 1024px колонка-список не нужна — панели идут подряд со своими заголовками. */
.mm-tiles { display: grid; gap: .75rem; padding: .75rem 1rem; border-radius: .5rem; background: var(--c-light); }
.mm-tile, .mm-cat-link { font-size: .875rem; font-weight: 600; color: var(--c-dark); }
.mm-cat-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mm-cat-link .fa-chevron-right { font-size: .625rem; opacity: .4; }
.mm-cats { display: none; }
.mm-panels { display: grid; gap: 1rem; }
.mm-panel-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: 1.125rem; font-weight: 700; color: var(--c-dark); }
.mm-panel-head .fa-folder-open { color: var(--c-primary); }
/* Ссылка есть не у всякой категории: без href это просто подпись, а не кликабельный пункт */
.mm-tile[href]:hover, .mm-cat-link[href]:hover, .mm-panel-head[href]:hover { opacity: .8; }
/* Кадр плитки: картинка либо заглушка того же размера — иначе плитки без фото разъезжаются */
.mm-kadr { display: none; }
@media (min-width: 640px) { .mm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Подвал: пара про сам каталог в одну строку, подпункты пункта — отдельными строками под ней */
.megamenu-foot { display: flex; flex-direction: column; gap: .5rem; margin-top: .375rem; }
.megamenu-main { display: flex; gap: .5rem; }
.megamenu-main .megamenu-link { flex: 1; }
.megamenu-link { padding: .75rem; text-align: center; font-size: .875rem; font-weight: 500; border-radius: .5rem; background: var(--c-primary); color: #fff; }

.submenu { padding-top: .25rem; }
.submenu-link { display: block; padding: .5rem 2rem; border-radius: .25rem; font-size: .875rem; color: var(--c-dark); }
.submenu-link:hover { background: #f3f4f6; }

.menu-call { flex-shrink: 0; padding: 1rem; border-top: 1px solid var(--c-light); }

/* --- Десктоп --- */
@media (min-width: 1024px) {
    .site-menu {
        display: block; position: static; max-height: none;
        background: none; color: inherit; border-top: 0; box-shadow: none;
    }
    .menu-city, .menu-call { display: none; }

    .menu-list { flex-direction: row; align-items: center; justify-content: space-between; gap: 0; padding: 0; overflow: visible; text-transform: uppercase; font-size: 1.125rem; }
    .menu-item { position: static; }
    .menu-item--sub { position: relative; }
    .menu-head { padding: 0; border-radius: 0; gap: .25rem; cursor: default; }
    .menu-head:hover { background: none; }
    .menu-head:hover .menu-link, .menu-head:hover .mega-trigger { opacity: .8; }
    .menu-link, .mega-trigger { font-size: inherit; font-weight: 400; }
    .menu-item:hover > .menu-head .menu-chevron { transform: rotate(180deg); }

    /* Панель лежит внутри своего <li>, поэтому li:hover держит её открытой,
       пока курсор идёт от заголовка вниз по меню. Пунктов с мегаменю может быть несколько. */
    .megamenu {
        display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
        visibility: hidden; opacity: 0; transition: all .2s ease;
        max-height: calc(100vh - var(--row1-h) - var(--row2-h)); overflow: hidden;
        padding: 1rem 1rem 0; text-transform: none; font-size: 1rem;
        background: var(--c-bg); color: var(--c-dark);
        border-top: 1px solid var(--c-light); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
    }
    .menu-item:hover > .megamenu { visibility: visible; opacity: 1; }
    /* Закрытие крестиком: держим меню скрытым, пока курсор не покинет всю строку навигации */
    .header-main.megamenu-closed .megamenu { visibility: hidden; opacity: 0; }
    /* Прилипшая навигация (row1 уже вне вьюпорта) — высота считается без row1-h, иначе снизу пустая полоса */
    .header-main.is-stuck .megamenu { max-height: calc(100vh - var(--row2-h)); }
    /* Пока меню открыто — не даём фону скроллиться сквозь него */
    body:has(.header-main .menu-item:hover > .megamenu) { overflow: hidden; }

    .megamenu-close {
        display: flex; position: absolute; top: 1rem; right: 1rem; width: 2rem; height: 2rem; z-index: 10;
        align-items: center; justify-content: center; border-radius: 9999px; cursor: pointer; color: var(--c-dark);
    }
    .megamenu-close:hover { background: rgba(0,0,0,.05); }
    .megamenu-body { flex: 1; min-height: 0; overflow-y: auto; margin: 0 auto; padding: 0 2.5rem 1rem 0; width: 100%; max-width: 80rem; }
    .mm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.5rem; padding: 0; background: none; }
    /* Список и панели — две независимые колонки: панель не растягивает строки списка,
       и высота блока не скачет при переходе от пункта к пункту. */
    .mm-nested { display: flex; gap: 1.5rem; }
    .mm-cats { display: block; width: 17rem; flex: none; padding: 0; background: none; border-right: 1px solid var(--c-light); }
    .mm-cat-link { padding: .625rem 1.5rem .625rem 0; }
    .mm-cats > li.is-active .mm-cat-link { color: var(--c-primary); }
    .mm-cats > li.is-active .fa-chevron-right { opacity: 1; }
    .mm-panels { flex: 1; min-width: 0; }
    .mm-panel { display: none; }
    .mm-panel.is-active { display: block; }
    .mm-panel-head { margin-bottom: .75rem; }
    /* Подпись плитки лежит на нижней части кадра и не занимает отдельной строки */
    .mm-tile { display: block; position: relative; }
    .mm-kadr { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: .25rem; object-fit: cover; }
    /* Товар снят квадратом — каталог магазина показываем в тех же пропорциях */
    .megamenu--square .mm-kadr { aspect-ratio: 1; }
    .mm-kadr--empty { display: flex; align-items: center; justify-content: center; background: var(--c-light); color: var(--c-muted); font-size: 1.5rem; opacity: .6; }
    .mm-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.25rem .5rem .375rem; color: #fff; border-radius: 0 0 .25rem .25rem; background: linear-gradient(to top, rgba(0,0,0,.8), transparent); }
    .megamenu-foot { flex: none; flex-direction: row; gap: 1rem; margin: 0 auto; padding: 1rem 0; width: 100%; max-width: 80rem; justify-content: flex-end; align-items: center; border-top: 1px solid var(--c-light); }
    .megamenu-main { display: contents; }
    .megamenu-main .megamenu-link { flex: none; }
    .megamenu-link { padding: 0; font-size: .875rem; border-radius: 0; background: none; color: var(--c-primary); }
    .megamenu-link:hover { text-decoration: underline; }

    .submenu {
        display: block; position: absolute; right: 0; top: 100%; z-index: 50; min-width: 180px; padding-top: .75rem;
        visibility: hidden; opacity: 0; transition: all .2s ease; text-transform: none;
    }
    .menu-item--sub:hover > .submenu { visibility: visible; opacity: 1; }
    .submenu > li { background: var(--c-dark); border-left: 4px solid var(--c-primary); box-shadow: 0 20px 25px -5px rgba(0,0,0,.1); overflow: hidden; }
    .submenu-link { padding: .625rem 1.25rem; font-size: 1rem; color: #fff; border-radius: 0; }
    .submenu-link:hover { background: rgba(255,255,255,.1); }
}
/* Пятая колонка — только там, где нет бокового списка родителей: в панели она уже тесная */
@media (min-width: 1280px) { .megamenu-body > .mm-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Наводимая зона пункта с мегаменю — ровно по высоте строки меню (--row2-h), без выхода за неё */
.mega-trigger { position: relative; }
.mega-trigger::after { content: ""; position: absolute; left: -20px; right: -20px; top: 50%; height: var(--row2-h); transform: translateY(-50%); }

/* Утилиты вместо bracket-классов Tailwind */
.hover-primary:hover { color: var(--c-primary); }
.lh-tight { line-height: 1.2; }