/*!
 * OPD theme isolation + induk full-width chrome.
 * ZERO LEAKAGE: layout/nav/batik rules use [data-opd-theme] or layout_type tokens,
 * never hard-code colors for a foreign OPD slug inside shared selectors.
 * Load after idds-opd-layouts.css.
 */

/* ========== FULL-WIDTH SHELL (all sites with layout_type full-width) ========== */
body.skin-magz[data-opd-theme] .home--nexus .nx-container,
body.skin-magz[data-opd-theme] .home--nexus .nx-hero__frame,
body.skin-magz[data-opd-theme] .home--nexus .nx-inner,
body.skin-magz[data-opd-theme] .home--nexus .container-md--wide,
body.skin-magz[data-opd-theme] .firstbar .container-md,
body.skin-magz[data-opd-theme] nav.menu > .container,
body.skin-magz[data-opd-theme] .idds-container,
body.skin-magz[data-opd-theme] .container-md {
    max-width: min(100%, 1760px) !important;
    width: 100% !important;
}

/* Induk — true full-size canvas */
body.skin-magz[data-opd-theme="tanggamus"] .home--nexus .nx-container,
body.skin-magz[data-opd-theme="tanggamus"] .home--nexus .nx-inner,
body.skin-magz[data-opd-theme="tanggamus"] .home--nexus .nx-hero__frame,
body.skin-magz[data-opd-theme="tanggamus"] .firstbar .container-md,
body.skin-magz[data-opd-theme="tanggamus"] nav.menu > .container,
body.skin-magz[data-opd-theme="tanggamus"] .idds-container,
body.skin-magz[data-opd-theme="tanggamus"] .container-md,
body.skin-magz[data-opd-theme="default"] .home--nexus .nx-container,
body.skin-magz[data-opd-theme="default"] .home--nexus .nx-inner,
body.skin-magz[data-opd-theme="default"] .firstbar .container-md,
body.skin-magz[data-opd-theme="default"] nav.menu > .container {
    max-width: min(100%, 1920px) !important;
    width: 100% !important;
}

/* ========== NAV — desktop horizontal chrome (mobile uses Magz drawer) ========== */
@media (min-width: 992px) {
    body.skin-magz[data-opd-theme].mp-top nav.menu > .container,
    body.skin-magz[data-opd-theme].mp-top nav.menu > .container--wide,
    body.skin-magz[data-opd-theme]:not(.mp-bottom):not(.mp-float):not(.mp-left):not(.mp-right) nav.menu > .container,
    body.skin-magz[data-opd-theme]:not(.mp-bottom):not(.mp-float):not(.mp-left):not(.mp-right) nav.menu > .container--wide {
        max-width: min(100%, 1600px) !important;
        width: 100% !important;
        padding-inline: clamp(.5rem, 1.5vw, 1.25rem) !important;
    }
    body.skin-magz[data-opd-theme] nav.menu #menu-list {
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    body.skin-magz[data-opd-theme].mp-top nav.menu .nav-list,
    body.skin-magz[data-opd-theme]:not(.mp-bottom):not(.mp-float):not(.mp-left):not(.mp-right) nav.menu .nav-list {
        flex-wrap: nowrap !important;
        width: max-content;
        min-width: 100%;
    }
    body.skin-magz[data-opd-theme].mp-top nav.menu .nav-list > li > a,
    body.skin-magz[data-opd-theme]:not(.mp-bottom):not(.mp-float):not(.mp-left):not(.mp-right) nav.menu .nav-list > li > a {
        font-size: .88rem !important;
        padding: 0 .7rem !important;
        gap: .4rem !important;
        min-height: 44px !important;
        height: 44px !important;
        white-space: nowrap !important;
    }
    body.skin-magz[data-opd-theme] nav.menu .nav-list > li > a i.nav-ico {
        font-size: .95rem !important;
        width: 1rem !important;
    }
    body.skin-magz[data-opd-theme].mp-top nav.menu .nav-list > li > a .nav-label {
        font-size: .82rem !important;
        font-weight: 700 !important;
        letter-spacing: .01em;
    }
}

