/*
 * Header menu — primary navigation in the brand-blue band.
 *
 * Mobile-first. The mobile burger toggles a slide-in drawer that uses
 * an Apple-style drilldown: tapping a parent slides the next panel in
 * from the right; a back arrow in the topbar slides it back. No
 * accordions, no chevrons, no nested expansion inside the same scroll
 * container. Desktop is a horizontal row with floating dropdowns on
 * hover, unchanged.
 *
 * Drawer state lives on .header-nav__container (the common ancestor
 * of the toggle button and the drawer) so a single .is-open class
 * controls both the burger morph AND the drawer slide.
 *
 * Breakpoint: 992px (matches MOBILE_QUERY in header-menu.js).
 */

/* ── Container & toggle ─────────────────────────────────────────── */

.header-nav__menu {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

/* Burger button — visible only on mobile, morphs into × when open. */
.primary-menu__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--c-surface);
    cursor: pointer;
    transition: background-color .15s ease;
    flex: 0 0 auto;
}

.primary-menu__toggle:hover,
.primary-menu__toggle:focus-visible {
    background-color: rgba(255, 255, 255, 0.12);
    outline: none;
}

.primary-menu__toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65);
}

/* Apple-style 3-line burger with a two-phase morph.
 *
 * Phase 1 (0–200 ms): top and bottom bars slide to the centre, the
 *                     middle bar fades out underneath them.
 * Phase 2 (200–400 ms): the two converged bars rotate into an X.
 *
 * Reversal (× → burger) plays the phases backward — rotate-back first,
 * then slide back out, with the middle bar reappearing in phase 2.
 *
 * Animated via `top` / `bottom` (slide) + `transform: rotate` (cross),
 * with transition-delays swapped between the closed and open states
 * so each direction runs phase 1 before phase 2. */
.primary-menu__toggle-bars {
    position: relative;
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    /* Middle bar fades via its OWN background-color (not opacity).
       Opacity on the parent would tank the entire stacking context
       and hide the ::before/::after children too — exactly the bug
       that left the X invisible last attempt. background-color paints
       only this element's own box, the pseudos keep their own colour.
       Closed default: bg transition is delayed by phase 1, so on close
       the middle bar reappears only after the outer bars have
       finished un-rotating. */
    transition: background-color .2s ease .2s;
}

.primary-menu__toggle-bars::before,
.primary-menu__toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform-origin: center;
    /* Closed default: rotation un-does first (0–200 ms), then the
       bars slide back out to top/bottom (200–400 ms). */
    transition: transform .2s ease 0s,
                top .2s ease .2s,
                bottom .2s ease .2s;
}

.primary-menu__toggle-bars::before { top: -7px; }
.primary-menu__toggle-bars::after  { bottom: -7px; }

/* Burger → × morph. JS adds .is-open on .header-nav__container. */
.header-nav__container.is-open .primary-menu__toggle-bars {
    background-color: transparent;
    /* Open: middle bar fades during phase 1 (no delay) so it's gone
       by the time the outer bars start rotating. */
    transition: background-color .2s ease 0s;
}

.header-nav__container.is-open .primary-menu__toggle-bars::before,
.header-nav__container.is-open .primary-menu__toggle-bars::after {
    /* Open: bars slide to centre first (0–200 ms), then rotate into
       the X (200–400 ms). Mirror image of the closed-state delays. */
    transition: top .2s ease 0s,
                bottom .2s ease 0s,
                transform .2s ease .2s;
}

.header-nav__container.is-open .primary-menu__toggle-bars::before {
    top: 0;
    transform: rotate(45deg);
}
.header-nav__container.is-open .primary-menu__toggle-bars::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* ── Mobile layout (default — drilldown drawer) ──────────────── */

