/*
 * Menu mobile (off-canvas #side-bar) dan tombol pembukanya.
 *
 * Template EliteHost tidak pernah memberi warna pada tautan menu mobile, jadi
 * tautan itu jatuh ke aturan `a { color: var(--brand-link) }` milik tema. Ketika
 * "Warna Link" pada branding disetel terang (mis. #FFFFFF untuk header gelap),
 * tautan menjadi putih di atas panel yang latarnya memang putih — praktis hilang.
 *
 * Panel ini punya latar terang tetap, jadi warnanya diambil dari token yang
 * memang kontras di atas latar terang (--color-primary / --color-secondary),
 * bukan dari --brand-link. Semua nilai tetap berasal dari tema, sehingga
 * perubahan branding di admin tetap terbawa.
 *
 * Selektor diawali #side-bar / #menu-btn agar mengalahkan style.css template
 * dan blok <style> tema yang dimuat sesudah berkas ini.
 */

/* ---------------------------------------------------- Panel */

#side-bar.side-bar {
    background-color: var(--body-bg, #ffffff);
    color: var(--btc, #475569);
    box-shadow: -18px 0 40px rgba(0, 18, 51, .18);
}

/* ---------------------------------------------------- Tautan menu */

#side-bar .mobile-menu-main nav ul li a.main {
    color: var(--color-primary, #2563EB);
    border-bottom-color: var(--light-border, #E2E8F0);
    transition: color .2s ease;
}

#side-bar .mobile-menu-main nav ul li a.main:hover,
#side-bar .mobile-menu-main nav ul li a.main:focus-visible,
#side-bar .mobile-menu-main nav ul li.active > a.main,
#side-bar .mobile-menu-main nav ul li a.main[aria-current="page"] {
    color: var(--color-secondary, #001233);
}

/* Submenu satu tingkat lebih tenang agar hierarkinya terbaca. */
#side-bar .mobile-menu-main nav ul li.has-droupdown ul li a {
    color: var(--color-secondary, #001233);
    font-weight: 400;
    transition: color .2s ease;
}

#side-bar .mobile-menu-main nav ul li.has-droupdown ul li a:hover,
#side-bar .mobile-menu-main nav ul li.has-droupdown ul li a:focus-visible {
    color: var(--color-primary, #2563EB);
}

#side-bar .mobile-menu-main nav ul li.has-droupdown ul li {
    border-bottom-color: var(--light-border, #E2E8F0);
}

/* Panah buka/tutup submenu mengikuti warna merek. */
#side-bar .mobile-menu-main nav ul li.has-droupdown::after {
    color: var(--color-primary, #2563EB);
}

/* ---------------------------------------------------- Ikon sosial */

#side-bar .mobile-menu-main .social-area-one li a {
    color: var(--color-primary, #2563EB);
    transition: color .2s ease;
}

#side-bar .mobile-menu-main .social-area-one li a:hover,
#side-bar .mobile-menu-main .social-area-one li a:focus-visible {
    color: var(--color-secondary, #001233);
}

/* ---------------------------------------------------- Fokus keyboard */

#side-bar a:focus-visible,
#side-bar button:focus-visible {
    outline: 2px solid var(--brand-focus, var(--color-primary, #2563EB));
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------------------------------------------------- Tombol menu (hamburger) */

/*
 * Disesuaikan dengan panel: latar putih, garis dan ikon biru. `display` sengaja
 * tidak disentuh — layout.public sudah mengaturnya per breakpoint.
 */
#menu-btn.mobile__active {
    background: var(--body-bg, #ffffff);
    color: var(--color-primary, #2563EB);
    border: 1px solid var(--border-color, #CBD5E1);
    border-radius: var(--nh-radius-sm, 8px);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

#menu-btn.mobile__active i {
    color: inherit;
}

#menu-btn.mobile__active:hover,
#menu-btn.mobile__active:focus-visible {
    background: var(--color-primary, #2563EB);
    border-color: var(--color-primary, #2563EB);
    color: var(--brand-button-text, #ffffff);
}

#menu-btn.mobile__active:focus-visible {
    outline: 2px solid var(--brand-focus, var(--color-primary, #2563EB));
    outline-offset: 2px;
}