/* Public site design system — layered on top of trongate.css, scoped to public pages only */

:root {
    --navy: #092d66;
    --blue: #134999;
    --ink: #162942;
    --foreground: #122443;
    --muted: #627086;
    --ivory: #fffef1;
    --soft: #eef3fa;
    --line: #e1e6ed;
    --gold: #e5dfb9;
}

body { font-family: Arial, Helvetica, sans-serif; color: var(--foreground); background: #fcfcfa; }

h1, h2, h3, .lesson-body h3, .book-row h3, .principal strong { font-family: Georgia, 'Playfair Display', serif; font-weight: 400; }

.eyebrow {
    display: block;
    color: var(--blue);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ---------- Top bar ---------- */
.topbar {
    background: var(--navy);
    color: #dce7fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 37px;
    padding: 0 5%;
    font-size: 12px;
}
.topbar a { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 6px; }
.topbar a:hover { text-decoration: underline; }
.topbar .arabic { direction: rtl; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 30;
    background: #fcfcfaf5;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
}
.site-header-inner {
    max-width: 1180px; margin: 0 auto;
    display: flex; align-items: center; gap: 28px;
    height: 88px; padding: 0 1.2em;
}
.site-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-brand img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; }
.brand-wordmark { color: var(--ink); font-weight: 700; font-size: 1.2em; line-height: 1.15; }
.brand-wordmark small { display: block; font-family: Arial, sans-serif; font-weight: 600; letter-spacing: 2.5px; font-size: 0.4em; color: var(--muted); margin-top: 3px; }

.site-nav { display: flex; align-items: center; gap: 28px; margin-left: 0.4em; flex: 1; font-size: 14px; }
.site-nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--blue); }

