/* ==========================================================================
   Sakeenah 2.0 — site.css (public pages). Mobile first; theme.css loads first.
   ========================================================================== */

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 24px; } }
.wrap-narrow { max-width: 820px; }
.site-main { min-height: 60vh; }
.flash-wrap { padding-top: 1rem; }
.hide-sm { display: none !important; }
@media (min-width: 720px) { .hide-sm { display: inline-flex !important; } }
@media (min-width: 1024px) { .hide-lg { display: none !important; } }

/* ---------- Announcement ---------- */
.announce { background: var(--accent); color: var(--accent-ink); font-size: .92rem; }
.announce-in { display: flex; gap: .6rem; align-items: center; min-height: 44px; }
.announce p { margin: 0; flex: 1; }
.announce .btn { color: inherit; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
.header-in { display: flex; align-items: center; gap: .5rem; min-height: 62px; }
.brand { display: inline-flex; align-items: center; flex: none; margin-inline-end: auto; }
.logo { height: 38px; width: auto; }
@media (min-width: 720px) { .logo { height: 44px; } }
.logo-dark { display: none; }
html.dark .logo-light { display: none; }
html.dark .logo-dark { display: block; }
.main-nav { display: none; }
.header-tools { display: flex; align-items: center; gap: .15rem; }
.header-me { display: inline-flex; padding: 4px; border-radius: 50%; }
.header-me:hover { box-shadow: 0 0 0 2px var(--accent); }
@media (min-width: 1024px) {
  .brand { margin-inline-end: 1.5rem; }
  .main-nav { display: flex; align-items: center; gap: .15rem; margin-inline-end: auto; }
  .main-nav > a, .mega-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: var(--r-pill); color: var(--ink-2); font-weight: 600; text-decoration: none; font-size: .98rem; border: 0; background: none; cursor: pointer; font-family: var(--font-body); }
  .main-nav > a:hover, .mega-btn:hover, .mega-btn[aria-expanded="true"] { color: var(--ink); background: var(--surface-2); }
  .main-nav > a.is-active { color: var(--brand); }
  .nav-discover { color: var(--accent-strong) !important; }
  html.dark .nav-discover { color: var(--accent) !important; }
}
.mega { position: relative; }
.mega-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-40%); width: min(92vw, 980px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-3); padding: 1.25rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mega-col h3 { font: 700 .82rem var(--font-body); color: var(--ink-3); margin: .2rem .6rem .6rem; }
.mega-link { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); }
.mega-link:hover { background: var(--surface-2); color: var(--ink); }
.mega-link small { display: block; color: var(--ink-3); font-size: .84rem; line-height: 1.35; }
.mega-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }

/* ---------- Bottom navigation (phones/tablets) ---------- */
.bottom-nav { position: fixed; z-index: 120; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 60px; font: 600 .7rem/1.1 var(--font-body); color: var(--ink-3); text-decoration: none; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bottom-nav .is-active { color: var(--brand); }
.bottom-nav .is-active .ic { stroke-width: 2.4; }
.bn-center .bn-arch { display: grid; place-items: center; width: 52px; height: 46px; margin-top: -22px; background: var(--accent); color: var(--accent-ink); border-radius: 26px 26px 14px 14px; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent) 60%, transparent); border: 3px solid var(--surface); }
.bottom-nav .avatar { border: 2px solid currentColor; }
body.site { --bottom-nav: 64px; padding-bottom: calc(var(--bottom-nav) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .bottom-nav { display: none; } body.site { --bottom-nav: 0px; padding-bottom: 0; } }

/* ---------- Sheets (search/theme/explore) ---------- */
.sheet-wide { width: min(94vw, 760px); }
.search-box { display: flex; align-items: center; gap: .6rem; border: 2px solid var(--line-strong); border-radius: var(--r-pill); padding: 0 .9rem; background: var(--surface); }
.search-box:focus-within { border-color: var(--brand); }
.search-box input { border: 0 !important; box-shadow: none !important; padding-inline: 0; font-size: 1.05rem; background: transparent; }
.live-results { margin-top: .75rem; display: grid; gap: .25rem; }
.live-results a { display: flex; gap: .75rem; align-items: center; padding: .6rem; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); }
.live-results a:hover, .live-results a:focus { background: var(--surface-2); }
.live-results small { color: var(--ink-3); display: block; }
.lang-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.explore-h { font: 700 .85rem var(--font-body); color: var(--ink-3); margin: 1rem 0 .6rem; }
.explore-h:first-child { margin-top: 0; }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
@media (min-width: 560px) { .explore-grid { grid-template-columns: repeat(6, 1fr); } }
.explore-tile { display: grid; justify-items: center; gap: .4rem; text-align: center; padding: .75rem .3rem; border-radius: var(--r-md); text-decoration: none; color: var(--ink); font-size: .8rem; font-weight: 600; line-height: 1.25; background: var(--surface-2); }
.explore-tile span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--surface); color: var(--brand); box-shadow: var(--shadow-1); }
.explore-tile:hover { color: var(--brand); }

