/* ============================================
   Islamic Kids - Design System
   Direction: "The Illuminated Page"
   Every story and surah is a page in a hand-illuminated
   book. Colors come from Iznik tilework (turquoise, cobalt)
   and manuscript gold on parchment; the recurring ornament
   is the 8-fold girih star.
   ============================================ */

:root {
    /* --- Illumination palette --- */
    --ink: #14383A;            /* deep pine - headings, text */
    --turquoise: #17877F;      /* Iznik turquoise - primary */
    --turquoise-deep: #0F6B65;
    --cobalt: #24508C;         /* Iznik cobalt - Quran accent */
    --gold: #C08A2E;           /* manuscript gold */
    --gold-light: #E0B75C;
    --gold-text: #8A6220;   /* AA-compliant gold for small text */
    --gold-pale: #F3E4C4;
    --parchment: #FBF6EA;
    --parchment-deep: #F3E9D6;
    --rule: rgba(192, 138, 46, 0.32);
    --rule-strong: rgba(192, 138, 46, 0.6);

    /* --- Legacy names, remapped to the palette above so every
           page (stories.css, surah.css) inherits the new look --- */
    --teal-600: #17877F;
    --teal-500: #1E9B92;
    --teal-400: #3FB8AE;
    --emerald-600: #147A6E;
    --emerald-500: #1A8F80;
    --amber-500: #C08A2E;
    --amber-600: #A07223;
    --amber-100: #F3E4C4;
    --amber-50: #FBF3E2;
    --slate-900: #14383A;
    --slate-800: #1D4A4A;
    --slate-700: #2E5B58;
    --slate-500: #5C7370;
    --slate-400: #8FA3A0;
    --slate-200: #E6DCC8;
    --cream: #FBF6EA;
    --cream-blue: #EEF4F3;

    /* --- Shades that were repeated as raw hex across the page-type sheets.
           Same values, now addressable. Added 2026-09-04. --- */
    --card: #FFFDF8;              /* the near-white card face on parchment */
    --gold-ink: #7A5518;          /* dark gold for text on a pale gold wash */
    --gold-ink-strong: #5E4212;   /* the darkest gold, for small emphasis text */
    --gold-wash: #F7EDD8;         /* pale gold surface, lighter than --gold-pale */
    --parchment-warm: #F5EFE2;    /* parchment, one step warmer */
    --rule-warm: #D9CFBC;         /* hairline rule on parchment */
    --cobalt-deep: #1B3C6B;       /* deep cobalt, hero gradients */
    --cobalt-mid: #5A79B0;
    --cobalt-pale: #C9D8EC;
    --cobalt-wash: #E7EDF6;       /* palest cobalt surface */

    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 50px;
    --shadow-sm: 0 2px 8px rgba(20, 56, 58, 0.06);
    --shadow-md: 0 8px 24px rgba(20, 56, 58, 0.09);
    --shadow-lg: 0 16px 40px rgba(20, 56, 58, 0.12);
    --shadow-teal: 0 8px 24px rgba(23, 135, 127, 0.18);
    --shadow-amber: 0 8px 24px rgba(192, 138, 46, 0.2);

    /* The signature ornament: an 8-fold girih star tessellation,
       drawn as two overlapping squares repeated on a 80px grid. */
    --girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C08A2E' stroke-width='1'%3E%3Crect x='20' y='20' width='40' height='40'/%3E%3Crect x='20' y='20' width='40' height='40' transform='rotate(45 40 40)'/%3E%3Crect x='-20' y='-20' width='40' height='40'/%3E%3Crect x='-20' y='-20' width='40' height='40' transform='rotate(45 0 0)'/%3E%3Crect x='60' y='-20' width='40' height='40'/%3E%3Crect x='60' y='-20' width='40' height='40' transform='rotate(45 80 0)'/%3E%3Crect x='-20' y='60' width='40' height='40'/%3E%3Crect x='-20' y='60' width='40' height='40' transform='rotate(45 0 80)'/%3E%3Crect x='60' y='60' width='40' height='40'/%3E%3Crect x='60' y='60' width='40' height='40' transform='rotate(45 80 80)'/%3E%3C/g%3E%3C/svg%3E");

    /* The shamsa (sun rosette) that marks each section */
    --shamsa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23C08A2E' stroke-width='1.5'%3E%3Crect x='9' y='9' width='26' height='26'/%3E%3Crect x='9' y='9' width='26' height='26' transform='rotate(45 22 22)'/%3E%3Ccircle cx='22' cy='22' r='5.5' fill='%23C08A2E' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', 'Poppins', sans-serif;
    background: var(--parchment);
    color: var(--ink);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ============================================
   Header & Navigation
   ============================================ */
header {
    background: var(--turquoise-deep);
    border-bottom: 2px solid var(--gold);
    padding: 0.9rem 2rem;
    box-shadow: 0 4px 20px rgba(20, 56, 58, 0.16);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
    text-decoration: none;
}

.crescent {
    font-size: 2rem;
    animation: crescentPulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

@keyframes crescentPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

/* The site name is a wordmark, not the page heading - it is a <span> so each
   page has exactly one <h1>, its own title. */
.logo h1,
.logo .logo-text {
    font-family: 'Baloo 2', cursive;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Mobile hamburger */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    min-width: 44px;    /* children's hands - WCAG target size */
    min-height: 44px;
}

.nav-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: white;
    border-radius: 3px;
    transition: transform 0.3s ease;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 0.5rem;
}

.nav-links a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.25s ease;
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-full);
    /* Matches the 44px touch target the rest of the controls use. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.nav-links a:hover,
.nav-links a.active {
    color: white;
    background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   Hero - "The Illuminated Page"
   The opening spread of the book: a gold manuscript
   frame on a girih ground, crowned by a shamsa, and
   opened by the first word ever revealed - Iqra.
   ============================================ */
