@import url("fonts.css");

/* ==========================================================================
   Design tokens — same Islamic scholarly palette as the main deepilm admin
   UI (deep green + sage + antique brass + ivory/parchment), redeclared here
   so the exported static site has zero dependency on deepilm's own static
   pipeline once published. `data-mode` (light/dark/sepia) swaps the surface
   tokens only, so component rules never need to be duplicated per mode.

   Typography is language-specific throughout (Urdu/Arabic/English each get
   their own font stack, size, line-height, and reading-column width) rather
   than one setting applied to everything — see the --reader-* tokens below.
   All three reading fonts are self-hosted locally (see fonts.css); no CDN
   font dependency is used, since properly licensed local files already
   cover every language here.
   ========================================================================== */
:root {
  --color-primary-900: #173F35; --color-primary-700: #286552; --color-primary-600: #347A63;
  --color-sage-300: #AFC6B5; --color-sage-100: #E8F0EA; --color-sage-50: #F4F8F5;
  --color-brass-700: #826B32; --color-brass-500: #B19752; --color-brass-200: #E5D8B2;
  --color-ivory: #F7F3E8; --color-parchment: #EFE7D4; --color-paper: #FCFAF4;
  --color-surface: #FFFFFF; --color-surface-muted: #F3F0E7;
  --color-text-primary: #24332E; --color-text-secondary: #56645E; --color-text-muted: #7B8580;
  --color-border: #D8DED7; --color-border-warm: #DDD3BD;
  --color-link: var(--color-primary-700);

  /* -- interface fonts (short UI text, nav, labels) -------------------- */
  --font-ui-latin: "Noto Sans Local", "Noto Sans", system-ui, sans-serif;
  --font-ui-arabic: "Noto Kufi Arabic Local", "Noto Sans Arabic Local", sans-serif;

  /* -- long-form reading fonts, one per language ------------------------
     Urdu: Nastaliq is the only correct choice for comfortable long-form
     Urdu reading — a Naskh/Arabic font must never be substituted as the
     primary Urdu body font, it reads as visibly "foreign" to Urdu readers.
     Arabic: Naskh (not Kufi/sans) for the same long-form-comfort reason.
     Local self-hosted files come first in every stack; the bare Google
     Fonts family names and "Mehr Nastaliq Web"/"Scheherazade New" are kept
     as harmless named fallbacks (they simply won't match unless a reader's
     own system happens to have them installed — no CDN is loaded for them). */
  --font-reading-urdu: "Mehr Nastaliq Web Local", "Mehr Nastaliq Web", "Noto Nastaliq Urdu Local", "Noto Nastaliq Urdu", serif;
  --font-reading-arabic: "Amiri", "Noto Naskh Arabic Local", "Noto Naskh Arabic", "Scheherazade New", serif;
  --font-reading-latin: "Source Serif 4", "Literata", Georgia, "Times New Roman", serif;

  /* -- reader design tokens: one set per language, not one global value - */
  --reader-scale: 1; /* adjusted by the A-/A+/reset controls, 0.85-1.4 */

  --reader-width-ur: 43rem;
  --reader-width-ar: 46rem;
  --reader-width-en: 42rem;
  --content-max-width: 48rem; /* generic prose blocks outside the reader (book description, etc.) */

  --reader-size-ur: clamp(1.32rem, 1.18rem + 0.42vw, 1.62rem);
  --reader-size-ar: clamp(1.3rem, 1.1rem + 0.5vw, 1.65rem);
  --reader-size-en: clamp(1.05rem, 0.98rem + 0.25vw, 1.22rem);

  --reader-line-height-ur: 1.95;
  --reader-line-height-ar: 1.95;
  --reader-line-height-en: 1.75;

  --reader-paragraph-gap: 1.25em;
  --reader-title-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.6rem);

  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem;
  --radius: 6px;
  --shadow-card: 0 1px 3px rgba(23, 63, 53, 0.08), 0 1px 2px rgba(23, 63, 53, 0.06);
  --touch-target: 44px;
}

/* -- reading modes ----------------------------------------------------
   Light/sepia are explicit opt-in via [data-mode]; with neither set, the
   OS prefers-color-scheme is honoured automatically (see the media query
   below) — a saved manual choice always overrides the OS preference,
   since it sets [data-mode] explicitly one way or the other. Base.html's
   inline pre-paint script sets [data-mode] from localStorage before first
   render so there is no flash of the wrong theme. */
