/**
 * Header Navigation — Taxonomy Dropdowns + Search
 *
 * Загружается на ВСЕХ страницах сайта.
 * Зависит от: curly-global.css (токены --brand, --fg-*, --border, и т.д.)
 *
 * Upload to:
 *   /www/wwwroot/curly.sale/wp-content/themes/generatepress-child/assets/css/header-nav.css
 *
 * Архитектура v2.3.0:
 *   Desktop: .curly-header-nav (flex row, hover-dropdowns + поиск)
 *   Mobile:  .curly-mob-controls (JS-перенесены в .inside-site-header — [🔍][≡] в строке шапки)
 *            .curly-search-panel (absolute dropdown под шапкой, позиция от .inside-site-header)
 *            .curly-mob-overlay  (full-screen overlay с accordion-меню, wp_footer)
 *
 * @version 2.3.0  Sprint 21 — JS relocate controls в .inside-site-header
 */

/* ============================================================
   RESET: GP overrides
   ── Скрываем стандартное GP-меню (заменено кастомным навом).
   ── .inside-navigation: nowrap → одна строка на десктопе.
   ── .inside-site-header: position:relative — нужно для
      .curly-search-panel (position:absolute) после JS-переноса.
   ============================================================ */
#primary-menu {
    display: none !important;
}

.inside-navigation {
    flex-wrap: nowrap !important;
}

/* ── Единый фон шапки: убираем светлые подложки навигации ──────────────────
   GP по умолчанию красит .main-navigation/.inside-navigation в белый —
   получается «разнобой» фонов поверх кремовой шапки. Делаем их прозрачными,
   чтобы вся шапка была одного кремового тона. */
.main-navigation,
.main-navigation .inside-navigation,
.site-header .main-navigation,
.navigation-search,
nav#site-navigation {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Контекст позиционирования для .curly-search-panel после JS relocate */
.inside-site-header {
    position: relative;
}

/* ============================================================
   WORDMARK — текстовый логотип «curly.sale» (Design System)
   Рисуется CSS-псевдоэлементами поверх .site-logo: скрываем
   картинку-логотип и выводим «curly» + коралловый «.sale».
   Не зависит от механизма логотипа (core custom_logo / GP).
   Вернуть картинку → удалить этот блок.
   ============================================================ */
.site-logo img,
.custom-logo,
.site-header .header-image {
    display: none !important;
}

.site-logo a,
.site-logo .custom-logo-link,
a.custom-logo-link {
    display: inline-flex !important;
    align-items: baseline;
    font-size: 0 !important;          /* прячем возможный alt-текст */
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.site-logo a::before,
a.custom-logo-link::before {
    content: "curly";
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--fg-1);
}
.site-logo a::after,
a.custom-logo-link::after {
    content: ".sale";
    font-family: var(--font-display, 'Fraunces', Georgia, serif);
    font-size: 28px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--brand);
}

@media (max-width: 768px) {
    .site-logo a::before, a.custom-logo-link::before,
    .site-logo a::after,  a.custom-logo-link::after {
        font-size: 22px;
    }
}

/* ============================================================
   МОБИЛЬНЫЕ БЛОКИ: скрыты на десктопе.
   До JS-переноса controls находятся внутри .inside-navigation —
   display:none гарантирует что они не ломают десктоп-лейаут.
   ============================================================ */
.curly-mob-controls,
.curly-search-panel,
.curly-mob-overlay {
    display: none;
}

/* ============================================================
   ДЕСКТОП: .curly-header-nav
   ── flex-row, занимает оставшееся место в .inside-navigation.
   ── На мобильном: hidden (см. mobile media query).
   ============================================================ */
.curly-header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
}

/* NAV LIST */
.curly-hn-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

/* NAV ITEM */
.curly-hn-item {
    position: relative;
}

/* TOP-LEVEL LINK */
.curly-hn-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    color: var(--fg-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    transition: color var(--motion);
    cursor: pointer;
}

.curly-hn-link:hover,
.curly-hn-item:hover > .curly-hn-link,
.curly-hn-item:focus-within > .curly-hn-link {
    color: var(--brand);
    text-decoration: none;
}

/* Шеврон */
.curly-hn-chevron {
    flex-shrink: 0;
    transition: transform var(--motion);
    color: var(--fg-3);
}

