/**
 * @author    Webtom.pl <info@webtom.pl>
 * @copyright 2026 Webtom.pl
 *
 * Hand-authored (no build step — paired with views/js/megamenu.js, also hand-authored vanilla
 * JS). Uses the theme's own Bootstrap 5.3 CSS custom properties (--bs-body-color,
 * --bs-link-hover-color, --bs-border-color, --bs-tertiary-bg, --bs-body-bg,
 * --bs-border-radius, --bs-box-shadow-md) instead of hardcoded hex values, confirmed against
 * themes/hummingbird/src/scss/prestashop/modules/_mainmenu.scss's own component styling.
 *
 * STRUCTURE: four sections, deliberately kept from touching each other —
 *   1. SHARED base — layout resets and structural wrappers only. Nothing here changes
 *      `display`/`position`/visibility in response to :hover, :focus, or any interaction, so
 *      it can never conflict with either breakpoint's own behavior.
 *   2. DESKTOP (`@media (min-width: 992px)`) — the full-width hover/focus dropdown grid.
 *   3. MOBILE (`@media (max-width: 991.98px)`) — the hamburger-triggered off-canvas drawer
 *      with drill (depth 0) + accordion (depth 1+) navigation.
 *   4. COLUMNS MODE (`.wt-megamenu--columns`, both media queries) — WtMegamenu::MODE_COLUMNS,
 *      the footer-style layout added alongside the "mode" setting: depth-0 items as
 *      always-visible desktop columns instead of a hover dropdown, tap-to-expand accordion
 *      columns on mobile instead of the full-screen drill. Every rule here uses the compound
 *      `.wt-megamenu.wt-megamenu--columns` selector specifically so it always outranks the
 *      dropdown-mode rule it's overriding regardless of source order (2 classes beats 1), the
 *      same reasoning section 1's own docblock paragraph gives for scoping desktop/mobile.
 * An earlier version left the desktop dropdown's `:hover`/`:focus-within` reveal rule
 * UNSCOPED (no media query at all) — harmless-looking, since `:hover` doesn't fire on touch,
 * but tapping a mobile drill/accordion button DOES focus it, which triggered `:focus-within`
 * on its ancestor `.wt-megamenu__item--has-children` and forced the desktop's absolutely
 * positioned grid panel to `display: grid` on top of whatever the mobile accordion was
 * showing — that rule's selector specificity (two classes + a pseudo-class) beat the mobile
 * overrides trying to hide it. Every desktop-only rule now lives inside `@media (min-width:
 * 992px)` specifically so this can't happen again — desktop and mobile share the class names
 * in the markup, but never share a live CSS rule that reacts to interaction.
 */

/* ============================================================
   1. SHARED base
   ============================================================ */

.wt-megamenu {
  position: relative;
  width: 100%;
}

.wt-megamenu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wt-megamenu__item {
  position: static;
}

.wt-megamenu__row {
  display: flex;
  align-items: center;
}

