/* ============================================
   НАВІГАЦІЯ І МОБІЛЬНИЙ ОВЕРЛЕЙ — компонент структури 2.0
   ============================================

   Етап F (2026-08-24): мобільне меню переведено на нативний Navigation Overlay
   (WP 7.0). Вміст оверлея — parts/navigation-overlay.html, зареєстрований
   у theme.json з area "navigation-overlay".

   Що віддано ядру (і видалено з header.css, ~180 рядків, усі з !important):
   - позиціонування і поява оверлея;
   - блокування прокрутки сторінки під оверлеєм;
   - фокус-пастка і повернення фокуса на гамбургер після закриття;
   - закриття по Escape;
   - фон/колір оверлея (атрибути overlayBackgroundColor / overlayTextColor).

   Тут лишилось тільки те, що ядро не знає: фірмовий вигляд гамбургера,
   кнопки закриття і вмісту оверлея. Файл поза @layer, без !important.
   ============================================ */

/* === Гамбургер === */

.wp-block-navigation__responsive-container-open {
    padding: 8px 12px;
    background: transparent;
    border: 2px solid var(--wp--preset--color--accent);
    border-radius: var(--wp--preset--border-radius--md);
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.wp-block-navigation__responsive-container-open svg {
    width: 24px;
    height: 24px;
    fill: var(--wp--preset--color--accent);
    transition: fill 0.3s ease;
}

.wp-block-navigation__responsive-container-open:hover {
    background: var(--wp--preset--color--accent);
}

.wp-block-navigation__responsive-container-open:hover svg {
    fill: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container-open:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
}

/* === Кнопка закриття (нативний блок core/navigation-overlay-close) === */

.wp-block-navigation-overlay-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;

    width: 48px;
    height: 48px;
    padding: 0;

    background: transparent;
    border: 2px solid var(--wp--preset--color--accent);
    border-radius: var(--wp--preset--border-radius--pill);
    cursor: pointer;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}

.wp-block-navigation-overlay-close svg {
    width: 24px;
    height: 24px;
    fill: var(--wp--preset--color--accent);
    transition: fill 0.3s ease;
}

/* Той самий поворот, що й у лупи — єдина мова мікровзаємодії */
.wp-block-navigation-overlay-close:hover {
    background: var(--wp--preset--color--accent);
    transform: rotate(90deg);
}

.wp-block-navigation-overlay-close:hover svg {
    fill: var(--wp--preset--color--primary);
}

.wp-block-navigation-overlay-close:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
}

/* === Оверлей: підкладка і чистка === */

/* Ядро малює контейнер прозорим, бо з кастомним оверлеєм фон — відповідальність
   теми (атрибут overlayBackgroundColor діє лише для дефолтного оверлея).
   inset: 0 потрібен, щоб оверлей накривав і шапку, а не починався під нею. */
.wp-block-navigation__responsive-container.disable-default-overlay.is-menu-open {
    inset: 0;
    background-color: var(--wp--preset--color--primary);
}

/* Усередині відкритого контейнера ядро лишає ДВА списки: звичайний <ul> меню
   (він потрібен на десктопі) і наш оверлей. На мобільному показуємо тільки оверлей,
   інакше меню дублюється — горизонтальне зверху і вертикальне під ним. */
@media (max-width: 768px) {
    .disable-default-overlay
        .wp-block-navigation__responsive-container-content
        > .wp-block-navigation__container {
        display: none;
    }
}

/* === Вміст оверлея === */

.lb-nav-overlay {
    gap: clamp(1.5rem, 5vw, 2.5rem);
    min-height: 100svh;
    padding: clamp(1rem, 5vw, 2rem);

    /* Колір тексту меню задається тут, а не на самих посиланнях: тоді нативний
       стан "-current" (theme.json, WP 7.1) може перефарбувати активний пункт —
       правило на самому <li> перебиває успадкований колір. */
    color: var(--wp--preset--color--secondary);
}

.lb-nav-overlay__bar {
    align-items: center;
    width: 100%;
}

.lb-nav-overlay__title {
    margin: 0;
    color: var(--wp--preset--color--accent);
    font-size: clamp(1.25rem, 5vw, 1.6rem);
}

.lb-nav-overlay__title a {
    color: inherit;
    text-decoration: none;
}

/* Пункти меню — великі тап-таргети з тонким розділювачем */
.lb-nav-overlay__menu .wp-block-navigation-item {
    width: 100%;
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
}

.lb-nav-overlay__menu .wp-block-navigation-item:last-child {
    border-bottom: none;
}

.lb-nav-overlay__menu .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    padding: 0.85em 0;

    color: inherit; /* див. коментар вище: віддаємо колір нативному "-current" */
    font-size: clamp(1.1rem, 4.5vw, 1.35rem);
    font-weight: inherit; /* 600 приходить із блока Navigation, 700 — зі стану "-current" */
    text-decoration: none;

    transition: color 0.25s ease, padding-left 0.25s ease;
}

.lb-nav-overlay__menu .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent);
    padding-left: 0.5em;
}

.lb-nav-overlay__menu .wp-block-navigation-item__content:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* Пошук в оверлеї займає всю ширину — на мобільному це головний спосіб знайти статтю */
.lb-nav-overlay__search {
    width: 100%;
}

.lb-nav-overlay__search .wp-block-search__inside-wrapper {
    width: 100%;
}

.lb-nav-overlay__search .wp-block-search__input {
    flex-grow: 1;
}

/* Контакти внизу оверлея */
.lb-nav-overlay__contacts {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.95rem;
}

.lb-nav-overlay__contact,
.lb-nav-overlay__hours {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    color: var(--wp--preset--color--secondary);
    text-decoration: none;
}

.lb-nav-overlay__contact:hover {
    color: var(--wp--preset--color--accent);
}

.lb-nav-overlay__contact:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
}

.lb-nav-overlay__contacts svg,
.lb-nav-overlay__contacts .lb-icon {
    width: 1em;
    height: 1em;
    fill: var(--wp--preset--color--accent);
    flex: none;
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-navigation__responsive-container-open,
    .wp-block-navigation__responsive-container-open svg,
    .wp-block-navigation-overlay-close,
    .wp-block-navigation-overlay-close svg,
    .lb-nav-overlay__menu .wp-block-navigation-item__content {
        transition: none;
    }

    .wp-block-navigation-overlay-close:hover {
        transform: none;
    }
}