/*
 * Theme — Header
 *
 * Два стани з макета ( Figma → Header / Desktop ):
 *   Transparent — сторінка вгорі: 90px, без підкладки, лише blur 8.
 *   Solid       — після 80px скролу: 70px, підкладка navy 58% + blur 14,
 *                 тінь, золота волосяна лінія знизу, логотип згортається
 *                 до знака, підпис під телефоном зникає.
 *
 * Клас .header--solid вішає js/main.js. Обидва переходи — 240ms ease-out.
 */

.header {
    position:                fixed;
    top:                     0;
    left:                    0;
    right:                   0;
    z-index:                 var(--z-sticky);
    height:                  var(--header-height-top);
    backdrop-filter:         blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:              height var(--transition),
                             background-color var(--transition),
                             box-shadow var(--transition);
}

/* Золота волосяна лінія знизу — лише у стані Solid */
.header::after {
    content:    "";
    position:   absolute;
    left:       0;
    right:      0;
    bottom:     0;
    height:     1px;
    background: var(--gold-line);
    opacity:    0;
    transition: opacity var(--transition);
}

.header--solid {
    height:                  var(--header-height);
    background-color:        var(--header-bg);
    backdrop-filter:         blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:              var(--header-shadow);
}
.header--solid::after { opacity: 1; }

/* Адмінбар WordPress теж фіксований і перекриває шапку. Нижче 600px
   він перестає бути фіксованим і йде разом зі сторінкою.
   .admin-bar — клас ядра WordPress на <body>; зсув справді залежить від
   наявності адмінбару, і виразити це модифікатором самого блоку не можна. */
.admin-bar .header { top: 32px; }

@media (max-width: 782px) {
    .admin-bar .header { top: 46px; }
}
@media (max-width: 600px) {
    .admin-bar .header { top: 0; }
}

/* Шапка фіксована, тому контент сторінки треба опустити на її висоту.
   Модифікатор ставить header.php: на сторінках із повноширинним першим
   екраном (.hero, .phero) його немає — фото свідомо йде під прозору шапку. */
.site--offset { padding-top: var(--header-height-top); }
/* Опора для .breadcrumbs--over, які лягають поверх такого першого екрана. */
.site { position: relative; }

.header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             40px;
    height:          100%;
}

/* ── Логотип ────────────────────────────────────────────────────────────── */
/* Одне посилання, два подання: повний lockup 56px і знак 40px. */
.header__logo {
    flex:        0 0 auto;
    display:     block;
    line-height: 0;
}
.header__logo-img { display: block; width: auto; height: 56px; }
.header__logo-mark-img { display: block; width: auto; height: 40px; }

.header__logo-mark { display: none; }
.header--solid .header__logo-full { display: none; }
.header--solid .header__logo-mark { display: block; }

/* Фолбек, коли логотип в адмінці не завантажено */
.header__logo-text {
    color:       var(--text-primary);
    font-size:   22px;
    font-weight: 700;
    line-height: 1.1;
}

/* ── Навігація ──────────────────────────────────────────────────────────── */
.header-nav__list {
    display:     flex;
    align-items: center;
    gap:         22px;
    margin:      0;
    padding:     0;
    list-style:  none;
}
.header-nav__item { position: relative; }

.header-nav__link {
    position:        relative;
    display:         block;
    color:           var(--text-primary);
    font-size:       16px;
    font-weight:     500;
    line-height:     24px;
    text-decoration: none;
    white-space:     nowrap;
    transition:      color .2s ease-out;
}
/* Підкреслення розкривається від центру й не впливає на висоту рядка,
   тому активний пункт не зсуває сусідів. */
.header-nav__link::after {
    content:          "";
    position:         absolute;
    left:             0;
    right:            0;
    top:              calc(100% + 8px);
    height:           1px;
    background:       var(--gold-solid);
    transform:        scaleX(0);
    transform-origin: center;
    transition:       transform .22s ease-out;
}
.header-nav__link:hover,
.header-nav__link:focus-visible { color: var(--gold-text); }
.header-nav__link:hover::after,
.header-nav__link:focus-visible::after { transform: scaleX(1); }