.hero {
    position: relative;
    padding: 5rem 1.5rem 4.5rem;
    display: block;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(23,135,127,0.07), transparent 70%),
        var(--parchment);
}

/* The girih tessellation, ambient behind everything */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--girih);
    background-size: 80px 80px;
    opacity: 0.13;
    -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 35%, transparent 78%);
            mask-image: radial-gradient(ellipse 80% 75% at 50% 45%, #000 35%, transparent 78%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
    padding: 3.25rem 2.5rem 2.75rem;
    text-align: center;
    background: rgba(251, 246, 234, 0.82);
    backdrop-filter: blur(2px);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    box-shadow: 0 0 0 6px var(--parchment), 0 0 0 7px var(--rule),
                0 24px 60px rgba(20, 56, 58, 0.09);
}

/* The shamsa rosette crowning the frame */
.hero-content::before {
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    background: var(--parchment) var(--shamsa) center/44px 44px no-repeat;
    border-radius: 50%;
}

/* Iqra - the first word of revelation, as the eyebrow */
.hero-eyebrow {
    display: block;
    font-family: 'Amiri', 'Baloo 2', serif;
    font-size: 2.5rem;
    line-height: 1;
    /* --gold on parchment is 2.82:1 and fails even the large-text bar;
       --gold-text is 5.06:1. This word is scripture, so it gets the readable token. */
    color: var(--gold-text);
    margin-bottom: 0.35rem;
    direction: rtl;
}

.hero-eyebrow-latin {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gold-text);
    margin-bottom: 1.6rem;
}

.hero-title {
    max-width: 18ch;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Baloo 2', cursive;
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 0.9rem;
    line-height: 1.12;
    letter-spacing: -0.02em;
}

.hero-title em {
    font-style: normal;
    color: var(--turquoise);
}

.hero-subtitle {
    font-size: 1.12rem;
    color: var(--slate-700);
    margin: 0 auto 2rem;
    max-width: 46ch;
    line-height: 1.65;
}

.hero-actions {
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-button {
    display: inline-block;
    background: var(--turquoise-deep);
    color: #fff;
    padding: 0.95rem 2.4rem;
    border: none;
    border-radius: var(--radius-full);
    font-family: 'Baloo 2', cursive;
    font-size: 1.12rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--shadow-teal);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.cta-button:hover {
    background: #0B5751;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(23, 135, 127, 0.32);
}

.cta-button.secondary {
    background: transparent;
    color: var(--gold-text);
    border: 1.5px solid var(--rule-strong);
    box-shadow: none;
}

.cta-button.secondary:hover {
    background: var(--gold-pale);
    color: #7A5518;
    box-shadow: none;
}

/* The old emoji/CSS mosque illustration is retired in favour of
   the girih ground; hidden rather than removed so existing
   markup on other pages does not break. */
.hero-illustration { display: none; }

/* ============================================
   Section Titles
   ============================================ */
.section-title {
    font-family: 'Baloo 2', cursive;
    text-align: center;
    font-size: clamp(1.7rem, 3.4vw, 2.25rem);
    font-weight: 800;
    color: var(--ink);
    margin: 3.5rem 0 2rem;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

/* Hairline rules flanking the heading, as on an illuminated
   text panel - the shamsa sits centred above them. */
.section-title::before,
.section-title::after {
    content: '';
    flex: 0 1 90px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rule-strong));
}

