/* =========================================================================
 * TheDetailer — Menu enhancements
 * File: assets/css/tdw-menu.css
 *
 * Section 1: Mega menu viewport-aware højde + scroll
 *
 *   max-height bruger --tdw-mega-max-h som sættes dynamisk af tdw-menu.js
 *   til (viewport - nav_bottom - 10vh gap). Det giver altid 10% luft i
 *   bunden uanset skærmstørrelse, sticky-state eller admin bar.
 *
 *   Fallback "calc(100vh - 240px)" hvis JS af en eller anden grund ikke
 *   loader — tilstrækkeligt konservativ til at undgå overflow på normale
 *   layouts.
 *
 *   Kombineret med:
 *     - display: block (mod Flatsome's display: table som ikke respekterer
 *       max-height + overflow korrekt)
 *     - bottom: auto / height: auto (mod Flatsome's inline "bottom: 0"
 *       anker fra inset-shorthand)
 *     - !important (mod Flatsome's "li.current-dropdown > .nav-dropdown
 *       { max-height: inherit }" når menu er åben)
 *
 *   Targeting via .menu-item-design-container-width — kun de 5 fuldbredde
 *   mega menuer (Mærker, Interiør, Eksteriør, Bilvask & Tørring, Tilbehør)
 *   har den klasse. Almindelige dropdowns påvirkes ikke.
 * ========================================================================= */

/* ---- Section 1: Mega menu height + scroll -------------------------------- */

li.has-dropdown.menu-item-design-container-width > .nav-dropdown,
li.has-dropdown.menu-item-design-container-width.current-dropdown > .nav-dropdown {
    /* Skift fra display: table til block — så max-height + overflow virker */
    display: block !important;

    /* Fjern Flatsome's inline "bottom: 0" anker så højden ikke trækkes ned */
    bottom: auto !important;
    /* Auto-højde baseret på indhold, capped af max-height nedenfor */
    height: auto !important;

    /* Dynamisk max-height fra tdw-menu.js (viewport - nav_bottom - 10vh gap)
       Fallback til konservativ pixel-baseret cap hvis JS ikke loader */
    max-height: var(--tdw-mega-max-h, calc(100vh - 240px)) !important;

    /* Lodret scroll når indholdet er højere end max-height */
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Stop scroll-chaining: når man når bunden af menuen ruller siden ikke videre */
    overscroll-behavior: contain;

    /* Tynd scrollbar i Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* WebKit / Chromium / Safari scrollbar styling — diskret hvid bar på mørk baggrund */
li.has-dropdown.menu-item-design-container-width > .nav-dropdown::-webkit-scrollbar {
    width: 8px;
}
li.has-dropdown.menu-item-design-container-width > .nav-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
li.has-dropdown.menu-item-design-container-width > .nav-dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}
li.has-dropdown.menu-item-design-container-width > .nav-dropdown::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.45);
}