/* ══════════════════════════════════════════════════════════════════════
   НУЖНЫДЕНЬГИ — HEADER (эталонный экран)
   Визуальный язык: deep emerald × graphite × platinum × silver.
   Шапка — тёмный брендовый постамент с серебряными волосяными линиями,
   логотипом прямо на изумруде и спокойной типографикой навигации.
   Мобильный дровер — deep emerald фон + полупрозрачная platinum/graphite
   панель с тонкой серебряной границей и мягкой тенью (premium banking).
   Токены — из design-system.css. !important не используется.
   ══════════════════════════════════════════════════════════════════════ */

/* ── ШАПКА ─────────────────────────────────────────────────────────────── */
.site-header {
    position: relative;
    width: 100%;
    background:
        radial-gradient(680px 180px at 78% -40%, rgba(13,118,84,.55), transparent 70%),
        linear-gradient(180deg, var(--nd-emerald-900) 0%, var(--nd-emerald-950) 58%, #06251C 100%);
    border-bottom: 1px solid var(--nd-silver-line-soft);
    z-index: 1000;
    transition: background var(--nd-t) var(--nd-ease), box-shadow var(--nd-t) var(--nd-ease);
}
/* Серебряная волосяная линия по нижней кромке — «прайм-кромка» */
.site-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--nd-silver-rule-dark);
    opacity: .7;
    pointer-events: none;
}

.site-header.fixed,
.site-header.sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background:
        radial-gradient(680px 180px at 78% -40%, rgba(13,118,84,.5), transparent 70%),
        linear-gradient(180deg, rgba(7,81,58,.96) 0%, rgba(6,59,43,.96) 58%, rgba(6,37,28,.97) 100%);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
    box-shadow: 0 22px 48px -30px rgba(0,0,0,.9);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.fixed,
    .site-header.sticky { background: linear-gradient(180deg, var(--nd-emerald-900) 0%, #06251C 100%); }
}

.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 0;
    min-height: var(--nd-header-h);
    max-width: none;
    margin: 0 auto;
    position: relative;
}

.site-header.sticky .header-wrapper,
.site-header.fixed .header-wrapper { padding: 8px 0; }

/* ── БРЕНД-БЛОК: логотип + серебряный дескриптор ───────────────────────── */
/* Распределение дефицита в .header-wrapper:
   - .main-nav  — flex-shrink:0, всегда в max-content (890px), не переносит пункты;
   - .header-brand — сжимается, весь дефицит уходит в логотип;
   - .header-brand__tag — flex-shrink:0 и скрывается из includes/header.php,
     когда под него не остаётся места (как и ниже 1200px по вьюпорту). */
.header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    flex-shrink: 1;
}

/* Платиновая плита убрана: она вместе с белым фоном самого PNG давала двойную
   белую рамку вокруг логотипа. Логотип лежит прямо на изумрудном фоне шапки.
   min-width:0 + flex-shrink:1 — плита отдаёт ширину навигации, только когда
   контейнер действительно не вмещает оба блока; при запасе масштаб сохраняется. */
.site-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 1;
    z-index: 10002;
    transform: translate(var(--logo-offset-x, 0px), var(--logo-offset-y, 0px));
    transition: transform var(--nd-t) var(--nd-ease);
}
.site-logo:hover {
    transform: translate(var(--logo-offset-x, 0px), calc(var(--logo-offset-y, 0px) - 1px));
}

.site-logo__crop {
    display: block;
    min-width: 0;
    flex-shrink: 1;
    overflow: hidden;
    border-radius: 5px;
    line-height: 0;
}

/* Размер логотипа задаётся только через CSS: базовый размер × scale / 100.
   height: auto сохраняет пропорции исходного файла, сам файл на сервере не
   изменяется. Значения приходят из site_settings через :root-переменные
   (см. includes/header.php). max-width: min(60vw, 380px, 100%) не даёт
   логотипу вылезти за контейнер; слагаемое 100% привязывает картинку к
   .site-logo__crop, который сжимается только при реальной нехватке места
   (см. .main-nav выше) — при запасе ширины оно не срабатывает и масштаб
   применяется целиком. */
.logo-image {
    display: block;
    width: calc(var(--logo-w-desktop, 110px) * var(--logo-scale-desktop, 100) / 100);
    height: auto;
    max-width: min(60vw, 380px, 100%);
    transition: width var(--nd-t) var(--nd-ease);
}
.site-header.sticky .logo-image,
.site-header.fixed .logo-image {
    width: calc(var(--logo-w-desktop, 110px) * var(--logo-scale-desktop, 100) / 100);
}