.wt-megamenu__link {
  display: block;
  font-weight: 500;
  color: var(--bs-body-color, #212529);
  text-decoration: none;
  flex: 1 1 auto;
}

/* kind=textblock — admin-authored WYSIWYG, no .wt-megamenu__row wrapper (no link/controls of
   its own, see _megamenu_node.tpl). Reset paragraph margins (TinyMCE/rich text always wraps
   lines in <p>) and let its own links use the same hover token as every other menu link. */
.wt-megamenu__textblock {
  font-size: 0.875rem;
  color: var(--bs-secondary-color, #495057);
}

.wt-megamenu__textblock p {
  margin: 0 0 0.5rem;
}

.wt-megamenu__textblock p:last-child {
  margin-bottom: 0;
}

.wt-megamenu__textblock a {
  color: inherit;
  text-decoration: underline;
}

.wt-megamenu__textblock a:hover,
.wt-megamenu__textblock a:focus {
  color: var(--bs-link-hover-color, #0a58ca);
}

/* Mobile-only trigger elements are hidden by default here; the mobile media query is the only
   place that ever reveals them, so on desktop they stay display:none regardless of any focus/
   click state. */
.wt-megamenu-toggle,
.wt-megamenu__drill,
.wt-megamenu__accordion-toggle,
.wt-megamenu__mobile-header,
.wt-megamenu__close {
  display: none;
}

/* ============================================================
   2. DESKTOP (>= 992px) — hover/focus dropdown, grid columns
   ============================================================ */

@media (min-width: 992px) {
  .wt-megamenu__list--root {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.25rem;
  }

  .wt-megamenu__list--root > .wt-megamenu__item {
    display: flex;
    align-items: center;
  }

  .wt-megamenu__list--root > .wt-megamenu__item > .wt-megamenu__row > .wt-megamenu__link {
    padding: 1.25rem 0.75rem;
    transition: var(--bs-transition-default, color 0.15s ease-in-out);
  }

  .wt-megamenu__list--root > .wt-megamenu__item > .wt-megamenu__row > .wt-megamenu__link:hover,
  .wt-megamenu__list--root > .wt-megamenu__item > .wt-megamenu__row > .wt-megamenu__link:focus {
    color: var(--bs-link-hover-color, #0a58ca);
  }

  /* Full-width dropdown panel, instant show/hide — no slide/fade transition (explicitly
     requested — an earlier version animated it in with opacity+translateY). */
  .wt-megamenu__list--depth-1 {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1060;
    display: none;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.5rem;
    width: 100%;
    padding: 2rem;
    background-color: var(--bs-body-bg, #fff);
    border-top: 0.0625rem solid var(--bs-border-color, #dee2e6);
    box-shadow: var(--bs-box-shadow-md, 0 0.625rem 1.25rem rgba(0, 0, 0, 0.1));
  }

  .wt-megamenu__item--has-children:hover > .wt-megamenu__list--depth-1,
  .wt-megamenu__item--has-children:focus-within > .wt-megamenu__list--depth-1 {
    display: grid;
  }

  .wt-megamenu__item--depth-1 {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    min-width: 0;
    /* A group with many links spans several panel columns (--wt-megamenu-cols, set by the renderer). Grid auto-placement
       then starts the NEXT group in a fresh column right after it — groups never share a column. */
    grid-column: span var(--wt-megamenu-cols, 1);
  }

  /* ...and its links flow across those columns, balanced (11 links in 2 columns = 6 + 5), never split mid-link.
     Column-count 1 (the default) is the plain list it always was. */
  .wt-megamenu:not(.wt-megamenu--columns) .wt-megamenu__item--depth-1 > .wt-megamenu__list--depth-2 {
    display: block;
    column-count: var(--wt-megamenu-cols, 1);
    column-gap: 2rem;
  }

  .wt-megamenu:not(.wt-megamenu--columns) .wt-megamenu__item--depth-1 > .wt-megamenu__list--depth-2 > .wt-megamenu__item {
    padding-bottom: 0.5rem;
    break-inside: avoid;
  }

  .wt-megamenu__item--depth-1 > .wt-megamenu__row > .wt-megamenu__link {
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bs-body-color, #212529);
  }

  .wt-megamenu__item--depth-1 > .wt-megamenu__row > .wt-megamenu__link:hover,
  .wt-megamenu__item--depth-1 > .wt-megamenu__row > .wt-megamenu__link:focus {
    color: var(--bs-link-hover-color, #0a58ca);
  }

  .wt-megamenu__list--depth-2,
  .wt-megamenu__list--depth-3 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .wt-megamenu__list--depth-2 .wt-megamenu__link,
  .wt-megamenu__list--depth-3 .wt-megamenu__link {
    padding: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--bs-secondary-color, #495057);
  }

  .wt-megamenu__list--depth-2 .wt-megamenu__link:hover,
  .wt-megamenu__list--depth-2 .wt-megamenu__link:focus,
  .wt-megamenu__list--depth-3 .wt-megamenu__link:hover,
  .wt-megamenu__list--depth-3 .wt-megamenu__link:focus {
    color: var(--bs-link-hover-color, #0a58ca);
  }
}

/* ============================================================
   3. MOBILE (<= 991.98px) — hamburger drawer, drill + accordion
   ============================================================ */

@media (max-width: 991.98px) {
  .wt-megamenu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3125rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }

  .wt-megamenu-toggle__bar {
    display: block;
    width: 1.5rem;
    height: 0.125rem;
    background-color: var(--bs-body-color, #212529);
    border-radius: 999px;
  }

  /* Fixed positioning: the panel stays wherever its own hook put it in the DOM, but visually
     detaches to a full-height drawer pinned to the viewport's right edge — no relocation of
     the actual menu markup needed, which is why toggle_id_hook and id_hook can differ. */
  .wt-megamenu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1065;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: var(--bs-body-bg, #fff);
    box-shadow: var(--bs-box-shadow-md, 0 0.625rem 1.25rem rgba(0, 0, 0, 0.1));
    transform: translateX(100%);
    transition: transform 0.25s ease;
  }

  .wt-megamenu.wt-megamenu--mobile-open {
    transform: translateX(0);
  }

  .wt-megamenu__link {
    padding: 0.75rem 0;
  }

  /* Only one "screen" worth of CONTENT visible at a time — views/js/megamenu.js moves
     .wt-megamenu__list--active between levels on drill/back, completely unchanged from the
     very first version of this file. What changed twice now is which CSS property this
     section uses to act on that class, because depth-1 screens are NESTED inside their own
     depth-0 <li> (required so the desktop `:hover > child` selector further up this file
     still works) — making every depth-1 screen a genuine DOM DESCENDANT of the root screen.
     Attempt 1 (`display: none` on the inactive screen): hides the element's entire subtree
     with no way for a descendant to opt back in, so drilling in always produced a blank
     screen — the newly-active depth-1 <ul> was still buried inside the now-inactive root
     <ul>.
     Attempt 2 (`visibility: hidden`/`visible`, which — unlike `display` — a descendant CAN
     override): fixed the blank screen, but real-device + a real headless-Chromium replay of
     this exact drill-then-back sequence both showed a reproducible paint glitch on the way
     BACK — root's content and the depth-1 content briefly double-painted on top of each
     other. Two same-size, same-position (`inset: 0`) absolutely-positioned boxes, one nested
     inside the other, toggling only `visibility` (no layout change at all) turned out to be
     an unreliable repaint trigger in real Chromium, not just a theoretical edge case.
     Fixed for real (attempt 3) by never hiding the ROOT SCREEN'S OWN BOX at all — it stays
     `display: flex` unconditionally, so nothing above any depth-1 descendant is ever
     suppressed. Only root's OWN content (its header, and every item's own link+drill row) is
     display:none/flex-toggled based on whether ROOT itself is the active screen. The specific
     depth-1 <ul> nested inside whichever item was drilled into is governed entirely by its
     own separate, ordinary display:none/flex toggle below (safe now — nothing between it and
     the panel's own fixed positioning context is ever hidden), and paints on top of root's
     now-empty box purely because an absolutely-positioned box stacks above the static-flow
     content around it — no explicit z-index needed. */
  .wt-megamenu__list--root {
    display: flex;
    flex-direction: column;
    width: auto;
    padding: 1rem;
  }

  .wt-megamenu__list--root > .wt-megamenu__mobile-header--root,
  .wt-megamenu__list--root > .wt-megamenu__item > .wt-megamenu__row {
    display: none;
  }

  .wt-megamenu__list--root.wt-megamenu__list--active > .wt-megamenu__mobile-header--root,
  .wt-megamenu__list--root.wt-megamenu__list--active > .wt-megamenu__item > .wt-megamenu__row {
    display: flex;
  }

  .wt-megamenu__list--depth-1 {
    display: none;
    position: absolute;
    inset: 0;
    overflow-y: auto;
    flex-direction: column;
    width: auto;
    padding: 1rem;
    background-color: var(--bs-body-bg, #fff);
  }

  .wt-megamenu__list--depth-1.wt-megamenu__list--active {
    display: flex;
  }

  .wt-megamenu__list--root > .wt-megamenu__item {
    align-items: stretch;
  }

  .wt-megamenu__item--depth-1,
  .wt-megamenu__item--depth-2,
  .wt-megamenu__item--depth-3 {
    display: block;
  }

  .wt-megamenu__drill {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--bs-secondary-color, #495057);
    background: none;
    border: none;
  }

  /* One header row per screen: root gets just a close button (title left blank via an empty
     span, kept for consistent flex spacing); every depth-1 screen gets back + title (this
     node's own label, baked in server-side) + close, all three in one row — matches the
     reference design's "‹ Sejfy ✕" header exactly, not a separate back-labeled list item. */
  .wt-megamenu__mobile-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 0.0625rem solid var(--bs-border-color, #dee2e6);
  }

  .wt-megamenu__mobile-header-title {
    flex: 1 1 auto;
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    color: var(--bs-body-color, #212529);
  }

  .wt-megamenu__back,
  .wt-megamenu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--bs-body-color, #212529);
    background: none;
    border: none;
  }

  .wt-megamenu__close {
    font-size: 1.5rem;
    margin-left: auto;
  }

  /* Depth-1+ items with children: accordion, not a new screen — the chevron rotates via
     aria-expanded, children are a plain nested list hidden until .wt-megamenu__item--expanded
     is toggled by views/js/megamenu.js. Siblings are untouched (any number can be open). */
  .wt-megamenu__accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font-size: 0.875rem;
    color: var(--bs-secondary-color, #495057);
    background: none;
    border: none;
    transition: transform 0.15s ease;
  }

  .wt-megamenu__accordion-toggle[aria-expanded='true'] {
    transform: rotate(180deg);
  }

  .wt-megamenu__item--depth-1 > .wt-megamenu__row > .wt-megamenu__link {
    font-weight: 700;
  }

  .wt-megamenu__list--depth-2,
  .wt-megamenu__list--depth-3 {
    display: none;
    padding: 0 0 0 1rem;
  }

  .wt-megamenu__item--expanded > .wt-megamenu__list--depth-2,
  .wt-megamenu__item--expanded > .wt-megamenu__list--depth-3 {
    display: flex;
    flex-direction: column;
  }

  .wt-megamenu__list--depth-2 .wt-megamenu__link,
  .wt-megamenu__list--depth-3 .wt-megamenu__link {
    padding: 0.5rem 0;
  }

  .wt-megamenu__list--depth-2 .wt-megamenu__item::before,
  .wt-megamenu__list--depth-3 .wt-megamenu__item::before {
    content: '•';
    margin-right: 0.5rem;
    color: var(--bs-secondary-color, #495057);
  }

  .wt-megamenu__list--depth-2 .wt-megamenu__row,
  .wt-megamenu__list--depth-3 .wt-megamenu__row {
    display: inline-flex;
  }
}

/* ============================================================
   4. COLUMNS MODE (.wt-megamenu--columns) — see this file's own top docblock
   ============================================================ */

@media (min-width: 992px) {
  /* Every depth-0 item becomes its own column: no hover-triggered dropdown, no absolute
     positioning — the "panel" is just each item's own depth-1 list, always in normal flow. */
  .wt-megamenu.wt-megamenu--columns .wt-megamenu__list--root {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 2.5rem;
  }

  .wt-megamenu.wt-megamenu--columns .wt-megamenu__list--root > .wt-megamenu__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .wt-megamenu.wt-megamenu--columns .wt-megamenu__list--root > .wt-megamenu__item > .wt-megamenu__row > .wt-megamenu__link {
    padding: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    /* Every other .wt-megamenu__link rule hardcodes a `var(--bs-body-color, #212529)`
       fallback tuned for the light-background dropdown nav this module was built against —
       wrong for a dark footer, which drives its own text color via a DIFFERENT token
       (themes/hummingbird's own footer-block/footer__main sets `color: var(--bs-gray-300)`
       on an ancestor). Columns mode is the first place this module is placed against an
       arbitrary hook's own background, so it can't assume light-nav colors — inherit
       whatever the surrounding placement already set instead of asserting a color of its
       own. */
    color: inherit;
  }

  /* No drill/accordion control renders for a columns-mode depth-0 item on desktop (it's not
     interactive there — always expanded), but the shared base hides
     .wt-megamenu__accordion-toggle unconditionally outside the mobile media query anyway, so
     nothing extra is needed here for that. */

  .wt-megamenu.wt-megamenu--columns .wt-megamenu__item--has-children:hover > .wt-megamenu__list--depth-1,
  .wt-megamenu.wt-megamenu--columns .wt-megamenu__item--has-children:focus-within > .wt-megamenu__list--depth-1,
  .wt-megamenu.wt-megamenu--columns .wt-megamenu__list--depth-1 {
    display: flex;
    position: static;
    flex-direction: column;
    grid-template-columns: none;
    width: 100%;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    gap: 0.5rem;
  }

  /* Depth-1 in columns mode is a plain link (e.g. "Regulamin"), not a group header — undo the
     dropdown-mode bold/1rem group-header styling depth-1 normally gets. */
  .wt-megamenu.wt-megamenu--columns .wt-megamenu__item--depth-1 > .wt-megamenu__row > .wt-megamenu__link {
    padding: 0;
    font-size: 0.875rem;
    font-weight: 400;
    color: inherit;
    opacity: 0.85;
  }

  .wt-megamenu.wt-megamenu--columns .wt-megamenu__item--depth-1 > .wt-megamenu__row > .wt-megamenu__link:hover,
  .wt-megamenu.wt-megamenu--columns .wt-megamenu__item--depth-1 > .wt-megamenu__row > .wt-megamenu__link:focus {
    opacity: 1;
  }

  .wt-megamenu.wt-megamenu--columns .wt-megamenu__textblock {
    margin-top: 0.5rem;
  }
}

/* Not scoped to either breakpoint — a textblock item's color needs the same `inherit` fix as
   the link rules above regardless of viewport width (it's a plain content div, not gated by
   any mobile/desktop display toggle either). */
.wt-megamenu.wt-megamenu--columns .wt-megamenu__textblock {
  color: inherit;
  opacity: 0.85;
}

.wt-megamenu.wt-megamenu--columns .wt-megamenu__textblock a {
  color: inherit;
}

.wt-megamenu.wt-megamenu--columns .wt-megamenu__textblock a:hover,
.wt-megamenu.wt-megamenu--columns .wt-megamenu__textblock a:focus {
  opacity: 1;
}

@media (max-width: 991.98px) {
  /* Stays in normal document flow — never the dropdown mode's fixed off-canvas drawer. */
  .wt-megamenu.wt-megamenu--columns {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    z-index: auto;
    width: 100%;
    height: auto;
    overflow: visible;
    background-color: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
  }

  /* Root is always the active screen (columns mode never drills), so its rows already show via
     the existing `.wt-megamenu__list--root.wt-megamenu__list--active > .wt-megamenu__item >
     .wt-megamenu__row { display: flex }` rule above — nothing to add for that part. Each
     depth-0 item's own link doubles as its column's accordion header. */
  .wt-megamenu.wt-megamenu--columns .wt-megamenu__item--depth-0 > .wt-megamenu__row > .wt-megamenu__link {
    font-weight: 700;
    /* Same `color: inherit` fix as the desktop column-heading rule above — this media query
       has its own separate copy of every selector, so the fix has to be repeated here too. */
    color: inherit;
  }

  /* Depth-1 is an in-place accordion body, not a new full-screen level: no absolute
     positioning, collapsed (display: none) until its own <li> carries --expanded. */
  .wt-megamenu.wt-megamenu--columns .wt-megamenu__list--depth-1 {
    display: none;
    position: static;
    inset: auto;
    overflow: visible;
    width: auto;
    padding: 0 0 0.5rem 0.25rem;
    background-color: transparent;
  }

  .wt-megamenu.wt-megamenu--columns .wt-megamenu__item--expanded > .wt-megamenu__list--depth-1 {
    display: flex;
    flex-direction: column;
  }

  .wt-megamenu.wt-megamenu--columns .wt-megamenu__item--depth-1 > .wt-megamenu__row > .wt-megamenu__link {
    font-weight: 400;
    color: inherit;
    opacity: 0.85;
  }

  /* Same latent hardcoded-fallback issue as the link rules above — the chevron needs to be
     visible against whatever background columns mode is actually placed on. */
  .wt-megamenu.wt-megamenu--columns .wt-megamenu__accordion-toggle {
    color: inherit;
  }
}