/* ---------- Sections ---------- */
.section { padding-block: 2.5rem; }
@media (min-width: 720px) { .section { padding-block: 3.5rem; } }
.section-tight { padding-block: 1.5rem; }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: .3rem 0 0; color: var(--ink-2); }
.sec-head .more { flex: none; font-weight: 600; text-decoration: none; display: inline-flex; gap: .3rem; align-items: center; }
html[dir="rtl"] .ar-kicker { text-align: right !important; }
.ar-kicker { display: block; direction: rtl; text-align: left !important; unicode-bidi: plaintext; font-family: var(--font-callig); color: var(--gold); font-size: 1.35rem; line-height: 1.2; margin-bottom: .1rem; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; color: #fff; background: linear-gradient(135deg, var(--hero-a), var(--hero-b)); overflow: hidden; }
.page-hero.girih::before { background: var(--gold); opacity: .13; }
.page-hero .wrap { padding-block: 2rem 2.4rem; position: relative; }
@media (min-width: 720px) { .page-hero .wrap { padding-block: 3rem 3.4rem; } }
.page-hero h1 { color: #fff; margin: 0 0 .4rem; }
.page-hero p { color: rgb(255 255 255 / .82); max-width: 62ch; margin: 0; font-size: 1.06rem; }
.page-hero .ar-kicker { color: var(--gold); font-size: 1.6rem; }
.page-hero a:not(.btn) { color: #fff; }
.crumbs { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .85rem; margin-bottom: .8rem; color: rgb(255 255 255 / .7); }
.crumbs a { color: rgb(255 255 255 / .85) !important; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.page-hero .hero-search { margin-top: 1.25rem; max-width: 560px; }
.page-hero .search-box { border-color: transparent; }
.page-hero .chips { margin-top: 1rem; }
.page-hero .chip { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .25); }
.page-hero .chip:hover, .page-hero .chip.is-on { background: #fff; color: var(--brand-strong); border-color: #fff; }
html.dark .page-hero .chip:hover, html.dark .page-hero .chip.is-on { color: #0A1220; }
.arch-edge { position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--bg); -webkit-mask: url(../img/arch-top.svg) center bottom / 100% 100% no-repeat; mask: url(../img/arch-top.svg) center bottom / 100% 100% no-repeat; }

/* ---------- Home hero: the mihrab ---------- */
.mihrab-hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 90% at 50% 0%, var(--hero-b), var(--hero-a) 70%); }
.mihrab-hero.girih::before { background: var(--gold); opacity: .12; }
.mihrab-hero .wrap { display: grid; gap: 1.5rem; padding-block: 1.6rem 2.6rem; align-items: center; }
@media (min-width: 960px) { .mihrab-hero .wrap { grid-template-columns: 1.05fr .95fr; gap: 3rem; padding-block: 3.5rem 4.5rem; } }
.hero-copy h1 { color: #fff; font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); margin-bottom: .6rem; }
.hero-copy p { color: rgb(255 255 255 / .85); font-size: 1.12rem; max-width: 46ch; }
.hero-date { display: inline-flex; flex-wrap: wrap; align-items: stretch; margin-bottom: 1.1rem; border-radius: 16px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(6px); color: rgb(255 255 255 / .9); overflow: hidden; }
.hd-part { display: flex; align-items: center; gap: .6rem; padding: .55rem .95rem; }
.hd-part > svg { color: var(--gold); flex: none; }
.hd-txt { display: flex; flex-direction: column; line-height: 1.25; }
.hd-txt strong { font-size: .92rem; font-weight: 600; color: #fff; }
.hd-txt small { font-size: .78rem; color: rgb(255 255 255 / .7); }
.hero-date .ar { font-family: var(--font-ar, 'Amiri', serif); font-size: 1rem; line-height: 1.5; color: var(--gold); }
.hd-sep { width: 1px; background: rgb(255 255 255 / .18); }
@media (max-width: 420px) { .hd-sep { width: 100%; height: 1px; } .hero-date { flex-direction: column; } }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.mihrab { position: relative; margin-inline: auto; width: min(100%, 470px); aspect-ratio: 400 / 520; }
.mihrab-frame { position: absolute; inset: 0; background: linear-gradient(180deg, var(--gold), color-mix(in srgb, var(--gold) 40%, transparent)); -webkit-mask: url(../img/arch.svg) center / 100% 100% no-repeat; mask: url(../img/arch.svg) center / 100% 100% no-repeat; }
.mihrab-inner { position: absolute; inset: 7px; background: linear-gradient(180deg, color-mix(in srgb, var(--hero-a) 70%, #000), var(--hero-a)); -webkit-mask: url(../img/arch.svg) center / 100% 100% no-repeat; mask: url(../img/arch.svg) center / 100% 100% no-repeat; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 22% 9% 9%; }
.mihrab-inner::before { content: ""; position: absolute; inset: 0; background: var(--gold); opacity: .08; -webkit-mask: url(../img/girih.svg) 0 0 / 90px 90px repeat; mask: url(../img/girih.svg) 0 0 / 90px 90px repeat; }
.mihrab-lamp { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); color: var(--gold); opacity: .9; }
.basmala { font-family: var(--font-callig); color: var(--gold); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); line-height: 1.4; margin-bottom: .6rem; direction: rtl; }
.ayah-day { position: relative; }
.ayah-day .quran { color: #fff; text-align: center; font-size: clamp(1.35rem, 1.05rem + 1.3vw, 1.9rem); line-height: 2.1; }
.ayah-day .tr { color: rgb(255 255 255 / .82); font-family: var(--font-head); font-size: 1.05rem; line-height: 1.55; margin: .5rem 0 0; }
.ayah-day cite { display: block; margin-top: .7rem; font: 600 .82rem var(--font-body); color: var(--gold); font-style: normal; }
.ayah-day .btn { margin-top: .9rem; }

/* today strip */
.today { margin-top: -1.6rem; position: relative; z-index: 2; }
.today-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 82%); gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; scrollbar-width: none; }
.today-grid::-webkit-scrollbar { display: none; }
.today-grid > * { scroll-snap-align: start; }
@media (min-width: 900px) { .today-grid { grid-auto-flow: row; grid-template-columns: 1.2fr 1fr 1fr; overflow: visible; } }
.prayer-card { padding: 1rem 1.1rem; }
.prayer-card h2 { font-size: 1rem; margin: 0; font-family: var(--font-body); display: flex; align-items: center; gap: .4rem; }
.prayer-next { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: .5rem 0 .7rem; }
.prayer-next strong { font-family: var(--font-head); font-size: 1.6rem; }
.prayer-next span { color: var(--accent-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
html.dark .prayer-next span { color: var(--accent); }
.prayer-times { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25rem; text-align: center; font-size: .78rem; color: var(--ink-3); }
.prayer-times b { display: block; color: var(--ink); font-size: .92rem; font-variant-numeric: tabular-nums; }
.prayer-times .is-next { color: var(--accent-strong); }
.prayer-times .is-next b { color: var(--accent-strong); }
html.dark .prayer-times .is-next, html.dark .prayer-times .is-next b { color: var(--accent); }
.prayer-loc { font-size: .8rem; color: var(--ink-3); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; gap: .25rem; align-items: center; }

/* ---------- Content cards ---------- */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3, .grid-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.hscroll > * { scroll-snap-align: start; }
@media (min-width: 960px) { .hscroll { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; } }

.c-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .2s; height: 100%; }
.c-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); box-shadow: var(--shadow-2); color: var(--ink); }
.c-media { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.c-media img { width: 100%; height: 100%; object-fit: cover; }
.c-type { position: absolute; top: .6rem; left: .6rem; }
html[dir="rtl"] .c-type { left: auto; right: .6rem; }
.c-type .badge { background: rgb(10 18 32 / .72); color: #fff; backdrop-filter: blur(4px); }
.c-body { padding: .95rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.c-body h3 { font-size: 1.12rem; margin: 0; line-height: 1.3; }
.c-body p { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.5; }
.c-meta { margin-top: auto; padding-top: .35rem; display: flex; gap: .75rem; flex-wrap: wrap; font-size: .82rem; color: var(--ink-3); }
.c-meta span { display: inline-flex; gap: .3rem; align-items: center; }

/* arched daily cards */
.day-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 120px 120px var(--r-md) var(--r-md) / 64px 64px var(--r-md) var(--r-md); padding: 2.2rem 1.25rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-1); }
.day-card:hover { color: var(--ink); border-color: var(--gold); box-shadow: var(--shadow-2); }
.day-card .day-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); margin-top: -3.4rem; border: 4px solid var(--surface); }
html.dark .day-card .day-ic { color: var(--accent); }
.day-card .eyebrow { font-weight: 700; font-size: .82rem; color: var(--accent-strong); }
html.dark .day-card .eyebrow { color: var(--accent); }
.day-card h3 { font-size: 1.2rem; margin: 0; }
.day-card .ar { font-size: 1.3rem; text-align: center; line-height: 1.9; color: var(--ink); }
.day-card p { color: var(--ink-2); margin: 0; font-size: .95rem; }
.day-card .go { margin-top: auto; font-weight: 700; color: var(--brand); display: inline-flex; gap: .3rem; align-items: center; }
.days { display: grid; gap: 2.4rem 1rem; padding-top: 1.5rem; }
@media (min-width: 760px) { .days { grid-template-columns: repeat(3, 1fr); } }

/* discover band */
.discover-band { position: relative; border-radius: var(--r-lg); overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--brand-strong), var(--brand)); padding: 1.6rem 1.25rem; display: grid; gap: 1.2rem; }
.discover-band.girih::before { background: var(--gold); opacity: .12; }
@media (min-width: 860px) { .discover-band { grid-template-columns: 1.2fr 1fr; padding: 2.5rem; align-items: center; } }
.discover-band h2 { color: #fff; }
.discover-band p { color: rgb(255 255 255 / .85); font-size: 1.05rem; }
.discover-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.discover-steps a { display: flex; gap: .7rem; align-items: center; padding: .7rem .85rem; border-radius: var(--r-sm); background: rgb(255 255 255 / .08); color: #fff; text-decoration: none; border: 1px solid rgb(255 255 255 / .14); }
.discover-steps a:hover { background: rgb(255 255 255 / .16); }
.discover-steps .n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1206; font-weight: 700; font-size: .85rem; }

/* library tiles */
.lib-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 720px) { .lib-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .lib-grid { grid-template-columns: repeat(4, 1fr); } }
.lib-tile { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-height: 132px; position: relative; overflow: hidden; }
.lib-tile .ic-wrap { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.lib-tile strong { font-family: var(--font-head); font-size: 1.12rem; line-height: 1.25; }
.lib-tile small { color: var(--ink-3); line-height: 1.35; }
.lib-tile:hover { border-color: var(--brand); color: var(--ink); }
.lib-tile .count { position: absolute; top: .9rem; right: 1rem; font-size: .78rem; font-weight: 700; color: var(--ink-3); }
html[dir="rtl"] .lib-tile .count { right: auto; left: 1rem; }

/* ---------- Article / reading layout ---------- */
.read { display: grid; gap: 2rem; padding-block: 2rem 3rem; }
@media (min-width: 1024px) { .read { grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; } .read-aside { position: sticky; top: 84px; align-self: start; } }
.read-head { margin-bottom: 1.25rem; }
.read-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; color: var(--ink-3); font-size: .9rem; margin-top: .6rem; }
.read-meta span { display: inline-flex; gap: .3rem; align-items: center; }
.feature-img { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 1.5rem; aspect-ratio: 16 / 9; background: var(--surface-2); }
.feature-img img { width: 100%; height: 100%; object-fit: cover; }
.actions-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0; padding-block: 1rem; border-block: 1px solid var(--line); }
.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem; }
.aside-card + .aside-card { margin-top: 1rem; }
.aside-card h3 { font-size: 1.05rem; margin-bottom: .75rem; }
.mini-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.mini-list a { display: flex; gap: .7rem; align-items: center; text-decoration: none; color: var(--ink); font-weight: 600; line-height: 1.3; font-size: .95rem; }
.mini-list img { width: 64px; height: 44px; object-fit: cover; border-radius: 8px; flex: none; }
.mini-list a:hover { color: var(--brand); }
.toc a { text-decoration: none; }
.callout { border-radius: var(--r-md); padding: 1.1rem 1.25rem; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.callout h3 { font-size: 1.05rem; margin-bottom: .4rem; display: flex; gap: .45rem; align-items: center; }
.callout p:last-child { margin: 0; }
.callout-brand { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 25%, transparent); }