/* Серебряный дескриптор бренда: показывается только когда контейнер (1200px)
   вмещает навигацию целиком; иначе прячем, чтобы не сжимать пункты меню.
   flex-shrink:0 — при показе дескриптор не ужимается, его место освобождает
   только .logo-image (см. .header-brand). */
.header-brand__tag {
    display: none;
    flex-shrink: 0;
    padding-left: 14px;
    border-left: 1px solid var(--nd-silver-line);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(226,233,230,.62);
    max-width: 104px;
}

@media (min-width: 1200px) {
    .header-brand__tag { display: inline-block; }
}

/* ── НАВИГАЦИЯ (десктоп) ───────────────────────────────────────────────── */
/* flex-shrink:0 — навигация всегда получает max-content и никогда не переносит
   пункты на вторую строку; нехватку места отдаёт .header-brand (см. выше). */
.main-nav { display: block; flex-shrink: 0; }

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 2px;
}

.nav-item { position: relative; margin: 0; }

.nav-link {
    position: relative;
    display: block;
    /* 10px вместо 14px: 8 пунктов × 2 × 4px + CTA (6+4px) ≈ 48px запаса.
       max-content навигации 938px иначе не помещается в контейнер 1200px
       рядом с логотипом при scale=200% (220px + 18px gap + 914px). */
    padding: 10px 10px;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: .008em;
    color: rgba(233,240,237,.74);
    text-decoration: none;
    border-radius: var(--nd-r-sm);
    transition: color var(--nd-t) var(--nd-ease), background var(--nd-t) var(--nd-ease);
}
.nav-link:hover { color: #FFFFFF; background: rgba(243,247,245,.07); }

/* Серебряный active-индикатор: тонкая металлическая линия снизу */
.nav-link::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 4px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--nd-silver-rule-dark);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--nd-t) var(--nd-ease);
}
.nav-link:hover::after { transform: scaleX(.5); }

.nav-link.active {
    color: #FFFFFF;
    font-weight: 600;
    background: transparent;
}
.nav-link.active::after { transform: scaleX(1); }

/* ── ДЕСКТОП CTA — платиновая кнопка-плита на изумруде ────────────────── */
.header-cta-item { margin-left: 10px; list-style: none; }

.header-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 16px;
    background: linear-gradient(180deg, rgba(243,247,245,.14) 0%, rgba(243,247,245,.06) 100%);
    color: var(--nd-text-invert);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    border: 1px solid var(--nd-silver-line);
    border-radius: var(--nd-r-md);
    box-shadow: 0 14px 30px -20px rgba(0,0,0,.9);
    transition: background var(--nd-t) var(--nd-ease), color var(--nd-t) var(--nd-ease),
                border-color var(--nd-t) var(--nd-ease), transform var(--nd-t-fast) var(--nd-ease);
    white-space: nowrap;
}
.header-cta:hover {
    background: var(--nd-metal-plate);
    border-color: var(--nd-silver-300);
    color: var(--nd-emerald-950);
    transform: translateY(-1px);
}
.header-cta::after { content: none; }

/* ── ДРОПДАУН (десктоп) ────────────────────────────────────────────────── */
.dropdown { position: relative; }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 236px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: linear-gradient(180deg, #FCFDFD 0%, var(--nd-ice-100) 100%);
    border: 1px solid var(--nd-silver-300);
    border-radius: var(--nd-r-md);
    box-shadow: var(--nd-shadow-silver);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--nd-t) var(--nd-ease), transform var(--nd-t) var(--nd-ease), visibility var(--nd-t);
    z-index: 1000;
    overflow: hidden;
}
.dropdown::after {
    content: '';
    position: absolute;
    top: calc(100% + 4px);
    left: 14px;
    right: 14px;
    height: 1px;
    background: var(--nd-silver-rule);
    opacity: 0;
    transition: opacity var(--nd-t) var(--nd-ease);
    pointer-events: none;
}
.dropdown:hover::after,
.dropdown:focus-within::after { opacity: .55; }

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu a {
    display: block;
    padding: 11px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--nd-text-secondary);
    text-decoration: none;
    border-radius: var(--nd-r-sm);
    border-left: 2px solid transparent;
    transition: background var(--nd-t-fast) var(--nd-ease), color var(--nd-t-fast) var(--nd-ease),
                border-color var(--nd-t-fast) var(--nd-ease);
}
.dropdown-menu a:hover {
    background: var(--nd-surface-2);
    border-left-color: var(--nd-silver-500);
    color: var(--nd-emerald-900);
}