.section-title::after {
    background: linear-gradient(90deg, var(--rule-strong), transparent);
}

/* ============================================
   Featured Stories
   ============================================ */
.featured-stories {
    max-width: 1200px;
    margin: 2rem auto 3rem;
    padding: 0 2rem;
}

.story-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* An illuminated panel: parchment, a fine gold rule, and a
   girih watermark that surfaces on hover. */
.story-card {
    position: relative;
    background: #FFFDF8;
    padding: 2rem 1.6rem 1.8rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--rule);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.story-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--girih);
    background-size: 80px 80px;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.story-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--rule-strong);
}

.story-card:hover::before { opacity: 0.09; }

.story-card > * { position: relative; z-index: 1; }

/* Emoji sit inside a gold roundel so they read as an
   illuminated initial rather than loose clip-art. */
.story-icon {
    font-size: 2rem;
    line-height: 1;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--parchment);
    border: 1px solid var(--rule);
    box-shadow: 0 0 0 4px #FFFDF8, 0 0 0 5px var(--rule);
    transition: transform 0.3s ease;
}

.story-card:hover .story-icon { transform: scale(1.06) rotate(-3deg); }

.story-card h3 {
    font-family: 'Baloo 2', cursive;
    color: var(--ink);
    margin-bottom: 0.5rem;
    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.3;
}

.story-card p {
    color: var(--slate-700);
    margin-bottom: 1.1rem;
    font-size: 0.93rem;
    line-height: 1.6;
    opacity: 0.85;
    flex-grow: 1;   /* absorb slack so the row's buttons line up */
}

.story-card .read-button { align-self: center; }

.read-button {
    display: inline-block;
    background: var(--turquoise-deep);
    color: white;
    padding: 0.6rem 1.6rem;
    border: none;
    border-radius: var(--radius-full);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.story-card:hover .read-button {
    background: var(--turquoise-deep);
    box-shadow: 0 4px 12px rgba(23, 135, 127, 0.28);
}

.read-button.disabled {
    background: var(--slate-400);
    cursor: not-allowed;
}

/* A quiet way out of a section - honest about being a link,
   instead of a placeholder card pretending to be content. */
.section-more {
    display: block;
    width: fit-content;
    margin: 1.75rem auto 0;
    padding: 0.5rem 1.4rem;
    font-family: 'Baloo 2', cursive;
    font-weight: 600;
    font-size: 1rem;
    color: var(--turquoise);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.section-more:hover {
    color: var(--gold-text);
    border-color: var(--rule-strong);
}

/* Story Badges */
.story-badges {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    min-height: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.badge {
    background: transparent;
    color: var(--gold-text);
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--rule);
}

/* Card variants */
.story-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.story-card-link:hover .story-card {
    transform: translateY(-8px);
    box-shadow: var(--shadow-teal);
    border-color: var(--teal-400);
}

.story-card.highlight-card {
    border-color: var(--rule-strong);
    background: linear-gradient(160deg, #FFFDF8 0%, var(--parchment-deep) 100%);
}

.story-card.highlight-card .story-icon {
    background: #FFFDF8;
    border-color: var(--gold);
}

.story-card.coming-soon {
    opacity: 0.6;
    cursor: default;
}

.story-card.coming-soon:hover {
    transform: none;
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

/* ============================================
   Learn Section
   ============================================ */
.learn-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 2.5rem 2rem;
    background: var(--parchment-deep);
    border-radius: var(--radius-xl);
    border: 1px solid var(--rule);
    box-shadow: none;
}

.learn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.learn-card {
    background: #FFFDF8;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
    border: 1px solid var(--rule);
}

.learn-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--rule-strong);
}

.learn-icon {
    font-size: 1.7rem;
    line-height: 1;
    margin: 0 auto 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--parchment);
    border: 1px solid var(--rule);
    box-shadow: 0 0 0 4px #FFFDF8, 0 0 0 5px var(--rule);
    transition: transform 0.3s ease;
}