/* section blocks inside long content (hadith, lessons) */
.block { margin-top: 2.2rem; }
.block-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.block-h .bi { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); flex: none; }
.block-h h2 { font-size: 1.35rem; margin: 0; }
.acc { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.acc + .acc { margin-top: .6rem; }
.acc > summary { list-style: none; cursor: pointer; display: flex; gap: .7rem; align-items: center; padding: .9rem 1rem; font-weight: 700; font-family: var(--font-head); font-size: 1.1rem; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary .chev { margin-inline-start: auto; color: var(--ink-3); transition: transform .2s; }
.acc[open] > summary .chev { transform: rotate(180deg); }
.acc > .acc-body { padding: 0 1rem 1.1rem; }

/* Hadith / ayah presentation */
.text-panel { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.4rem 1.2rem; box-shadow: var(--shadow-1); }
@media (min-width: 720px) { .text-panel { padding: 2rem 2.2rem; } }
.text-panel::after { content: ""; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: calc(var(--r-lg) - 4px); pointer-events: none; }
.text-panel .ar { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); line-height: 2.1; color: var(--ink); }
.text-panel .en { font-family: var(--font-head); font-size: 1.2rem; line-height: 1.7; margin-top: 1rem; color: var(--ink); }
.text-panel .src { margin-top: 1rem; font-size: .88rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.grade-sahih { background: var(--ok-soft); color: var(--ok); }
.grade-hasan { background: var(--info-soft); color: var(--info); }
.grade-daif, .grade-mawdu { background: var(--warn-soft); color: var(--warn); }

/* Qur'an reader */
.surah-list { display: grid; gap: .5rem; }
@media (min-width: 640px) { .surah-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .surah-list { grid-template-columns: repeat(3, 1fr); } }
.surah-item { display: flex; align-items: center; gap: .85rem; padding: .8rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.surah-item:hover { border-color: var(--brand); color: var(--ink); }
.surah-no { width: 42px; height: 42px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .9rem; color: var(--brand); position: relative; }
.surah-no::before { content: ""; position: absolute; inset: 0; background: var(--brand); opacity: .14; -webkit-mask: url(../img/star8.svg) center / contain no-repeat; mask: url(../img/star8.svg) center / contain no-repeat; }
.surah-item .names { flex: 1; min-width: 0; }
.surah-item .names strong { display: block; }
.surah-item .names small { color: var(--ink-3); }
.surah-item .ar { font-size: 1.4rem; line-height: 1.2; color: var(--brand); }
.reader-bar { position: sticky; top: 62px; z-index: 50; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.reader-bar .wrap { display: flex; gap: .5rem; align-items: center; min-height: 56px; overflow-x: auto; }
.ayah { padding: 1.2rem 0; border-bottom: 1px solid var(--line); scroll-margin-top: 130px; }
.ayah.is-playing { background: linear-gradient(90deg, transparent, var(--accent-soft), transparent); }
.ayah-tools { display: flex; gap: .25rem; align-items: center; color: var(--ink-3); font-size: .85rem; }
.ayah .quran { margin: .4rem 0 .6rem; }
.ayah .translit { color: var(--ink-3); font-style: italic; font-size: .95rem; }
.ayah .trans { font-size: 1.08rem; line-height: 1.7; }
.bismillah-line { text-align: center; font-family: var(--font-quran); font-size: 1.9rem; color: var(--brand); margin: 1.5rem 0 .5rem; }
.ayah .translit { display: none; }
.reader-show-translit .ayah .translit { display: block; }

/* Audio player */
.player { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.player .play { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.player .bar { flex: 1; height: 6px; border-radius: 6px; background: var(--surface-3); position: relative; cursor: pointer; }
.player .bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--accent); border-radius: inherit; }
.player .time { font-size: .82rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.floating-player { position: fixed; left: 12px; right: 12px; bottom: calc(var(--bottom-nav) + 12px + env(safe-area-inset-bottom)); z-index: 110; }
@media (min-width: 1024px) { .floating-player { left: auto; right: 24px; width: 420px; } }

/* Names, duas, glossary */
.names-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 720px) { .names-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .names-grid { grid-template-columns: repeat(4, 1fr); } }
.name-card { position: relative; text-align: center; padding: 1.2rem .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.name-card .num { position: absolute; top: .55rem; left: .7rem; font-size: .75rem; color: var(--ink-3); font-weight: 700; }
.name-card .ar { text-align: center; font-family: var(--font-callig); font-size: 2rem; color: var(--brand); line-height: 1.6; }
.name-card strong { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.name-card small { color: var(--ink-2); display: block; line-height: 1.35; margin-top: .2rem; }
.dua-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem; }
.dua-card .ar { font-size: 1.45rem; line-height: 2.1; }
.dua-card .translit { color: var(--ink-3); font-style: italic; margin: .6rem 0; }
.dua-card .tr { font-size: 1.04rem; }
.dua-card .ref { font-size: .84rem; color: var(--ink-3); margin-top: .7rem; }
.dua-card .counter { margin-top: .8rem; }
.tasbih-btn { border: 0; cursor: pointer; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); color: var(--accent-ink); font: 700 1.6rem var(--font-body); box-shadow: var(--shadow-2); }
.tasbih-btn:active { transform: scale(.96); }
.gloss { display: grid; gap: .6rem; }
.gloss-item { display: grid; gap: .2rem; grid-template-columns: 1fr auto; align-items: baseline; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.gloss-item dt { font-weight: 700; font-family: var(--font-head); font-size: 1.15rem; }
.gloss-item .ar { font-size: 1.2rem; line-height: 1.4; }
.gloss-item dd { grid-column: 1 / -1; margin: 0; color: var(--ink-2); }
.alpha { display: flex; flex-wrap: wrap; gap: .3rem; }
.alpha a { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; font-weight: 700; color: var(--ink-2); background: var(--surface); }

/* Discover journey */
.journey { display: grid; gap: 2rem; padding-block: 2rem 3rem; }
@media (min-width: 1024px) { .journey { grid-template-columns: 280px minmax(0, 1fr); gap: 3rem; } .journey-nav { position: sticky; top: 84px; align-self: start; } }
.journey-nav ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; counter-reset: s; }
.journey-nav a { display: flex; gap: .65rem; align-items: center; padding: .6rem .7rem; border-radius: var(--r-sm); text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.journey-nav a:hover { background: var(--surface-2); color: var(--ink); }
.journey-nav a.is-on { background: var(--brand-soft); color: var(--brand); }
.journey-nav .n { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .8rem; background: var(--surface-3); color: var(--ink-2); }
.journey-nav .done .n { background: var(--ok); color: #fff; }
.journey-nav a.is-on .n { background: var(--brand); color: var(--brand-ink); }
.journey-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.journey-pager a { display: grid; gap: .1rem; text-decoration: none; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); max-width: 48%; }
.journey-pager a small { color: var(--ink-3); }
.journey-pager a strong { color: var(--ink); }
.journey-pager .next { margin-inline-start: auto; text-align: end; }
.welcome-note { display: flex; gap: .8rem; align-items: flex-start; }

/* Timeline (world history) */
.timeline { position: relative; padding-inline-start: 1.6rem; }
.timeline::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 7px; width: 2px; background: linear-gradient(var(--gold), var(--brand)); }
.tl-item { position: relative; padding: 0 0 1.4rem; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: -1.6rem; top: .35rem; width: 16px; height: 16px; background: var(--gold); -webkit-mask: url(../img/star8.svg) center / contain no-repeat; mask: url(../img/star8.svg) center / contain no-repeat; }
.tl-year { font-weight: 700; color: var(--accent-strong); font-size: .9rem; }
html.dark .tl-year { color: var(--accent); }
.tl-item h3 { margin: .1rem 0 .3rem; font-size: 1.12rem; }
.tl-item.high h3 { color: var(--brand); }
.map-box { height: 60vh; min-height: 360px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }

/* Donate */
.donate-grid { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .donate-grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.amount { position: relative; }
.amount input { position: absolute; opacity: 0; }
.amount span { display: grid; place-items: center; min-height: 52px; border: 2px solid var(--line); border-radius: var(--r-sm); font-weight: 700; cursor: pointer; background: var(--surface); }
.amount input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.amount input:focus-visible + span { outline: 3px solid var(--focus); }
.pay-methods { display: grid; gap: .5rem; }
.pay-method { display: flex; gap: .8rem; align-items: center; padding: .8rem 1rem; border: 2px solid var(--line); border-radius: var(--r-md); cursor: pointer; background: var(--surface); }
.pay-method:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pay-method input { accent-color: var(--brand); width: 20px; height: 20px; }
.pay-method small { display: block; color: var(--ink-3); }
.impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; }
.impact strong { display: block; font-family: var(--font-head); font-size: 1.6rem; color: var(--brand); }
.impact small { color: var(--ink-3); }

/* Q&A */
.q-item { display: flex; gap: 1rem; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; color: var(--ink); }
.q-item:hover { border-color: var(--brand); color: var(--ink); }
.q-stats { display: grid; gap: .4rem; text-align: center; flex: none; width: 64px; font-size: .78rem; color: var(--ink-3); }
.q-stats b { display: block; font-size: 1.1rem; color: var(--ink); }
.q-stats .answered { border-radius: 8px; background: var(--ok-soft); color: var(--ok); padding: .2rem; }
.q-stats .answered b { color: var(--ok); }
.answer { padding: 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.answer.accepted { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.vote { display: flex; flex-direction: column; align-items: center; gap: .1rem; }

/* Nasheed karaoke */
.lyrics { font-size: 1.15rem; line-height: 1.9; }
.lyrics .line, .lyrics .l { font-family: "Scheherazade New", var(--font-body); unicode-bidi: plaintext; text-align: center; }
.lyrics .line:lang(ar), .lyrics .line[dir="rtl"] { font-family: var(--font-lyrics); }
.lyrics-text { text-align: center; padding-block: 1.6rem; background-image: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%); }
.lyrics-text .stanza { display: grid; gap: .1rem; margin: 0 auto 1.6rem; max-width: 34rem; }
.lyrics-text .stanza:last-child { margin-bottom: 0; }
.lyrics-text .l { display: block; font-size: 1.55rem; line-height: 2.1; color: var(--ink); }
.lyrics-text .is-chorus .l { color: var(--accent-strong); }
html.dark .lyrics-text .is-chorus .l { color: var(--accent); }
.lyrics-text .stanza-label { justify-self: center; font: 600 .72rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border: 1px solid var(--line); border-radius: 99px; padding: .35rem .7rem; margin-bottom: .5rem; }
.lyrics-text .stanza + .stanza::before { content: "۞"; display: block; color: var(--gold); opacity: .55; font-size: 1rem; margin: -.9rem 0 .6rem; }
.lyrics .line { opacity: .45; transition: opacity .2s, color .2s; }
.lyrics .line.is-on { opacity: 1; color: var(--accent-strong); font-weight: 600; }
html.dark .lyrics .line.is-on { color: var(--accent); }

/* Video */
.video-frame { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #000; }
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; }

/* Search page */
.search-group { margin-top: 1.75rem; }
.result { display: flex; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.result img { width: 96px; height: 64px; border-radius: 10px; object-fit: cover; flex: none; background: var(--surface-2); }
.result h3 { margin: 0 0 .2rem; font-size: 1.08rem; }
.result p { margin: 0; color: var(--ink-2); font-size: .93rem; }
.result:hover h3 { color: var(--brand); }
mark { background: color-mix(in srgb, var(--gold) 40%, transparent); color: inherit; padding: 0 .1em; border-radius: 3px; }

/* Auth pages */
.auth { min-height: calc(100vh - 62px); display: grid; }
@media (min-width: 960px) { .auth { grid-template-columns: 1fr 1fr; } }
.auth-art { display: none; position: relative; color: #fff; background: radial-gradient(120% 90% at 30% 0%, var(--hero-b), var(--hero-a) 70%); overflow: hidden; }
@media (min-width: 960px) { .auth-art { display: flex; align-items: center; justify-content: center; padding: 3rem; } }
.auth-art.girih::before { background: var(--gold); opacity: .14; }
.auth-art blockquote { max-width: 420px; text-align: center; margin: 0; }
.auth-art .quran { color: #fff; text-align: center; }
.auth-art p { color: rgb(255 255 255 / .85); font-family: var(--font-head); font-size: 1.2rem; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 2rem 16px; }
.auth-box { width: 100%; max-width: 420px; }
.auth-box h1 { font-size: 2rem; }
.divider-or { display: flex; align-items: center; gap: .8rem; color: var(--ink-3); font-size: .85rem; margin: 1.2rem 0; }
.divider-or::before, .divider-or::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.pw-wrap { position: relative; }
.pw-wrap .pw-toggle { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; margin-top: 3rem; background: var(--hero-a); color: rgb(255 255 255 / .78); font-size: .95rem; }
.site-footer.girih::before { background: var(--gold); opacity: .07; }
.site-footer a { color: rgb(255 255 255 / .82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-top { display: grid; gap: 2rem; padding-block: 2.8rem 2rem; }
@media (min-width: 720px) { .footer-top { grid-template-columns: repeat(3, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.footer-brand p { max-width: 38ch; margin: 1rem 0; }
.logo-dark-always { height: 44px; width: auto; }
.footer-col h3 { color: #fff; font: 700 .95rem var(--font-body); margin-bottom: .8rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.social { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.social a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .08); }
.social a:hover { background: var(--gold); color: #1a1206; }
.app-badge { display: inline-flex; gap: .6rem; align-items: center; padding: .5rem 1rem; border-radius: var(--r-sm); border: 1px solid rgb(255 255 255 / .3); color: #fff !important; line-height: 1.2; }
.app-badge small { display: block; font-size: .72rem; opacity: .8; }
.footer-mid { display: grid; gap: 1.5rem; padding-block: 1.5rem; border-top: 1px solid rgb(255 255 255 / .1); }
@media (min-width: 860px) { .footer-mid { grid-template-columns: 1.3fr 1fr; align-items: center; } }
.newsletter h3 { color: #fff; font-size: 1.25rem; margin-bottom: .3rem; }
.newsletter p { margin: 0 0 .8rem; }
.newsletter .input-group input { border-color: transparent; }
.mission { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: var(--r-md); background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); text-decoration: none !important; }
.mission-top { display: flex; justify-content: space-between; color: #fff; }
.mission .progress { background: rgb(255 255 255 / .14); }
.mission small { color: rgb(255 255 255 / .7); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; padding-block: 1.2rem 1.6rem; border-top: 1px solid rgb(255 255 255 / .1); font-size: .87rem; }
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Misc ---------- */
.share-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.share-row a, .share-row button { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); cursor: pointer; }
.share-row a:hover, .share-row button:hover { border-color: var(--brand); color: var(--brand); }
.bm-btn[aria-pressed="true"] { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft); }
html.dark .bm-btn[aria-pressed="true"] { color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 1.25rem 0; }
.filters form { display: flex; gap: .5rem; flex-wrap: wrap; }
.filters select { width: auto; min-width: 160px; }
.stat-line { display: flex; flex-wrap: wrap; gap: 1.25rem; color: rgb(255 255 255 / .8); font-size: .92rem; margin-top: 1rem; }
.stat-line strong { color: #fff; font-family: var(--font-head); font-size: 1.3rem; display: block; }
.error-page { text-align: center; padding: 4rem 1rem; }
.error-page .big { font-family: var(--font-callig); font-size: 5rem; color: var(--gold); line-height: 1; }
.notice-ai { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--ink-3); padding: .8rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); margin-top: 2rem; }
.testimonial { padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.testimonial blockquote { margin: 0 0 1rem; font-family: var(--font-head); font-size: 1.15rem; line-height: 1.6; }
a.card { display: block; text-decoration: none; color: inherit; }
.cause-card .progress { margin: .6rem 0 .3rem; }
.cause-card strong { display: block; line-height: 1.35; }
.quran { font-size: calc(clamp(1.5rem, 1.25rem + 1vw, 2rem) * var(--quran-scale, 1)); }
.text-panel .ayah:last-child, [data-ayah-list] .ayah:last-child { border-bottom: 0; }
.journey-steps > summary { list-style: none; cursor: pointer; margin-bottom: .6rem; }
.journey-steps > summary::-webkit-details-marker { display: none; }
@media (min-width: 1024px) { .journey-steps > summary { display: none; } }

/* ---------- Section sidebars (Stories, Qur'an & Science, World history, Blog) ---------- */
.with-sidebar { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .with-sidebar { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.list-aside { display: grid; gap: 1rem; align-content: start; }
.list-aside .aside-card + .aside-card { margin-top: 0; }
.sb h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin: 0 0 .7rem; }
.sb h3 .ic { color: var(--accent); }
.sb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.sb-list a, .sb-list li > div { display: flex; align-items: center; gap: .7rem; padding: .5rem .55rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.sb-list a:hover { background: var(--surface-2); }
.sb-list a.is-on { background: var(--accent); color: #fff; }
.sb-list a.is-on .sb-ico { background: rgb(255 255 255 / .2); color: #fff; }
.sb-list a.is-on small { color: rgb(255 255 255 / .85); }
.sb-txt { display: grid; min-width: 0; flex: 1; }
.sb-txt strong { font-weight: 600; font-size: .94rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sb-txt small { color: var(--ink-3); font-size: .8rem; margin-top: .1rem; }
.sb-txt small b { color: var(--accent-strong); font-weight: 600; }
html.dark .sb-txt small b { color: var(--accent); }
.sb-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 13%, transparent); }
html.dark .sb-ico { color: color-mix(in srgb, var(--c, var(--brand)) 55%, #fff); background: color-mix(in srgb, var(--c, var(--brand)) 26%, transparent); }
.sb-count { flex: none; font-size: .78rem; color: var(--ink-3); background: var(--surface-2); border-radius: 99px; padding: .1rem .5rem; }
.sb-list a.is-on .sb-count { background: rgb(255 255 255 / .2); color: #fff; }
.sb-rank { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 700 .8rem/1 var(--font-body); color: #fff; background: var(--accent); }
.sb-ranked li:nth-child(1) .sb-rank { background: var(--gold); }
.sb-ranked li:nth-child(n+4) .sb-rank { background: var(--ink-3); }
.sb-thumbs img { flex: none; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: var(--surface-2); }
.sb-accent { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 14%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--gold) 35%, var(--line)); }
.sb-fact { font-family: var(--font-head); font-size: 1.05rem; line-height: 1.6; margin: 0 0 .5rem; }
.sb-map { display: grid; place-items: center; gap: .3rem; aspect-ratio: 16 / 8; border-radius: var(--r-sm); margin-bottom: .7rem; color: #fff; text-decoration: none; font-weight: 600;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--gold) 60%, transparent), transparent 55%), linear-gradient(135deg, var(--brand), var(--accent)); }
.sb-map .ic { filter: drop-shadow(0 2px 6px rgb(0 0 0 / .3)); }
.sb form input[type=email] { margin-top: .2rem; }
.era-grid-wrap { margin: .5rem 0 2rem; }
.era-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.era-card { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.era-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-2, 0 8px 22px rgb(0 0 0 / .08)); }
.era-card .sb-ico { width: 44px; height: 44px; border-radius: 12px; }
.era-card strong { display: block; font-family: var(--font-head); font-size: 1.08rem; line-height: 1.3; }
.era-card small { display: block; color: var(--ink-3); font-size: .86rem; line-height: 1.5; margin-top: .2rem; }
.faq-group { margin-bottom: 2rem; scroll-margin-top: 90px; } .faq-group h2 { font-size: 1.35rem; }

/* ── World history: era colours (timeline + map) ───────────────────── */
:root { --era-ancient: #9a5a26; --era-medieval: #23845a; --era-modern: #2b6fd0; }
html.dark { --era-ancient: #d39a62; --era-medieval: #4fbf8a; --era-modern: #6ea6f2; }
.era-ancient { --ec: var(--era-ancient); } .era-medieval { --ec: var(--era-medieval); } .era-modern { --ec: var(--era-modern); }

/* ── Timeline page ─────────────────────────────────────────────────── */
.tlx-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: 0 0 2rem; }
.tlx-tab { --ec: var(--brand); display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: 600 .9rem/1.2 inherit; font-family: inherit; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tlx-tab span { font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); }
.tlx-tab:hover { border-color: var(--ec); color: var(--ec); }
.tlx-tab.is-on { background: var(--ec); border-color: var(--ec); color: #fff; }
.tlx-tab.is-on span { background: rgb(255 255 255 / .22); color: #fff; }
html.dark .tlx-tab.is-on { color: #0A1220; } html.dark .tlx-tab.is-on span { color: #0A1220; }
.tlx-era { margin-bottom: 3rem; scroll-margin-top: 90px; }
.tlx-era-head { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem; margin-bottom: 1.8rem; background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--ec); border-radius: var(--r-md); }
.tlx-era-head h2 { margin: 0; font-size: 1.25rem; }
.tlx-era-head small { color: var(--ink-3); }
.tlx-era-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; color: var(--ec); background: color-mix(in srgb, var(--ec) 14%, transparent); flex-shrink: 0; }
.tlx { list-style: none; margin: 0; padding: 0 0 0 2.2rem; position: relative; }
.tlx::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 10px; width: 3px; border-radius: 3px; background: linear-gradient(var(--ec), color-mix(in srgb, var(--ec) 15%, transparent)); }
.tlx-item { position: relative; margin-bottom: 1.4rem; }
.tlx-dot { position: absolute; inset-inline-start: calc(-2.2rem + 1px); top: 1.05rem; width: 21px; height: 21px; border-radius: 50%; background: var(--ec); border: 3px solid var(--bg, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ec) 30%, transparent); transition: transform .2s; z-index: 1; }
.tlx-item:hover .tlx-dot { transform: scale(1.25); }
.tlx-card { background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--ec); border-radius: var(--r-md); padding: 1rem 1.15rem; transition: box-shadow .2s, transform .2s; }
.tlx-card:hover { box-shadow: var(--shadow-2, 0 8px 22px rgb(0 0 0 / .08)); }
.tlx-year { display: inline-block; background: var(--ec); color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .03em; padding: .18rem .7rem; border-radius: 999px; margin-bottom: .45rem; white-space: nowrap; }
html.dark .tlx-year { color: #0A1220; }
.tlx-card h3 { margin: 0 0 .35rem; font-size: 1.06rem; line-height: 1.35; }
.tlx-star { color: var(--gold, #c8962e); vertical-align: -1px; }
.tlx-card p { margin: 0; color: var(--ink-2); font-size: .94rem; line-height: 1.65; }
.tlx-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .6rem; }
.tlx-foot:empty { display: none; }
.tlx-cat { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .18rem .6rem; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
html.dark .tlx-cat { color: color-mix(in srgb, var(--c) 55%, #fff); }
.tlx-more { font-size: .88rem; font-weight: 600; }
html.tlx-anim .tlx-item { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s ease; }
html.tlx-anim .tlx-item.is-in { opacity: 1; transform: none; }
@media (min-width: 820px) {
  .tlx { padding: 0; }
  .tlx::before { inset-inline-start: 50%; transform: translateX(-50%); }
  .tlx-item { width: 50%; margin-bottom: 1.6rem; }
  .tlx-item.is-left { padding-inline-end: 2.4rem; }
  .tlx-item.is-right { margin-inline-start: 50%; padding-inline-start: 2.4rem; }
  .tlx-item.is-left .tlx-dot { inset-inline-start: auto; inset-inline-end: -11px; }
  .tlx-item.is-right .tlx-dot { inset-inline-start: -10px; }
  .tlx-item.is-left .tlx-card { border-inline-start-width: 1px; border-inline-end: 4px solid var(--ec); text-align: end; }
  .tlx-item.is-left .tlx-foot { flex-direction: row-reverse; }
  .tlx-item.is-left .tlx-card:hover { transform: translateX(-4px); }
  .tlx-item.is-right .tlx-card:hover { transform: translateX(4px); }
  [dir="rtl"] .tlx-item.is-left .tlx-card:hover { transform: translateX(4px); }
  [dir="rtl"] .tlx-item.is-right .tlx-card:hover { transform: translateX(-4px); }
  /* the two columns overlap vertically a little, like the 1.x layout */
  .tlx-item + .tlx-item { margin-top: -2.2rem; }
}

/* ── Interactive map page ──────────────────────────────────────────── */
.hmap { display: flex; flex-direction: column-reverse; gap: 1.1rem; }
.hmap-side { margin: 0; max-height: 340px; overflow-y: auto; }
.hmap-eras { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem; }
.hmap-era { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: .93rem; text-align: start; cursor: pointer; }
.hmap-era small { color: var(--ink-3); font-size: .8rem; }
.hmap-era b { margin-inline-start: auto; font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.hmap-era:hover { background: var(--surface-2); }
.hmap-era.is-on { border-color: var(--line); background: var(--surface-2); font-weight: 600; }
.hmap-sw { width: 13px; height: 13px; border-radius: 50%; background: var(--c, var(--ec)); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--ec)) 22%, transparent); }
.hmap-h { margin: 0 0 .4rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.hmap-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.hmap-list button { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; padding: .5rem .6rem; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .9rem; text-align: start; cursor: pointer; }
.hmap-list button:hover, .hmap-list button:focus-visible { background: var(--surface-2); }
.hmap-tag { font-size: .7rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; color: var(--ec); background: color-mix(in srgb, var(--ec) 14%, transparent); white-space: nowrap; }
.hmap-stage { position: relative; height: 62vh; min-height: 340px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); }
.hmap-map { position: absolute; inset: 0; }
.hmap-reset { position: absolute; top: .8rem; inset-inline-end: .8rem; z-index: 500; display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .8rem; border: 0; border-radius: 8px; background: #fff; color: #333; font: 600 .82rem/1 inherit; font-family: inherit; box-shadow: 0 2px 8px rgb(0 0 0 / .18); cursor: pointer; }
.hmap-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; padding: 2rem; text-align: center; color: var(--ink-3); }
.hmap-pop strong { display: block; font-size: 1rem; }
.hmap-pop small { color: #666; }
.hmap-pop p { margin: .45rem 0; font-size: .86rem; line-height: 1.5; color: #333; }
.hmap-pop a { font-weight: 600; font-size: .86rem; }
@media (min-width: 900px) {
  .hmap { display: grid; grid-template-columns: 290px 1fr; height: 66vh; min-height: 480px; }
  .hmap-side { max-height: none; height: 100%; }
  .hmap-stage { height: 100%; min-height: 0; }
}

/* About: founder + video */
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.founder { display: grid; gap: 1.2rem; align-items: start; padding: 1.3rem; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--gold); border-radius: var(--r-md); }
.founder-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface-2); box-shadow: 0 0 0 2px var(--gold); }
.founder .kicker { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-strong); font-weight: 700; }
html.dark .founder .kicker { color: var(--accent); }
.founder blockquote { margin: .5rem 0 .8rem; padding: 0; border: 0; font-family: var(--font-head); font-size: 1.12rem; line-height: 1.6; color: var(--ink); font-style: italic; }
.founder-sig { margin: 0; }
@media (min-width: 600px) { .founder { grid-template-columns: 110px 1fr; } }

/* Managed sidebar extras */
.sb-ar { font-family: var(--font-ar, 'Amiri', serif); font-size: 1.25rem; line-height: 1.9; margin: 0 0 .4rem; color: var(--ink); }
.sb-img { width: 100%; border-radius: 10px; margin-bottom: .6rem; aspect-ratio: 16 / 9; object-fit: cover; }
.sb-body { font-size: .92rem; color: var(--ink-2); }
.sb-body p { margin: 0 0 .5rem; }
.sb-cause { color: var(--ink); text-decoration: none; }
.sb-cause:hover { color: var(--brand); }
.sb-donate .progress { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.sb-donate .progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: inherit; }
.sb-socials { display: flex; flex-wrap: wrap; gap: .4rem; }
.sb-soc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.sb-soc:hover { color: var(--brand); border-color: var(--brand); }
.app-badge-block { display: flex; width: 100%; }
.app-badge em { font-style: normal; font-size: .75em; opacity: .7; }
.sb-brand { background: linear-gradient(140deg, var(--hero-a, var(--brand)), var(--hero-b, var(--brand-strong))); color: #fff; border-color: transparent; }
.sb-brand h3, .sb-brand .sb-body, .sb-brand .sb-body * { color: #fff; }
.aside-card .app-badge { text-decoration: none; background: #10161f; border-color: #10161f; justify-content: center; padding: .65rem 1rem; }
.aside-card .app-badge small { display: block; font-size: .72rem; opacity: .8; }
html.dark .aside-card .app-badge { background: #fff; border-color: #fff; color: #10161f !important; }
html.in-app .sb-app { display: none !important; }

/* prayer location picker */
.prayer-card { position: relative; overflow: visible !important; z-index: 2; }
.prayer-pop { position: fixed; z-index: 90; padding: .9rem; background: var(--surface); border: 1px solid var(--line-strong, var(--line)); border-radius: var(--r-md); box-shadow: 0 14px 40px rgb(0 0 0 / .18); }
.prayer-pop .input-group { display: flex; gap: .35rem; }
.prayer-pop .input { min-width: 0; flex: 1; }
.prayer-pop label { display: block; margin-bottom: .25rem; color: var(--ink-2); }