/* ============================================
   R24 Horze-style Mega Menu — matches horze.com
   ============================================ */

/* ============================================
   Page dim overlay when mega menu is open
   --------------------------------------------
   Darkens the rest of the page behind the mega menu dropdown to
   highlight its content. Pure CSS, no JS — triggered via :has() only
   when a .wd-event-hover item containing a .r24-mega is being hovered.

   z-index: 99 sits below WoodMart's header stacking context (typically
   420+) so the promo bar, header, top menu and the dropdown itself
   remain visible above the dim layer. pointer-events:none ensures the
   overlay never blocks interaction. Transition matches the dropdown
   slide-down timing (1s) so the dim and the reveal stay in sync.

   To tune the darkness, change the alpha in rgba(0,0,0,<value>):
   0.3 = light, 0.4 = subtle, 0.5 = medium, 0.6 = strong.
   ============================================ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* 0.3s delay ONLY on the closing direction — gives the user a grace
       window to move the cursor from the parent menu item into the
       dropdown without the overlay starting to fade out. */
    transition: opacity 1s ease 0.3s, visibility 1s ease 0.3s;
}

body:has(.wd-event-hover:hover > .wd-dropdown-menu .r24-mega)::before {
    opacity: 1;
    visibility: visible;
    /* Opening is instant — no delay when the hover first engages. */
    transition: opacity 1s ease 0s, visibility 1s ease 0s;
}

/* ============================================
   Slide-down reveal animation for r24 dropdowns
   --------------------------------------------
   Replaces WoodMart's fade+translate reveal with a pure "opening
   curtain" slide-down. The dropdown's bottom visible edge animates
   from the top of its own box down to full height over 1s,
   progressively revealing content from top to bottom. No opacity
   fade, no transform movement, no distortion — clip-path only.

   We force opacity:1 and transform:none unconditionally so WoodMart's
   own fade+translate reveal becomes a no-op. The hidden state uses
   clip-path: inset(0 0 100% 0) which collapses the visible region to
   a zero-height strip at the top. On hover, clip-path animates to
   inset(0 0 0 0) (fully unclipped), sliding the bottom edge downward.
   visibility still transitions (step-end) so pointer events don't
   fire on the hidden dropdown and re-trigger the reveal.
   ============================================ */
.wd-dropdown-menu:has(.r24-mega) {
    opacity: 1 !important;
    transform: none !important;
    clip-path: inset(0 0 100% 0);
    /* 0.3s delay ONLY on the closing direction — the dropdown stays
       fully open and clickable for 300ms after the cursor leaves the
       parent menu item. This gives the user a "hover intent" grace
       window to slide into the dropdown without it snapping shut. If
       the cursor re-enters the dropdown within that window, :hover
       re-engages via ancestor propagation and the dropdown stays open
       indefinitely. If the cursor keeps moving away, the 1s clip-path
       curtain starts closing after the 300ms grace period. */
    transition: clip-path 1s ease 0.3s, visibility 1s 0.3s !important;
}

.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega) {
    clip-path: inset(0 0 0 0);
    /* Opening is instant — no delay on first hover. */
    transition: clip-path 1s ease 0s, visibility 1s 0s !important;
}

/* ============================================
   INSTANT CLOSE — Parent swap "freshness"
   --------------------------------------------
   When the user moves the cursor from one parent menu item to
   another (e.g. RATSANIKULE → HOBUSELE), the previous dropdown
   must vanish INSTANTLY so the new one can open from scratch
   without any visible overlap. The goal is that EVERY parent
   swap feels like a "first hover" — the user always sees a
   fresh 1s reveal from a collapsed state, never two animations
   fighting for the same viewport area.

   The previous iteration used a 200ms fast close + z-index swap
   to show the close animation IN FRONT of the opening one. That
   still produced a visible overlap because both animations were
   running simultaneously for 200ms. The user explicitly asked
   for no overlap at all.

   Solution: set the close transition to 0s (instant). The moment
   a different parent is hovered, the previous dropdown's
   clip-path and visibility flip to their closed state in one
   frame, without any animation. The new dropdown then starts
   its normal 1s opening from the fully-collapsed state — exactly
   as if it were the first hover of the session.

   Scope is still `:has(> .wd-event-hover:hover)` so this only
   triggers when another sibling is hovered. Leaving the menu
   to empty space falls back to the base rule, which keeps the
   original 1s + 0.3s-delay hover-intent close so the user has
   a grace window to slide into the dropdown.
   ============================================ */

