/* ══════════════════════════════════════════════════════════════════════════
   bb-mega-menu — mega panel v položke menu (E10 / M1)

   Farby idú výhradne cez bb-* tokeny z bb-theme.css → tmavý režim sa prepne
   sám spolu s paletou témy, bez jediného ďalšieho pravidla.

   🔴 CLS = 0: panel je mimo toku (position:absolute) a skrytý cez
   visibility+opacity. Nikdy nemení výšku hlavičky.

   🔴 Animuje sa VÝHRADNE `opacity` a `transform` (GPU). Žiadne height/top.
   ══════════════════════════════════════════════════════════════════════════ */

.bb-mega-parent {
    position: relative;
}

/* Kontajner sirôt — panely, ktoré walker témy nevložil.
   JS ich presunie do správnej položky; do tej doby sú neviditeľné. */
.bb-mega-orphans {
    display: none !important;
}

/* ── Panel ────────────────────────────────────────────────────────────── */

.bb-mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;

    /* --bb-mega-x nastavuje JS tak, aby panel nevyliezol z obrazovky.
       Bez JS ostáva 0 → panel začína pri položke menu. */
    transform: translateX(var(--bb-mega-x, 0px));

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bb-mega__inner {
    box-sizing: border-box;
    background: var(--bb-surface, #fff);
    color: var(--bb-text, #1a1a1a);
    border: 1px solid var(--bb-border, rgba(0, 0, 0, .1));
    border-radius: 12px;
    box-shadow: var(--bb-shadow-lg, 0 10px 15px rgba(0, 0, 0, .08));
    padding: 24px;

    transform: translateY(-8px);
    transition: transform .18s ease, opacity .18s ease;
    opacity: 0;
}

/* Šírky */
.bb-mega--container .bb-mega__inner { min-width: 640px; max-width: calc(100vw - 32px); }
.bb-mega--wide      .bb-mega__inner { width: min(1200px, calc(100vw - 32px)); }

/* Cez celú šírku: bez JS sa správa ako „široký" — inak by na úzkych
   obrazovkách vytiekol mimo dokument a spôsobil vodorovné rolovanie. */
.bb-mega--full .bb-mega__inner {
    width: var(--bb-mega-w, min(1200px, calc(100vw - 32px)));
}

.bb-mega--full .bb-mega__inner,
.bb-mega--wide .bb-mega__inner {
    border-radius: 0 0 12px 12px;
}

/* ── Otvorené ─────────────────────────────────────────────────────────── */

/* 1) Základ BEZ JS — čistý CSS. Zlom je tu zámerne pevný: CSS nevie prečítať
      filter `bb_mega_menu_breakpoint`. S JS (bežný stav) platí filtrovaný zlom. */
@media (min-width: 1025px) {
    .bb-mega-parent:not(.bb-mega-parent--js):hover > .bb-mega,
    .bb-mega-parent:not(.bb-mega-parent--js):focus-within > .bb-mega {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .bb-mega-parent:not(.bb-mega-parent--js):hover > .bb-mega > .bb-mega__inner,
    .bb-mega-parent:not(.bb-mega-parent--js):focus-within > .bb-mega > .bb-mega__inner {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2) S JS — stav riadi trieda, nie hover. Vďaka tomu funguje Esc,
      dotyk aj klávesnica rovnako. */
.bb-mega-parent--js.is-mega-open > .bb-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bb-mega-parent--js.is-mega-open > .bb-mega > .bb-mega__inner {
    opacity: 1;
    transform: translateY(0);
}

/* ── Tlačidlo rozbalenia (pridáva JS) ─────────────────────────────────── */

.bb-mega__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-inline-start: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    border-radius: 4px;
    vertical-align: middle;
    flex: 0 0 auto;
}

.bb-mega__toggle svg {
    width: 14px;
    height: 14px;
    display: block;
    transition: transform .18s ease;
}

.is-mega-open > a > .bb-mega__toggle svg,
.is-mega-open > .bb-mega__toggle svg {
    transform: rotate(180deg);
}

.bb-mega__toggle:focus-visible {
    outline: 2px solid var(--bb-primary, var(--bb-primary, #7C3AED));
    outline-offset: 2px;
}

/* ── Mobil / hamburger — panel je bežná rozbaľovacia sekcia ───────────── */

.bb-mega-parent.is-mega-mobile > .bb-mega {
    position: static;
    transform: none;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bb-mega-parent.is-mega-mobile.is-mega-open > .bb-mega {
    display: block;
}

/*
 * 🔴🔴 PODKLAD PANELA SA NA MOBILE NESMIE ZRUŠIŤ.
 *
 * Pôvodné `background: none` zobralo panelu jeho vlastnú plochu a obsah
 * pristál priamo na pozadí hamburgerovej zásuvky. Odmerané na branike.com
 * (iframe 390 px): odkazy `#1F2937` na zásuvke `#1E1B4B` = **kontrast
 * 1,09 : 1**, teda text prakticky neviditeľný. Nadpisy stĺpcov 3,31 : 1.
 *
 * 🔴 Opravuje sa PODKLAD, nie text. Text si nastavuje autor panela a prepísať
 * mu ho by znamenalo hádať, čo chcel; pár pozadie+text je pritom navrhnutý pre
 * SVETLÝ panel z desktopu. Vrátením plochy sa obnoví presne ten pár.
 * [[feedback_background_and_text_color_pair]]
 *
 * 🔴 UNIVERZÁLNE, nie pre branike.com: farby idú z palety WEBU, na ktorom
 * panel beží. Člen s tmavou paletou dostane tmavý podklad a svetlý text,
 * pár zostane funkčný. Natvrdo zapísaná biela by mu web rozbila.
 *
 * Po oprave odmerané na tej istej stránke: 27 vzoriek, najhorší kontrast
 * **4,83 : 1** — nad prahom WCAG AA pre bežný text.
 */
.bb-mega-parent.is-mega-mobile > .bb-mega > .bb-mega__inner {
    width: auto;
    min-width: 0;
    max-width: none;
    /*
     * 🔴🔴 PANEL SA PRISPÔSOBÍ ZÁSUVKE, NEPREBIJE JU.
     *
     * Prvá oprava dala panelu `background: var(--wp--preset--color--base)`,
     * teda BIELU dosku. Kontrast tým vyšiel 4,83 : 1 — číslo v poriadku,
     * vzhľad nie. Brani: „písmo je vidno na mobile, ale je to ako pes na oko
     * biele pozadie, keď je to tmavé". Mal pravdu: opravil som meranie
     * a nepozrel sa na výsledok. [[feedback_verify_visual_in_browser]]
     *
     * Podklad je preto ZÁVOJ z aktuálnej farby textu, nie pevná farba:
     * v tmavej zásuvke svetlý (8 % bielej), v svetlej tmavý. Panel sa tak
     * jemne odlíši, ale zostane v tóne webu — a funguje to na akejkoľvek
     * palete, teda aj u členov s vlastnou značkou.
     */
    background: color-mix(in srgb, currentColor 8%, transparent);
    color: inherit;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    box-shadow: none;
    border-radius: 10px;
    padding: 12px;
    opacity: 1;
    transform: none;
}

/*
 * 🔴 Farby z palety, ktoré autor nastavil pre SVETLÝ panel, v tmavej zásuvke
 * neplatia. Odmerané: nadpisy stĺpcov mali `has-contrast-three-color`
 * (tlmená sivá `#6B7280`) a na zásuvke `#1E1B4B` vyšiel kontrast **3,31 : 1**,
 * teda pod prahom. Po zdedení farby panela je to 15,99 : 1 a hierarchiu drží
 * veľkosť a tučnosť nadpisu, nie odtieň.
 *
 * 🔴 `!important` je tu nutné, nie pohodlné: WordPress generuje paletové
 * triedy (`.has-*-color`) rovno s `!important`, takže bez neho pravidlo
 * neprejde. Odmerané — `color: inherit` bez neho nemalo účinok.
 *
 * 🔴 `:where()` drží špecificitu na nule, aby si klient vedel farbu
 * v konkrétnom paneli pretlačiť vlastným pravidlom, keby naozaj chcel.
 */
.bb-mega-parent.is-mega-mobile
    > .bb-mega
    > .bb-mega__inner :where(h1, h2, h3, h4, h5, h6, p, a, li, span, strong) {
    color: inherit !important;
}

/*
 * ── ŠÍPKA VEDĽA POLOŽKY, NIE POD ŇOU ─────────────────────────────────────
 *
 * Brani: „tá malá šípka čo otvorí podmenu má byť vedľa hlavnej položky, aby
 * bolo jasné, že tam niečo je."
 *
 * Odmerané pred opravou (iframe 390 px): odkaz na `66,190 296×32`, šípka na
 * `319,222` — o riadok nižšie a odtrhnutá. Príčina: jadro dáva položkám
 * v otvorenej zásuvke `flex-direction: column`, takže odkaz zabral celú šírku
 * a na šípku neostalo miesto v riadku.
 *
 * 🔴🔴 `.wp-block-navigation` NA ZAČIATKU JE ŠPECIFICKOSŤ, NIE OZDOBA.
 * Pravidlo jadra je `…is-menu-open:where(…) .wp-block-navigation-item`; `:where()`
 * má nulovú špecifickosť, takže je to (0,3,0) — presne toľko, koľko mala prvá
 * verzia tohto pravidla. Pri zhode rozhoduje poradie a `style.min.css` jadra sa
 * načíta NESKÔR než náš plugin, takže jadro vyhralo a šípka zostala pod textom.
 * Odmerané: `flex-direction` vychádzalo `column` napriek nášmu `row`.
 * Predradenie dvíha špecifickosť na (0,4,0) a pravidlo vyhrá bez `!important`.
 * Téma rieši to isté rovnako pri klasickom podmenu. [[feedback_css_rule_must_win_not_exist]]
 */
.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    .bb-mega-parent {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

/* Odkaz sa zúži na text, aby šípke ostalo miesto v tom istom riadku. */
.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    .bb-mega-parent > .wp-block-navigation-item__content {
    flex: 0 1 auto;
    width: auto;
}

.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    .bb-mega-parent > .bb-mega__toggle {
    flex: 0 0 auto;
    margin-inline-start: .25rem;
}

/* Panel patrí pod dvojicu názov+šípka, teda na celú šírku riadka. */
.wp-block-navigation
    .wp-block-navigation__responsive-container.is-menu-open
    .bb-mega-parent > .bb-mega {
    flex-basis: 100%;
    margin-top: 8px;
}

/* Väčší dotykový cieľ na mobile (WCAG 2.5.8 — minimum 24 px, dávame 44). */
.bb-mega-parent.is-mega-mobile > a > .bb-mega__toggle,
.bb-mega-parent.is-mega-mobile > .bb-mega__toggle {
    width: 44px;
    height: 44px;
}

/*
 * Samotná šípka. 14 px bolo na dotykovej obrazovke sotva vidieť — Brani:
 * „treba aby tá šípka bola väčšia". 22 px je čitateľné a stále sa vojde do
 * 44 px cieľa bez toho, aby zvýšilo riadok menu.
 */
.bb-mega-parent.is-mega-mobile > a > .bb-mega__toggle svg,
.bb-mega-parent.is-mega-mobile > .bb-mega__toggle svg {
    width: 22px;
    height: 22px;
}

/* ── Rešpekt k nastaveniu obmedzeného pohybu ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .bb-mega__inner,
    .bb-mega__toggle svg {
        transition: none;
    }
    .bb-mega__inner {
        transform: none;
    }
}