.curly-hn-item:hover > .curly-hn-link .curly-hn-chevron,
.curly-hn-item:focus-within > .curly-hn-link .curly-hn-chevron,
.curly-hn-item.is-open > .curly-hn-link .curly-hn-chevron {
    transform: rotate(180deg);
    color: var(--brand);
}

/* DROPDOWN (десктоп) */
.curly-hn-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-width: 300px;
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 20px rgba(45, 55, 72, 0.10);
    padding: 6px 0;
    list-style: none;
    margin: 0;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--motion), visibility var(--motion), transform var(--motion);
}

/* Мостик hover */
.curly-hn-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

/* Показать на десктопе */
.curly-hn-item:hover > .curly-hn-dropdown,
.curly-hn-item:focus-within > .curly-hn-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Элементы dropdown */
.curly-hn-dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.curly-hn-dropdown li a {
    display: block;
    padding: 7px 16px;
    color: var(--fg-2);
    font-size: 13px;
    font-weight: 400;
    white-space: normal;
    line-height: 1.35;
    text-decoration: none;
    transition: color var(--motion), background-color var(--motion);
}

.curly-hn-dropdown li a:hover {
    color: var(--brand);
    background-color: var(--cgm-sage-light);
    text-decoration: none;
}

/* SEARCH (десктоп) */
.curly-hn-search {
    flex-shrink: 1;
    align-self: center;
    min-width: 0;
    max-width: 220px;
}