.wd-header-main-nav .menu:has(> .wd-event-hover:hover) > .wd-event-hover:not(:hover) > .wd-dropdown-menu:has(.r24-mega) {
    /* Defensive trio: transition:none !important removes clip-path from
       the transition-property list entirely, which per the CSS Transitions
       spec is the ONE thing that guarantees any in-flight transition on
       this element is cancelled (merely changing transition-duration does
       not cancel a running transition). The !important on every property
       ensures we win every specificity battle. visibility:hidden is
       explicit so the hidden state is unambiguous. */
    clip-path: inset(0 0 100% 0) !important;
    visibility: hidden !important;
    transition: none !important;
}

/* --------------------------------------------
   WoodMart missing rule fix:
   WoodMart applies this to vertical navs and sized dropdowns,
   but forgot to apply it to horizontal full-width dropdowns.
   This mirrors their own rule for our plugin scope only.
   -------------------------------------------- */
.wd-dropdown-menu:has(.r24-mega) > .container,
.wd-dropdown-menu:has(.r24-mega) .wd-scroll-content > .wd-dropdown-inner > .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================
   ROOT FIX: Change the offset parent to the header
   --------------------------------------------
   Eliminates the first-hover horizontal jump at its architectural
   root. WoodMart's default positioning is `position: absolute` on
   the dropdown, anchored to its parent <li>'s left edge, with
   width: 1920px (from --wd-dropdown-width). On any viewport
   narrower than LI-offset + 1920px, the dropdown overflows the
   right edge, and WoodMart's JS runs menuOffsets.js AFTER the
   dropdown has been positioned to measure overflow and apply an
   inline `left: -XXXpx` correction. This is an inherently racy
   CSS-then-JS pattern — any visibility window between the CSS
   paint and the JS correction is a flash.

   Fix: change the dropdown's offset parent from its <li> to the
   <div class="whb-header"> element. The header spans the full
   viewport width, so `left: 0; right: 0` on the dropdown means
   "full viewport width". `top: 100%` means "bottom edge of the
   header". No viewport-width measurement, no JS correction, no
   flash — the positioning is correct on first paint.

   Mechanism:
   1. .whb-header becomes `position: relative` so it can serve as
      the offset parent for descendant position:absolute elements.
   2. The top-level menu <li> (which by default WoodMart sets to
      `position: relative` to anchor the dropdown) is overridden
      to `position: static`, so absolute descendants skip it and
      find .whb-header as their offset parent instead. This ONLY
      applies to <li>s that contain an r24-mega dropdown — other
      WoodMart dropdowns keep their default LI-relative behavior.
   3. The dropdown itself uses left:0; right:0; top:100%; width:auto
      — scoped to .whb-header bounds = viewport edges + header bottom.
   ============================================ */

.whb-header {
    position: relative;
}

.wd-header-main-nav ul.menu > li:has(> .wd-dropdown-menu .r24-mega) {
    position: static !important;
}

.wd-header-main-nav ul.menu > li > .wd-dropdown-menu:has(.r24-mega) {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    /* `top: 100%` would anchor exactly at .whb-header's bottom edge,
       but Woodmart adds padding/border/margin inside .whb-header and
       applies margin-top to .wd-dropdown-menu (for non-full-width
       dropdowns the gap is intentional; for our full-bleed mega menu
       it's an unwanted hairline). Force margin to 0 and pull the
       dropdown up to sit flush against the menu row. */
    /* Anchor to bottom of .whb-header minus any header padding/border.
       `.whb-header` in this theme config has ~3-4px of padding-bottom
       that creates a visible gap when anchoring to its outer bottom.
       Overlap by that amount so the dropdown visually starts at the
       menu row's bottom edge. */
    top: calc(100% - 4px) !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    /* Clear any stale inline `left: -XXXpx` that WoodMart's
       menuOffsets.js may have applied on a previous hover.
       WoodMart's setOffset() writes `left: -XXXpx` without
       !important, so our rule wins via specificity. */
}

/* Also zero out padding-bottom of the wrapper that holds the nav
   inside the header, in case that's contributing to the visual gap. */
.wd-header-main-nav ul.menu > li:has(> .wd-dropdown-menu .r24-mega) > .wd-dropdown-menu::before,
.wd-header-main-nav ul.menu > li:has(> .wd-dropdown-menu .r24-mega) > .wd-dropdown-menu::after {
    display: none !important;
}

/* ============================================
   Hover behaviour — identical to HOBUSELE
   --------------------------------------------
   We do NOT override transform, transition, opacity or visibility
   on .wd-dropdown-menu or ANY of its descendants. WoodMart's native
   hide state is:
       visibility: hidden; opacity: 0;
       transform: translateY(15px); pointer-events: none;
   and its reveal state (triggered by .wd-event-hover:hover) is:
       visibility: visible; opacity: 1;
       transform: none; pointer-events: unset;
   These inherit correctly to children, so when the dropdown is
   hidden, every descendant is also hover-transparent. DO NOT force
   visibility:visible or opacity:1 on any descendant — that breaks
   the inheritance and makes the invisible dropdown capture hover
   in the area where it WOULD appear, re-triggering the reveal every
   time the cursor crosses that dead zone.

   HOWEVER: For full-width dropdowns where our r24-mega shortcode
   only fills HALF of an Elementor 2-column grid (leaving col 2
   empty for a product widget), we MUST make the dropdown itself
   capture pointer-events WHILE HOVERED so the cursor can move
   across the empty right half without losing :hover. We scope
   this to .wd-event-hover:hover so it ONLY applies while the
   dropdown is actively revealed — the hidden state is untouched.
   ============================================ */

