/* =========================================================================
   Polish menu mobile (≤ 991.98px)
   Add-on stylesheet — TIDAK mengubah struktur HTML / DOM. Hanya memperhalus
   tampilan drawer navigasi yang sudah ada (`.site-header__nav-panel`).
   Memanfaatkan kelas yang sudah ada: `.is-open`, `.is-active`, `.site-header-
   nav-open` (body), serta atribut `href` di tiap item menu untuk meletakkan
   ikon kontekstual via Font Awesome 6 (sudah dimuat oleh header).
   ========================================================================= */

@media (max-width: 991.98px) {

    /* ---------- 0. Hamburger polos: hanya 3 garis (tanpa kotak) ---------- */
    .sg-portal-page .site-header__topbar {
        display: flex !important;
        align-items: center !important;
    }

    .sg-portal-page .site-header__brand-row {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 0 !important;
    }

    .sg-portal-page .site-header__nav-toggle {
        min-width: 36px !important;
        width: 36px !important;
        height: 28px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        gap: 0 !important;
    }

    .sg-portal-page .site-header__nav-toggle:hover,
    .sg-portal-page .site-header__nav-toggle:focus-visible,
    .sg-portal-page .site-header__nav-toggle[aria-expanded="true"] {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
    }

    .sg-portal-page .site-header__nav-toggle-label {
        display: none !important;
    }

    .sg-portal-page .site-header__hamburger-line {
        width: 24px !important;
        height: 2.5px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.96) !important;
        margin: 0 !important;
    }

    .sg-portal-page .site-header__nav-toggle[aria-expanded="true"] .site-header__hamburger-line {
        background: rgba(186, 230, 253, 0.98) !important;
    }

    /* ---------- 1. Backdrop gelap di belakang menu --------------------- */
    /* Saat menu mobile terbuka, render lapisan pseudo `::before` pada body
       sebagai overlay agar konten halaman di belakangnya teredam. JS akan
       menambahkan `pointerdown` handler agar tap di luar panel = tutup. */
    body.site-header-nav-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: radial-gradient(120% 80% at 50% 0%,
            rgba(8, 22, 48, 0.62) 0%,
            rgba(2, 8, 22, 0.74) 100%);
        -webkit-backdrop-filter: blur(2px) saturate(110%);
        backdrop-filter: blur(2px) saturate(110%);
        z-index: 1075;
        pointer-events: none;
        animation: orgMobileBackdropFade 220ms ease-out;
    }

    @keyframes orgMobileBackdropFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* ---------- 2. Panel: surface yang lebih solid + slide-down -------- */
    .site-header__nav-panel.is-open {
        border-radius: 0 0 22px 22px !important;
        background:
            linear-gradient(180deg,
                rgba(8, 22, 48, 0.985) 0%,
                rgba(2, 12, 28, 0.985) 100%) !important;
        border: 1px solid rgba(96, 165, 250, 0.14) !important;
        border-top: 0 !important;
        box-shadow:
            0 22px 48px -10px rgba(0, 0, 0, 0.55),
            0 12px 24px -8px rgba(56, 189, 248, 0.12) !important;
        padding: 0 !important;
        animation: orgMobileSlideDown 240ms cubic-bezier(0.22, 1, 0.36, 1);
        top: var(--site-header-mobile-top, 120px) !important;
        margin-top: 0 !important;
    }

    .sg-portal-page .site-header__nav-panel.is-open {
        padding: 0 !important;
        border-top: 1px solid rgba(148, 197, 253, 0.2) !important;
    }

    @keyframes orgMobileSlideDown {
        from {
            opacity: 0;
            transform: translateY(-14px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Reduced motion: hilangkan animasi geser */
    @media (prefers-reduced-motion: reduce) {
        body.site-header-nav-open::before,
        .site-header__nav-panel.is-open {
            animation: none !important;
        }
    }

    /* ---------- 3. Header drawer: label "Menu" + tombol X bulat -------- */
    .site-header__nav-close-wrap {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.75rem 1rem 0.7rem !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Label "Menu Navigasi" sebelum tombol close */
    .site-header__nav-close-wrap::before {
        content: 'Menu Navigasi';
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(186, 220, 255, 0.72);
        line-height: 1;
    }

    .site-header__nav-close {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 50% !important;
        border: 1px solid rgba(255, 255, 255, 0.18) !important;
        background: rgba(255, 255, 255, 0.06) !important;
        color: rgba(255, 255, 255, 0.92) !important;
        font-size: 1rem;
        line-height: 1;
        transition: background 180ms ease, border-color 180ms ease,
            transform 180ms ease;
    }

    .site-header__nav-close > span {
        display: none !important;
    }

    .site-header__nav-close > i {
        margin: 0 !important;
        font-size: 1rem;
    }

    .site-header__nav-close:hover,
    .site-header__nav-close:focus-visible {
        background: rgba(248, 113, 113, 0.18) !important;
        border-color: rgba(248, 113, 113, 0.55) !important;
        color: #fecaca !important;
        transform: rotate(90deg);
    }

    /* ---------- 4. Daftar menu: spacing + ikon per item ---------------- */
    .site-header__nav-panel.is-open .site-header__nav-row {
        padding: 0.45rem 0.7rem 0.85rem !important;
        gap: 0.4rem !important;
    }

    .site-header__nav-panel.is-open .site-header__nav {
        gap: 0.22rem !important;
    }

    .site-header__nav-panel.is-open .site-header__nav a {
        position: relative;
        gap: 0 !important;
        padding: 0.72rem 0.95rem !important;
        font-weight: 600;
        font-size: 0.96rem;
        letter-spacing: 0.005em;
        color: rgba(245, 248, 255, 0.92) !important;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid transparent;
        transition: background 160ms ease, transform 160ms ease,
            border-color 160ms ease, padding-left 160ms ease;
    }

    .site-header__nav-panel.is-open .site-header__nav a:hover,
    .site-header__nav-panel.is-open .site-header__nav a:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(96, 165, 250, 0.22);
        padding-left: 1.1rem !important;
    }

    /* Ikon kontekstual via Font Awesome 6 — tidak ada perubahan markup,
       cukup match `href` substring tiap item. */
    .site-header__nav-panel.is-open .site-header__nav a::before {
        content: none !important;
        display: none !important;
    }

    /* Match URL → ikon */
    .site-header__nav-panel.is-open .site-header__nav a[href$="index.php"]::before,
    .site-header__nav-panel.is-open .site-header__nav a[href="/"]::before,
    .site-header__nav-panel.is-open .site-header__nav a[href$="/index.php"]::before,
    .site-header__nav-panel.is-open .site-header__nav a[href*="profil"]::before,
    .site-header__nav-panel.is-open .site-header__nav a[href*="layanan"]::before,
    .site-header__nav-panel.is-open .site-header__nav a[href*="dokumen"]::before,
    .site-header__nav-panel.is-open .site-header__nav a[href*="berita"]::before,
    .site-header__nav-panel.is-open .site-header__nav a[href*="galeri"]::before,
    .site-header__nav-panel.is-open .site-header__nav a[href*="e_organisasi"]::before {
        content: none !important;
    }

    /* ---------- 5. State aktif: bg gradient + stripe kiri --------------- */
    .site-header__nav-panel.is-open .site-header__nav a.is-active {
        background: linear-gradient(135deg,
            rgba(56, 189, 248, 0.20),
            rgba(99, 102, 241, 0.18)) !important;
        border-color: rgba(96, 165, 250, 0.48) !important;
        color: #ffffff !important;
        box-shadow: 0 6px 18px -8px rgba(56, 189, 248, 0.55);
    }

    .site-header__nav-panel.is-open .site-header__nav a.is-active::before { content: none !important; }

    /* Stripe vertikal di sisi kiri sebagai penanda aktif.
       `!important` di sini diperlukan untuk override `::after` underline yang
       ada di `smart-governance-portal-nav.css` (yang khusus desktop / hover). */
    .site-header__nav-panel.is-open .site-header__nav a.is-active::after,
    .sg-portal-page .site-header__nav-panel.is-open .site-header__nav a.is-active::after {
        content: '' !important;
        position: absolute !important;
        left: -1px !important;
        right: auto !important;
        top: 24% !important;
        bottom: 24% !important;
        width: 3px !important;
        height: auto !important;
        max-width: 3px !important;
        border-radius: 0 4px 4px 0 !important;
        background: linear-gradient(180deg, #38bdf8, #6366f1) !important;
        box-shadow: 0 0 8px rgba(56, 189, 248, 0.55) !important;
        transform: none !important;
        opacity: 1 !important;
    }

    /* Netralkan ::after underline default di drawer mobile sehingga tidak
       muncul garis tipis di bawah item menu (yang berasal dari mode desktop). */
    .sg-portal-page .site-header__nav-panel.is-open .site-header__nav a:not(.is-active)::after {
        display: none !important;
        content: none !important;
    }

    /* ---------- 6. Section "Akun & Tampilan" + tombol aksi ------------- */
    .site-header__nav-panel.is-open .site-header__actions {
        position: relative;
        width: 100%;
        margin-top: 0.5rem !important;
        padding: 1.1rem 0.45rem 0.4rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
        justify-content: flex-start !important;
    }

    .site-header__nav-panel.is-open .site-header__actions::before {
        content: 'Akun & Tampilan';
        position: absolute;
        top: 0.42rem;
        left: 0.45rem;
        font-size: 0.65rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(186, 220, 255, 0.55);
        line-height: 1;
    }

    .site-header__nav-panel.is-open .site-header__actions-end {
        width: 100%;
        gap: 0.55rem !important;
        align-items: center !important;
        justify-content: stretch !important;
        flex-wrap: wrap;
    }

    /* Theme toggle stays compact at left */
    .site-header__nav-panel.is-open .org-theme-toggle {
        flex: 0 0 auto !important;
    }

    /* Dashboard / Logout / Login: grow agar tidak numpuk di sudut */
    .site-header__nav-panel.is-open .btn-header-dashboard,
    .site-header__nav-panel.is-open .btn-header-logout,
    .site-header__nav-panel.is-open .btn-header-login,
    .site-header__nav-panel.is-open .site-header__logout-form {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .site-header__nav-panel.is-open .site-header__logout-form .btn {
        width: 100%;
    }

    .site-header__nav-panel.is-open .site-header__actions .btn,
    .site-header__nav-panel.is-open .site-header__actions .org-theme-toggle {
        min-height: 42px;
        font-weight: 700;
        justify-content: center;
    }

    /* Kontras tombol di drawer (gelap) — selaras dgn desktop bar */
    .site-header__nav-panel.is-open .btn-header-login,
    .site-header__nav-panel.is-open .btn-header-logout {
        color: #0b1f3a !important;
        background: #ffffff !important;
        border: 1px solid rgba(255, 255, 255, 0.55) !important;
        box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.45);
    }

    .site-header__nav-panel.is-open .btn-header-dashboard {
        background: linear-gradient(135deg, #38bdf8, #6366f1) !important;
        color: #ffffff !important;
        border: 0 !important;
        box-shadow: 0 6px 18px -6px rgba(56, 189, 248, 0.55);
    }

    /* ---------- 7. Hamburger toggle: state aktif ----------------------- */
    .site-header__nav-toggle[aria-expanded="true"] {
        background: rgba(56, 189, 248, 0.18) !important;
        border-color: rgba(96, 165, 250, 0.55) !important;
    }

    .site-header__nav-toggle[aria-expanded="true"] .site-header__hamburger-line {
        background: #93c5fd !important;
    }
}

/* HP sangat sempit (<=420px): theme toggle pindah baris baru biar muat */
@media (max-width: 420px) {
    .site-header__nav-panel.is-open .site-header__actions-end {
        gap: 0.5rem !important;
    }

    .site-header__nav-panel.is-open .site-header__nav a {
        font-size: 0.92rem;
        padding: 0.68rem 0.85rem 0.68rem 0.85rem !important;
    }
}