.primary-menu-drawer {
    position: fixed;
    /* Drawer starts BELOW the visible header (admin bar + optional
       contact strip + brand band) so the burger button itself stays
       visible inside the band and can morph into × on open. */
    top: calc(var(--wp-admin-header-height, 0px) + var(--header-feed-height, 0px) + var(--height, 54px));
    left: 0;
    bottom: 0;
    width: min(86vw, 360px);
    /* The local stacking context of <header> (z-index:11 in style.css)
       caps the drawer at the header layer; lifting via z-index won't
       escape that cap. We instead push the scrim BELOW the header
       layer so the brand band stays crisp atop the dim and the drawer
       sits naturally above the scrim. */
    z-index: 5;
    background-color: var(--c-surface);
    box-shadow: 8px 0 32px -8px rgba(0, 0, 0, 0.18);
    /* Vertical layout: fixed-height topbar + flexible viewport. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.32, .72, .35, 1), visibility .28s linear;
}

.header-nav__container.is-open .primary-menu-drawer {
    transform: translateX(0);
    visibility: visible;
}

/* Per-panel sticky header. Lives inside each panel <ul> as the first
   <li>, so it slides in/out with the panel as a single unit (no
   separate cross-fade machinery). Back arrow + section title on
   subpanels; just the title on the root panel.
   `position: sticky; top: 0` keeps it pinned to the top of the
   scrollable panel as the user scrolls long sub-lists. */
.primary-menu__panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .25rem;
    min-height: 56px;
    padding: .5rem .75rem;
    margin: -.25rem 0 0;
    background-color: var(--c-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.primary-menu__panel-title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--c-text);
    /* Long titles ellipsize so the header height stays predictable. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.primary-menu-drawer__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--c-text);
    cursor: pointer;
    transition: background-color .15s ease;
    flex: 0 0 auto;
}
.primary-menu-drawer__back:hover,
.primary-menu-drawer__back:focus-visible {
    background-color: var(--c-surface-tint);
    outline: none;
}

/* Viewport — the WP-rendered <nav class="header-nav__menu"> wrapper.
   Anchors absolutely-positioned panels and clips horizontal overflow
   during slides. Explicitly resets every default style the original
   .header-nav__menu rule applied (display:flex, align-items:center,
   flex:1, min-width:0) — those were intended for the desktop row
   layout and break panel containment when the drawer is in play. */
.primary-menu-drawer > nav {
    flex: 1 1 auto;
    display: block;
    align-items: initial;
    min-width: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Each panel (root UL + every nested submenu UL) fills the viewport
   absolutely. Three logical states:
     active  — currently visible (translateX 0)
     ahead   — offscreen right (translateX 100%), default for panels
               the user hasn't entered yet
     behind  — same position as active (translateX 0), but covered by
               whichever panel is currently active. Only ONE panel
               animates at a time: the incoming child slides in from
               ahead, the outgoing child slides back out to ahead.
               The parent never moves — it just sits underneath. This
               avoids parallel cross-panel motion that previously
               leaked items past the drawer's left edge. */
.primary-menu,
.primary-menu__submenu {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: .25rem 0 1.5rem;
    list-style: none;
    background-color: var(--c-surface);
    /* Vertical scroll only. overflow-x MUST be hidden explicitly:
       per CSS spec, an overflow-y of auto with overflow-x left at the
       default `visible` is computed as auto on both axes — which let
       the nested-panel's translateX(100%) child create a horizontal
       scroll bar inside the parent panel and let the user drag the
       previous level into view. */
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Default state = "ahead" (offscreen right, hidden from a11y).
       JS toggles data-panel-state to flip to active/behind. The
       visibility transition is DELAYED by the transform duration:
       when going hidden, the panel finishes its slide-out before
       disappearing; when becoming visible, visibility flips to
       visible instantly (delay overridden in the active/behind
       rule below) so the slide-in is observable. */
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.32, .72, .35, 1),
                visibility 0s linear .3s;
}

.primary-menu[data-panel-state="active"],
.primary-menu__submenu[data-panel-state="active"],
.primary-menu[data-panel-state="behind"],
.primary-menu__submenu[data-panel-state="behind"] {
    transform: translateX(0);
    visibility: visible;
    transition: transform .3s cubic-bezier(.32, .72, .35, 1),
                visibility 0s linear 0s;
}

.primary-menu__scrim {
    position: fixed;
    inset: 0;
    z-index: 9; /* below .header (z-index:11) */
    background-color: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s linear;
}

.primary-menu__scrim.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Mobile: each item is a simple block. Whole row is the tap target
   (link OR drilldown trigger, never both). Chevrons and the
   dedicated expand button only matter on desktop and are hidden
   below — drilldown discovery happens via the panel transition
   instead of a per-item affordance. */
.primary-menu__item {
    list-style: none;
    display: block;
}

.primary-menu__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 1.25rem;
    min-height: 44px;
    width: 100%;
    font: inherit;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
    /* Long Ukrainian labels need a hint to break inside words on
       narrow drawers. */
    overflow-wrap: anywhere;
}

