/*!
 * IDDS NAV PLACE — bold futuristic menu placement per dinas
 * body.mp-top | mp-bottom | mp-left | mp-right | mp-float
 * Mobile (<992px): always top sticky + Magz hamburger drawer.
 */
:root {
    --mp-rail: 72px;
    --mp-dock-h: 68px;
    --mp-ease: cubic-bezier(.22, 1, .36, 1);
    --mp-nav-h: 44px;
    --mp-ico: 1rem;
}

/* ==========================================================================
   SHARED ALIGNMENT — kill Magz float / uneven icon margins
   ========================================================================== */
body.skin-magz nav.menu > .container {
    display: flex !important;
    align-items: center !important;
    min-height: 52px;
}
body.skin-magz nav.menu #menu-list {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto;
    gap: .35rem;
    min-height: var(--mp-nav-h);
}
body.skin-magz nav.menu ul.nav-list,
body.skin-magz nav.menu ul.float-end {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    gap: .15rem !important;
}
body.skin-magz nav.menu ul.nav-list > li,
body.skin-magz nav.menu ul.float-end > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    height: var(--mp-nav-h);
    position: relative;
    z-index: 2;
}
body.skin-magz nav.menu .nav-list > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: .5rem !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
    cursor: pointer;
    position: relative;
    z-index: 3;
}
/* Magz used margin-left on ALL <i> — breaks icon-before-label */
body.skin-magz nav.menu .nav-list > li > a i,
body.skin-magz nav.menu .nav-list > li > a:hover i {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body.skin-magz nav.menu .nav-ico,
body.skin-magz nav.menu .nav-list > li > a .nav-ico,
body.skin-magz nav.menu .nav-list > li > a i.nav-ico {
    flex: 0 0 var(--mp-ico) !important;
    width: var(--mp-ico) !important;
    height: var(--mp-ico) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    transform: none !important;
    vertical-align: middle;
    /* FA6 Free Solid requires weight 900 — 400/600 shows as □ / ✕ */
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-size: .9rem !important;
    line-height: 1 !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    opacity: .95;
}
body.skin-magz nav.menu .nav-label {
    display: inline-block;
    line-height: 1 !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit;
    white-space: nowrap;
    vertical-align: middle;
}
body.skin-magz nav.menu .nav-caret,
body.skin-magz nav.menu .nav-list > li > a i.arrow-right,
body.skin-magz nav.menu .nav-list > li > a i.nav-caret {
    flex: 0 0 auto;
    margin: 0 0 0 .2rem !important;
    opacity: .65;
    font-size: .62rem !important;
    line-height: 1 !important;
    position: relative;
    top: 0 !important;
}
body.skin-magz nav.menu .nav-list > li > a i.arrow-right::before {
    margin: 0 !important;
    vertical-align: middle;
}
body.skin-magz nav.menu ul.float-end > li > a {
    height: var(--mp-nav-h) !important;
    min-height: var(--mp-nav-h) !important;
    padding: 0 .7rem !important;
    margin: 0 !important;
    line-height: 1 !important;
}
body.skin-magz nav.menu ul.float-end > li > a:has(svg) {
    width: var(--mp-nav-h) !important;
    min-width: var(--mp-nav-h) !important;
    padding: 0 !important;
    gap: 0 !important;
}
body.skin-magz nav.menu ul.float-end svg {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    margin: 0 auto !important;
}
body.skin-magz nav.menu ul.float-end {
    margin-left: auto !important;
}

/* Kill Magz green underline — restore accent only for top */
body.skin-magz nav.menu .nav-list > li > a::after {
    display: none !important;
    content: none !important;
}

/* Horizontal menus (top + float): equal chip height */
@media (min-width: 992px) {
    body.skin-magz.mp-top nav.menu .nav-list > li > a,
    body.skin-magz.mp-float nav.menu .nav-list > li > a {
        height: var(--mp-nav-h) !important;
        min-height: var(--mp-nav-h) !important;
        padding: 0 .85rem !important;
        line-height: 1 !important;
    }
}

/* ==========================================================================
   TOP (default flagship) — elevated sticky bar
   ========================================================================== */
@media (min-width: 992px) {
    body.skin-magz.mp-top nav.menu {
        position: sticky !important;
        top: 0 !important;
        z-index: 1030 !important;
        backdrop-filter: blur(14px) saturate(1.2);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
    }
    body.skin-magz.mp-top nav.menu .nav-list > li > a {
        position: relative;
    }
    body.skin-magz.mp-top nav.menu .nav-list > li > a::after {
        display: block !important;
        content: "" !important;
        position: absolute;
        left: 22%; right: 22%; bottom: 7px;
        width: auto;
        height: 2px; border-radius: 999px;
        background: var(--idds-accent, #a67c2a);
        transform: scaleX(0);
        transition: transform .25s var(--mp-ease);
        margin: 0 !important;
        top: auto !important;
        z-index: 2;
    }
    body.skin-magz.mp-top nav.menu .nav-list > li > a:hover::after,
    body.skin-magz.mp-top nav.menu .nav-list > li.active > a::after {
        transform: scaleX(1);
    }
    body.skin-magz.mp-top nav.menu .nav-ico {
        font-size: .9rem !important;
        opacity: .95;
    }
}

/* ==========================================================================
   FLOAT — glass capsule under masthead
   ========================================================================== */
@media (min-width: 992px) {
    body.skin-magz.mp-float nav.menu {
        position: sticky !important;
        top: .75rem !important;
        z-index: 1030 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 0 .5rem !important;
    }
    body.skin-magz.mp-float nav.menu > .container {
        max-width: 1100px;
        margin: 0 auto;
        padding: .35rem .45rem !important;
        border-radius: 999px !important;
        background: color-mix(in srgb, var(--idds-primary, #1a365d) 88%, #0b1220) !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        box-shadow:
            0 18px 40px color-mix(in srgb, var(--idds-primary) 28%, transparent),
            inset 0 1px 0 rgba(255,255,255,.12) !important;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }
    body.skin-magz.mp-float nav.menu .brand { display: none !important; }
    body.skin-magz.mp-float nav.menu .nav-list {
        display: flex !important;
        flex-wrap: nowrap;
        gap: .15rem;
        margin: 0 !important;
        float: none !important;
    }
    body.skin-magz.mp-float nav.menu .nav-list > li > a {
        border-radius: 999px !important;
        padding: .55rem 1rem !important;
        gap: .4rem;
    }
    body.skin-magz.mp-float nav.menu .nav-ico {
        font-size: .88em;
    }
    body.skin-magz.mp-float nav.menu .float-end {
        float: none !important;
        display: flex !important;
        margin-left: auto !important;
    }
}

/* ==========================================================================
   BOTTOM — futuristic dock
   ========================================================================== */
@media (min-width: 992px) {
    body.skin-magz.mp-bottom {
        padding-bottom: calc(var(--mp-dock-h) + 1.25rem) !important;
    }
    body.skin-magz.mp-bottom nav.menu {
        position: fixed !important;
        left: 50% !important;
        bottom: 1rem !important;
        top: auto !important;
        transform: translateX(-50%);
        width: min(960px, calc(100vw - 2rem)) !important;
        z-index: 1045 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
    }
    body.skin-magz.mp-bottom nav.menu > .container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        min-height: var(--mp-dock-h);
        padding: .4rem .55rem !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--idds-primary, #1a365d) 92%, #000),
            color-mix(in srgb, var(--idds-primary, #1a365d) 75%, #0b1220)) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        box-shadow:
            0 20px 48px rgba(15, 23, 42, .35),
            0 0 0 1px color-mix(in srgb, var(--idds-accent) 35%, transparent),
            inset 0 1px 0 rgba(255,255,255,.1) !important;
        backdrop-filter: blur(18px) saturate(1.25);
        -webkit-backdrop-filter: blur(18px) saturate(1.25);
    }
    body.skin-magz.mp-bottom nav.menu .brand { display: none !important; }
    body.skin-magz.mp-bottom nav.menu #menu-list {
        display: flex !important;
        align-items: center;
        width: 100%;
        gap: .35rem;
    }
    body.skin-magz.mp-bottom nav.menu .nav-list {
        display: flex !important;
        flex: 1 1 auto;
        justify-content: center;
        flex-wrap: nowrap;
        gap: .2rem;
        margin: 0 !important;
        float: none !important;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body.skin-magz.mp-bottom nav.menu .nav-list::-webkit-scrollbar { display: none; }
    body.skin-magz.mp-bottom nav.menu .nav-list > li {
        height: auto !important;
    }
    body.skin-magz.mp-bottom nav.menu .nav-list > li > a {
        border-radius: 14px !important;
        padding: .55rem .85rem !important;
        font-size: .78rem !important;
        white-space: nowrap;
        flex-direction: column !important;
        gap: .28rem !important;
        min-width: 4.2rem;
        height: auto !important;
        min-height: 0 !important;
        text-align: center;
    }
    body.skin-magz.mp-bottom nav.menu .nav-ico {
        font-size: 1rem !important;
        width: 1.1rem !important;
        height: 1.1rem !important;
        opacity: 1;
    }
    body.skin-magz.mp-bottom nav.menu .nav-label {
        font-size: .68rem !important;
        font-weight: 650;
        letter-spacing: -.01em;
        line-height: 1.15 !important;
    }
    body.skin-magz.mp-bottom nav.menu .nav-caret {
        display: none !important;
    }
    body.skin-magz.mp-bottom nav.menu .nav-list > li > a:hover,
    body.skin-magz.mp-bottom nav.menu .nav-list > li.active > a {
        background: rgba(255,255,255,.14) !important;
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--idds-accent) 50%, transparent);
    }
    body.skin-magz.mp-bottom nav.menu .float-end {
        float: none !important;
        display: flex !important;
        flex: 0 0 auto;
        margin: 0 !important;
    }
    body.skin-magz.mp-bottom nav.menu .dropdown-menu {
        bottom: calc(100% + .45rem) !important;
        top: auto !important;
        border-radius: 14px !important;
    }
}

/* ==========================================================================
   LEFT RAIL — vertical futuristic sidebar
   ========================================================================== */
@media (min-width: 992px) {
    body.skin-magz.mp-left {
        padding-left: var(--mp-rail) !important;
    }
    body.skin-magz.mp-left nav.menu {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: var(--mp-rail) !important;
        max-width: var(--mp-rail) !important;
        z-index: 1040 !important;
        margin: 0 !important;
        padding: .75rem 0 !important;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--idds-primary, #1a365d) 88%, #0b1220),
            color-mix(in srgb, var(--idds-primary, #1a365d) 72%, #020617)) !important;
        border-right: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: 12px 0 40px rgba(15, 23, 42, .18) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    body.skin-magz.mp-left nav.menu > .container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        box-sizing: border-box;
    }
    body.skin-magz.mp-left nav.menu .brand {
        display: flex !important;
        justify-content: center;
        width: 100%;
        padding: .35rem 0 .75rem;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    body.skin-magz.mp-left nav.menu .brand img {
        height: 34px !important;
        width: auto !important;
        max-width: 42px !important;
        filter: brightness(0) invert(1);
    }
    body.skin-magz.mp-left nav.menu #menu-list {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        gap: .35rem;
        overflow-x: hidden;
        overflow-y: auto;
        padding: .35rem 0 .5rem;
        box-sizing: border-box;
    }
    body.skin-magz.mp-left nav.menu .nav-list,
    body.skin-magz.mp-left nav.menu .float-end {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        float: none !important;
        gap: .35rem;
        padding: 0 .4rem;
        box-sizing: border-box;
    }
    body.skin-magz.mp-left nav.menu .float-end {
        margin-top: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: .35rem;
    }
    /* Theme toggles: 3 <a> in one <li> — stack vertically, never side-by-side */
    body.skin-magz.mp-left nav.menu .float-end > li {
        width: 100%;
        max-width: 100%;
        position: relative;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center;
        gap: .2rem;
    }
    body.skin-magz.mp-left nav.menu .nav-list > li {
        width: 100%;
        position: relative;
        height: auto !important;
    }
    body.skin-magz.mp-left nav.menu .nav-list > li > a,
    body.skin-magz.mp-left nav.menu .float-end > li > a,
    body.skin-magz.mp-left nav.menu .float-end > li > a:has(svg) {
        align-items: center !important;
        justify-content: center !important;
        writing-mode: horizontal-tb !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }
    /* Keep theme toggles mutually exclusive (do not force display:flex on all 3) */
    body.skin-magz.mp-left nav.menu .nav-list > li > a {
        display: flex !important;
    }
    body.skin-magz.mp-left nav.menu .float-end > li > a#icon_sun,
    body.skin-magz.mp-left nav.menu .float-end > li > a#icon_moon,
    body.skin-magz.mp-left nav.menu .float-end > li > a#icon_system {
        display: none !important;
    }
    html[color-theme="light"] body.skin-magz.mp-left nav.menu .float-end > li > a#icon_sun,
    html[color-theme="dark"] body.skin-magz.mp-left nav.menu .float-end > li > a#icon_moon,
    html[color-theme="system"] body.skin-magz.mp-left nav.menu .float-end > li > a#icon_system {
        display: flex !important;
    }
    body.skin-magz.mp-left nav.menu .float-end > li > a:not(#icon_sun):not(#icon_moon):not(#icon_system) {
        display: flex !important;
    }
    body.skin-magz.mp-left nav.menu .float-end svg {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        display: block !important;
        margin: 0 auto !important;
    }
    body.skin-magz.mp-left nav.menu .float-end .flag-icon,
    body.skin-magz.mp-left nav.menu .float-end .d-none,
    body.skin-magz.mp-left nav.menu .float-end .d-sm-inline {
        display: none !important;
    }
    body.skin-magz.mp-left nav.menu .nav-label,
    body.skin-magz.mp-left nav.menu .nav-caret {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    body.skin-magz.mp-left nav.menu .nav-ico {
        font-size: 1.15rem;
        opacity: 1;
        width: auto;
    }
    body.skin-magz.mp-left nav.menu .nav-list > li > a:hover,
    body.skin-magz.mp-left nav.menu .nav-list > li.active > a {
        background: rgba(255,255,255,.12) !important;
        box-shadow: inset 3px 0 0 var(--idds-accent, #a67c2a);
    }
    /* Tooltip on hover for icon-only rail */
    body.skin-magz.mp-left nav.menu .nav-list > li > a[title]:hover::before {
        content: attr(title);
        position: absolute;
        left: calc(100% + .55rem);
        top: 50%;
        transform: translateY(-50%);
        padding: .4rem .65rem;
        border-radius: 8px;
        background: #0f172a;
        color: #fff;
        font-size: .72rem;
        font-weight: 650;
        white-space: nowrap;
        z-index: 1060;
        box-shadow: 0 10px 24px rgba(15,23,42,.28);
        pointer-events: none;
    }
    body.skin-magz.mp-left nav.menu .dropdown-menu {
        position: absolute !important;
        left: calc(100% + .45rem) !important;
        top: 0 !important;
        min-width: 200px;
        border-radius: 12px !important;
        box-shadow: 0 16px 40px rgba(15,23,42,.25) !important;
    }
    body.skin-magz.mp-left .firstbar {
        margin-left: 0;
    }
}

/* ==========================================================================
   RIGHT RAIL — mirrored vertical rail
   ========================================================================== */
@media (min-width: 992px) {
    body.skin-magz.mp-right {
        padding-right: var(--mp-rail) !important;
    }
    body.skin-magz.mp-right nav.menu {
        position: fixed !important;
        right: 0 !important;
        left: auto !important;
        top: 0 !important;
        bottom: 0 !important;
        width: var(--mp-rail) !important;
        max-width: var(--mp-rail) !important;
        z-index: 1040 !important;
        margin: 0 !important;
        padding: .75rem 0 !important;
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--idds-primary, #1a365d) 88%, #0b1220),
            color-mix(in srgb, var(--idds-primary, #1a365d) 72%, #020617)) !important;
        border-left: 1px solid rgba(255,255,255,.08) !important;
        box-shadow: -12px 0 40px rgba(15, 23, 42, .18) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }
    body.skin-magz.mp-right nav.menu > .container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100%;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        box-sizing: border-box;
    }
    body.skin-magz.mp-right nav.menu .brand {
        display: flex !important;
        justify-content: center;
        width: 100%;
        padding: .35rem 0 .75rem;
        border-bottom: 1px solid rgba(255,255,255,.08);
    }
    body.skin-magz.mp-right nav.menu .brand img {
        height: 34px !important;
        width: auto !important;
        max-width: 42px !important;
        filter: brightness(0) invert(1);
    }
    body.skin-magz.mp-right nav.menu #menu-list {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        gap: .35rem;
        overflow-x: hidden;
        overflow-y: auto;
        padding: .35rem 0 .5rem;
        box-sizing: border-box;
    }
    body.skin-magz.mp-right nav.menu .nav-list,
    body.skin-magz.mp-right nav.menu .float-end {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        float: none !important;
        gap: .35rem;
        padding: 0 .4rem;
        box-sizing: border-box;
    }
    body.skin-magz.mp-right nav.menu .float-end {
        margin-top: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: .35rem;
    }
    body.skin-magz.mp-right nav.menu .float-end > li {
        width: 100%;
        max-width: 100%;
        position: relative;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center;
        gap: .2rem;
    }
    body.skin-magz.mp-right nav.menu .nav-list > li {
        width: 100%;
        position: relative;
        height: auto !important;
    }
    body.skin-magz.mp-right nav.menu .nav-list > li > a,
    body.skin-magz.mp-right nav.menu .float-end > li > a,
    body.skin-magz.mp-right nav.menu .float-end > li > a:has(svg) {
        align-items: center !important;
        justify-content: center !important;
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        overflow: hidden;
        font-size: 1.05rem !important;
        line-height: 1;
    }
    body.skin-magz.mp-right nav.menu .nav-list > li > a {
        display: flex !important;
    }
    body.skin-magz.mp-right nav.menu .float-end > li > a#icon_sun,
    body.skin-magz.mp-right nav.menu .float-end > li > a#icon_moon,
    body.skin-magz.mp-right nav.menu .float-end > li > a#icon_system {
        display: none !important;
    }
    html[color-theme="light"] body.skin-magz.mp-right nav.menu .float-end > li > a#icon_sun,
    html[color-theme="dark"] body.skin-magz.mp-right nav.menu .float-end > li > a#icon_moon,
    html[color-theme="system"] body.skin-magz.mp-right nav.menu .float-end > li > a#icon_system {
        display: flex !important;
    }
    body.skin-magz.mp-right nav.menu .float-end > li > a:not(#icon_sun):not(#icon_moon):not(#icon_system) {
        display: flex !important;
    }
    body.skin-magz.mp-right nav.menu .float-end svg {
        width: 18px !important;
        height: 18px !important;
        max-width: 18px !important;
        display: block !important;
        margin: 0 auto !important;
    }
    body.skin-magz.mp-right nav.menu .float-end .flag-icon,
    body.skin-magz.mp-right nav.menu .float-end .d-none,
    body.skin-magz.mp-right nav.menu .float-end .d-sm-inline {
        display: none !important;
    }
    body.skin-magz.mp-right nav.menu .nav-label,
    body.skin-magz.mp-right nav.menu .nav-caret {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    body.skin-magz.mp-right nav.menu .nav-ico {
        font-size: 1.15rem;
        opacity: 1;
        width: auto;
    }
    body.skin-magz.mp-right nav.menu .nav-list > li > a:hover,
    body.skin-magz.mp-right nav.menu .nav-list > li.active > a {
        background: rgba(255,255,255,.12) !important;
        box-shadow: inset -3px 0 0 var(--idds-accent, #a67c2a);
    }
    body.skin-magz.mp-right nav.menu .nav-list > li > a[title]:hover::before {
        content: attr(title);
        position: absolute;
        right: calc(100% + .55rem);
        left: auto;
        top: 50%;
        transform: translateY(-50%);
        padding: .4rem .65rem;
        border-radius: 8px;
        background: #0f172a;
        color: #fff;
        font-size: .72rem;
        font-weight: 650;
        white-space: nowrap;
        z-index: 1060;
        box-shadow: 0 10px 24px rgba(15,23,42,.28);
        pointer-events: none;
    }
    body.skin-magz.mp-right nav.menu .dropdown-menu {
        position: absolute !important;
        right: calc(100% + .45rem) !important;
        left: auto !important;
        top: 0 !important;
        min-width: 200px;
        border-radius: 12px !important;
        box-shadow: 0 16px 40px rgba(15,23,42,.25) !important;
    }
}

/* Hide Magz mobile toggles on desktop rails/docks (keep for mobile) */
@media (min-width: 992px) {
    body.skin-magz.mp-left nav.menu .mobile-toggle,
    body.skin-magz.mp-right nav.menu .mobile-toggle,
    body.skin-magz.mp-bottom nav.menu .mobile-toggle,
    body.skin-magz.mp-float nav.menu .mobile-toggle {
        display: none !important;
    }
}

/* ==========================================================================
   MOBILE — always classic top + hamburger (safe)
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Safari/WebKit: display:contents on header can blank/orphan main paint */
    body.skin-magz header.primary {
        display: block !important;
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        z-index: 1050;
    }

    body.skin-magz.mp-left,
    body.skin-magz.mp-right,
    body.skin-magz.mp-bottom,
    body.skin-magz.mp-float {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }
    body.skin-magz.mp-left nav.menu,
    body.skin-magz.mp-right nav.menu,
    body.skin-magz.mp-bottom nav.menu,
    body.skin-magz.mp-float nav.menu,
    body.skin-magz.mp-top nav.menu {
        position: sticky !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        padding: .35rem 0 !important;
        background: linear-gradient(185deg,
            color-mix(in srgb, var(--idds-primary, #1a365d) 72%, #0b1220) 0%,
            var(--idds-primary, #1a365d) 100%) !important;
        box-shadow: 0 10px 28px color-mix(in srgb, var(--idds-primary) 22%, transparent) !important;
        z-index: 1030 !important;
    }
    body.skin-magz.mp-left nav.menu > .container,
    body.skin-magz.mp-right nav.menu > .container,
    body.skin-magz.mp-bottom nav.menu > .container,
    body.skin-magz.mp-float nav.menu > .container,
    body.skin-magz.mp-top nav.menu > .container {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        padding-inline: 1rem !important;
    }

    /* Undo desktop flex shell so Magz drawer works */
    body.skin-magz nav.menu #menu-list {
        display: block !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        width: auto !important;
    }
    body.skin-magz nav.menu ul.nav-list {
        display: block !important;
        position: fixed !important;
        width: min(320px, 88vw) !important;
        height: 100% !important;
        top: 0 !important;
        right: -110% !important;
        left: auto !important;
        background-color: #fff !important;
        z-index: 3000 !important;
        overflow: auto !important;
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        transition: right .35s ease !important;
    }
    body.skin-magz nav.menu ul.nav-list.active {
        right: 0 !important;
    }
    body.skin-magz nav.menu ul.nav-list > li {
        display: block !important;
        float: none !important;
        height: auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }
    body.skin-magz nav.menu .nav-list > li > a {
        display: flex !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 48px !important;
        padding: .75rem 1rem !important;
        color: #0f172a !important;
    }
    body.skin-magz nav.menu ul.float-end {
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
        position: relative !important;
        height: auto !important;
    }
    body.skin-magz.mp-left nav.menu .nav-list > li > a,
    body.skin-magz.mp-right nav.menu .nav-list > li > a,
    body.skin-magz.mp-left nav.menu .float-end > li > a,
    body.skin-magz.mp-right nav.menu .float-end > li > a {
        writing-mode: horizontal-tb !important;
        transform: none !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        text-transform: none !important;
        letter-spacing: normal !important;
        font-size: .9rem !important;
        gap: .5rem !important;
        padding: .65rem .85rem !important;
    }
    body.skin-magz.mp-left nav.menu .nav-label,
    body.skin-magz.mp-right nav.menu .nav-label,
    body.skin-magz.mp-left nav.menu .nav-caret,
    body.skin-magz.mp-right nav.menu .nav-caret {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        clip: auto !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    body.skin-magz.mp-left nav.menu .nav-list > li > a[title]:hover::before,
    body.skin-magz.mp-right nav.menu .nav-list > li > a[title]:hover::before {
        content: none !important;
    }

    /* Main content must stay visible below chrome */
    body.skin-magz #main-content,
    body.skin-magz .opd-layout,
    body.skin-magz .home--nexus {
        position: relative !important;
        z-index: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        min-height: 50vh !important;
    }
    body.skin-magz #main-content .idds-reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body.skin-magz.mp-top nav.menu .nav-list > li > a::after {
        transition: none !important;
    }
}

/* Float / bottom capsule — tidy overflow when many items */
@media (min-width: 992px) {
    body.skin-magz.mp-float nav.menu #menu-list,
    body.skin-magz.mp-bottom nav.menu #menu-list {
        overflow-x: auto !important;
        scrollbar-width: thin;
        mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }
    body.skin-magz.mp-float nav.menu #menu-list::-webkit-scrollbar,
    body.skin-magz.mp-bottom nav.menu #menu-list::-webkit-scrollbar {
        height: 4px;
    }
    body.skin-magz.mp-float nav.menu .nav-list > li > a,
    body.skin-magz.mp-bottom nav.menu .nav-list > li > a {
        padding-inline: .65rem !important;
    }
    body.skin-magz.mp-float nav.menu .nav-label,
    body.skin-magz.mp-bottom nav.menu .nav-label {
        max-width: 11ch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Desktop: Magz dropdown parents (Profil, etc.) must navigate; hover opens submenu */
@media (min-width: 992px) {
    body.skin-magz nav.menu .nav-list > li > .dropdown-menu {
        pointer-events: none !important;
    }
    body.skin-magz nav.menu .nav-list > li:hover > .dropdown-menu,
    body.skin-magz nav.menu .nav-list > li:focus-within > .dropdown-menu {
        pointer-events: auto !important;
    }
    body.skin-magz nav.menu .nav-list > li.magz-dropdown > a {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}