/* =============================================================
   MegaMenu Mobile Overrides
   Transparent topbar + mörkt modernt menyläge
   ============================================================= */

@media (max-width: 1199px) {

    /* ═══════════════════════════════════════════════════════════
       1. TOPBAR — transparent
       ═══════════════════════════════════════════════════════════ */

    .ets_mm_megamenu,
    .ets_mm_megamenu_content,
    .layout_layout1 .ets_mm_megamenu_content,
    .layout_layout2 .ets_mm_megamenu_content,
    .layout_layout3 .ets_mm_megamenu_content,
    .layout_layout4 .ets_mm_megamenu_content,
    .layout_layout5 .ets_mm_megamenu_content,
    .ets_mm_megamenu.layout_layout1,
    .ets_mm_megamenu.layout_layout2,
    .ets_mm_megamenu.layout_layout3,
    .ets_mm_megamenu.layout_layout4,
    .ets_mm_megamenu.layout_layout5 {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        border: none !important;
    }

    .ets_mm_megamenu .container {
        background: transparent !important;
    }

    /* hook-custom: ta bort margin-top på mobil */
    .ets_mm_megamenu.hook-custom {
        margin-top: 0 !important;
    }

    /* Hamburgare — dold, ersatt av displayMegaMenuTrigger */
    .ybc-menu-toggle.ybc-menu-btn {
        display: none !important;
    }


    /* ═══════════════════════════════════════════════════════════
       2. Z-INDEX — menyn alltid överst
       ═══════════════════════════════════════════════════════════ */

    /* Overlay-duk */
    .transition_full .ybc-menu-toggle.opened:before,
    .changestatus.transition_full .ybc-menu-toggle.opened:before,
    .transition_floating .ybc-menu-toggle.opened:before,
    .changestatus.transition_floating .ybc-menu-toggle.opened:before {
        z-index: 99998 !important;
    }

    /* Menyens panel */
    .transition_full .mm_menus_ul,
    .changestatus.transition_full .mm_menus_ul,
    .transition_floating .mm_menus_ul,
    .changestatus.transition_floating .mm_menus_ul {
        z-index: 99999 !important;
    }


    /* ═══════════════════════════════════════════════════════════
       3. LAYOUT3 — inaktivera image-dimning på mobil
       ═══════════════════════════════════════════════════════════ */

    .layout_layout3 .mm_tab_toggle_title img {
        filter: none !important;
        -webkit-filter: none !important;
    }


    /* ═══════════════════════════════════════════════════════════
       4. TAB-TITEL — förhindra texten att brytas på 2 rader
       ═══════════════════════════════════════════════════════════ */

    .mm_tab_toggle_title {
        width: calc(100% - 40px) !important;
        -webkit-width: calc(100% - 40px) !important;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* ═══════════════════════════════════════════════════════════
       5. MÖRKT TEMA — öppen meny, undermenyer och sub-sub
       ═══════════════════════════════════════════════════════════ */

    /* Primär menylista — dold tills .active sätts av JS */
    .mm_menus_ul {
        background-color: #1c1c1e !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .mm_menus_ul.active {
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow-y: auto !important;
        max-height: 100vh !important;
    }

    /* Stäng-knappen */
    .close_menu,
    .ets_mm_megamenu .mm_menus_ul .close_menu {
        background-color: #111111 !important;
        color: #ffffff !important;
        border-bottom: 1px solid #2a2a2a !important;
    }
    .close_menu .icon-bar {
        background-color: #ffffff !important;
    }

    /* Menyradar */
    .mm_menus_li {
        border-top: 1px solid #2a2a2a !important;
    }

    /* Toppnivå länktext */
    .mm_menus_li > a,
    .mm_menus_li > a span,
    .mm_menus_li > a .h4,
    .mm_menus_li > a .h5 {
        color: #f0f0f0 !important;
    }

    .mm_menus_li > a:hover,
    .mm_menus_li.menu_hover > a,
    .mm_menus_li.active > a {
        background-color: #2a2a2e !important;
        color: #ffffff !important;
    }

    /* Expand-pil (+) — yttre wrapper */
    .mm_menus_li .arrow {
        color: #f6a3a3 !important;
        border-left: 1px solid #2a2a2a !important;
    }
    .mm_menus_li .arrow:hover {
        background-color: #2a2a2e !important;
    }

    /* Plus-korsets horisontella linje */
    .mm_menus_ul .arrow::before {
        border-top-color: #f6a3a3 !important;
    }

    /* Plus-korsets vertikala linje (döljs när öppet) */
    .mm_menus_ul .arrow::after {
        border-left-color: #f6a3a3 !important;
    }

    /* Undermeny-panel (1:a nivå) */
    .ets_mm_megamenu .mm_columns_ul,
    .mm_columns_ul.active {
        background-color: #111111 !important;
        border: none !important;
        box-shadow: none !important;
    }

    .mm_columns_li {
        border-bottom: 1px solid #1e1e1e !important;
    }

    /* Sub-sub kategorilista (nested .ets_mm_categories) */
    .ets_mm_block_content ul li ul.ets_mm_categories,
    li.has-sub > ul.ets_mm_categories {
        background-color: #111111 !important;
        box-shadow: none !important;
    }

    /* Tab-innehåll undermeny */
    .mm_tabs_li .mm_columns_contents_ul {
        background-color: #111111 !important;
        border: none !important;
    }

    /* Block-rubriker */
    .ets_mm_block > .h4,
    .ets_mm_block > .h5 {
        color: #aaaaaa !important;
        border-bottom: 1px solid #2a2a2a !important;
    }

    /* Kategori-links */
    .ets_mm_block_content,
    .ets_mm_block_content a,
    .ets_mm_block_content ul li a,
    .ets_mm_block_content ul.ets_mm_categories li a {
        color: #cccccc !important;
    }

    .ets_mm_block_content a:hover,
    .ets_mm_block_content ul li a:hover,
    .ets_mm_block_content ul.ets_mm_categories li a:hover {
        color: #ffffff !important;
        background-color: transparent !important;
    }

    .ets_mm_block_content ul.ets_mm_categories li {
        border-bottom: 1px solid #1e1e1e !important;
    }

    /* Back-knapp */
    .mm_menus_back {
        color: #aaaaaa !important;
    }
    .mm_menus_back_icon {
        border-color: #aaaaaa !important;
    }

    /* Flikar */
    .mm_tabs_li > a,
    .mm_tab_toggle_title a {
        color: #cccccc !important;
        background-color: #1c1c1e !important;
    }
    .mm_tabs_li.active > a,
    .mm_tab_toggle_title.active a {
        color: #ffffff !important;
        background-color: #2a2a2e !important;
    }

}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP — layout3 + kompakt menyrad
   ═══════════════════════════════════════════════════════════════ */

/* Kompakt radhöjd (var 60px) */
.mm_menu_content_title {
    min-height: 32px !important;
}

@media (min-width: 768px) {
    /* Layout3: mörk bakgrund + subtil separator */
    .ets_mm_megamenu.layout_layout3,
    .layout_layout3 .mm_tab_li_content {
        background-color: #333333;
        border-bottom: solid #262626 0.5px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   TRIGGER-KNAPP — fristående hamburgare för Creative Elements
   Syns alltid (ingen media query), stilas som topbar-knappen
   ═══════════════════════════════════════════════════════════════ */

.ets-mm-trigger {
    display: inline-flex;
    align-items: center;
}

.ets-mm-trigger-btn {
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    gap: 5px;
}

.ets-mm-trigger-btn .icon-bar {
    background-color: #ffffff;
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

.ets-mm-trigger-btn:hover .icon-bar {
    opacity: 0.75;
}