.primary-menu__link:hover,
.primary-menu__link:focus-visible {
    background-color: var(--c-surface-tint);
    outline: none;
}

.primary-menu__label {
    flex: 1 1 auto;
    min-width: 0;
}

/* Active page indicator inside the drilled panel — left-accent +
   tint + bold brand-blue label, matching the desktop submenu look.
   Scoped to mobile because desktop has its own top-level active
   styling (white underline on the brand band) and its own submenu
   active styling (defined further down in the desktop @media block). */
@media (max-width: 991px) {
    .primary-menu__item--active > .primary-menu__link {
        background-color: var(--c-surface-tint);
        color: var(--c-brand);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--c-brand);
    }
}

/* Chevron + expand button are desktop-only affordances; the mobile
   drilldown doesn't need them because the entire row is one tap
   target and the panel slide makes the action obvious. */
.primary-menu__expand,
.primary-menu__chevron {
    display: none;
}

/* Scroll lock when the drawer is open. The class is set on both
   <html> and <body> by the JS — iOS Safari only honours the lock
   when applied to the pair together. height: 100% caps the document
   to the viewport so there is nothing to scroll past. No position
   change, so opening/closing the drawer doesn't wobble. */
html.disable-scroll,
body.disable-scroll {
    overflow: hidden;
    height: 100%;
}

/* Suppress any phantom horizontal scrollbar on the document. The
   off-canvas drawer (translateX(-100%) when closed) and ahead-state
   panels (translateX(100%)) extend beyond the viewport bounds; some
   browsers treat that as scrollable width even when the elements are
   inside an overflow:hidden ancestor. overflow-x: clip blocks the
   scroll without affecting layout — the drawer still slides smoothly
   from offscreen because clip stops at the visual edge. */
@media (max-width: 991px) {
    html,
    body {
        overflow-x: clip;
    }
}

/* ── Desktop layout (≥992px) ──────────────────────────────────── */