:root, :root[data-mode="light"] {
  --bg: var(--color-paper); --surface: var(--color-surface); --surface-muted: var(--color-surface-muted);
  --text: var(--color-text-primary); --text-secondary: var(--color-text-secondary);
  --border: var(--color-border);
}
:root[data-mode="sepia"] {
  --bg: #e9dfc8; --surface: #f4ecd8; --surface-muted: #ecdfc0;
  --text: #352f25; --text-secondary: #706654; --border: #cfc1a4;
  --color-link: #6b4a1f;
}
:root[data-mode="dark"] {
  --bg: #171717; --surface: #202020; --surface-muted: #262626;
  --text: #e8e4dc; --text-secondary: #b9b3a8; --border: #3b3b3b;
  --color-link: #8fc6a9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-mode="sepia"]) {
    --bg: #171717; --surface: #202020; --surface-muted: #262626;
    --text: #e8e4dc; --text-secondary: #b9b3a8; --border: #3b3b3b; --color-link: #8fc6a9;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui-latin); line-height: 1.5;
}
[lang="ar"] { font-family: var(--font-ui-arabic); }
[lang="ur"] { font-family: var(--font-ui-arabic); }
img { max-width: 100%; height: auto; }
a { color: var(--color-link); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 0; top: -3rem; background: var(--color-primary-900); color: #fff;
  padding: var(--space-2) var(--space-4); z-index: 100; transition: top .15s;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--color-brass-500); outline-offset: 2px; }

/* -- header/footer --------------------------------------------------- */
.site-header { background: var(--color-primary-900); color: #fff; }
.site-header__inner {
  max-width: 78rem; margin: 0 auto; padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
}
.site-brand { color: #fff; font-weight: 700; text-decoration: none; font-size: 1.15rem; }
.site-nav { display: flex; gap: var(--space-4); margin-inline-start: auto; flex-wrap: wrap; }
.site-nav a { color: var(--color-sage-100); text-decoration: none; }
.site-nav a:hover { color: #fff; text-decoration: underline; }
.theme-toggle, .nav-toggle {
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: #fff;
  border-radius: var(--radius); padding: .25rem .6rem; cursor: pointer;
  min-height: var(--touch-target); min-width: var(--touch-target);
  display: inline-flex; align-items: center; justify-content: center;
}
.site-footer { background: var(--color-surface-muted); border-top: 1px solid var(--border); margin-top: var(--space-8); }
.site-footer__inner {
  max-width: 78rem; margin: 0 auto; padding: var(--space-5); display: flex;
  justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); color: var(--text-secondary);
  padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
}
.site-footer__inner nav a { margin-inline-end: var(--space-4); }

main { max-width: 78rem; margin: 0 auto; padding: var(--space-6) clamp(1rem, 4vw, var(--space-5)); }

/* -- hero / home ------------------------------------------------------ */
.hero { text-align: center; padding: var(--space-8) var(--space-4); }
.hero h1 { font-size: 2.2rem; margin-bottom: var(--space-3); }
.hero__lede { color: var(--text-secondary); max-width: var(--content-max-width); margin: 0 auto var(--space-5); }
.hero__stats { list-style: none; display: flex; justify-content: center; gap: var(--space-6); padding: 0; margin: var(--space-5) 0 0; flex-wrap: wrap; }
.hero__stats strong { display: block; font-size: 1.4rem; color: var(--color-primary-700); }
.search-box { display: flex; gap: var(--space-2); max-width: 32rem; margin: 0 auto; }
.search-box input { flex: 1; min-width: 0; padding: .6rem .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); min-height: var(--touch-target); }
.search-box button { padding: .6rem 1.2rem; border-radius: var(--radius); border: 0; background: var(--color-primary-700); color: #fff; cursor: pointer; min-height: var(--touch-target); }
.search-box--full { max-width: none; margin: var(--space-4) 0; }

.browse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.browse-grid h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-brass-700); }

/* -- book grid / cards ------------------------------------------------- */
.book-section { margin: var(--space-8) 0; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-5); }
.book-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4); box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: .35rem;
}
.book-card__cover { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius); margin-bottom: var(--space-2); }
.book-card__title a { text-decoration: none; color: var(--text); }
.book-card__original, .book-card__author { color: var(--text-secondary); margin: 0; font-size: .92rem; }
.book-card__desc { color: var(--text-secondary); font-size: .9rem; }
.badge { display: inline-block; background: var(--color-sage-100); color: var(--color-primary-900); border-radius: 999px; padding: .1rem .6rem; font-size: .78rem; margin-inline-end: .3rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .5rem 1rem; min-height: var(--touch-target); border-radius: var(--radius); border: 1px solid var(--color-primary-700); color: var(--color-primary-700); text-decoration: none; }
.btn--primary { background: var(--color-primary-700); color: #fff; }
.btn--small { font-size: .85rem; padding: .3rem .7rem; min-height: auto; align-self: flex-start; }

.link-list { list-style: none; padding: 0; margin: 0; }
.link-list li { padding: .3rem 0; }
.link-list--inline { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.link-list--cards li a { display: flex; flex-direction: column; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text); }
.link-list--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-4); }
.count { color: var(--text-muted, var(--text-secondary)); font-size: .85rem; }