/* ── БУРГЕР ────────────────────────────────────────────────────────────── */
.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: linear-gradient(180deg, rgba(243,247,245,.12), rgba(243,247,245,.05));
    border: 1px solid var(--nd-silver-line);
    border-radius: 10px;
    padding: 11px 10px;
    cursor: pointer;
    z-index: 10002;
    transition: background var(--nd-t) var(--nd-ease), border-color var(--nd-t) var(--nd-ease);
}
.mobile-toggle:hover { background: rgba(243,247,245,.16); border-color: var(--nd-silver-line-strong); }

.hamburger {
    display: block;
    width: 22px;
    height: 1.5px;
    background-color: var(--nd-silver-200);
    margin: 3.5px 0;
    border-radius: 2px;
    transition: transform var(--nd-t) var(--nd-ease), opacity var(--nd-t-fast) var(--nd-ease), background var(--nd-t) var(--nd-ease);
}
.mobile-toggle.active .hamburger:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.mobile-toggle.active .hamburger:nth-child(2) { opacity: 0; }
.mobile-toggle.active .hamburger:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Видимость по брейкпоинтам */
.desktop-only { display: block; }
.mobile-only { display: none; }
.mobile-cta-item,
#mobile-only-btn { display: none; }

/* Элементы, живущие только внутри мобильного дровера */
.nav-drawer-head,
.nav-drawer-foot { display: none; }

/* Затемнение контента под открытым меню — deep emerald scrim.
   z-index ниже шапки (1000): дровер и бургер остаются кликабельными. */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(4,32,23,.68);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--nd-t) var(--nd-ease), visibility var(--nd-t);
    z-index: 999;
    pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body::after { background: rgba(4,32,23,.8); }
}
body.menu-open::after { opacity: 1; visibility: visible; pointer-events: auto; }

