/* =========================================================
   Dewandaru — Mobile header behaviour (mirror of desktop)
   HANYA behaviour state: sticky + transparan/putih.
   Styling navbar mobile (ukuran, icon, spacing, animasi,
   layout, breakpoint) tidak diubah.
   State body: ab-hero-top / ab-scrolled / ab-overlay-open
   ========================================================= */

@media (max-width: 991.98px) {

    /* mekanisme SAMA dengan desktop: fixed di atas viewport.
       Sticky gagal di sini: (1) body { overflow-x: hidden } membuat
       body jadi scroll container, (2) parent <header> sama tinggi
       dengan bar-nya sendiri -> tidak ada ruang untuk "menempel". */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 10000;
        background-color: var(--ab-white);
        box-shadow: var(--ab-shadow-sm);
        transition: background-color var(--ab-transition), box-shadow var(--ab-transition);
    }

    /* header fixed keluar dari flow:
       beri ruang di atas konten agar posisi visual tetap seperti semula.
       (di halaman hero, offset ini dibatalkan oleh .ab-hero margin-top:-105px) */
    body {
        padding-top: 105px;
    }

    /* state tertinggi: overlay menu dibuka -> header putih
       (overriden last on purpose) */
    body.ab-overlay-open .header {
        background-color: var(--ab-white);
        box-shadow: var(--ab-shadow-sm);
    }
    body.ab-overlay-open .menu-button span { background-color: var(--ab-text); }

    /* puncak halaman + hero terlihat -> transparan, tanpa shadow */
    body.ab-hero-top .header {
        background-color: transparent;
        box-shadow: none;
    }
    body.ab-hero-top .menu-button span { background-color: var(--ab-white); }

    /* sudah scroll -> solid putih */
    body.ab-scrolled .header {
        background-color: var(--ab-white);
        box-shadow: var(--ab-shadow-sm);
    }
}