/* While hovered, force the full-width dropdown + its Elementor
   container chain to capture pointer-events across their entire
   visible surface — including the empty right half. */
.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega),
.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega) > .container,
.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega) > .container > .elementor,
.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega) .elementor > .e-con,
.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega) .e-con > .e-con,
.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega) .elementor-widget,
.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega) .elementor-widget-container,
.wd-event-hover:hover > .wd-dropdown-menu:has(.r24-mega) .elementor-shortcode {
    pointer-events: auto !important;
}

/* While hovered, make the r24-mega content interactive. */
.wd-event-hover:hover > .wd-dropdown-menu .r24-mega,
.wd-event-hover:hover > .wd-dropdown-menu .r24-mega * {
    pointer-events: auto !important;
}

.wd-event-hover:hover > .wd-dropdown-menu .r24-mega a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ============================================
   HOVER INTENT: Sticky dropdown while cursor is inside
   --------------------------------------------
   The transition-delay alone was not enough to fix the "dropdown
   closes before I can reach it" problem. Root cause: WoodMart
   applies `pointer-events: none` INSTANTLY the moment the parent
   menu item loses :hover (there is no transition on pointer-events).
   So during the 1.3s closing window — when the dropdown is still
   visually open because of our delay — the dropdown is actually
   NOT clickable. The cursor passes straight through it onto
   whatever is underneath, and :hover never re-engages on the
   dropdown itself.

   Two-part surgical fix:

   1. Make pointer-events: auto UNCONDITIONAL on the dropdown +
      Elementor chain. This is safe because WoodMart sets
      `visibility: hidden` on the fully-closed state, and
      visibility:hidden blocks pointer events regardless of the
      pointer-events property value. So pointer-events only
      "activates" while the dropdown is visibility:visible (either
      fully open or inside the closing transition window where
      visibility has not yet flipped back to hidden).

   2. Add a `.wd-dropdown-menu:has(.r24-mega):hover` rule that
      FORCES the dropdown open (clip-path: inset(0 0 0 0)) AND
      forces visibility:visible while the cursor is anywhere
      inside the dropdown. This is the "sticky" behavior the
      user asked for: once the cursor is inside the block, the
      block stays open indefinitely, and it only begins closing
      when the cursor leaves the visible area.

   Result: the cursor can travel from the parent menu word, across
   any gap, into the dropdown — and as long as it reaches the
   dropdown within the 1.3s grace window, the sticky :hover engages
   and the dropdown stays fully open until the cursor leaves.
   ============================================ */

/* 1. Unconditional pointer-events: auto on the dropdown + chain.
   Overrides WoodMart's `pointer-events: none` on the hide state.
   Safe because visibility:hidden still blocks events when fully
   closed. */
.wd-dropdown-menu:has(.r24-mega),
.wd-dropdown-menu:has(.r24-mega) > .container,
.wd-dropdown-menu:has(.r24-mega) > .container > .elementor,
.wd-dropdown-menu:has(.r24-mega) .elementor > .e-con,
.wd-dropdown-menu:has(.r24-mega) .e-con > .e-con,
.wd-dropdown-menu:has(.r24-mega) .elementor-widget,
.wd-dropdown-menu:has(.r24-mega) .elementor-widget-container,
.wd-dropdown-menu:has(.r24-mega) .elementor-shortcode,
.wd-dropdown-menu:has(.r24-mega) .r24-mega,
.wd-dropdown-menu:has(.r24-mega) .r24-mega * {
    pointer-events: auto !important;
}

/* 2. Sticky dropdown: keep open while cursor is anywhere inside.
   Forces both clip-path open AND visibility visible. Visibility
   needs to be explicitly forced because WoodMart's base rule has
   visibility:hidden — without this, the visibility transition
   would still complete after 1.3s even while the cursor is
   hovering the dropdown. */
.wd-dropdown-menu:has(.r24-mega):hover {
    clip-path: inset(0 0 0 0) !important;
    visibility: visible !important;
    transition: clip-path 1s ease 0s, visibility 1s 0s !important;
}

/* 3. Keep the page dim overlay visible while the dropdown itself
   is hovered (not just while the parent menu item is hovered). */
