/* ============================================================
   ATB / WOLONG - Multi menu V3
   Excel-based multi-level header menu.
   Load AFTER main.css and media.css.
   ============================================================ */

/* Shared helper styles */
.atb-multimenu-header .atb-menu-label {
    cursor: default;
}

.atb-multimenu-header .ys-phnav-menu .atb-menu-label .ys-phnav-header-font {
    color: #000;
}

/* ------------------------------------------------------------
   Desktop
   Visual hierarchy:
   level 1 = main navigation (existing site style)
   level 2 = dark-strip column heading
   level 3 = section / subgroup
   level 4 = concrete item
   ------------------------------------------------------------ */
@media (min-width: 1025px) {


    /* ========================================================
       LEVEL 1
       Main horizontal navigation.
       The original header distributes items too widely because it
       was designed for fewer first-level menu entries.
       ======================================================== */
    .atb-multimenu-header .ys-hd-pc .head-nav.atb-nav-updated {
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: clamp(10px, 1.25vw, 24px) !important;
    }

    .atb-multimenu-header .ys-hd-pc .head-nav.atb-nav-updated > .head-nav-item {
        width: auto !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .atb-multimenu-header .ys-hd-pc .head-nav.atb-nav-updated > .head-nav-item > .head-nav-item-title {
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        white-space: nowrap !important;
    }


    /* ========================================================
       ABOUT US DROPDOWN
       The old head-nav-item-down2 inherits the width of the
       first-level item, so the submenu becomes too narrow.
       Keep this classic dropdown compact but readable.
       ======================================================== */
    .atb-multimenu-header .ys-hd-pc
    .head-nav.atb-nav-updated > .head-nav-item > .head-nav-item-down2 {
        left: 0 !important;
        width: 190px !important;
        min-width: 190px !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        background: #f5f5f5 !important;
        box-sizing: border-box !important;
    }

    .atb-multimenu-header .ys-hd-pc
    .head-nav.atb-nav-updated > .head-nav-item > .head-nav-item-down2 > ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 18px 22px !important;
        box-sizing: border-box !important;
    }

    .atb-multimenu-header .ys-hd-pc
    .head-nav.atb-nav-updated > .head-nav-item > .head-nav-item-down2 > ul > li {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    .atb-multimenu-header .ys-hd-pc
    .head-nav.atb-nav-updated > .head-nav-item > .head-nav-item-down2 > ul > li:last-child {
        margin-bottom: 0 !important;
    }

    .atb-multimenu-header .ys-hd-pc
    .head-nav.atb-nav-updated > .head-nav-item > .head-nav-item-down2 .hnid-title3 {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        color: #666 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1.30 !important;
        white-space: nowrap !important;
    }

    .atb-multimenu-header .ys-hd-pc
    .head-nav.atb-nav-updated > .head-nav-item > .head-nav-item-down2 .hnid-title3:hover {
        color: #ed0039 !important;
    }

    /* Desktop logo */
    .atb-multimenu-header .ys-hd-pc .head-logo {
        overflow: visible;
    }

    .atb-multimenu-header .ys-hd-pc .head-logo img {
        width: 176px !important;
        max-width: 176px !important;
        height: auto !important;
    }

    /* Keep long menus inside the viewport. */
    .atb-multimenu-header .atb-mega-scroll {
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 10px;
        scrollbar-width: thin;
    }

    /* ========================================================
       LEVEL 2
       Column headings in the dark strip.
       ======================================================== */
    .atb-multimenu-header .atb-mega-dropdown .hnid-right-title2 {
        display: flex !important;
        align-items: center;
        min-height: 74px;
        height: 74px !important;
        box-sizing: border-box;
        white-space: normal !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: 14px !important;
        line-height: 1.18 !important;
    }

    /* ========================================================
       GAP LEVEL 2 -> LEVEL 3
       Old site CSS uses rem-based top spacing here, which becomes
       visually too large in the new multi-level menu.
       ======================================================== */
    .atb-multimenu-header .atb-mega-dropdown .hnid-right-ul2 {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }

    /* ========================================================
       LEVEL 3
       Section / subgroup title.
       ======================================================== */
    .atb-multimenu-header .atb-mega-dropdown .hnid-right-li2 {
        margin-top: 0 !important;
        margin-bottom: 11px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .atb-multimenu-header .atb-mega-dropdown .hnid-right-li2.has-level4 {
        display: block;
    }

    .atb-multimenu-header .atb-mega-dropdown .hnid-right-li2-cont {
        display: block !important;
        width: auto !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.26 !important;
    }

    .atb-multimenu-header .atb-mega-dropdown .hnid-right-title3 {
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 1.26 !important;
    }

    /* ========================================================
       LEVEL 4
       Concrete Excel menu item - smaller and visually subordinate.
       ======================================================== */
    .atb-multimenu-header .atb-mega-dropdown .hnid-right-ul3 {
        list-style: none;
        margin: 4px 0 0 18px !important;
        padding: 0 !important;
    }

    .atb-multimenu-header .atb-mega-dropdown .hnid-right-ul3 .hnid-right-li3 {
        margin: 0 0 3px !important;
        padding: 0 !important;
        line-height: 1.24 !important;
    }

    .atb-multimenu-header .hnid-right-title4 {
        display: block;
        margin: 0;
        padding: 0;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
        color: #777;
        text-decoration: none;
    }

    .atb-multimenu-header a.hnid-right-title4:hover {
        color: #ed0039;
    }

    /* The original arrow is unnecessary because level 4 is already
       expanded below its level-3 parent. */
    .atb-multimenu-header .atb-menu-arrow {
        display: none !important;
    }

    /* ========================================================
       APPLICATIONS
       Eleven narrow columns need a slightly smaller local scale,
       while still keeping level 2 > level 3.
       ======================================================== */
    .atb-multimenu-header .atb-mega-applications .hnid-right-title2 {
        font-size: 11px !important;
        line-height: 1.14 !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .atb-multimenu-header .atb-mega-applications .hnid-right-ul2 {
        padding-top: 18px !important;
    }

    .atb-multimenu-header .atb-mega-applications .hnid-right-title3,
    .atb-multimenu-header .atb-mega-applications .hnid-right-li2-cont {
        font-size: 10.5px !important;
        line-height: 1.25 !important;
    }

    .atb-multimenu-header .atb-mega-applications .hnid-right-li2 {
        margin-bottom: 9px !important;
    }
}

/* ------------------------------------------------------------
   Mobile / tablet
   Font size also decreases with menu depth.
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .atb-multimenu-header .ys-phnav-menu > div > div > ul.ys-ph-nav > li > .ys-phnav-lisbox .ys-phnav-header-font,
    .atb-multimenu-header .ys-phnav-menu .ys-ph-nav > li > .ys-phnav-lisbox .ys-phnav-header-font {
        font-size: 16px;
    }

    .atb-multimenu-header .ys-phnav-menu .ys-ph-nav > li > ul > li > .ys-phnav-lisbox .ys-phnav-header-font {
        font-size: 15px;
        line-height: 1.30;
    }

    .atb-multimenu-header .ys-phnav-menu .ys-ph-nav > li > ul > li > ul > li > .ys-phnav-lisbox .ys-phnav-header-font {
        font-size: 14px;
        line-height: 1.30;
    }

    .atb-multimenu-header .ys-phnav-menu .ys-ph-nav > li > ul > li > ul > li > ul > li > .ys-phnav-lisbox .ys-phnav-header-font {
        font-size: 12.5px;
        line-height: 1.28;
    }

    /* ========================================================
       MOBILE PRODUCT SELECTOR
       Highlight configurator links the same way as on desktop.
       ======================================================== */
    .atb-multimenu-header .ys-phnav-menu
    a[href*="/configurator/index.php?group="] {
        display: inline-block !important;
        width: auto !important;
        margin: 3px 0 !important;
        padding: 6px 10px !important;
        border-left: 3px solid #ed0039 !important;
        background: rgba(237, 0, 57, .08) !important;
        text-decoration: none !important;
    }

    .atb-multimenu-header .ys-phnav-menu
    a[href*="/configurator/index.php?group="] .ys-phnav-header-font {
        color: #ed0039 !important;
        font-weight: 600 !important;
    }

    .atb-multimenu-header .ys-phnav-menu
    a[href*="/configurator/index.php?group="]:active {
        background: #ed0039 !important;
    }

    .atb-multimenu-header .ys-phnav-menu
    a[href*="/configurator/index.php?group="]:active .ys-phnav-header-font {
        color: #fff !important;
    }
}


/* ============================================================
   DESKTOP LEVEL 4 ACCORDION - ALL LEVEL-4 GROUPS
   Every level-3 item with children starts closed and opens with +.
   ============================================================ */
@media (min-width: 1025px) {

    /* Level-3 parent row: title at left, +/- at right. */
    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-desktop-collapsible {
        display: block !important;
        width: 100% !important;
    }

    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-desktop-collapsible > .atb-desktop-accordion-head {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 3px !important;
        width: 100% !important;
        min-height: 18px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-desktop-collapsible > .atb-desktop-accordion-head > .hnid-right-li2-cont {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Simple mobile-like + / - control. */
    .atb-multimenu-header .atb-mega-dropdown .atb-desktop-toggle {
        order: -1 !important;
        flex: 0 0 18px !important;
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        margin: -2px 3px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        color: #555 !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 18px !important;
        font-weight: 300 !important;
        line-height: 18px !important;
        text-align: center !important;
        cursor: pointer !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .atb-multimenu-header .atb-mega-dropdown .atb-desktop-toggle span {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        line-height: 17px !important;
    }

    .atb-multimenu-header .atb-mega-dropdown .atb-desktop-toggle:hover,
    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-desktop-collapsible.is-open > .atb-desktop-accordion-head .atb-desktop-toggle {
        color: #ed0039 !important;
    }

    /* IMPORTANT: all level 4 lists are CLOSED by default, even if old CSS has hover/display rules. */
    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.has-level4 > ul.hnid-right-ul3,
    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-desktop-collapsible > ul.hnid-right-ul3,
    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-desktop-collapsible:hover > ul.hnid-right-ul3 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        pointer-events: none !important;
    }

    /* Only the item with class is-open shows its level 4. */
    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-desktop-collapsible.is-open > ul.hnid-right-ul3,
    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-desktop-collapsible.is-open:hover > ul.hnid-right-ul3 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 4px 0 8px 18px !important;
        padding: 0 !important;
        pointer-events: auto !important;
    }

    /* ========================================================
       PRODUCT SELECTOR - highlight in Motors and Drivers
       ======================================================== */
    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-product-selector {
        margin-bottom: 12px !important;
    }

    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-product-selector > .hnid-right-li2-cont {
        display: inline-block !important;
        width: auto !important;
        padding: 5px 9px !important;
        border-left: 3px solid #ed0039 !important;
        background: rgba(237, 0, 57, .08) !important;
        text-decoration: none !important;
    }

    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-product-selector > .hnid-right-li2-cont .hnid-right-title3 {
        color: #ed0039 !important;
        font-weight: 600 !important;
    }

    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-product-selector > .hnid-right-li2-cont:hover {
        background: #ed0039 !important;
    }

    .atb-multimenu-header .atb-mega-dropdown
    .hnid-right-li2.atb-product-selector > .hnid-right-li2-cont:hover .hnid-right-title3 {
        color: #fff !important;
    }
}