.salah-pill {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid #cbd6e5; border-radius: 6px;
    padding: 10px 16px; font-size: 14px; font-weight: 600;
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.salah-pill:hover { border-color: var(--blue); color: var(--blue); }

.site-nav-toggle { display: none; background: none; border: none; font-size: 1.5em; cursor: pointer; margin-left: auto; }

/* ---------- Hero ---------- */
.hero {
    background: var(--blue);
    color: var(--ivory);
    display: grid;
    grid-template-columns: 57% 43%;
    min-height: 520px;
    position: relative;
    overflow: hidden;
}
.hero-content {
    background: linear-gradient(100deg, #113e83, #144b9c);
    padding: 60px 5% 70px 5%;
    position: relative; z-index: 2;
}
.hero-kicker { letter-spacing: 2.4px; color: #d7e4f8; font-size: 11px; display: flex; align-items: center; gap: 10px; }
.hero-kicker::before { content: '——'; }
.hero h1 { margin: 20px 0; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.15; font-weight: 700; }
.hero h1 em { color: var(--gold); font-style: italic; font-weight: 400; }
.hero-content p { color: #dbe6f7; max-width: 495px; font-size: 1.05em; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 26px; flex-wrap: wrap; }
.btn-cream, .btn-blue {
    border: none; border-radius: 5px; padding: 13px 22px;
    font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none;
}
.btn-cream { background: var(--ivory); color: #15396e; }
.btn-cream:hover { background: #f5f0dc; }
.btn-ghost { color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 10px; }
.btn-ghost:hover { color: var(--gold); }
.hero-meta { color: #bfcfe8; font-size: 12px; margin-top: 32px; display: flex; align-items: center; gap: 8px; }
.hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #bfcfe8; }

.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-quote {
    position: absolute; left: 24px; right: 24px; bottom: 24px;
    background: rgba(9,45,102,0.72);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 1.3em 1.5em;
    max-width: 340px;
}
.hero-quote .eyebrow { color: var(--gold); font-family: Arial, sans-serif; margin-bottom: 6px; }
.hero-quote p { font-size: 1.25em; font-style: italic; margin: 0 0 0.4em; font-family: Georgia, serif; }
.hero-quote small { font-family: Arial, sans-serif; font-size: 0.78em; color: #b9c3d6; }

/* ---------- Salah preview widget (prayer-card) ---------- */
.prayer-card {
    max-width: 1180px; margin: -42px auto 0;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 10px 35px rgba(20,46,87,0.06);
    padding: 27px 32px 18px;
    position: relative; z-index: 3;
}
.prayer-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.prayer-heading h2 { font-size: 1.6em; margin: 2px 0 0; color: var(--ink); }
.prayer-location-group { display: flex; align-items: center; gap: 8px; }
.prayer-location-group svg { color: var(--blue); flex: none; }
.prayer-location {
    border: 1px solid var(--line); border-radius: 999px; padding: 8px 30px 8px 14px;
    font-family: Arial, sans-serif; font-size: 0.85em; color: var(--ink); font-weight: 600;
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23627086' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none; appearance: none; cursor: pointer;
}
.prayer-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-bottom: 12px; }
.prayer-cell {
    background: var(--soft); border: 1px solid transparent; border-radius: 8px;
    padding: 16px 8px; text-align: center;
}
.prayer-cell.next { background: var(--blue); color: #fff; border-color: var(--blue); }
.prayer-cell svg { width: 22px; height: 22px; color: var(--blue); margin-bottom: 8px; }
.prayer-cell.next svg { color: #fff; }
.prayer-cell .name { font-size: 0.85em; font-weight: 600; }
.prayer-cell .time { font-weight: 700; font-size: 1.05em; margin-top: 3px; }
.prayer-cell .next-tag { font-size: 0.68em; letter-spacing: 1px; margin-top: 4px; opacity: 0.85; }
.prayer-fine { color: #738096; font-size: 12px; line-height: 1.6; margin: 10px 0 4px; }

/* ---------- Quick links ---------- */
.quick-links {
    max-width: 1180px; margin: 0 auto; padding: 31px 1.2em;
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--line);
}
.quick-links a { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); padding: 0.4em 0.8em; }
.quick-links svg { color: var(--blue); flex: none; }
.quick-links small { display: block; color: var(--muted); font-size: 0.78em; }
.quick-links strong { font-weight: 700; font-size: 0.98em; }
.quick-links .chevron { margin-left: auto; color: var(--muted); }

/* ---------- Sections ---------- */
.page-section, .section { max-width: 1180px; margin: 0 auto; padding: 2.8em 1.2em; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; flex-wrap: wrap; }
.section-head h2 { font-size: 2.1em; color: var(--ink); margin: 0; }
.text-button { color: var(--blue); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.text-button:hover { text-decoration: underline; }

/* ---------- Lesson tabs + cards ---------- */
.lesson-tabs { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.lesson-tab {
    border: 1px solid var(--line); background: #fff; color: var(--ink);
    border-radius: 999px; padding: 0.5em 1.1em; font-size: 0.88em; font-weight: 600;
    cursor: pointer;
}
.lesson-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.lesson-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
.lesson-card {
    border: 1px solid var(--line); background: #fff; border-radius: 8px; overflow: hidden;
    text-decoration: none; color: inherit; display: block;
}
.lesson-art { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; background: #e9eef5; }
.lesson-art.art-1 { background: #eeeade; }
.lesson-art.art-2 { background: #dae5ea; }
.lesson-art .tag { position: absolute; top: 14px; left: 14px; font-size: 10px; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.lesson-art .arabic { font-size: 2.4em; color: var(--ink); font-family: Georgia, serif; }
.lesson-art .play {
    position: absolute; bottom: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
    background: #fff; display: flex; align-items: center; justify-content: center; color: var(--blue);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.lesson-body { padding: 23px; }
.lesson-body h3 { font-size: 1.4em; min-height: 3em; margin: 0.2em 0; }
.lesson-body p { color: #647185; font-size: 0.92em; line-height: 1.7; margin: 0.6em 0 1.2em; }
.lesson-byline { display: flex; align-items: center; gap: 10px; font-size: 0.85em; color: var(--ink); font-weight: 600; }

.class-notice {
    border: 1px solid var(--line); background: #f3f6fa; border-radius: 6px;
    display: flex; align-items: center; gap: 18px; margin-top: 24px; padding: 20px 24px; flex-wrap: wrap;
}
.class-notice strong { font-size: 14px; display: block; }
.class-notice p { color: #6b788a; font-size: 12px; margin: 0.2em 0 0; }
.class-notice a { color: var(--blue); font-size: 12px; font-weight: 600; margin-left: auto; text-decoration: none; display: flex; align-items: center; gap: 6px; }

/* ---------- About section ---------- */
.about-section {
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 60px;
}
.about-wordmark img { width: 100%; max-width: 260px; border-radius: 8px; }
.about-section h2 { font-size: 2.1em; margin-bottom: 20px; }
.about-section p { color: #67768a; font-size: 14px; line-height: 1.9; margin-bottom: 12px; }
.principal { border-left: 2px solid #b4c6e1; margin: 24px 0; padding-left: 19px; }
.principal span { letter-spacing: 1.5px; color: var(--blue); font-size: 9px; display: block; text-transform: uppercase; }
.principal strong { display: block; font-size: 1.4em; margin: 4px 0; }
.principal small { color: #6c788a; font-size: 12px; display: block; }

/* ---------- Book library ---------- */
.books { display: flex; flex-direction: column; gap: 14px; }
.book-row {
    border: 1px solid var(--line); background: #fff; border-radius: 7px;
    display: flex; align-items: center; gap: 24px; padding: 22px; text-decoration: none; color: inherit; flex-wrap: wrap;
}
.book-icon {
    width: 70px; height: 90px; border-radius: 3px 7px 7px 3px; flex-shrink: 0;
    display: grid; place-items: center; color: #e7e4c8; background: var(--blue);
    box-shadow: inset 5px 0 rgba(255,255,255,0.12);
}
.book-icon.book-1 { background: #567378; }
.book-icon.book-2 { background: #73674d; }
.book-row h3 { font-size: 1.3em; margin: 0; }
.book-row p { color: #627087; font-size: 13px; margin-top: 3px; }
.book-row small { color: #8690a1; font-size: 11px; }
.book-download { color: var(--blue); font-size: 12px; display: flex; align-items: center; gap: 12px; margin-left: auto; }
.fine { color: #738096; font-size: 12px; line-height: 1.6; margin-top: 9px; }

/* ---------- Community CTA band ---------- */
.community-band {
    max-width: 1180px; margin: 0 auto 65px; background: var(--blue); color: var(--ivory);
    border-radius: 9px; display: flex; align-items: center; justify-content: space-between; gap: 25px;
    padding: 44px 40px; flex-wrap: wrap;
}
.community-band .eyebrow { color: #d4dded; }
.community-band h2 { font-size: 2em; margin: 0; }
.community-band p { color: #cfdaed; font-size: 13px; margin-top: 10px; }

/* ---------- Generic cards (fallback) ---------- */
.section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2em; margin: 1.5em 0; }
.section-grid .card { margin: 0; }
.section-grid .card-body { text-align: left; }
.notice { background: var(--soft); border-left: 4px solid var(--blue); padding: 0.9em 1.1em; margin: 1em 0; border-radius: 4px; }

/* ---------- Footer ---------- */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: 2em; }
.footer-main { max-width: 1180px; margin: 0 auto; padding: 35px 1.2em 20px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.footer-brand img { width: 44px; height: 44px; border-radius: 6px; }
.footer-brand span { color: var(--ink); font-weight: 700; }
.footer-brand small { display: block; letter-spacing: 2px; font-size: 0.65em; color: var(--muted); }
.footer-tagline { color: #768397; font-size: 12px; max-width: 320px; }
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--blue); font-size: 13px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom {
    max-width: 1180px; margin: 0 auto; padding: 16px 1.2em 28px;
    border-top: 1px solid var(--line); color: #7a8799; font-size: 10px;
    display: flex; justify-content: space-between; gap: 15px; flex-wrap: wrap;
}
.footer-bottom a { color: #7a8799; }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-visual { height: 260px; }
    .prayer-grid { grid-template-columns: repeat(3, 1fr); }
    .quick-links { grid-template-columns: 1fr 1fr; gap: 20px 0; }
    .lesson-grid { grid-template-columns: 1fr; }
    .about-section { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
    .site-nav-toggle { display: block; }
    .site-nav {
        display: none; order: 3; flex-basis: 100%;
        flex-direction: column; align-items: flex-start; margin-top: 0.8em;
    }
    .site-nav.open { display: flex; }
    .site-nav a { margin: 0.4em 0; }
    .topbar .tagline { display: none; }
    .hero-content { padding: 2.5em 1.4em; }
    .prayer-grid { grid-template-columns: repeat(2, 1fr); }
    .prayer-card { margin-top: -20px; padding: 1.2em; }
}