/* ==========================================================================
   Component: prose — typography for rich-text HTML from the admin editor
   --------------------------------------------------------------------------
   Wrap article / legal-page bodies in .prose. Headings in the display face
   with a short sky rule before each h2, comfortable Arabic line length and
   leading, sky links, sky-bulleted lists, a quote with a sky bar, rounded
   images, simple tables. Only styles direct content — no layout.
   ========================================================================== */

.prose { max-width: 70ch; color: var(--ink); font-size: var(--fs-lg); line-height: 1.95; }
.prose > * + * { margin-top: 1.1em; }

.prose h2,
.prose h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.35; scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.prose h2 { margin-top: 2em; font-size: var(--fs-2xl); }
.prose h2::before { content: ""; display: block; width: 32px; height: 3px; margin-bottom: var(--space-3); border-radius: 2px; background: var(--second); }
.prose h3 { margin-top: 1.6em; font-size: var(--fs-xl); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }

.prose a { color: var(--link); font-weight: 600; text-decoration: underline; text-decoration-color: var(--second-tint-strong); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:hover { text-decoration-color: var(--second); }
.prose strong { font-weight: 700; }

.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: 0.4em; }
.prose ul li::marker { color: var(--second); }
.prose ol li::marker { color: var(--second-text); font-weight: 700; }

.prose blockquote {
    margin-inline: 0;
    padding: var(--space-4) var(--space-6);
    border-inline-start: 4px solid var(--second);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: var(--second-tint);
    color: var(--ink-soft);
}
[dir="rtl"] .prose blockquote { border-radius: var(--r-md) 0 0 var(--r-md); }

.prose img { height: auto; border-radius: var(--r-lg); }
.prose figure { margin-inline: 0; }
.prose figcaption { margin-top: var(--space-2); color: var(--ink-faint); font-size: var(--fs-sm); text-align: center; }

.prose hr { height: 0; border: 0; border-top: 1px dashed var(--line-strong); }

.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.prose th, .prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: start; }
.prose th { color: var(--ink-soft); font-weight: 700; }

@media (max-width: 559.98px) {
    .prose { font-size: var(--fs-base); line-height: 1.9; }
}