/* ══════════════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ ДРОВЕР (≤1024px)
   deep emerald фон → graphite глубина; пункты — полупрозрачная
   platinum/graphite панель с тонкой серебряной границей.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .desktop-only { display: none; }
    .mobile-only { display: block; }
    .mobile-toggle { display: flex; }
    .header-cta-item { display: none; }
    .header-brand__tag { display: none; }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 88%;
        max-width: 380px;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        background: var(--nd-drawer-bg);
        border-left: 1px solid var(--nd-silver-line);
        box-shadow: var(--nd-shadow-drawer);
        z-index: 10001;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: right .28s var(--nd-ease);
    }
    .main-nav::before { /* серебряная кромка-блик по левому краю панели */
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 1px;
        background: linear-gradient(180deg, rgba(245,248,247,.55), rgba(220,227,224,.12) 40%, rgba(220,227,224,.05));
        pointer-events: none;
    }
    .main-nav.active { right: 0; }

    body.menu-open { overflow: hidden; }

    /* ── Шапка дровера: бренд ── */
    .nav-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 74px 18px 16px;
        border-bottom: 1px solid var(--nd-silver-line-soft);
        margin-bottom: 14px;
    }
    .nav-drawer-brand {
        display: inline-flex;
        align-items: center;
        flex-shrink: 0;
        line-height: 0;
        overflow: hidden;
        border-radius: 5px;
    }
    /* Масштаб дровера: тот же лимит, что и в шапке, чтобы второй логотип
       не оставался прибитым к 30px при увеличенном logo_scale_mobile. */
    .nav-drawer-brand img {
        display: block;
        width: calc(var(--logo-w-mobile, 89px) * var(--logo-scale-mobile, 100) / 100);
        height: auto;
        max-width: min(70vw, 300px);
    }
    .nav-drawer-label {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: rgba(226,233,230,.55);
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 0 16px;
    }

    .nav-item { width: 100%; }

    /* Пункт меню: полупрозрачная платиновая панель */
    .nav-link {
        display: flex;
        align-items: center;
        min-height: 50px;
        padding: 14px 16px;
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: .01em;
        color: rgba(243,247,245,.88);
        background: var(--nd-drawer-item);
        border: 1px solid var(--nd-glass-border);
        border-radius: 14px;
        box-shadow: 0 14px 30px -26px rgba(0,0,0,.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        transition: background var(--nd-t) var(--nd-ease), border-color var(--nd-t) var(--nd-ease),
                    color var(--nd-t) var(--nd-ease);
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .nav-link { background: rgba(32,42,39,.92); }
    }
    .nav-link:hover,
    .nav-link.active {
        background: var(--nd-drawer-item-hover);
        border-color: rgba(226,233,230,.42);
        color: #FFFFFF;
    }
    .nav-link::after { content: none; }
    /* Активный пункт: серебряный левый маркер */
    .nav-link.active { box-shadow: inset 3px 0 0 var(--nd-silver-400), 0 14px 30px -26px rgba(0,0,0,.95); }

    /* Шапка под-раздела (мобильный) */
    .dropdown-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        background: var(--nd-drawer-item);
        border: 1px solid var(--nd-glass-border);
        border-radius: 14px;
        color: rgba(243,247,245,.88);
        font-size: 15.5px;
        font-weight: 600;
        min-height: 50px;
        box-sizing: border-box;
    }

    .dropdown-toggle-mobile {
        background: rgba(243,247,245,.10);
        border: 1px solid var(--nd-silver-line);
        color: var(--nd-silver-200);
        width: 36px;
        height: 36px;
        border-radius: 9px;
        font-size: 10px;
        line-height: 1;
        cursor: pointer;
        transition: background var(--nd-t) var(--nd-ease), color var(--nd-t) var(--nd-ease);
    }
    .dropdown-toggle-mobile:hover { background: rgba(243,247,245,.18); color: #FFFFFF; }

    /* Подменю: сворачиваемая платиновая панель */
    .dropdown-menu {
        position: static;
        margin-top: 6px;
        min-width: 0;
        padding: 6px;
        background: rgba(233,240,237,.06);
        border: 1px solid var(--nd-silver-line-soft);
        border-radius: 14px;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height var(--nd-t) var(--nd-ease);
    }
    .dropdown-menu.active { max-height: 460px; }

    .dropdown-menu a {
        color: rgba(243,247,245,.84);
        padding: 12px 14px;
        border-radius: 10px;
        border-left: 0;
        min-height: 44px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
    }
    .dropdown-menu a:hover {
        background: rgba(243,247,245,.12);
        border-left-color: transparent;
        color: #FFFFFF;
    }

    /* CTA в меню — металлическая плита */
    .mobile-cta-item,
    #mobile-only-btn { display: list-item; }

    .mobile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 50px;
        padding: 15px 16px;
        margin-top: 10px;
        background: var(--nd-metal-plate);
        color: var(--nd-emerald-950);
        font-size: 15.5px;
        font-weight: 700;
        letter-spacing: .01em;
        text-align: center;
        text-decoration: none;
        border: 1px solid var(--nd-silver-300);
        border-radius: 14px;
        box-shadow: var(--nd-shadow-metal);
        transition: background var(--nd-t) var(--nd-ease), transform var(--nd-t-fast) var(--nd-ease);
    }
    .mobile-cta:hover { background: #FFFFFF; color: var(--nd-emerald-950); transform: translateY(-1px); }

    /* ── Подвал дровера: серебряная линия + доверие ── */
    .nav-drawer-foot {
        display: block;
        margin-top: auto;
        padding: 18px 16px calc(20px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--nd-silver-line-soft);
    }
    .nav-drawer-note {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        font-size: 11.5px;
        font-weight: 500;
        letter-spacing: .04em;
        color: rgba(226,233,230,.55);
    }
    .nav-drawer-note svg { flex-shrink: 0; color: var(--nd-silver-500); }

    .menu-divider { height: 1px; background: var(--nd-silver-line-soft); margin: 14px 0; }

    /* Мобильный масштаб: отдельная настройка logo_scale_mobile.
       Селекторы со sticky/fixed перечислены явно — у них выше специфичность,
       и без этого на мобильной версии применялся бы desktop-масштаб. */
    .logo-image,
    .site-header.sticky .logo-image,
    .site-header.fixed .logo-image {
        width: calc(var(--logo-w-mobile, 89px) * var(--logo-scale-mobile, 100) / 100);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .main-nav { max-width: 400px; }
}

@media (min-width: 1025px) {
    .nav-link { padding: 10px 10px; font-size: 14.5px; }
}

/* Полноэкранный дровер на небольших телефонах — «premium mobile banking» */
@media (max-width: 640px) {
    .main-nav { width: 100%; max-width: none; border-left-color: transparent; }
    .nav-menu { padding: 0 14px; }
    .nav-drawer-head { padding: 70px 14px 14px; }
    .nav-drawer-foot { padding-inline: 14px; }
    /* Логотип в шапке выше дровера (z-index) — гасим, виден бренд в шапке дровера */
    body.menu-open .site-logo { opacity: 0; pointer-events: none; }
}

@media (max-width: 480px) {
    .site-logo__crop { border-radius: 4px; }
}