/* ============================================
   ШАПКА — компонент структури 2.0
   ============================================

   Етап E (2026-08-24): перенесено з assets/css/header.css.
   Мобільне меню звідси вже пішло раніше (Етап F) — його робить ядро,
   а вигляд задає components/navigation.css.

   Знято 133 !important. Це був найгустіший файл теми: 231 на 543 рядки.
   Разом із чисткою мобільного меню лишилось нуль.
   ============================================ */

/* === TOP BAR (Верхня панель контактів) === */
.header-top-bar {
    background-color: #1a1a1a; /* Трохи світліший за чорний */
    border-bottom: 1px solid #333;
    padding: 8px 30px; /* Повертаємо старий padding */
    z-index: 1001;
    position: relative;

    /* font-size тут НЕ задаємо: топбар має бути fluid.
     * fluid.css ставить clamp(0.75rem, 0.6vw + 0.65rem, 0.95rem).
     * Поки цей файл був у @layer, фіксовані 0.85rem програвали fluid.
     * Поза шарами вони почали вигравати і зафіксували топбар на 13.6px
     * замість 15.2px на 1440. Прибрано, щоб fluid лишався fluid. */
}

.top-bar-contacts {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #ffffff;
}

.top-bar-link {
    color: #ffffff; /* Sprint 5: WP global elements.link перебиває @layer */
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-bar-link:hover {
    color: var(--wp--preset--color--accent); /* Sprint 5: перебиває normal + WP global */
    text-decoration: none; /* Sprint 5 fix: WP global a:hover { text-decoration: underline } без @layer */
}

.top-bar-link i,
.top-bar-link svg.lb-icon,
.working-hours i,
.working-hours svg.lb-icon {
    color: var(--wp--preset--color--accent); /* Примусово золотий */
    font-size: 0.9em;
}

.separator {
    color: #444;
    font-size: 0.8em;
}

.working-hours {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* === MAIN HEADER (Основний хедер) === */
body header.site-header.wp-block-group,
.site-header.wp-block-group,
header.site-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    background-color: #000000;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    width: 100%;
    /* Sticky Header логіка */
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 95px; /* Висота під логотип 85px */
    min-height: 95px;
    max-height: 95px;
}

/* Прибираємо зайві flex-wrap від WordPress */
.site-header.wp-block-group > .wp-block-group__inner-container,
.site-header > .wp-block-group__inner-container {
    display: contents;
}

/* ЧАСТИНА 1: Логотип + Назва */
.header-branding,
.site-header .header-branding,
.wp-block-group.header-branding {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    height: 80px;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.header-logo {
    display: flex;
    align-items: center;
    height: 80px;
}

.header-logo a {
    display: flex;
    align-items: center;
    height: 80px;
    line-height: 1;
}

.header-logo img {
    max-height: 85px; /* Збільшено логотип */
    height: 85px;
    width: auto;
    display: block;
    transition: all 0.3s ease;
    object-fit: contain;
}

.header-title {
    display: flex;
    align-items: center;
    height: 80px;
}

.header-title h1,
.header-title p.site-name {
    margin: 0;
    padding: 0;
    line-height: 80px;
    display: flex;
    align-items: center;
    height: 80px;
}

/* Назву в шапці малює core/site-title (2026-08-24), а theme.json дає цьому блоку
 * Playfair 700 — це вигляд для футера. У шапці лишаємо колишній Montserrat 800,
 * щоб зміна джерела тексту не змінила саму шапку. */
.header-title .wp-block-site-title,
.header-title .wp-block-site-title a {
    font-family: var(--wp--preset--font-family--montserrat);
}

.header-title a {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    letter-spacing: -0.5px;
    display: flex;
    align-items: center;
    line-height: 80px;
    height: 80px;
}

.header-title a:hover {
    color: #ffffff;
}

/* ЧАСТИНА 2: Меню і пошук */
.header-navigation,
.site-header .header-navigation,
.wp-block-group.header-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 30px;
    height: 80px;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

/* Стилізація меню.
 * Етап F: теж лише для десктопу. Фіксована висота 80px і flex на мобільному
 * тримали навігацію розкладеною, через що оверлей отримував зайву смугу зверху. */
@media (min-width: 769px) {
    .main-navigation,
    .site-header .main-navigation {
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        height: 80px;
    }
}

/* Вирівнювання пунктів меню.
 *
 * Етап F (2026-08-24): обгорнуто в @media (min-width: 769px).
 * Раніше правило діяло на ВСІХ ширинах, тому на мобільному горизонтальний
 * список меню показувався поверх оверлея — меню дублювалось. Висота 80px
 * і горизонтальна розкладка мають сенс лише для десктопної шапки. */
@media (min-width: 769px) {
    .main-navigation .wp-block-navigation__container,
    .site-header .wp-block-navigation__container {
        display: flex;
        align-items: center;
        height: 80px;
        gap: 25px;
    }
}

.main-navigation .wp-block-navigation-item,
.site-header .wp-block-navigation-item {
    display: flex;
    align-items: center;
    height: 80px;
    margin: 0;
    padding: 0 5px;
}

/* Посилання пункту меню.
 *
 * 2026-08-24 fix: висоту тут більше НЕ фіксуємо. Було height/line-height 80px,
 * але fluid.css перебивав їх своїм height: 62px + line-height: normal !important —
 * текст 15px лишався у 62-піксельній коробці і притискався до її верху.
 * Саме через це меню виглядало «підстреленим» угору, а підкреслення (bottom: 0)
 * малювалось далеко під текстом. Тепер посилання за розміром тексту,
 * а центрує його flex у .wp-block-navigation-item. */
@media (min-width: 769px) {
    .main-navigation .wp-block-navigation-item__content,
    .site-header .wp-block-navigation-item__content {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding: 0.35em 0.15em;
        line-height: 1.2;
    }
}

/* Пошук вирівнювання */
.header-search,
.site-header .header-search {
    display: flex;
    align-items: center;
    height: 80px;
}

/* ============================================
   ДЕСКТОП МЕНЮ - ГОРИЗОНТАЛЬНЕ
   ============================================ */

/* На десктопі: приховуємо кнопки гамбургера та закриття (запобігаємо накладанню на Контакти) */
@media (min-width: 769px) {
    .site-header .wp-block-navigation__responsive-container-open,
    .header-navigation .wp-block-navigation__responsive-container-open,
    .main-navigation .wp-block-navigation__responsive-container-open,
    /* Кнопка закриття на десктопі прихована (коли меню не відкрите) */
    .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close,
    .main-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none;
    }
    
    /* На десктопі меню горизонтальне */
    .header-navigation .wp-block-navigation__responsive-container,
    .main-navigation .wp-block-navigation__responsive-container {
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        padding: 0;
        display: block;
    }
    
    .header-navigation .wp-block-navigation__responsive-container-content,
    .main-navigation .wp-block-navigation__responsive-container-content {
        display: flex;
        flex-direction: row;
        padding: 0;
        min-height: auto;
        align-items: center;
    }
    
    .header-navigation .wp-block-navigation__container,
    .main-navigation .wp-block-navigation__container {
        display: flex;
        flex-direction: row;
        gap: 25px;
        align-items: center;
        width: auto;
        max-width: none;
    }
    
    .header-navigation .wp-block-navigation-item,
    .main-navigation .wp-block-navigation-item {
        display: inline-flex;
        align-items: center;
        border-bottom: none;
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* inline-flex, а не inline-block: саме inline-block лишав текст угорі коробки */
    .header-navigation .wp-block-navigation-item__content,
    .header-navigation .wp-block-navigation-item a,
    .main-navigation .wp-block-navigation-item__content,
    .main-navigation .wp-block-navigation-item a {
        display: inline-flex;
        align-items: center;
        padding: 0.35em 0.15em;
        font-size: 0.95rem;
        width: auto;
        background: transparent;
    }
}

/* ============================================
   МОБІЛЬНЕ МЕНЮ — ВИДАЛЕНО (Етап F, 2026-08-24)
   ============================================

   Тут було ~180 рядків із 100, які вручну малювали оверлей:
   позиціонування, поява, кнопка закриття, пункти меню, пошук усередині.

   Усе це тепер робить ядро через нативний Navigation Overlay (WP 7.0):
   вміст — parts/navigation-overlay.html, вигляд — components/navigation.css.
   Ядро дає ще й те, чого тут не було: фокус-пастку, повернення фокуса
   на гамбургер після закриття і закриття по Escape.
   ============================================ */


/* ============================================
   АДАПТИВНІСТЬ
   ============================================ */

@media (max-width: 768px) {
    /* Top Bar на мобільних */
    .header-top-bar {
        justify-content: center;
        padding: 5px 15px;
    }
    
    .top-bar-wrapper {
        align-items: center; /* Центруємо на мобільних */
    }
    
    .top-bar-contacts {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        font-size: 0.8rem;
    }
    
    .top-bar-contacts-row {
        font-size: 0.75rem;
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .top-bar-hours-row,
    .working-hours {
        display: none; /* Ховаємо години на мобільному */
    }
    
    .separator {
        display: none; /* Ховаємо роздільник */
    }

    /* Header на мобільних */
    body header.site-header.wp-block-group,
    .site-header.wp-block-group,
    header.site-header {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 15px;
        height: auto;
        min-height: auto;
        max-height: none;
    }
    
    .header-branding,
    .header-logo,
    .header-title,
    .header-title h1,
    .header-title a {
        height: auto;
        line-height: normal;
    }
    
    .header-navigation {
        height: auto;
        gap: 10px;
    }
    
    /* Приховуємо десктопне меню на мобільних */
    .header-navigation .main-navigation .wp-block-navigation__container,
    .main-navigation .wp-block-navigation-item {
        height: auto;
        line-height: normal;
    }
    
    .header-logo img {
        max-height: 50px;
        height: 50px;
    }
    
    .header-title a {
        font-size: 1.2rem;
    }
    
    /* Пошук на мобільних */
    .header-search {
        margin-left: 0;
    }
}

/* ============================================
   ТОПБАР НА ВУЗЬКИХ ЕКРАНАХ: самі іконки
   ============================================

   Етап C/D (2026-08-24). До 480px смуга контактів займала два рядки й з'їдала
   перший екран: номер телефону і пошта не вміщались в один рядок і переносились.
   Тепер лишаються самі іконки — телефон і пошта, обидві клікабельні.

   Текст ховаємо через .top-bar-text (обгортку додано в parts/header.html):
   раніше підпис був голим текстовим вузлом усередині <a>, і зачепити його
   селектором було нічим. Доступна назва живе в aria-label посилання, тому
   для скрінрідера нічого не змінюється.

   Розмір тап-таргета — компроміс, і він свідомий. 44×44 (WCAG 2.5.5, рівень
   AAA) робив смугу 53px заввишки, тобто вищою за початкові 31px — а сенс
   згортання був рівно в тому, щоб віддати перший екран контенту. Лишаємо
   44×40: за шириною це повні 44px, за висотою — 40px, що все одно вдвічі
   більше за мінімум 24×24 з WCAG 2.5.8 (рівень AA).

   Раніше в ці 31px вкладався весь текст дрібним кеглем, але висота самого
   посилання була близько 10px — попасти пальцем практично неможливо. */

@media (max-width: 480px) {
    .top-bar-text {
        display: none;
    }

    .top-bar-contacts {
        gap: 4px;
        justify-content: center;
    }

    .top-bar-link {
        min-width: 44px;
        min-height: 40px;
        justify-content: center;
        gap: 0;
    }

    .top-bar-link svg.lb-icon,
    .top-bar-link i {
        font-size: 1.05rem;
    }

    /* Смуга стає нижчою: підпису більше немає, лишається сам тап-таргет */
    .header-top-bar {
        padding: 0 12px;
    }
}


/* ============================================
   МЕНЮ: ЗОЛОТА ЛІНІЯ, ЩО ЗАЇЖДЖАЄ (десктоп)
   ============================================

   Замість старого ефекту з custom.css (`width: 0 → 100%`, тобто анімація
   ширини — це layout-робота для браузера) лінія тепер їде на `transform:
   scaleX()`: заходить зліва, а на виході йде далі вправо, ніби її змахнули.
   Плюс тепла золота підсвітка, що піднімається з-під тексту, і легкий підйом
   самої назви пункту. Composited-властивості (transform/opacity) — без ривків.

   Файл підключається після custom.css і поза @layer, тому ці правила
   перебивають старий ::after без жодного !important.
   ============================================ */

@media (min-width: 769px) {

    .site-header .main-navigation .wp-block-navigation-item__content {
        letter-spacing: 0.02em;
        transition:
            color 0.3s ease,
            text-shadow 0.3s ease;
    }

    /* Назва пункту трохи піднімається — лінія лишається на місці */
    .site-header .main-navigation .wp-block-navigation-item__label {
        display: inline-block;
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Тепле сяйво, що піднімається з-під тексту */
    .site-header .main-navigation .wp-block-navigation-item__content::before {
        content: '';
        position: absolute;
        inset: -0.3em -0.7em;
        border-radius: var(--wp--preset--border-radius--pill, 999px);
        background: radial-gradient(
            60% 130% at 50% 115%,
            rgba(212, 175, 55, 0.24) 0%,
            rgba(212, 175, 55, 0) 70%
        );
        opacity: 0;
        transform: translateY(6px);
        transition:
            opacity 0.35s ease,
            transform 0.35s ease;
        pointer-events: none;
    }

    /* Сама лінія: градієнт із яскравішою серединою + м'який ореол */
    .site-header .main-navigation .wp-block-navigation-item__content::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(
            90deg,
            rgba(212, 175, 55, 0) 0%,
            var(--wp--preset--color--accent) 18%,
            #f7e08a 50%,
            var(--wp--preset--color--accent) 82%,
            rgba(212, 175, 55, 0) 100%
        );
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
        border-radius: 2px;

        transform: scaleX(0);
        transform-origin: right center;
        transition: transform 0.45s cubic-bezier(0.65, 0.05, 0.36, 1);
    }

    .site-header .main-navigation .wp-block-navigation-item__content:hover::after,
    .site-header .main-navigation .wp-block-navigation-item__content:focus-visible::after {
        transform: scaleX(1);
        transform-origin: left center; /* заїжджає зліва, а зникає вправо */
    }

    .site-header .main-navigation .wp-block-navigation-item__content:hover::before,
    .site-header .main-navigation .wp-block-navigation-item__content:focus-visible::before {
        opacity: 1;
        transform: none;
    }

    .site-header .main-navigation .wp-block-navigation-item__content:hover,
    .site-header .main-navigation .wp-block-navigation-item__content:focus-visible {
        color: var(--wp--preset--color--accent);
        text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
    }

    .site-header .main-navigation .wp-block-navigation-item__content:hover
        .wp-block-navigation-item__label,
    .site-header .main-navigation .wp-block-navigation-item__content:focus-visible
        .wp-block-navigation-item__label {
        transform: translateY(-2px);
    }

    /* Поточна сторінка: лінія стоїть завжди, але спокійніша —
       щоб наведення все одно щось додавало */
    .site-header .main-navigation .current-menu-item > .wp-block-navigation-item__content::after,
    .site-header .main-navigation .wp-block-navigation-item__content[aria-current="page"]::after {
        transform: scaleX(1);
        transform-origin: left center;
        opacity: 0.7;
        box-shadow: none;
    }

    .site-header .main-navigation .wp-block-navigation-item__content[aria-current="page"]:hover::after {
        opacity: 1;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .main-navigation .wp-block-navigation-item__content,
    .site-header .main-navigation .wp-block-navigation-item__label,
    .site-header .main-navigation .wp-block-navigation-item__content::before,
    .site-header .main-navigation .wp-block-navigation-item__content::after {
        transition: none;
    }

    .site-header .main-navigation .wp-block-navigation-item__content:hover
        .wp-block-navigation-item__label {
        transform: none;
    }
}

/* ============================================
   ЛОГОТИП І НАЗВА — «золотий блиск»
   ============================================

   Логотип і назва — це одне посилання на головну за смислом, тому й реагують
   разом: наведення на будь-яку половину анімує обидві.

   Що відбувається:
   - емблема пружно підростає (cubic-bezier із перельотом) і отримує золоте сяйво;
   - з-під емблеми розходиться золоте коло — коротка «хвиля»;
   - по назві Prosto.Law проходить світліша золота смуга (background-clip: text).

   Смуга по тексту загорнута в @supports: якщо background-clip: text не
   підтримується, текст просто стає білим (стара поведінка), а не зникає.
   ============================================ */

.header-branding {
    /* Щоб коло від емблеми не обрізалось сусідами */
    position: relative;
}

.header-logo {
    position: relative;
}

.header-logo img {
    /* Було transition: all — анімуємо тільки те, що справді змінюється */
    transition:
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.4s ease;
}

.header-branding:hover .header-logo img,
.header-branding:focus-within .header-logo img {
    transform: scale(1.06) rotate(-3deg);
    filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.55));
}

/* Золоте коло, що розходиться з-під емблеми */
.header-logo::after {
    content: '';
    position: absolute;
    inset: 50% auto auto 50%;
    width: 3.2em;
    height: 3.2em;
    margin: -1.6em 0 0 -1.6em;

    border: 1px solid rgba(212, 175, 55, 0.7);
    border-radius: 50%;

    opacity: 0;
    transform: scale(0.55);
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.6s ease;
    pointer-events: none;
}

.header-branding:hover .header-logo::after,
.header-branding:focus-within .header-logo::after {
    opacity: 0;
    transform: scale(1.35);
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.25s ease;
    animation: lb-logo-ring 0.7s ease-out;
}

@keyframes lb-logo-ring {
    0% {
        opacity: 0;
        transform: scale(0.55);
    }
    35% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

/* Назва сайту: світліша золота смуга проходить зліва направо */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .header-title a {
        background-image: linear-gradient(
            100deg,
            var(--wp--preset--color--accent) 0%,
            var(--wp--preset--color--accent) 38%,
            #fff4c4 50%,
            var(--wp--preset--color--accent) 62%,
            var(--wp--preset--color--accent) 100%
        );
        background-size: 260% 100%;
        background-position: 100% 0;
        background-repeat: no-repeat;
        -webkit-background-clip: text;
        background-clip: text;
        transition: background-position 0.9s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .header-branding:hover .header-title a,
    .header-branding:focus-within .header-title a {
        background-position: 0 0;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-logo img,
    .header-title a {
        transition: none;
    }

    .header-branding:hover .header-logo img,
    .header-branding:focus-within .header-logo img {
        transform: none;
    }

    .header-branding:hover .header-logo::after,
    .header-branding:focus-within .header-logo::after {
        animation: none;
        transform: scale(0.55);
    }
}