/* =============================================================================
 * Zawad base
 * Element-level defaults built on tokens.css. Nothing component-specific here.
 * ========================================================================== */

body {
	background-color: var(--zw-bg);
	color: var(--zw-text);
	font-family: var(--zw-font-body);
	font-size: var(--zw-text-base);
	line-height: var(--zw-leading-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
	font-family: var(--zw-font-heading);
	color: var(--zw-ink);
	line-height: var(--zw-leading-tight);
	font-weight: var(--zw-weight-bold);
	text-wrap: balance;
	margin-block: 0 var(--zw-space-4);
}

h1, .h1 { font-size: var(--zw-text-4xl); letter-spacing: -0.01em; }
h2, .h2 { font-size: var(--zw-text-3xl); letter-spacing: -0.01em; }
h3, .h3 { font-size: var(--zw-text-2xl); }
h4       { font-size: var(--zw-text-xl); }
h5       { font-size: var(--zw-text-lg); }
h6       { font-size: var(--zw-text-base); letter-spacing: var(--zw-tracking-wide); text-transform: uppercase; }

p  { margin-block: 0 var(--zw-space-4); }
p:last-child { margin-block-end: 0; }

/* Body links sit on ivory, so they use the darkened gold (4.54:1). Full gold
 * would only reach 2.77:1 here. Links inside navy sections are overridden in
 * layout.css where the full gold passes at 5.07:1. */
a {
	color: var(--zw-gold-ink);
	text-underline-offset: 0.18em;
	transition: color var(--zw-fast) var(--zw-ease);
}

a:hover,
a:focus-visible { color: var(--zw-navy); }

/* Scoped to exclude buttons: .zw-btn sets its own label colour, and letting
 * this rule win produced a gold label on a gold fill (1.00:1) on the closing
 * CTA. Caught by the contrast audit, not by eye. */
.zw-section--olive a:not(.zw-btn),
.zw-hero a:not(.zw-btn) { color: var(--zw-gold); }

:focus-visible {
	outline: 2px solid var(--zw-olive);
	outline-offset: 2px;
	border-radius: var(--zw-radius-sm);
}

img, video, svg { max-width: 100%; height: auto; }

hr {
	border: 0;
	border-top: 1px solid var(--zw-border);
	margin-block: var(--zw-space-6);
}

/* Arabic lockups and duas set in the Arabic face. */
[lang="ar"], .zw-arabic {
	font-family: var(--zw-font-arabic);
	direction: rtl;
	line-height: 1.9;
}

/* Screen-reader-only utility (used for accessible headings on card grids). */
.zw-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;
}