/**
 * Typography.
 *
 * Manrope for Latin scripts, Cairo for Arabic — LOCKED.
 *
 * SELF-HOSTING THE FONTS
 * Google Fonts is not used on this project — approved decision. Both families
 * will be self-hosted from assets/fonts/. Until the woff2 files are added the
 * fallback stacks in variables.css carry the design.
 *
 * To activate, add blocks of this shape. Nothing else in the theme needs to
 * change, because everything resolves through --font-latin / --font-arabic:
 *
 *   @font-face {
 *       font-family: "Manrope";
 *       src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
 *       font-weight: 400 800;
 *       font-display: swap;
 *       font-style: normal;
 *   }
 *
 *   @font-face {
 *       font-family: "Cairo";
 *       src: url("../fonts/cairo-variable.woff2") format("woff2-variations");
 *       font-weight: 300 700;
 *       font-display: swap;
 *       font-style: normal;
 *   }
 */

/**
 * Applies the Arabic font switch declared in variables.css.
 *
 * Required because body's font-family resolves --font-base once; without a
 * fresh declaration at the RTL boundary, descendants inherit the computed
 * Latin stack and Cairo never loads.
 */
[dir="rtl"],
:lang(ar) {
	font-family: var(--font-base);
}

/* ---------------------------------------------------------------
 * Headings
 *
 * Sizes are visual only. Heading level is chosen for document structure
 * (WCAG 2.2 §1.3.1); use the .h1–.h6 utilities to restyle without breaking
 * the outline.
 * --------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-text);
	font-weight: var(--weight-bold);
	line-height: var(--leading-tight);
	text-wrap: balance;
}

h1,
.h1 {
	font-size: var(--text-4xl);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-tight);
}

h2,
.h2 {
	font-size: var(--text-3xl);
	letter-spacing: var(--tracking-tight);
}

h3,
.h3 {
	font-size: var(--text-2xl);
}

h4,
.h4 {
	font-size: var(--text-xl);
}

h5,
.h5 {
	font-size: var(--text-lg);
}

h6,
.h6 {
	font-size: var(--text-base);
	font-weight: var(--weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------------------------------------------------------------
 * Body copy
 * --------------------------------------------------------------- */
p {
	text-wrap: pretty;
}

.lead {
	color: var(--color-text-light);
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
}

small,
.text-small {
	font-size: var(--text-sm);
}

strong,
b {
	font-weight: var(--weight-bold);
}

em,
i {
	font-style: italic;
}

/*
 * Cairo has no true italic. Faux-italic Arabic is illegible, so it is
 * neutralised and emphasis is carried by weight instead.
 */
:lang(ar) em,
:lang(ar) i,
[dir="rtl"] em,
[dir="rtl"] i {
	font-style: normal;
	font-weight: var(--weight-semibold);
}

/* ---------------------------------------------------------------
 * Lists
 * --------------------------------------------------------------- */
ul,
ol {
	padding-inline-start: var(--space-6);
}

li + li {
	margin-block-start: var(--space-2);
}

/* ---------------------------------------------------------------
 * Quotes, code, and figures
 * --------------------------------------------------------------- */
blockquote {
	padding-inline-start: var(--space-5);
	border-inline-start: 3px solid var(--color-primary);
	color: var(--color-text-light);
	font-size: var(--text-lg);
	font-style: italic;
}

:lang(ar) blockquote,
[dir="rtl"] blockquote {
	font-style: normal;
}

cite {
	color: var(--color-text-light);
	font-size: var(--text-sm);
	font-style: normal;
}

code,
kbd,
samp {
	padding: 0.15em 0.4em;
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-alt);
	font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var(--space-4);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-alt);
}

pre code {
	padding: 0;
	background: none;
}

figcaption {
	color: var(--color-text-light);
	font-size: var(--text-sm);
}

/* ---------------------------------------------------------------
 * Vertical rhythm
 *
 * Applied inside prose containers only, so component layouts keep full
 * control of their own spacing.
 * --------------------------------------------------------------- */
.prose > * + * {
	margin-block-start: var(--space-5);
}

.prose > * + :is(h2, h3, h4, h5, h6) {
	margin-block-start: var(--space-10);
}

.prose :is(h2, h3, h4, h5, h6) + * {
	margin-block-start: var(--space-3);
}