/* Активний пункт — суцільна лінія, без анімації */
.header-nav__item--current .header-nav__link { color: var(--gold-text); }
.header-nav__item--current .header-nav__link::after {
    transform:  scaleX(1);
    transition: none;
}

/* Підменю. У макеті його немає, але меню в адмінці допускає другий
   рівень — лишаємо стриманий випадний список, щоб він не розсипався. */
.header-nav__sub {
    position:      absolute;
    top:           calc(100% + 18px);
    left:          -18px;
    min-width:     230px;
    margin:        0;
    padding:       10px 0;
    list-style:    none;
    background:    var(--bg-elevated);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow:    var(--header-shadow);
    opacity:       0;
    visibility:    hidden;
    transform:     translateY(8px);
    transition:    opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index:       var(--z-dropdown);
}
.header-nav__item:hover > .header-nav__sub,
.header-nav__item:focus-within > .header-nav__sub {
    opacity:    1;
    visibility: visible;
    transform:  translateY(0);
}
.header-nav__link--sub {
    padding:     10px 20px;
    font-size:   15px;
    line-height: 22px;
    white-space: normal;
}
.header-nav__link--sub::after { display: none; }

/* ── Телефон ────────────────────────────────────────────────────────────── */
.header__actions { flex: 0 0 auto; }

.phone-action {
    position:        relative;
    display:         flex;
    flex-direction:  column;
    align-items:     flex-end;
    gap:             3px;
    text-decoration: none;
    white-space:     nowrap;
}
.phone-action__number {
    color:       var(--gold-text);
    font-size:   20px;
    font-weight: 500;
    line-height: 26px;
    transition:  color .2s ease-out;
}
/* max-height дорівнює висоті рядка: у стані Solid підпис згортається
   до нуля, тож ця пара має збігатися, інакше хвостики літер обрізає. */
.phone-action__note {
    max-height:  20px;
    overflow:    hidden;
    color:       var(--text-muted);
    font-size:   15px;
    font-weight: 400;
    line-height: 20px;
    transition:  color .2s ease-out, opacity var(--transition), max-height var(--transition);
}
/* Волосяна лінія, що зʼявляється на hover */
.phone-action::after {
    content:    "";
    position:   absolute;
    left:       0;
    right:      0;
    bottom:     -5px;
    height:     1px;
    background: var(--gold-line);
    opacity:    0;
    transition: opacity .2s ease-out;
}
.phone-action:hover .phone-action__number,
.phone-action:focus-visible .phone-action__number { color: var(--gold-1); }
.phone-action:hover .phone-action__note { color: var(--gold-text); }
.phone-action:hover::after,
.phone-action:focus-visible::after { opacity: 1; }

/* Стан шапки керує підписом: у Solid він згортається.
   Це дозволена вкладеність — стан блоку-батька, а не звʼязок з оточенням. */
.header--solid .phone-action__note {
    max-height: 0;
    opacity:    0;
}

/* ── Бургер ─────────────────────────────────────────────────────────────── */
.burger {
    display:    none;
    flex:       0 0 auto;
    width:      44px;
    height:     44px;
    padding:    10px;
    background: none;
    border:     0;
    cursor:     pointer;
}
.burger__box {
    display:         flex;
    flex-direction:  column;
    justify-content: space-between;
    width:           100%;
    height:          100%;
}
.burger__line {
    display:    block;
    width:      100%;
    height:     2px;
    background: var(--text-primary);
    transition: transform var(--transition), opacity var(--transition);
}
.burger--active .burger__line--top    { transform: translateY(11px) rotate(45deg); }
.burger--active .burger__line--middle { opacity: 0; }
.burger--active .burger__line--bottom { transform: translateY(-11px) rotate(-45deg); }

/* ── Адаптація ──────────────────────────────────────────────────────────── */
/* На десктопі обгортка меню не існує для розкладки */
.header__panel { display: contents; }

/* Поки мобільне меню розкрите, сторінка позаду не прокручується.
   Клас ставить js/main.js на <html>; діє лише в тому ж діапазоні, де
   існує саме мобільне меню, тому десктоп це правило не бачить. */
@media (max-width: 1140px) {
    html.has-open-menu { overflow: hidden; }
}

