/* Typography — Montserrat for Latin, Aref Ruqaa for Arabic display.
   Larger type scale than typical reading layouts because the brand
   aesthetic is cinematic.

   AOA-WEB BUILD (notes-runtime copy):
   The original prose.css redefines global html / body / .bg-master /
   .prose padding rules that broke the academy-web lesson player
   layout (rem base scaling, full-bleed background, 5rem/8rem padding
   stacking frames on top of each other). Those global rules are
   STRIPPED here — academy-web owns html/body/background, and
   .lesson-notes in [lesson].astro owns the wrapper padding.

   Everything below this block is the converter's actual prose styling
   for headings, paragraphs, blockquotes, etc. — kept verbatim so a
   re-sync from the converter only needs to remove the top globals
   block again. */

/* Long words, URLs, and tokens wrap instead of forcing horizontal scroll. */
.prose { overflow-wrap: break-word; }
.prose :where(h1, h2, h3, h4, p, li, td, th, a, blockquote, code) {
  overflow-wrap: break-word;
}

/* Reading column — width and centring removed (the academy-web
   .lesson-notes wrapper handles framing); padding removed so we don't
   stack 5rem of empty space on top of the video. */
.prose {
  position: relative;
  z-index: 1;
}

/* Headings — Montserrat heavy weights, tight tracking, optional gold accent.
   Justified per Ali's directive — for single-line headings justify behaves
   like left-align (the last/only line is start-aligned by default), so this
   only kicks in on wrapped multi-line headings, where it spreads them edge
   to edge. The .prose :lang(ar) override below keeps Arabic headings RTL-right. */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-display);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--fg);
  font-weight: 800;
  text-align: justify;
}

.prose h1 {
  font-size: 3.25rem;
  margin: 0 0 1rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.prose h1 em,
.prose h1 i {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
  text-shadow: 0 0 30px var(--accent-glow);
}

.prose h2 {
  font-size: 2rem;
  margin: 3.5em 0 0.7em;
  font-weight: 700;
  letter-spacing: -0.025em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--rule);
}

.prose h3 {
  font-size: 1.35rem;
  margin: 2.2em 0 0.5em;
  font-weight: 700;
}

.prose h4 {
  font-size: 0.85rem;
  margin: 1.5em 0 0.4em;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* "Kicker" — over-line label used heavily in AOA templates */
.kicker {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.6em;
}

.prose p {
  margin: 0 0 0.9em;
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;       /* spread spacing only — no inter-character gaps */
  hyphens: auto;                  /* page is lang="ru" → soft-hyphenate so justify gaps stay reasonable */
  -webkit-hyphens: auto;
}
.prose p + p { margin-top: 0.9em; }
/* List items: justify the wrapped lines but keep the last line natural. */
.prose li {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.prose strong { font-weight: 700; color: var(--fg); }
.prose em     { font-style: italic; }

.prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color 0.15s, color 0.15s;
}
.prose a:hover {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3em 0;
}

/* Lists */
.prose ul,
.prose ol {
  margin: 0 0 0.9em;
  padding-left: 1.5em;
}
.prose ul li::marker { color: var(--accent); }
.prose ol li::marker { color: var(--accent); font-weight: 700; }
.prose li { margin: 0.3em 0; }
.prose li > p { margin: 0.25em 0; }

/* Task lists (- [ ] / - [x]) */
.prose li.task-list-item {
  list-style: none;
  margin-left: -1.5em;
  padding-left: 0;
}
.prose li.task-list-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-right: 0.6em;
  accent-color: var(--accent);
  vertical-align: -2px;
}
.prose li.task-list-item input[type="checkbox"]:not([disabled]) { cursor: pointer; }
.prose li.task-list-item.is-checked { color: var(--fg-muted); text-decoration: line-through; text-decoration-color: var(--accent-dim); }

/* Per-language typography.
   All Arabic now renders in Tajawal Light (300), RTL, right-aligned
   (Ali's global directive). The three tokens still exist for future
   differentiation but currently all resolve to Tajawal→Cairo. */
.prose :lang(ar),
.prose .ar {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  font-size: 1.45em;
  line-height: 1.9;
  font-weight: 300;
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-dim);
  font-feature-settings: 'liga' 1, 'calt' 1;
}
.prose .ar-ui {
  font-family: var(--font-ar-ui);
  font-weight: 300;
}
.prose .ar-display {
  font-family: var(--font-ar-display);
  font-weight: 300;
}

.prose :lang(ru),
.prose .ru {
  letter-spacing: -0.005em;
}
.prose :lang(en),
.prose .en {
  letter-spacing: -0.01em;
}

/* Images */
.prose img,
.prose figure img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.75em auto;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-image);
}
.prose figure { margin: 1.75em 0; }
.prose figcaption {
  font-size: 0.85em;
  color: var(--fg-muted);
  text-align: center;
  margin-top: 0.5em;
  font-style: italic;
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}