.learn-card:hover .learn-icon { transform: scale(1.06) rotate(-3deg); }

.learn-card h3 {
    font-family: 'Baloo 2', cursive;
    color: var(--ink);
    margin-bottom: 0.4rem;
    font-size: 1.15rem;
}

.learn-card p {
    color: var(--slate-500);
    font-size: 0.9rem;
}

/* ============================================
   Interactive Section
   ============================================ */
.interactive-section {
    max-width: 1200px;
    margin: 3rem auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.interactive-card {
    background: var(--parchment-deep);
    padding: 2.5rem;
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: none;
    border: 1px solid var(--rule);
}

.interactive-card h3 {
    font-family: 'Baloo 2', cursive;
    color: var(--ink);
    margin-bottom: 0.8rem;
    font-size: 1.4rem;
}

.interactive-card p {
    color: var(--slate-700);
    margin-bottom: 1.2rem;
}

.activity-button {
    background: var(--gold);
    color: white;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: var(--radius-full);
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.activity-button:hover {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(192, 138, 46, 0.32);
}

.countdown {
    background: #FFFDF8;
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: var(--radius-full);
    font-weight: 700;
    color: var(--gold-text);
    margin-top: 1rem;
}

/* ============================================
   Footer
   ============================================ */
footer {
    position: relative;
    background: var(--ink);
    border-top: 2px solid var(--gold);
    color: #fff;
    padding: 3rem 2rem 2.5rem;
    margin-top: 4rem;
}

/* Colophon shamsa, closing the book */
footer::before {
    content: '';
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    background: var(--parchment) var(--shamsa) center/44px 44px no-repeat;
    border-radius: 50%;
}

.footer-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-content p {
    margin: 0.4rem 0;
}

.footer-subtitle {
    color: var(--slate-400);
    font-size: 0.9rem;
}

/* ============================================
   Scroll Animations
   ============================================ */
.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children */
.fade-in:nth-child(2) { transition-delay: 0.08s; }
.fade-in:nth-child(3) { transition-delay: 0.16s; }
.fade-in:nth-child(4) { transition-delay: 0.24s; }

/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--teal-600);
        flex-direction: column;
        padding: 1rem 2rem;
        gap: 0.3rem;
        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    .nav-links.open {
        display: flex;
    }

    .nav-links a {
        display: block;
        padding: 0.6rem 1rem;
    }

    header {
        position: relative;
    }

    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.5rem;
        gap: 1.5rem;
    }

    .hero-content {
        text-align: center;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-illustration {
        height: 280px;
    }

    .story-grid, .learn-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .interactive-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .cta-button {
        padding: 0.85rem 2rem;
        font-size: 1.05rem;
    }
}


/* ============================================
   Quality floor: focus, motion, selection
   ============================================ */