/* Hard-stop: dock/rail menus must never become a full-page dark overlay */
@media (min-width: 992px) {
    body.skin-magz[data-opd-theme].mp-bottom nav.menu {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        height: auto !important;
        max-height: calc(var(--mp-dock-h, 68px) + 1.5rem) !important;
        overflow: visible !important;
    }
    body.skin-magz[data-opd-theme].mp-bottom nav.menu > .container {
        width: min(960px, calc(100vw - 2rem)) !important;
        max-width: min(960px, calc(100vw - 2rem)) !important;
        min-height: var(--mp-dock-h, 68px) !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* BPBD emergency solid bar — orange primary, navy accent underline */
body.skin-magz[data-opd-theme="bpbd"].opd-menu--solid nav.menu,
body.skin-magz.preset-bpbd.opd-menu--solid nav.menu {
    background: var(--idds-primary, #ea580c) !important;
    border-bottom: 3px solid var(--idds-accent, #1d4ed8) !important;
    box-shadow: 0 8px 22px rgba(234, 88, 12, .22) !important;
}
body.skin-magz[data-opd-theme="bpbd"] nav.menu .nav-list > li > a,
body.skin-magz.preset-bpbd nav.menu .nav-list > li > a {
    color: #fff !important;
}
body.skin-magz[data-opd-theme="bpbd"] nav.menu .nav-list > li > a:hover,
body.skin-magz[data-opd-theme="bpbd"] nav.menu .nav-list > li.active > a,
body.skin-magz.preset-bpbd nav.menu .nav-list > li > a:hover,
body.skin-magz.preset-bpbd nav.menu .nav-list > li.active > a {
    background: color-mix(in srgb, #1d4ed8 35%, transparent) !important;
}

/* ========== BATIK BELAH KETUPAT — pattern via CSS vars (no foreign colors) ========== */
body.skin-magz[data-opd-theme] .firstbar::after,
body.skin-magz[data-opd-theme] .nx-opd-stage::before,
body.skin-magz[data-opd-theme="tanggamus"] .nx-hero::before,
body.skin-magz[data-opd-theme="default"] .nx-hero::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .09;
    background-image:
        linear-gradient(45deg, var(--idds-accent, #FCA416) 25%, transparent 25%),
        linear-gradient(-45deg, var(--idds-accent, #FCA416) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--idds-accent, #FCA416) 75%),
        linear-gradient(-45deg, transparent 75%, var(--idds-accent, #FCA416) 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
    mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
}
body.skin-magz[data-opd-theme] .firstbar {
    position: relative;
    isolation: isolate;
}
body.skin-magz[data-opd-theme] .firstbar > .container-md {
    position: relative;
    z-index: 1;
}

/* Ketupat divider under nav — induk richest */
body.skin-magz[data-opd-theme="tanggamus"] nav.menu::after,
body.skin-magz[data-opd-theme="default"] nav.menu::after {
    content: "";
    display: block;
    height: 6px;
    width: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            var(--idds-primary, #900000) 0 10px,
            var(--idds-accent, #FCA416) 10px 14px,
            #111 14px 16px,
            var(--idds-accent, #FCA416) 16px 20px
        );
}

/* Dual logo clarity */
body.skin-magz[data-opd-theme] .brand__dual .brand__mark {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
}
body.skin-magz[data-opd-theme] .brand__dual .brand__mark--opd {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
}
body.skin-magz[data-opd-theme] .brand__dual .brand__logo {
    object-fit: contain !important;
}

/* Induk brand name scale */
body.skin-magz[data-opd-theme="tanggamus"] .firstbar .brand__name,
body.skin-magz[data-opd-theme="default"] .firstbar .brand__name {
    font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
}

/* ========== STANDARDIZED OPD BANNER (anti empty / anti stretch) ========== */
body.skin-magz .opd-banner-std {
    position: relative !important;
    width: 100% !important;
    height: clamp(260px, 42vw, 460px) !important;
    min-height: 260px !important;
    max-height: 460px !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    background: var(--color-primary, var(--idds-primary, #900000));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--color-primary, #900000) 28%, transparent);
}
body.skin-magz .opd-banner-std__carousel,
body.skin-magz .opd-banner-std .carousel,
body.skin-magz .opd-banner-std .carousel-inner,
body.skin-magz .opd-banner-std .carousel-item {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
}
body.skin-magz .opd-banner-std__img,
body.skin-magz .opd-banner-std img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    transform: none !important;
}
body.skin-magz .opd-banner-std__fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1.5rem;
    background:
        linear-gradient(135deg,
            var(--color-primary, #900000) 0%,
            color-mix(in srgb, var(--color-primary, #900000) 55%, var(--color-secondary, #FCA416)) 55%,
            var(--color-secondary, #FCA416) 100%);
    color: #fff;
    z-index: 1;
}
body.skin-magz .opd-banner-std[data-has-image="1"] .opd-banner-std__fallback[hidden] {
    display: none !important;
}
body.skin-magz .opd-banner-std__batik {
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image:
        linear-gradient(45deg, #fff 25%, transparent 25%),
        linear-gradient(-45deg, #fff 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #fff 75%),
        linear-gradient(-45deg, transparent 75%, #fff 75%);
    background-size: 22px 22px;
    background-position: 0 0, 0 11px, 11px -11px, -11px 0;
    pointer-events: none;
}
body.skin-magz .opd-banner-std__copy {
    position: relative;
    z-index: 2;
    max-width: min(92%, 720px);
}
body.skin-magz .opd-banner-std__kicker {
    display: block;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .9;
    margin-bottom: .55rem;
}
body.skin-magz .opd-banner-std__title {
    display: block;
    font-size: clamp(1.35rem, 3.2vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
}
body.skin-magz .opd-banner-std__sub {
    display: block;
    margin-top: .55rem;
    font-size: .95rem;
    opacity: .92;
}

/* Standard stage: banner fills frame without nested absolute collapse */
body.skin-magz .nx-opd-stage--standard {
    display: flex !important;
    flex-direction: column !important;
    gap: .85rem !important;
    padding: .85rem !important;
    min-height: unset !important;
    height: auto !important;
    background: color-mix(in srgb, var(--color-primary, #900000) 92%, #111) !important;
    border-radius: 1.15rem !important;
}
body.skin-magz .nx-opd-stage--standard .home-compose__slider-frame--standard {
    position: relative !important;
    height: auto !important;
    min-height: unset !important;
    overflow: visible !important;
}
body.skin-magz .nx-opd-stage--standard .nx-opd-hero {
    position: relative !important;
    inset: auto !important;
    z-index: 3 !important;
}