@media (min-width: 992px) {
    .primary-menu__toggle,
    .primary-menu__scrim,
    .primary-menu__panel-header {
        display: none;
    }

    /* Drawer wrapper collapses out of the layout so its inner <nav>
       and the toggle sibling lay out side-by-side as on the original
       desktop nav. display:contents is exactly the right tool — the
       wrapper still exists in the DOM (so .header-nav__container
       .is-open targeting still works on mobile) but contributes no
       box on desktop. */
    .primary-menu-drawer {
        display: contents;
    }

    /* The mobile rule below clips submenu panels with overflow: hidden
       so drilldown slides stay inside the drawer. On desktop the same
       <nav> hosts dropdowns that float below the brand band, so the
       clip would swallow them — restore visible overflow here. */
    .primary-menu-drawer > nav {
        overflow: visible;
    }

    /* Restore desktop chevron/expand visibility (mobile default
       hides them via .primary-menu__expand,.primary-menu__chevron
       { display:none }). */
    .primary-menu__expand {
        display: inline-flex;
    }
    .primary-menu__chevron {
        display: block;
    }

    /* Hide top-level chevron on desktop — hover already implies
       "more behind", chevron only crowded the brand-blue band.
       Inside submenus the chevron survives, marking nested items. */
    .primary-menu > .primary-menu__item > .primary-menu__expand {
        display: none;
    }
    .primary-menu > .primary-menu__item > .primary-menu__link--toggle .primary-menu__chevron {
        display: none;
    }

    .primary-menu {
        position: static;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        flex-wrap: nowrap;
        gap: 0;
        width: auto;
        max-width: none;
        height: auto;
        margin-inline-start: -.75rem;
        padding: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        transform: none;
        visibility: visible;
        transition: none;
    }

    .primary-menu__item {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .primary-menu__link {
        flex: 0 0 auto;
        padding: 0 .75rem;
        height: var(--height, 54px);
        min-height: 0;
        color: var(--c-surface);
        font-weight: 500;
        line-height: 1.15;
        font-size: clamp(.85rem, .9vw + .55rem, 1rem);
        hyphens: auto;
        text-wrap: balance;
        word-break: break-word;
    }

    .primary-menu__label {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Hover wash for the brand-blue band — scoped to TOP-LEVEL items
       only. Without the `.primary-menu >` direct-child prefix, this
       rule also fired for nested items via :hover propagation, turning
       a 2nd-level item's text white-on-white when a 3rd-level child
       was hovered. Submenu links have their own hover style below. */
    .primary-menu > .primary-menu__item:hover > .primary-menu__link,
    .primary-menu > .primary-menu__item > .primary-menu__link:hover,
    .primary-menu > .primary-menu__item > .primary-menu__link:focus-visible {
        background-color: rgba(255, 255, 255, 0.12);
        color: var(--c-surface);
    }

    /* Top-level — semi-transparent white underline. Thin for the
       branch that contains the current page, thick for the exact
       match. Visible on the brand-blue band, never blends into a
       white background since it lives only on the top row. */
    .primary-menu > .primary-menu__item--ancestor:not(.primary-menu__item--active) {
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55);
    }
    .primary-menu > .primary-menu__item--active {
        box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.55);
    }
    .primary-menu > .primary-menu__item--active > .primary-menu__link {
        color: var(--c-surface);
    }

    /* Submenu items — no underline. Active page gets a left accent
       bar + brand-coloured bold text + light tint background. Soft
       enough to coexist with surrounding rows, distinct enough to
       read as "this is the page" — visibly stronger than the hover
       state (light tint + brand text, no bar, regular weight). */
    .primary-menu__submenu .primary-menu__item--active > .primary-menu__link {
        box-shadow: inset 3px 0 0 var(--c-brand);
        background-color: var(--c-surface-tint);
        color: var(--c-brand);
        font-weight: 600;
    }
    .primary-menu__submenu .primary-menu__item--active > .primary-menu__link:hover,
    .primary-menu__submenu .primary-menu__item--active > .primary-menu__link:focus-visible,
    .primary-menu__submenu .primary-menu__item--active:hover > .primary-menu__link {
        box-shadow: inset 3px 0 0 var(--c-brand);
        background-color: var(--c-surface-tint);
        color: var(--c-brand);
    }

    .primary-menu__expand {
        position: static;
        width: auto;
        height: var(--height, 54px);
        min-width: 28px;
        padding: 0 .35rem 0 .15rem;
        margin-left: -.4rem;
        color: var(--c-surface);
    }

    /* Top-level expand button hover wash — direct-child scope so it
       doesn't cascade onto submenu chevron buttons (which have their
       own hover style further down). */
    .primary-menu > .primary-menu__item > .primary-menu__expand:hover,
    .primary-menu > .primary-menu__item > .primary-menu__expand:focus-visible,
    .primary-menu > .primary-menu__item:hover > .primary-menu__expand,
    .primary-menu > .primary-menu__item[data-state="open"] > .primary-menu__expand {
        background-color: rgba(255, 255, 255, 0.12);
        color: var(--c-surface);
    }

    /* Submenu expand button is mobile-only — desktop opens nested
       panels on hover/focus (CSS-driven), so the explicit chevron
       button is dead UI here. Hiding it also drops its tab stop;
       keyboard users still expand via :focus-within on the link. */
    .primary-menu__submenu .primary-menu__expand {
        display: none;
    }

    /* Floating submenu on desktop. Opacity-only transition — a translate
       reveal made the very first frames look like a thin horizontal
       strip directly under the parent item, which read as a phantom
       bottom border. With pure opacity the panel just fades in
       without any partial-reveal artefact. */
    .primary-menu__submenu {
        position: absolute;
        top: 100%;
        left: 0;
        right: auto;
        bottom: auto;
        flex: none;
        min-width: 240px;
        max-width: 320px;
        margin: 0;
        padding: .5rem 0;
        background-color: var(--c-surface);
        box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.18),
                    0 4px 8px -2px rgba(15, 23, 42, 0.08);
        max-height: none;
        /* Override the mobile overflow:hidden — without this the
           nested 2nd-level submenu (positioned left:100%) would be
           clipped by the parent submenu's box. */
        overflow: visible;
        /* Reset the mobile drilldown defaults (translateX(100%) and
           visibility:hidden via the panel-state machinery): on desktop
           we drive open/close via opacity instead. */
        transform: none;
        opacity: 0;
        visibility: hidden;
        /* Hover-intent open delay (100 ms): a brief mouse pass over
           a parent item shouldn't trigger the panel — only sustained
           hover does. Closing is instant. */
        transition: opacity .15s ease 100ms, visibility 0s linear 100ms;
        pointer-events: none;
    }

    .primary-menu__item:hover > .primary-menu__submenu,
    .primary-menu__item:focus-within > .primary-menu__submenu,
    .primary-menu__item[data-state="open"] > .primary-menu__submenu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .15s ease 100ms, visibility 0s linear;
    }

    /* Right-edge boundary flip — JS adds --flip when the submenu would
       overflow the viewport. */
    .primary-menu__item--flip > .primary-menu__submenu {
        left: auto;
        right: 0;
    }

    /* Nested submenu opens flush against the parent submenu (no gap):
       the cursor must cross from one to the other without leaving a
       hover region, otherwise the parent closes under it. */
    .primary-menu__submenu--nested {
        top: 0;
        left: 100%;
        margin-left: 0;
    }

    .primary-menu__item--flip .primary-menu__submenu--nested {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .primary-menu__submenu .primary-menu__link {
        flex: 1 1 auto;
        height: auto;
        min-height: 40px;
        padding: .55rem 1rem;
        color: var(--c-text);
        font-weight: 400;
    }

    .primary-menu__submenu .primary-menu__link:hover,
    .primary-menu__submenu .primary-menu__link:focus-visible,
    .primary-menu__submenu .primary-menu__item:hover > .primary-menu__link {
        background-color: var(--c-surface-tint);
        color: var(--c-brand);
    }

    .primary-menu__submenu .primary-menu__expand {
        height: auto;
        min-height: 40px;
        margin-left: 0;
        padding: 0 .75rem;
        color: var(--c-text);
    }

    .primary-menu__submenu .primary-menu__expand:hover,
    .primary-menu__submenu .primary-menu__expand:focus-visible,
    .primary-menu__submenu .primary-menu__item:hover > .primary-menu__expand {
        background-color: var(--c-surface-tint);
        color: var(--c-brand);
    }

    /* "Overview" row — first item in a clickable parent's dropdown,
       linking to the parent's own landing page. The label already
       differs from sibling labels (defaults to "Огляд", or a custom
       per-item override), so no extra weight/border is needed to
       distinguish it. */

    /* Nested submenus open to the side — chevron points right and
       stays put when its branch is open. */
    .primary-menu__submenu .primary-menu__chevron {
        --chevron-rot: -90deg;
    }
    .primary-menu__submenu .primary-menu__item[data-state="open"] > .primary-menu__expand .primary-menu__chevron,
    .primary-menu__submenu .primary-menu__item[data-state="open"] > .primary-menu__link--toggle .primary-menu__chevron {
        --chevron-rot: -90deg;
    }
}

/* ── Mobile-only layout details ────────────────────────────────── */

@media (max-width: 991px) {
    /* Mobile drawer holds the menu off-canvas, so the wrapper should
       not claim flex space in the row. Burger at start, search at
       far right. */
    .header-nav__menu {
        flex: 0 0 auto;
        order: 0;
    }
    .primary-menu__toggle {
        order: 0;
    }
    .header-search-toggle {
        margin-left: auto;
    }

    /* Overview row is a desktop-only affordance: the dropdown trigger
       on desktop is hover-only, so a separate "go to section" link is
       useful. On mobile the parent row is itself tappable — overview
       would just duplicate it inside the drilldown panel. */
    .primary-menu__item--overview {
        display: none;
    }
}

/* ── Screen-reader helper, shared with the rest of the theme ───── */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
            clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}