/**
 * Logo masjid — 2 baris (nama + kota) tanpa box.
 * Jika ada logo_url: hanya <img> yang tampil (dihandle di partial).
 * v5: plain text, no background, proportional 14-16px.
 */

/* ══════════════════════════════════════════════════
   LOGO IMAGE (ketika mosque->logo_url diisi)
══════════════════════════════════════════════════ */
.mosque-logo-img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Footer logo — sedikit lebih besar */
.footer .mosque-logo-img,
footer .mosque-logo-img {
    height: 52px;
}


/* ══════════════════════════════════════════════════
   TEXT LOGO — struktur dasar (semua ukuran layar)
══════════════════════════════════════════════════ */
.mosque-logo-text {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    /* Tidak ada background, border, padding, shadow */
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* Mobile: tampilkan inisial saja (singkat, hemat ruang) */
.mosque-logo-abbr {
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

/* Label 2 baris (nama + kota) — hidden di mobile */
.mosque-logo-label {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* Baris 1: nama masjid */
.mosque-logo-name {
    display: block;
    font-size: 0.9rem;       /* ≈ 14.4px */
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.005em;
    white-space: normal;
    word-break: break-word;
}

/* Baris 2: nama kota */
.mosque-logo-city {
    display: block;
    font-size: 0.72rem;      /* ≈ 11.5px */
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}


/* ══════════════════════════════════════════════════
   WARNA PER TEMA
   Filosofi: teks harus kontras dengan navbar bg
   • Light navbar (putih/krem) → teks gelap
   • Dark navbar (navy/hijau tua) → teks terang
══════════════════════════════════════════════════ */

/* ── FlexStart, FlexStart2, Istiqbal — navbar putih ── */
.mosque-logo-text--flexstart .mosque-logo-abbr,
.mosque-logo-text--flexstart .mosque-logo-name,
.mosque-logo-text--flexstart2 .mosque-logo-abbr,
.mosque-logo-text--flexstart2 .mosque-logo-name,
.mosque-logo-text--box .mosque-logo-abbr,
.mosque-logo-text--box .mosque-logo-name,
.mosque-logo-text--box-lg .mosque-logo-abbr,
.mosque-logo-text--box-lg .mosque-logo-name {
    color: #012970;
}

.mosque-logo-text--flexstart .mosque-logo-city,
.mosque-logo-text--flexstart2 .mosque-logo-city,
.mosque-logo-text--box .mosque-logo-city,
.mosque-logo-text--box-lg .mosque-logo-city {
    color: #4a6785;
}

/* ── Nabawi — navbar emerald gelap → teks putih ── */
.mosque-logo-text--nabawi .mosque-logo-abbr,
.mosque-logo-text--nabawi .mosque-logo-name {
    color: rgba(255, 255, 255, 0.95);
}

.mosque-logo-text--nabawi .mosque-logo-city {
    color: rgba(255, 255, 255, 0.68);
}

/* ── Sajada — navbar navy gelap → teks putih ── */
.mosque-logo-text--sajada .mosque-logo-abbr,
.mosque-logo-text--sajada .mosque-logo-name,
.mosque-logo-text--sajada-sm .mosque-logo-abbr,
.mosque-logo-text--sajada-sm .mosque-logo-name {
    color: rgba(255, 255, 255, 0.95);
}

.mosque-logo-text--sajada .mosque-logo-city,
.mosque-logo-text--sajada-sm .mosque-logo-city {
    color: rgba(255, 255, 255, 0.65);
}

/* ── Adam — navbar teal/hijau → teks putih ── */
.mosque-logo-text--adam .mosque-logo-abbr,
.mosque-logo-text--adam .mosque-logo-name {
    color: rgba(255, 255, 255, 0.95);
}

.mosque-logo-text--adam .mosque-logo-city {
    color: rgba(255, 255, 255, 0.68);
}

/* ── Default / Businex — fallback gelap ── */
.mosque-logo-text--default .mosque-logo-abbr,
.mosque-logo-text--default .mosque-logo-name {
    color: #1e293b;
}

.mosque-logo-text--default .mosque-logo-city {
    color: #64748b;
}


/* ══════════════════════════════════════════════════
   DESKTOP (≥ 992px) — tampilkan 2 baris nama+kota
══════════════════════════════════════════════════ */
@media (min-width: 992px) {

    .mosque-logo-abbr {
        display: none !important;
    }

    .mosque-logo-label {
        display: flex;
    }

    /* Nama masjid: sedikit lebih besar di desktop */
    .mosque-logo-name {
        font-size: 0.92rem;      /* ≈ 14.7px */
        max-width: min(320px, 32vw);
    }

    /* Kota: tetap kompak */
    .mosque-logo-city {
        font-size: 0.70rem;
        max-width: min(320px, 32vw);
    }
}


/* ══════════════════════════════════════════════════
   VERY NARROW (< 360px) — shrink inisial
══════════════════════════════════════════════════ */
@media (max-width: 360px) {
    .mosque-logo-abbr {
        font-size: 0.8rem;
        letter-spacing: 0.03em;
    }
}


/* ══════════════════════════════════════════════════
   FOOTER — kota lebih visible (beda background)
══════════════════════════════════════════════════ */
.footer .mosque-logo-text .mosque-logo-city,
footer .mosque-logo-text .mosque-logo-city {
    opacity: 0.80;
}


/* ══════════════════════════════════════════════════
   BACKWARD COMPAT — kelas lama (jaga-jaga)
  Hapus box styling dari kelas lama kalau masih
  dirender oleh partial versi lama yang di-cache.
══════════════════════════════════════════════════ */
.mosque-logo-initials--box,
.mosque-logo-initials--box-lg,
.mosque-logo-initials--flexstart,
.mosque-logo-initials--flexstart2,
.mosque-logo-initials--adam,
.mosque-logo-initials--text,
.mosque-logo-initials--nabawi,
.sajada-logo-badge {
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    height: auto !important;
    color: inherit !important;
    -webkit-text-fill-color: initial !important;
}