/* ============================================================
   main.css — quran.akhirah.faith
   Aesthetic: Illuminated manuscript — warm parchment, deep
   emerald, amber accents. Light-first. The anti-akhirah.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    /* Backgrounds */
    --bg:              #f7f3ea;   /* warm parchment */
    --bg-card:         #fffdf7;   /* near-white ivory */
    --bg-subtle:       #efe9d8;   /* slightly darker parchment */

    /* Navbar */
    --nav-bg:          #1a4d2e;   /* deep forest green */
    --nav-text:        #e8f5e9;
    --nav-border:      #143d24;

    /* Text */
    --text:            #1c2e1f;   /* near-black with green tint */
    --text-muted:      #5a6e5d;
    --text-light:      #8a9e8d;

    /* Primary — emerald green */
    --green:           #1a4d2e;
    --green-mid:       #2d7a4f;
    --green-light:     #4caf76;
    --green-glow:      rgba(45, 122, 79, 0.12);

    /* Accent — warm amber */
    --amber:           #b5720a;
    --amber-light:     #d4921c;
    --amber-pale:      #f5e6c8;

    /* Borders & dividers */
    --border:          #cfc4a6;
    --border-strong:   #a89870;

    /* Cards */
    --card-hover-bg:   #1a4d2e;
    --card-hover-text: #e8f5e9;

    /* Inputs */
    --input-bg:        #fffdf7;
    --input-border:    #cfc4a6;
    --input-text:      #1c2e1f;

    /* Footer */
    --footer-text:     #5a6e5d;

    /* Transitions */
    --t: 0.25s ease;
}

/* ── Dark theme — deep forest night ───────────────────────── */
[data-theme="dark"] {
    --bg:              #0e1a11;
    --bg-card:         #142019;
    --bg-subtle:       #0a1209;

    --nav-bg:          #081209;
    --nav-text:        #c8e6c9;
    --nav-border:      #0d1f0f;

    --text:            #ddeede;
    --text-muted:      #7aaa7e;
    --text-light:      #4d7a52;

    --green:           #2d7a4f;
    --green-mid:       #4caf76;
    --green-light:     #80c994;
    --green-glow:      rgba(76, 175, 118, 0.14);

    --amber:           #d4921c;
    --amber-light:     #f0b53a;
    --amber-pale:      rgba(212, 146, 28, 0.12);

    --border:          #1f3a24;
    --border-strong:   #2d5535;

    --card-hover-bg:   #c8e6c9;
    --card-hover-text: #0e1a11;

    --input-bg:        #142019;
    --input-border:    #1f3a24;
    --input-text:      #ddeede;

    --footer-text:     #4d7a52;
}

/* ── Reset / Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html[lang="ar"] { direction: rtl; }
html[lang="en"] { direction: ltr; }

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--text);
    transition: background-color var(--t), color var(--t);
    min-height: 100vh;
    /* Subtle parchment noise texture */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

[data-theme="dark"] body {
    background-image: none;
}

/* Green-tinted numbers/spans */
span { color: var(--green-mid); }

/* ── Navbar ────────────────────────────────────────────────── */
.navbar-custom {
    background-color: var(--nav-bg) !important;
    border-bottom: 2px solid var(--nav-border);
    transition: background-color var(--t);
    flex-wrap: wrap;
    padding: 0.6rem 1rem;
}

/* Brand */
.navbar-brand {
    color: var(--nav-text) !important;
    font-size: 1.6rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.navbar-brand img {
    filter: brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(80deg);
    opacity: 0.9;
}

/* Decorative gold underline on brand hover */
.navbar-brand::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 1px;
    background: var(--amber);
    opacity: 0;
    transition: opacity var(--t);
}
.navbar-brand:hover::after { opacity: 1; }

/* Search input */
.search-input {
    background-color: rgba(255,255,255,0.1) !important;
    color: var(--nav-text) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    font-size: 1.1rem !important;
    transition: background var(--t), border-color var(--t);
}

.search-input:focus {
    background-color: rgba(255,255,255,0.18) !important;
    border-color: var(--amber) !important;
    box-shadow: 0 0 0 2px rgba(181,114,10,0.25) !important;
    outline: none;
}

.search-input::placeholder {
    color: rgba(232, 245, 233, 0.5) !important;
}

/* Theme toggle inside navbar */
.theme-toggle-group {
    border-color: rgba(255,255,255,0.25) !important;
    border-radius: 50px !important;
    overflow: hidden;
}