/* 1140px — не пробоєприпасовка, а порахований поріг: лого 189 + меню 633
   + дії 174.5 + два проміжки по 40 + відступи контейнера 40 = 1076.6px
   мінімум для рядкової розкладки. Нижче 1024px картина ще гірша: раніше
   тут стояло 1024 — між 1024 і ~1080px рядок не вміщався, а бургер ще
   не з'являвся, і телефон вилітав за екран. */
@media (max-width: 1140px) {
    .burger { display: block; }

    /* grid-template-rows 0fr → 1fr — панель анімує саме до своєї реальної
       висоти, без здогадів про максимум: скільки б пунктів не було в меню,
       розкриття завжди триває --menu-duration. Обгортка .header__nav-inner
       потрібна, бо анімувати сам грід-рядок і одночасно ховати
       переповнений вміст (min-height: 0) можна тільки через мінімум
       два рівні. */
    .header__panel {
        position:              absolute;
        top:                   100%;
        left:                  0;
        right:                 0;
        display:               grid;
        grid-template-rows:    0fr;
        z-index:               var(--z-dropdown);
        transition:            grid-template-rows var(--menu-motion);
    }
    .header__panel--open { grid-template-rows: 1fr; }

    .header__nav {
        min-height: 0;
        overflow:   hidden;
        background: var(--bg-canvas);
    }
    /* border/тінь — лише коли панель розкрита: grid-template-rows: 0fr
       стискає лише вміст рядка, а border і box-shadow самого .header__nav
       і при 0-висоті малювались завжди — саме це й давало ту синю смужку
       під хедером на будь-якому скролі нижче 1140px. */
    .header__panel--open .header__nav {
        border-top: 1px solid var(--border-subtle);
        box-shadow: var(--header-shadow);
    }
    .header-nav__list {
        padding:    18px var(--container-padding) 26px;
        transition: opacity var(--menu-motion);
    }
    .header__panel:not(.header__panel--open) .header-nav__list { opacity: 0; }

    .header-nav__list {
        flex-direction: column;
        align-items:    stretch;
        gap:            0;
    }
    .header-nav__link {
        padding:     14px 0;
        font-size:   17px;
        line-height: 24px;
        white-space: normal;
    }
    .header-nav__link::after { display: none; }
    .header-nav__item--current .header-nav__link { color: var(--gold-text); }

    /* Підменю на дотику — завжди розкрите, з відступом */
    .header-nav__sub {
        position:      static;
        min-width:     0;
        padding:       0 0 0 18px;
        opacity:       1;
        visibility:    visible;
        transform:     none;
        background:    none;
        border:        0;
        border-radius: 0;
        box-shadow:    none;
    }
    .header-nav__link--sub {
        padding:   10px 0;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    /* На малому екрані шапка не змінює висоту при скролі: різниця у 20px
       на телефоні читається як смикання, а не як перехід. Обидва стани
       однакові, тому перевизначаємо самі токени — за ними підуть і відступ
       контенту, і scroll-padding, і розрахунок --viewport-offset у JS. */
    :root {
        --header-height:     60px;
        --header-height-top: 60px;
    }

    .header__inner         { gap: 16px; }
    .header__logo-img      { height: 40px; }
    .header__logo-mark-img { height: 32px; }
    .phone-action__number  { font-size: 17px; line-height: 22px; }
    .phone-action__note    { display: none; }
}

/* Вузькі екрани: повний lockup, телефон і бургер разом уже не вміщаються.
   Логотип згортається до знака — він удвічі компактніший і лишається
   впізнаваним, тоді як зменшувати номер телефону далі нікуди. */
@media (max-width: 480px) {
    :root {
        --header-height:     56px;
        --header-height-top: 56px;
    }

    .header__inner {
        gap:           8px;
        padding-left:  16px;
        padding-right: 16px;
    }
    .header__logo-full     { display: none; }
    .header__logo-mark     { display: block; }
    .header__logo-mark-img { height: 28px; }
    .phone-action__number  { font-size: 14px; line-height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .header__panel,
    .header__nav,
    .header,
    .header::after,
    .header-nav__link,
    .header-nav__link::after,
    .phone-action__number,
    .phone-action__note,
    .phone-action::after,
    .burger__line { transition: none; }
}