body:has(.wd-dropdown-menu:has(.r24-mega):hover)::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 1s ease 0s, visibility 1s ease 0s;
}

/* Override WoodMart's default sub-menu styling.
   IMPORTANT: do NOT set opacity/visibility/transform here — we let
   those inherit from the parent dropdown so the hide state works. */
.wd-dropdown-menu .r24-mega ul {
    display: block !important;
    position: static !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
}

.wd-dropdown-menu .r24-mega ul li {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    list-style: none !important;
}

/* ============================================
   Long-list scroll: keep columns within viewport
   --------------------------------------------
   When a category has many subcategories, the lists can exceed
   viewport height and force the user to scroll the entire page
   to reach the last items — at which point the dropdown has
   often already scrolled out of view. Classic mega-menu UX
   problem.

   Fix: cap the inner columns' height to what fits below the
   header, and let each column scroll internally when its
   content overflows. The right-side Elementor widget (Popular
   Categories tiles) is NOT in .r24-mega, so it stays untouched
   and always fully visible.

   100vh - 200px ≈ viewport minus (header ~160px + dropdown
   top padding ~40px). If the header height changes, tune this
   single number.

   scrollbar-width: thin keeps the scrollbar unobtrusive in
   Firefox; WebKit browsers get a thin scrollbar via the
   ::-webkit-scrollbar rules below.
   ============================================ */

.r24-mega__categories,
.r24-mega__subcategories {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.r24-mega__categories::-webkit-scrollbar,
.r24-mega__subcategories::-webkit-scrollbar {
    width: 6px;
}

.r24-mega__categories::-webkit-scrollbar-thumb,
.r24-mega__subcategories::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.r24-mega__categories::-webkit-scrollbar-thumb:hover,
.r24-mega__subcategories::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.r24-mega__categories::-webkit-scrollbar-track,
.r24-mega__subcategories::-webkit-scrollbar-track {
    background: transparent;
}

/* ============================================
   Main wrapper
   ============================================ */

.r24-mega {
    padding: 40px 0;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: #333;
    display: grid;
    /* The Elementor container that wraps this shortcode is already a
       2-column CSS grid (repeat(2, 1fr)), so this .r24-mega sits in a
       cell that is ~50% of the screen. Inside, we use 2 equal columns
       for categories and subcategories — each ~25% of the screen —
       and the empty second Elementor column (~50%) is reserved for
       the user's product widget on the right of the dropdown. */
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 15px;
    min-height: 400px;
    box-sizing: border-box;
    width: 100%;
}

/* ============================================
   Section header
   ============================================ */

.r24-mega__header {
    grid-column: 1 / -1;
    padding: 0 0 15px 40px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    color: #999;
    letter-spacing: 1px;
    margin: 0;
}

/* ============================================
   Left column: Categories — 50% of half-left
   ============================================ */

.r24-mega__categories {
    padding: 0 0 0 40px;
    box-sizing: border-box;
    width: 100%;
}

.r24-mega__catlist {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.r24-mega__cat {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
}

.r24-mega__cat a {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    transition: all 0.15s;
    line-height: 1.4;
}

.r24-mega__cat a:hover,
.r24-mega__cat.active a {
    font-weight: 700;
    background: #f5f5f5;
}

.r24-mega__cat-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.r24-mega__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 16px;
    flex-shrink: 0;
}

.r24-mega__icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.r24-mega__arrow {
    color: #ccc;
    font-size: 14px;
    transition: color 0.15s;
}

.r24-mega__cat.active .r24-mega__arrow,
.r24-mega__cat a:hover .r24-mega__arrow {
    color: #333;
}

/* ============================================
   Right column: Subcategories — 50% of half-left
   ============================================ */

.r24-mega__subcategories {
    padding: 0 30px 0 0;
    box-sizing: border-box;
    width: 100%;
    min-height: 300px;
}

.r24-mega__subpanel {
    display: none;
}

.r24-mega__subpanel.active {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.r24-mega__subpanel ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.r24-mega__subpanel li {
    margin: 0;
    padding: 0;
}

.r24-mega__subpanel li a {
    display: block;
    padding: 8px 0;
    text-decoration: none;
    color: #555;
    font-size: 14px;
    transition: all 0.15s;
    line-height: 1.4;
}

.r24-mega__subpanel li a:hover {
    font-weight: 700;
    color: #000;
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 992px) {
    .r24-mega {
        padding: 30px 24px;
        column-gap: 24px;
    }
}

@media (max-width: 600px) {
    .r24-mega {
        grid-template-columns: 1fr;
        padding: 20px 16px;
        min-height: auto;
    }
    .r24-mega__categories {
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }
    .r24-mega__subcategories {
        padding-top: 15px;
        min-height: auto;
    }
}