/**
 * Header Classic — logo+nama di baris atas, navbar di baris bawah.
 * Diaktifkan via class .header-classic pada <header>.
 * Berlaku untuk semua tema FlexStart family.
 */

/* ── Sembunyikan nama penuh di mode default ── */
.hc-name-full {
    display: none;
}

/* ════════════════════════════════════════════════
   STRUCTURE: dua baris
════════════════════════════════════════════════ */
.header.header-classic {
    height: auto !important;
}

.header.header-classic > .container-fluid,
.header.header-classic > .container-xl,
.header.header-classic > div[class*="container"] {
    flex-wrap: wrap !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 0 !important;
}

/* Baris 1: logo + nama (full width) */
.header.header-classic .logo {
    width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    gap: 14px !important;
    text-decoration: none;
}

/* Baris 2: navbar (full width) */
.header.header-classic .navbar {
    width: 100% !important;
    flex: 0 0 100% !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header.header-classic .navbar > ul {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Nama masjid penuh ── */
.hc-name-full {
    display: none;
}

.header.header-classic .hc-name-full {
    display: block !important;
    font-size: clamp(1.2rem, 2.5vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
    /* warna diatur per tema di bawah */
}

/* ── Logo gambar di classic mode ── */
.header.header-classic .mosque-logo-img {
    height: 56px !important;
    width: auto !important;
}

/* ── Sembunyikan badge initial di classic mode (nama sudah tampil besar) ── */
.header.header-classic .mosque-logo-text {
    display: none !important;
}

/* ── Mobile nav toggle: pindah ke sudut kanan ── */
.header.header-classic .mobile-nav-toggle {
    position: fixed !important;
    top: 16px !important;
    right: 20px !important;
    z-index: 9999 !important;
}

/* ════════════════════════════════════════════════
   WARNA PER TEMA
════════════════════════════════════════════════ */

/* ── FlexStart / FlexStart2 / Istiqbal / Uni1 — header putih ── */
.flexstart-theme .header.header-classic .hc-name-full,
.flexstart2-theme .header.header-classic .hc-name-full,
.istiqbal-theme .header.header-classic .hc-name-full,
.uni1-theme .header.header-classic .hc-name-full {
    color: #012970;
}

.flexstart-theme .header.header-classic .logo,
.flexstart2-theme .header.header-classic .logo,
.istiqbal-theme .header.header-classic .logo,
.uni1-theme .header.header-classic .logo {
    border-bottom: 1px solid #e8edf5;
}

/* ── Nabawi — header emerald gelap → teks putih ── */
.nabawi-theme .header.header-classic .hc-name-full {
    color: #fbf8f1;
    text-shadow: 0 2px 8px rgba(5, 46, 40, 0.4);
}

.nabawi-theme .header.header-classic .logo {
    border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}

.nabawi-theme .header.header-classic .navbar > ul {
    border-top: none !important;
}

/* ════════════════════════════════════════════════
   MOBILE (< 992px) — satu baris: logo kiri, hamburger kanan
   Classic layout 2-baris tidak cocok di mobile karena ul
   sudah disembunyikan; revert ke single-row agar rapi.
════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* Kembalikan ke satu baris */
    .header.header-classic > .container-fluid,
    .header.header-classic > .container-xl,
    .header.header-classic > div[class*="container"] {
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* Logo: rata kiri, lebar auto */
    .header.header-classic .logo {
        width: auto !important;
        flex: 1 1 auto !important;
        justify-content: flex-start !important;
        padding: 6px 0 !important;
        gap: 10px !important;
    }

    /* Navbar: kembali jadi inline (hanya tampung hamburger) */
    .header.header-classic .navbar {
        width: auto !important;
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
    }

    /* Hamburger: kembalikan ke posisi normal (tidak fixed) */
    .header.header-classic .mobile-nav-toggle {
        position: static !important;
        top: auto !important;
        right: auto !important;
    }

    /* Sembunyikan nama penuh di mobile — sama seperti mode inline */
    .header.header-classic .hc-name-full {
        display: none !important;
    }

    /* Tampilkan kembali badge initial yang disembunyikan di desktop */
    .header.header-classic .mosque-logo-text {
        display: flex !important;
    }

    .header.header-classic .mosque-logo-img {
        height: 40px !important;
    }
}