/* -- breadcrumbs -------------------------------------------------------- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: .9rem; }
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-inline-start: .35rem; }

/* -- book detail --------------------------------------------------------- */
.book-detail__header { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.book-detail__cover { width: 12rem; border-radius: var(--radius); box-shadow: var(--shadow-card); }
.book-detail__meta { list-style: none; padding: 0; color: var(--text-secondary); }
.book-detail__meta li { padding: .15rem 0; }
.book-detail__actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
.book-detail__description { margin: var(--space-6) 0; max-width: var(--content-max-width); }
.citation-plain { font-style: italic; background: var(--surface-muted); padding: var(--space-3); border-inline-start: 3px solid var(--color-brass-500); border-radius: var(--radius); }

/* -- table of contents --------------------------------------------------- */
.toc-tree { list-style: none; padding-inline-start: var(--space-4); margin: 0; }
.toc-tree > li { margin: .35rem 0; }
.toc-tree__label { font-size: .75rem; text-transform: uppercase; color: var(--color-brass-700); margin-inline-end: .4rem; }
.toc-tree a { display: inline-block; padding: .3rem .1rem; min-height: var(--touch-target); line-height: 1.3; }
.toc-tree a[aria-current="page"] {
  font-weight: 700; color: var(--color-primary-700);
  border-inline-start: 3px solid var(--color-brass-500); padding-inline-start: .5rem;
  margin-inline-start: -.5rem;
}
/* Chapter titles in the TOC use the book's own reading font — the "CHAPTER"/
   "SECTION" interface prefix (.toc-tree__label) stays on the Latin UI font
   regardless, since it's always literal English text, never book content. */
.reader-toc[lang="ur"] .toc-tree__title { font-family: var(--font-reading-urdu); line-height: 1.8; }
.reader-toc[lang="ar"] .toc-tree__title { font-family: var(--font-reading-arabic); line-height: 1.8; }

/* -- reader ---------------------------------------------------------------
   `.reader-content[lang="ur"|"ar"|"en"]` carries the language-specific
   font/size/line-height/width — never one global reading setting for
   every language. Font size is applied only to the reading text itself
   (via --reader-scale, changed by the A-/A+/reset controls); navigation,
   buttons, and the rest of the document never scale.                    */
.reader-layout { display: grid; grid-template-columns: 16rem 1fr; gap: var(--space-6); align-items: start; }
.reader-toc {
  position: sticky; top: var(--space-4); align-self: start; max-height: 85vh; overflow-y: auto;
  border-inline-end: 1px solid var(--border); padding-inline-end: var(--space-4);
}
.reader-toc summary {
  cursor: pointer; font-weight: 700; padding: .5rem .25rem; list-style: none;
  color: var(--color-brass-700); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
}
.reader-toc summary::-webkit-details-marker { display: none; }
.reader-toc summary::before { content: "▸ "; }
.reader-toc[open] summary::before { content: "▾ "; }

.reader-content {
  width: min(100%, var(--reader-content-width, var(--reader-width-en)));
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.25rem);
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}
.reader-content[lang="en"] { --reader-content-width: var(--reader-width-en); font-family: var(--font-reading-latin); }
.reader-content[lang="ar"] { --reader-content-width: var(--reader-width-ar); font-family: var(--font-reading-arabic); }
.reader-content[lang="ur"] { --reader-content-width: var(--reader-width-ur); font-family: var(--font-reading-urdu); }

.reader-title {
  font-size: var(--reader-title-size); line-height: 1.45; margin: 0 0 var(--space-3);
  scroll-margin-top: 6rem;
}
.reader-content h2, .reader-content h3, .reader-content h4 {
  scroll-margin-top: 6rem; line-height: 1.4; break-after: avoid;
}
.reader-content__original { color: var(--text-secondary); margin: 0 0 var(--space-5); }

/* Urdu heading hierarchy — larger, more generous line-height than the
   shared defaults above, since Nastaliq's diagonal strokes need more room
   at heading sizes too, not just body text. h2/h3 aren't emitted by the
   current content pipeline (no heading-level blocks exist within a
   chapter body yet) — declared anyway as forward-compatible styling for
   whenever that's wired up. */
