/* Muslims with HIV: matches the muslimswithhsv.com look
   (Bootstrap 5.3 dark chrome, amber #ffc107 accent, Amiri for ayat). */

:root {
    --mw-amber: #ffc107;
    --mw-amber-hover: #ffca2c;
    --mw-amber-soft: #fff8e1;
}

[data-bs-theme="dark"] {
    --bs-body-bg: #262a30;
    --bs-body-bg-rgb: 38, 42, 48;
}

body {
    padding-top: 66px; /* fixed navbar */
}

/* --- Navbar wordmark --- */
.brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-size: 1.2rem;
    letter-spacing: .3px;
}
.brand:hover { color: #fff; }
.brand svg { width: 32px; height: 32px; flex: none; }
.brand strong { font-weight: 700; color: var(--mw-amber); }

.navbar .nav-link.active { color: #fff; }

.btn-cta {
    color: #000;
    background-color: var(--mw-amber);
    border-color: var(--mw-amber);
    font-weight: 600;
}
.btn-cta:hover,
.btn-cta:focus-visible {
    color: #000;
    background-color: var(--mw-amber-hover);
    border-color: var(--mw-amber-hover);
}

/* --- Brand components (same as main site) --- */
.accent-rule {
    width: 56px;
    height: 3px;
    background-color: var(--mw-amber);
    border: 0;
    opacity: 1;
    margin: .75rem auto 1.5rem;
}
.accent-rule.start { margin-left: 0; }

.hero-accent {
    border-bottom: 4px solid var(--mw-amber);
    background-size: cover;
    background-position: center;
}
.hero-home {
    background-image: linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.58)), url('/img/hero-mosque.webp');
}

.ayah-arabic {
    font-family: 'Amiri', serif;
    font-size: 1.75rem;
    line-height: 2;
    direction: rtl;
}
.ayah-translation { font-style: italic; }

.accordion-button:not(.collapsed) {
    background-color: var(--mw-amber-soft);
    color: #000;
}
.accordion-button:focus {
    box-shadow: 0 0 0 .25rem rgba(255, 193, 7, .25);
}

/* Long-form reading pages */
.prose {
    max-width: 46rem;
    margin-inline: auto;
    font-size: 1.05rem;
    line-height: 1.75;
}
.prose h2 {
    font-weight: 300;
    margin-top: 2.5rem;
}

.cta-band {
    border-top: 4px solid var(--mw-amber);
}

footer a { text-decoration: none; }
footer a:hover { color: var(--mw-amber) !important; }