a:focus-visible,
button:focus-visible,
.quiz-option:focus-visible,
.nav-toggle:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--gold-pale);
    color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .fade-in {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ============================================
   Bilingual switching
   The toggle sits in the navbar on every page and always names the
   language you would switch TO, so a child reads "عربي" and knows
   exactly what tapping it does. See bilingual.js.
   ============================================ */

.lang-toggle-btn {
    background: var(--gold);
    color: var(--ink);
    border: 2px solid var(--gold-light);
    padding: 0.4rem 1rem;
    min-height: 44px;   /* children's hands - WCAG target size */
    border-radius: var(--radius-full);
    font-family: inherit;
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.lang-toggle-btn:hover,
.lang-toggle-btn:focus-visible {
    background: var(--gold-light);
    transform: scale(1.06);
    box-shadow: var(--shadow-amber);
}

.lang-toggle-btn:focus-visible {
    outline: 3px solid var(--parchment);
    outline-offset: 2px;
}

/* Group the toggle with the nav links so it stays reachable on mobile */
.nav-cluster {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* --- Arabic mode ------------------------------------------------ */

/* Transliteration only exists to help readers who cannot read the
   script, so it is noise once the page is in Arabic. */
html[lang="ar"] .transliteration {
    display: none;
}

html[lang="ar"] body {
    font-family: 'Amiri', 'Nunito', Georgia, serif;
}

html[lang="ar"] .verse-explanation,
html[lang="ar"] .intro-card,
html[lang="ar"] .story-card,
html[lang="ar"] .reply-card,
html[lang="ar"] .fact-card,
html[lang="ar"] .tip-card,
html[lang="ar"] .quiz-card {
    text-align: right;
}

/* Heroes stay centred in both languages - the icon and title are a
   composition, not running text. */
html[lang="ar"] .surah-hero-content,
html[lang="ar"] .stories-hero {
    text-align: center;
}

/* The accent rule that marks explanations should hug the text edge */
html[lang="ar"] .verse-explanation {
    border-left: none;
    border-right: 3px solid var(--gold);
    padding-left: 0;
    padding-right: 1rem;
}

/* Accent stripes must sit on the reading edge. stories.css already mirrors
   .story-scene, .lesson-box, .fun-fact, .lesson-reveal and .highlight-text;
   these three had no RTL rule anywhere, so the stripe stayed on the left while
   the Arabic text sat on the right. */
html[lang="ar"] .intro-card,
html[lang="ar"] .did-you-know {
    border-left: none;
    border-right: 5px solid var(--emerald-500);
}

html[lang="ar"] .did-you-know {
    border-right-color: var(--gold);
}

html[lang="ar"] .intro-card.highlight {
    border-right-color: var(--gold);
}

html[lang="ar"] .intro-card ul,
html[lang="ar"] .quiz-options {
    padding-right: 1.2rem;
    padding-left: 0;
}

/* Prev/next buttons keep pointing the way the reader is travelling */
html[lang="ar"] .page-navigation {
    flex-direction: row-reverse;
}

html[lang="ar"] .quiz-option,
html[lang="ar"] .start-story-btn {
    text-align: center;
}

/* Arabic reads better with a little more line height at body sizes */
html[lang="ar"] p,
html[lang="ar"] li {
    line-height: 1.95;
}

html[lang="ar"] .section-title,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3 {
    letter-spacing: 0;
}

@media (max-width: 768px) {
    .nav-cluster {
        gap: 0.5rem;
    }
    .lang-toggle-btn {
        padding: 0.35rem 0.8rem;
        font-size: 0.82rem;
        min-height: 44px;
    }
}


/* Safety net: any prose that has no Arabic yet keeps reading left-to-right
   in Arabic mode, so a half-translated page degrades gracefully instead of
   right-aligning English sentences. Remove a rule here once its page is done.

   IMPORTANT: Quranic text is never translated, so it carries no data-ar and
   this net would otherwise sweep it up and force the scripture left-to-right.
   .arabic, .arabic-full, .arabic-large, .quran-text and .transliteration are
   excluded for that reason. Arabic must never render LTR. */
html[lang="ar"] .surah-container p:not([data-ar]):not(.arabic):not(.arabic-full):not(.arabic-large):not(.transliteration),
html[lang="ar"] .surah-container li:not([data-ar]),
html[lang="ar"] .surah-container h2:not([data-ar]),
html[lang="ar"] .surah-container h3:not([data-ar]),
html[lang="ar"] .story-container p:not([data-ar]):not(.arabic):not(.quran-text):not(.transliteration),
html[lang="ar"] .story-container li:not([data-ar]),
html[lang="ar"] .story-container h2:not([data-ar]),
html[lang="ar"] .story-container h3:not([data-ar]),
html[lang="ar"] .story-scene p:not([data-ar]):not(.arabic):not(.quran-text),
html[lang="ar"] .story-scene h2:not([data-ar]),
html[lang="ar"] .quiz-question:not([data-ar]),
html[lang="ar"] .quiz-option:not([data-ar]),
html[lang="ar"] .surah-hero-content h1:not([data-ar]),
html[lang="ar"] .surah-subtitle:not([data-ar]),
html[lang="ar"] .info-badge:not([data-ar]) {
    direction: ltr;
    text-align: left;
}

/* Belt and braces: whatever else changes, scripture reads right-to-left. */
html[lang="ar"] .arabic,
html[lang="ar"] .arabic-full,
html[lang="ar"] .arabic-large,
html[lang="ar"] .quran-text,
.arabic,
.arabic-full,
.arabic-large,
.quran-text {
    direction: rtl;
}

html[lang="ar"] .surah-hero-content h1:not([data-ar]),
html[lang="ar"] .surah-subtitle:not([data-ar]),
html[lang="ar"] .info-badge:not([data-ar]) {
    text-align: center;
}


/* Printing a surah to read aloud is a normal thing to do here, so the printed
   page must never depend on JavaScript having run or on anything having been
   scrolled into view. */
@media print {
    .verse-card,
    .fact-card,
    .tip-card,
    .story-scene {
        opacity: 1 !important;
        transform: none !important;
    }
    .floating-decorations,
    .nav-toggle,
    .lang-toggle-btn,
    .fullscreen-toggle,
    .video-section,
    header {
        display: none !important;
    }
    body {
        background: #fff;
    }
}


/* ============================================
   Bedtime reading mode
   The site is read aloud at night. This dims the parchment to a warm,
   low-blue ground so a lamp-lit room does not get a bright white page,
   while keeping every text/background pair above WCAG AA.
   ============================================ */

.bedtime-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    font-size: 1.05rem;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.bedtime-btn:hover,
.bedtime-btn:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.06);
}

.bedtime-btn:focus-visible {
    outline: 3px solid var(--gold-light);
    outline-offset: 2px;
}

.bedtime-btn[aria-pressed="true"] {
    background: var(--gold);
    border-color: var(--gold-light);
    color: var(--ink);
}

html[data-theme="bedtime"] {
    --parchment: #2A2520;
    --parchment-deep: #221E1A;
    --parchment-warm: #2F2A24;
    --card: #322C25;
    --cream: #2A2520;
    --cream-blue: #262A2B;
    --gold-wash: #38301F;
    --gold-pale: #4A3F28;
    --amber-50: #38301F;
    --amber-100: #4A3F28;
    --ink: #F2E7D2;
    --slate-900: #F2E7D2;
    --slate-800: #E7DBC5;
    --slate-700: #D9CDB6;
    --slate-500: #B5AA95;
    --slate-400: #8E8674;
    --slate-200: #4A4238;
    --gold-text: #E8C070;
    --gold-ink: #E8C070;
    --gold-ink-strong: #F0D094;
    --turquoise: #3FB8AE;
    --turquoise-deep: #1F5F5A;
    --cobalt: #7FA6DE;
    --cobalt-wash: #26303C;
    --cobalt-pale: #3A4759;
    --cobalt-deep: #9BBBEA;
    --rule: rgba(232, 192, 112, 0.28);
    --rule-warm: rgba(232, 192, 112, 0.20);
}

html[data-theme="bedtime"] body {
    background: var(--parchment);
    color: var(--ink);
}

/* Cards were white literals in a few places; keep them on the night ground. */
html[data-theme="bedtime"] .intro-card,
html[data-theme="bedtime"] .verse-card,
html[data-theme="bedtime"] .quiz-card,
html[data-theme="bedtime"] .fact-card,
html[data-theme="bedtime"] .tip-card,
html[data-theme="bedtime"] .story-select-card,
html[data-theme="bedtime"] .quiz-option {
    background: var(--card);
    color: var(--ink);
}

html[data-theme="bedtime"] .story-thumbnail,
html[data-theme="bedtime"] .surah-hero {
    filter: brightness(0.82) saturate(0.9);
}

/* --ink is a TEXT colour by day but a few surfaces use it as a dark GROUND
   (the complete-surah card, the bismillah card). In bedtime mode --ink flips
   to a light cream, which would turn those surfaces light under light gold
   script - the Quranic text measured 1.54:1 before this rule. Pin them dark. */
html[data-theme="bedtime"] .full-surah-card,
html[data-theme="bedtime"] .bismillah-card,
html[data-theme="bedtime"] .dua-box,
html[data-theme="bedtime"] footer {
    background: #1B1713;
}

html[data-theme="bedtime"] .full-surah-card .arabic-full,
html[data-theme="bedtime"] .bismillah-card .arabic-large {
    color: var(--gold-light);
}

/* The floating decorations are cheerful by day and noisy at night. */
html[data-theme="bedtime"] .floating-decorations {
    opacity: 0.35;
}