.theme-toggle-group .btn-outline-dark {
    color: var(--nav-text) !important;
    border-color: transparent !important;
    background: transparent !important;
    font-size: 0.9rem !important;
    padding: 0.3rem 0.9rem !important;
    transition: all var(--t);
}

.theme-toggle-group .btn-check:checked + .btn-outline-dark {
    background-color: var(--amber) !important;
    color: #fff !important;
    border-color: var(--amber) !important;
}

/* Mobile search */
.container-fluid.d-md-none .search-input {
    font-size: 1.1rem !important;
    max-width: 100%;
}

/* ── View toggle (سورة / جزء / حزب) ───────────────────────── */
.btn-group.rounded-pill {
    border-radius: 50px !important;
    border-color: var(--border-strong) !important;
    box-shadow: 0 2px 8px rgba(26,77,46,0.1);
    overflow: hidden;
}

.btn-outline-dark {
    color: var(--text) !important;
    border-color: var(--border) !important;
    background-color: var(--bg-card) !important;
    transition: all var(--t);
    font-size: 1.2rem !important;
}

.btn-outline-dark:hover {
    background-color: var(--green-glow) !important;
    color: var(--green) !important;
    border-color: var(--green-mid) !important;
}

.btn-check:checked + .btn-outline-dark {
    background-color: var(--green) !important;
    color: #e8f5e9 !important;
    border-color: var(--green) !important;
}

/* ── Cards (surahs, juz, hizb) ─────────────────────────────── */
.equal-size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 100px;
    font-size: 1.8rem !important;
    padding: 0;
    white-space: nowrap;
    border-radius: 10px !important;
    position: relative;
    overflow: hidden;
    transition: all 0.22s ease !important;
}

/* Amber top border reveals on hover */
.equal-size::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--amber), var(--amber-light));
    opacity: 0;
    transition: opacity var(--t);
}

.equal-size:hover::before { opacity: 1; }

.btn-outline-dark.equal-size:hover {
    background-color: var(--card-hover-bg) !important;
    color: var(--card-hover-text) !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(26,77,46,0.25) !important;
}

/* ── Container — extra breathing room ─────────────────────── */
.container {
    padding-top: 0.5rem;
}

/* ── Surah reader page ─────────────────────────────────────── */
#surah {
    text-align: center;
    padding-bottom: 4rem;
}

#surah-name {
    font-size: 3.8em;
    padding: 0.4em 0.5em 0.2em;
    margin: 0 0 0.5em;
    color: var(--green);
    border-bottom: 1px solid var(--border);
    display: inline-block;
}

[data-theme="dark"] #surah-name {
    color: var(--green-light);
    border-bottom-color: var(--border);
}

#basmala {
    font-size: 2.6em;
    padding: 0 0.5em;
    line-height: 2em;
    color: var(--amber);
}

[data-theme="dark"] #basmala {
    color: var(--amber-light);
}

#ayahs {
    text-align: justify;
    font-size: 3.4rem;
    padding: 0 1.5em;
    line-height: 3.2em;
    max-width: 1024px;
    margin: 1.5rem auto 0;
    color: var(--text);
    /* Subtle vertical rule decoration */
    border-inline-start: 3px solid var(--amber-pale);
    padding-inline-start: 2em;
}

[data-theme="dark"] #ayahs {
    border-inline-start-color: rgba(212,146,28,0.2);
}

/* ── Footer ────────────────────────────────────────────────── */
footer {
    border-color: var(--border) !important;
}

footer a,
footer p {
    color: var(--footer-text) !important;
    font-size: 0.95rem;
    transition: color var(--t);
}

footer a:hover { color: var(--green-mid) !important; }

/* ── Page-load fade-in ─────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.container > * {
    animation: fadeIn 0.5s ease both;
}

/* Stagger the toggle and the grid */
.container > *:nth-child(2) { animation-delay: 0.08s; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
    #surah-name { font-size: 3.2em; }
    #basmala    { font-size: 2.25em; }
    #ayahs      { font-size: 2.1em; padding: 0 0.75em; }
    .equal-size { width: 130px; height: 85px; font-size: 1.15rem; }
}

@media (max-width: 576px) {
    .navbar-brand       { font-size: 1.25rem !important; }
    .navbar-brand img   { width: 32px !important; height: 29px !important; }
    #surah-name         { font-size: 2.8em; }
    #basmala            { font-size: 2em; }
    #ayahs              { font-size: 1.9em; padding: 0 0.5em; }
    .equal-size         { width: 110px; height: 72px; font-size: 1rem; }
    .btn-group.rounded-pill .btn { font-size: 1rem !important; padding: 0.25rem 0.75rem !important; }
}