.curly-search-form {
    display: flex;
    align-items: center;
    background-color: var(--bg-page, #FBF8F4);  /* сплошной крем = тон шапки, без светлого слоя */
    border: 1px solid var(--border, #EDE6DD);   /* hairline pill */
    box-shadow: none;
    outline: none;
    border-radius: var(--radius-full, 999px);
    height: 34px;
    padding: 0 8px 0 12px;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    transition: border-color var(--motion);
}

.curly-search-form:focus-within {
    border: 1px solid var(--brand) !important;   /* coral focus */
    box-shadow: 0 0 0 2px rgba(232, 130, 107, 0.18) !important;
    outline: none !important;
}

.curly-search-label {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--fg-3);
    cursor: text;
}

#curly-header-nav .curly-search-input,
.curly-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 0 6px;
    font-size: 13px;
    color: var(--fg-1);
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

#curly-header-nav .curly-search-input:focus,
#curly-header-nav .curly-search-input:focus-visible,
#curly-header-nav .curly-search-input:active,
.curly-search-input:focus,
.curly-search-input:focus-visible,
.curly-search-input:active {
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

#curly-header-nav .curly-search-input:-webkit-autofill,
#curly-header-nav .curly-search-input:-webkit-autofill:hover,
#curly-header-nav .curly-search-input:-webkit-autofill:focus,
.curly-search-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: var(--fg-1) !important;
    border: 0 !important;
}

.curly-search-input::placeholder {
    color: var(--fg-3);
}

.curly-search-input::-webkit-search-decoration,
.curly-search-input::-webkit-search-cancel-button,
.curly-search-input::-webkit-search-results-button,
.curly-search-input::-webkit-search-results-decoration {
    display: none;
}

/* ============================================================
   МОБИЛЬНЫЙ (≤ 768px)
   Шапка: [Logo  ·····  🔍  ≡]
     🔍 → .curly-search-panel (dropdown под шапкой)
     ≡  → .curly-mob-overlay  (full-screen категории)
   ============================================================ */
@media (max-width: 768px) {

    /* ── .inside-header: flex-строка [Logo ····· 🔍 ≡] ──────
       Controls рендерятся в .inside-navigation, JS переносит их
       в .inside-header. CSS даёт финальный layout без мигания. */
    .inside-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        position: relative !important;
    }
    .site-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    #curly-mob-controls {
        flex-shrink: 0 !important;
    }

    /* Скрываем GP burger и nav с controls до JS-переноса —
       предотвращает мигание controls в неправильном месте */
    .menu-toggle,
    .main-navigation.mobile-menu-control-wrapper,
    .main-navigation.sub-menu-right {
        display: none !important;
    }

    /* ── .curly-mob-controls: [🔍][≡] ────────────────────── */
    .curly-mob-controls {
        display: flex !important;
        align-items: center;
        gap: 4px;
        padding-right: 4px;
    }

    .curly-mob-search-btn,
    .curly-mob-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--fg-2);
        padding: 0;
        border-radius: 50%;
        flex-shrink: 0;
        transition: color var(--motion);
        -webkit-tap-highlight-color: transparent;
    }

    .curly-mob-search-btn:hover,
    .curly-mob-search-btn[aria-expanded="true"],
    .curly-mob-menu-btn:hover,
    .curly-mob-menu-btn[aria-expanded="true"] {
        color: var(--brand);
    }

    /* ── .curly-search-panel: dropdown под шапкой ────────── */
    /* После JS relocate → дочерний элемент .inside-site-header (position:relative).
       top:100% = нижняя граница шапки → панель появляется ровно под шапкой. */
    .curly-search-panel {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 9998;
        background: #fff;
        border-top: 1px solid var(--border);
        border-bottom: 2px solid var(--brand);
        box-shadow: 0 6px 20px rgba(45, 55, 72, 0.10);
        padding: 10px 16px;
    }

    .curly-search-panel.is-open {
        display: flex !important;
        align-items: center;
    }

    .curly-search-panel-form {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        background: #FFFFFF;
        border-radius: 10px;
        padding: 9px 14px;
        box-sizing: border-box;
    }

    .curly-search-panel-icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        color: var(--fg-3);
    }

    .curly-search-panel-input {
        flex: 1;
        min-width: 0;
        border: none !important;
        background: transparent !important;
        outline: none !important;
        box-shadow: none !important;
        font-size: 16px; /* ≥16px → iOS не зумирует при фокусе */
        color: var(--fg-1);
        -webkit-appearance: none;
        appearance: none;
        padding: 0;
    }

    .curly-search-panel-input::placeholder {
        color: var(--fg-3);
    }

    .curly-search-panel-input::-webkit-search-decoration,
    .curly-search-panel-input::-webkit-search-cancel-button {
        display: none;
    }

    .curly-search-panel-close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--fg-3);
        padding: 2px;
        border-radius: 50%;
        transition: color var(--motion);
    }

    .curly-search-panel-close:hover {
        color: var(--fg-1);
    }

    /* ── .curly-mob-overlay: full-screen меню ─────────────── */
    .curly-mob-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: #fff;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .curly-mob-overlay.is-open {
        display: flex !important;
    }

    /* Шапка overlay */
    .curly-mob-overlay-bar {
        display: flex;
        align-items: center;
        padding: 0 16px;
        height: 56px;
        border-bottom: 1px solid var(--border);
        flex-shrink: 0;
        gap: 12px;
    }

    .curly-mob-overlay-icon {
        display: flex;
        align-items: center;
        color: var(--fg-3);
        flex-shrink: 0;
    }

    .curly-mob-overlay-title {
        flex: 1;
        font-size: 16px;
        font-weight: 600;
        color: var(--fg-1);
    }

    .curly-mob-overlay-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--fg-2);
        border-radius: 50%;
        padding: 0;
        transition: color var(--motion);
        -webkit-tap-highlight-color: transparent;
    }

    .curly-mob-overlay-close:hover {
        color: var(--brand);
    }

    /* Список категорий
       GP-стили могут скрывать li внутри .main-navigation —
       нужен явный override через специфичность + !important */
    .curly-mob-overlay .curly-mob-cat-list {
        display: block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 1;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .curly-mob-overlay .curly-mob-cat-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        border-bottom: 1px solid var(--border);
        float: none !important;
        position: static !important;
    }

    /* Строка категории: [ссылка] [⊕/⊖ кнопка] */
    .curly-mob-overlay .curly-mob-cat-row {
        display: flex !important;
        align-items: center;
        padding: 0 16px;
        min-height: 52px;
        visibility: visible !important;
    }

    .curly-mob-cat-link {
        flex: 1;
        font-size: 15px;
        font-weight: 500;
        color: var(--fg-1);
        text-decoration: none;
        line-height: 1.3;
        padding: 14px 0;
        display: block !important;
        visibility: visible !important;
    }

    .curly-mob-cat-link:hover {
        color: var(--brand);
        text-decoration: none;
    }

    /* Кнопка аккордеона ⊕ / ⊖ */
    .curly-mob-sub-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--fg-3);
        padding: 0;
        border-radius: 50%;
        transition: colo