.reader-content[lang="ur"] h1, .reader-title[lang="ur"] {
  font-family: var(--font-reading-urdu);
  font-size: clamp(1.85rem, 1.48rem + 1vw, 2.65rem);
  line-height: 1.65;
  margin-block: 0 1.1em;
  text-align: right;
}
.reader-content[lang="ur"] h2 {
  font-family: var(--font-reading-urdu);
  font-size: clamp(1.5rem, 1.35rem + 0.45vw, 1.9rem);
  line-height: 1.7;
  margin-block: 1.8em 0.7em;
  text-align: right;
}
.reader-content[lang="ur"] h3 {
  font-family: var(--font-reading-urdu);
  font-size: clamp(1.3rem, 1.2rem + 0.3vw, 1.6rem);
  line-height: 1.75;
  margin-block: 1.5em 0.6em;
  text-align: right;
}

.reader-content p.reader-para {
  font-size: calc(var(--reader-size-en) * var(--reader-scale)); line-height: var(--reader-line-height-en);
  margin-block: 0 var(--reader-paragraph-gap);
  text-align: start;
  text-wrap: pretty;
}
.reader-content[lang="ar"] p.reader-para {
  font-size: calc(var(--reader-size-ar) * var(--reader-scale)); line-height: var(--reader-line-height-ar);
}
.reader-content[lang="ur"] p.reader-para {
  font-size: calc(var(--reader-size-ur) * var(--reader-scale)); line-height: var(--reader-line-height-ur);
}
/* Never justify RTL long-form text (uneven gaps between joined letterforms
   look broken in Nastaliq/Naskh); never letter-space Urdu or Arabic. */
.reader-content[lang="ar"] p.reader-para,
.reader-content[lang="ur"] p.reader-para { text-align: right; letter-spacing: normal; }

/* -- lists / blockquotes / tables / mixed-direction inline content -------- */
.reader-content ul, .reader-content ol {
  padding-inline-start: 1.5em; margin-block: 0 var(--reader-paragraph-gap);
}
.reader-content li { margin-block-end: .5em; }
.reader-content li > ul, .reader-content li > ol { margin-block-start: .5em; }

.reader-content blockquote {
  margin-block: 1.5em; padding-block: .75em; padding-inline: 1.25em;
  border-inline-start: .25rem solid var(--color-brass-500);
  background: var(--surface-muted); border-radius: 0 var(--radius) var(--radius) 0;
  font-style: normal;
}
.reader-content[dir="rtl"] blockquote { border-radius: var(--radius) 0 0 var(--radius); }
.reader-content blockquote.quran-verse,
.reader-content blockquote.hadith-text { border-inline-start-color: var(--color-primary-700); }

.reader-content table {
  display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-collapse: collapse; width: 100%; margin-block: var(--reader-paragraph-gap);
  max-width: 100%;
}
.reader-content th, .reader-content td { border: 1px solid var(--border); padding: .5em .75em; text-align: start; }

.reader-content aside.footnote {
  font-size: .9em; color: var(--text-secondary); border-top: 1px solid var(--border);
  margin-block-start: var(--space-6); padding-block-start: var(--space-3);
}

/* Mixed-language inline spans (an Arabic quotation inside an Urdu
   paragraph, an English term inside Arabic, etc.) isolate their own
   direction without flipping surrounding text — never force every child
   of a paragraph to one direction. */
.reader-content [dir="ltr"], .reader-content [dir="rtl"] { unicode-bidi: isolate; }

/* Arabic quotations (Qur'an/hadith/duas) marked up inside an Urdu (or any
   other) chapter always get the Naskh reading font, never the surrounding
   paragraph's font — matched either via an explicit .arabic-inline class
   or plain lang="ar" wherever the source/generator has already marked it.
   No automatic Arabic-vs-Urdu detection is done on unmarked text: Urdu and
   Arabic share the same script, so a heuristic here could not reliably
   tell "Arabic quotation" apart from "Urdu sentence" and risks mislabeling
   real Urdu text as Arabic. */
.reader-content .arabic-inline,
.reader-content .arabic-block,
.reader-content :lang(ar) {
  font-family: "Noto Naskh Arabic Local", "Amiri", "Noto Naskh Arabic", serif;
  line-height: 1.9;
  unicode-bidi: isolate;
}

/* The reader toolbar's labels (Light/Sepia/Dark, Print, Page numbers, ...)
   are always plain English interface text, never book content — without
   this, they'd inherit Noto Nastaliq Urdu from the surrounding
   .reader-content[lang="ur"] article via normal font-family inheritance. */
