/* ==========================================================================
   Mada — Base
   Resets, base elements, semantic type styles, container.
   RTL-SAFE: logical properties only (margin/padding/inset/border-inline-*,
   text-align: start/end). NEVER left/right. See CLAUDE.md §5.1 / §13.
   All values reference tokens.css — no hardcoded colours/sizes/radii.
   ========================================================================== */

/* ---- Reset / normalize (minimal) ----------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* PROTOTYPE — global optical scale, all breakpoints. See the --ui-scale
	   block in tokens.css for the reasoning and the shipping caveat.
	   Browsers without `zoom` render 1:1, i.e. the unscaled S7-S13 values. */
	zoom: var(--ui-scale);
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-en);
	font-weight: var(--fw-regular);
	font-size: var(--fs-md);     /* DS Paragraph/Medium */
	line-height: var(--lh-sm);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Arabic / RTL: switch family. dir/lang are set by the bilingual plugin. */
[dir="rtl"],
:lang(ar) {
	font-family: var(--font-ar);
}

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

a {
	color: var(--color-link);
	text-decoration: none;
}
a:hover,
a:focus-visible {
	text-decoration: underline;
}

ul,
ol {
	margin-block: 0;
	padding-inline-start: var(--space-6);
}

p {
	margin-block: 0 var(--space-5);
}

hr {
	border: 0;
	border-block-start: var(--border-width-thin) solid var(--border-color-default);
	margin-block: var(--space-9);
}

/* ---- Accessible focus ring (uses focus border width token) --------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--border-width-focus) solid var(--color-secondary);
	outline-offset: 2px;
}

/* Form controls: inherit the page's type instead of UA defaults. (The parent
   reset.css used to provide this; it is now disabled in inc/enqueue.php
   because its pink link/button hovers overrode component colours.) */
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}
button {
	background-color: transparent;
	border: 0;
}

/* ---- Container ----------------------------------------------------------- */
.mada-container {
	inline-size: 100%;
	max-inline-size: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--grid-margin);
}

/* Full-bleed section helper (hero/banner/footer span to viewport edge). */
.mada-full-bleed {
	inline-size: 100%;
}

/* ==========================================================================
   Semantic type styles (DS "Typography" page) — Display / Heading / Label /
   Paragraph. Responsive: the --fs- and --lh- ramps already swap mobile to
   desktop at 640px. (Never write a star-slash sequence in a CSS comment — it
   closes the comment early and the next declarations are parsed as garbage.)
   ========================================================================== */

/* Display — VERIFIED from DS. English Display uses -2.5 tracking; Arabic uses 0
   (overridden below). Display/Large & Medium lh follow the DS step pattern. */
.display-large  { font-weight: var(--fw-bold); font-size: var(--fs-8xl); line-height: var(--lh-6xl); letter-spacing: var(--ls-tight); }
.display-medium { font-weight: var(--fw-bold); font-size: var(--fs-7xl); line-height: var(--lh-5xl); letter-spacing: var(--ls-tight); }
.display-small  { font-weight: var(--fw-bold); font-size: var(--fs-6xl); line-height: var(--lh-4xl); letter-spacing: var(--ls-tight); }
.display-tiny   { font-weight: var(--fw-bold); font-size: var(--fs-5xl); line-height: var(--lh-3xl); letter-spacing: var(--ls-tight); }

/* Arabic Display: no negative tracking (DS uses Letter Spacing "Number 2" = 0). */
:lang(ar) .display-large,  [dir="rtl"] .display-large,
:lang(ar) .display-medium, [dir="rtl"] .display-medium,
:lang(ar) .display-small,  [dir="rtl"] .display-small,
:lang(ar) .display-tiny,   [dir="rtl"] .display-tiny { letter-spacing: var(--ls-none); }

/* Heading — VERIFIED (Bold, tracking 0) */
.heading-large  { font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: var(--lh-2xl); }
.heading-medium { font-weight: var(--fw-bold); font-size: var(--fs-3xl); line-height: var(--lh-xl); }
.heading-small  { font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: var(--lh-lg); }
.heading-tiny   { font-weight: var(--fw-bold); font-size: var(--fs-xl);  line-height: var(--lh-md); }

/* Label — VERIFIED (SemiBold, tracking 0) */
.label-large  { font-weight: var(--fw-semibold); font-size: var(--fs-lg); line-height: var(--lh-md); }
.label-medium { font-weight: var(--fw-semibold); font-size: var(--fs-md); line-height: var(--lh-sm); }
.label-small  { font-weight: var(--fw-semibold); font-size: var(--fs-sm); line-height: var(--lh-xs); }
.label-tiny   { font-weight: var(--fw-semibold); font-size: var(--fs-xs); line-height: var(--lh-2xs); }

/* Paragraph — VERIFIED (Regular) */
.paragraph-large  { font-weight: var(--fw-regular); font-size: var(--fs-lg); line-height: var(--lh-md); }
.paragraph-medium { font-weight: var(--fw-regular); font-size: var(--fs-md); line-height: var(--lh-sm); }
.paragraph-small  { font-weight: var(--fw-regular); font-size: var(--fs-sm); line-height: var(--lh-xs); }
.paragraph-tiny   { font-weight: var(--fw-regular); font-size: var(--fs-xs); line-height: var(--lh-2xs); }

/* Native heading tags → DS semantic styles (editors can override per element). */
h1 { font-weight: var(--fw-bold); font-size: var(--fs-6xl); line-height: var(--lh-4xl); letter-spacing: var(--ls-tight); margin-block: 0 var(--space-5); }
h2 { font-weight: var(--fw-bold); font-size: var(--fs-4xl); line-height: var(--lh-2xl); margin-block: 0 var(--space-5); }
h3 { font-weight: var(--fw-bold); font-size: var(--fs-3xl); line-height: var(--lh-xl); margin-block: 0 var(--space-4); }
h4 { font-weight: var(--fw-bold); font-size: var(--fs-2xl); line-height: var(--lh-lg); margin-block: 0 var(--space-4); }
h5 { font-weight: var(--fw-bold); font-size: var(--fs-xl); line-height: var(--lh-md); margin-block: 0 var(--space-3); }
h6 { font-weight: var(--fw-semibold); font-size: var(--fs-lg); line-height: var(--lh-md); margin-block: 0 var(--space-3); }

/* Arabic h1: drop the negative tracking. */
:lang(ar) h1, [dir="rtl"] h1 { letter-spacing: var(--ls-none); }

/* ---- Utility: visually-hidden (a11y) ------------------------------------- */
.mada-visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Section rhythm helpers (alternating bands, per Home design) --------- */
.mada-section            { padding-block: var(--space-16); }
.mada-section--tight     { padding-block: var(--space-13); }
.mada-section--dark      { background-color: var(--color-cta); color: var(--color-text-on-dark); }
.mada-section--darkest   { background-color: var(--color-surface-dark); color: var(--color-text-on-dark); }
.mada-section--mint      { background-color: var(--color-mint-50); color: var(--color-text-on-dark); }
.mada-section--muted     { background-color: var(--color-bg-muted); }