.reader-controls, .reader-controls button, .reader-controls select {
  font-family: var(--font-ui-latin);
}

.reader-controls {
  display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center;
  margin-bottom: var(--space-5); position: sticky; top: 0; background: var(--bg);
  padding: var(--space-2) 0; z-index: 5; border-bottom: 1px solid var(--border);
}
.reader-controls__group { display: inline-flex; gap: .25rem; }
.reader-controls button {
  border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius);
  padding: .4rem .8rem; cursor: pointer; color: var(--text);
  min-height: var(--touch-target); min-width: var(--touch-target);
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  font-size: .9rem;
}
.reader-controls button[aria-pressed="true"], .reader-controls button[aria-current="true"] {
  border-color: var(--color-primary-700); color: var(--color-primary-700); font-weight: 700;
}

.page-marker { display: inline-block; font-size: .78rem; color: var(--color-brass-700); background: var(--color-brass-200); border-radius: 999px; padding: .05rem .6rem; margin: var(--space-3) 0 .4rem; }
body.hide-page-markers .page-marker { display: none; }
.reader-para__anchor { text-decoration: none; opacity: 0; margin-inline-start: .35rem; font-size: .8em; }
.reader-para:hover .reader-para__anchor, .reader-para__anchor:focus { opacity: .6; }

.chapter-nav {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.chapter-nav a {
  display: inline-flex; align-items: center; gap: .4em; min-height: var(--touch-target);
  padding: .5rem .4rem; text-decoration: none; max-width: 32ch;
}
.chapter-nav__prev, .chapter-nav__next { overflow-wrap: break-word; }
.reader-content[dir="ltr"] .chapter-nav__prev::before { content: "←"; }
.reader-content[dir="ltr"] .chapter-nav__next::after { content: "→"; }
.reader-content[dir="rtl"] .chapter-nav__prev::before { content: "→"; }
.reader-content[dir="rtl"] .chapter-nav__next::after { content: "←"; }

/* -- search --------------------------------------------------------------- */
.search-results { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.search-result { border-bottom: 1px solid var(--border); padding-bottom: var(--space-3); }
.search-result h3 { margin: 0 0 .2rem; }
.search-result .breadcrumb-trail { color: var(--text-secondary); font-size: .82rem; }
.search-filters { display: flex; gap: var(--space-4); margin: var(--space-3) 0; }

/* -- pagination ------------------------------------------------------------ */
.pagination { display: flex; justify-content: space-between; margin-top: var(--space-6); }

/* -- continue reading ------------------------------------------------------- */
.continue-reading[hidden] { display: none; }

/* -- responsive -------------------------------------------------------------- */
@media (max-width: 60rem) {
  .reader-layout { grid-template-columns: 1fr; }
  .reader-toc { position: static; max-height: none; border-inline-end: 0; border-bottom: 1px solid var(--border); padding-bottom: var(--space-4); }
  .site-nav { display: none; }
  .site-header.nav-open .site-nav { display: flex; flex-direction: column; width: 100%; }
}

/* Small phones: the sticky toolbar's default gap/padding is comfortable at
   tablet width but starts crowding the page below ~600px, and staying
   sticky there means it can end up permanently covering the top lines of
   text as the reader scrolls. Font controls stay first/visible; everything
   just wraps more tightly and stops being sticky. */
@media (max-width: 37.5rem) {
  .reader-controls { gap: 0.35rem; position: static; }
  .reader-controls button { padding-inline: 0.55rem; min-height: 44px; }

  .reader-content[lang="ur"] { width: 100%; padding-inline: 1rem; }
  /* Same specificity as the base rule (site_builder.css order puts this
     after it), so this correctly wins only while the media query is
     active — overriding the *token* rather than a bare font-size, since
     .reader-para's font-size is computed from --reader-size-ur and a
     plain font-size override here would lose to that more specific rule. */
  .reader-content[lang="ur"] p.reader-para {
    font-size: calc(clamp(1.24rem, 1.15rem + 0.45vw, 1.42rem) * var(--reader-scale));
    line-height: 1.98;
    margin-block-end: 1em;
  }
}

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

/* -- print ---------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .reader-toc, .reader-controls, .chapter-nav,
  .skip-link, .theme-toggle, .nav-toggle, .continue-reading { display: none !important; }
  body { background: #fff; color: #000; }
  .reader-content { max-width: none; width: auto; padding: 0; }
  .reader-title, .reader-content h2, .reader-content h3, .reader-content h4 { break-after: avoid; }
  .reader-content p, .reader-content blockquote, .reader-content li { orphans: 3; widows: 3; }
  a[href]::after { content: ""; }
}