/*
 * Base elements, type roles and the shared controls.
 *
 * THE CRITICAL RULE (README "The critical rule"): every display element pins Bodoni
 * Moda's optical size to 10 and weight to 500. It is structural — without it the
 * didone hairlines vanish on screen. Written as longhands only; the 'font' shorthand
 * is banned in stylelint because it resets font-variation-settings.
 */

html {
	background: var(--samira-ground);
}

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--samira-ground);
	color: var(--samira-text);
	font-family: var(--samira-font-text);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.samira-display {
	margin: 0;
	font-family: var(--samira-font-display);
	font-weight: 500;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 10, "wght" 500;
}

p {
	margin: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--samira-accent);
	outline-offset: 3px;
}

img,
video {
	display: block;
	max-width: 100%;
}

[lang="ar"],
.samira-arabic {
	font-family: var(--samira-font-arabic);
}

.samira-accent {
	color: var(--samira-accent);
	font-style: italic;
}

/* Type roles (README type scale). */
.samira-eyebrow {
	font-family: var(--samira-font-text);
	font-size: 10.5px;
	font-weight: 600;
	line-height: 1;
	font-optical-sizing: auto;
	font-variation-settings: normal;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

.samira-label {
	font-family: var(--samira-font-text);
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	font-optical-sizing: auto;
	font-variation-settings: normal;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.samira-lead {
	max-width: 44ch;
	color: var(--samira-lead);
	font-size: 19px;
	line-height: 1.55;
	text-wrap: pretty;
}

.samira-body {
	max-width: 56ch;
	color: var(--samira-body);
	font-size: 15px;
	line-height: 1.6;
	text-wrap: pretty;
}

.samira-mono {
	font-family: var(--samira-font-mono);
	font-weight: 600;
}

/* Buttons: square, no shadow, no transform. Hover fills berry with paper text. */
.samira-button {
	display: inline-block;
	padding: 17px 30px;
	border: 0;
	background: var(--samira-button-ground);
	color: var(--samira-button-text);
	font-family: var(--samira-font-text);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

/* Berry on paper in light; 1e lifts it to the dark accent with ground-coloured text. */
.samira-button--accent {
	background: var(--samira-accent);
	color: var(--samira-ground);
}

.samira-button--outline {
	border: 1px solid currentcolor;
	background: transparent;
	color: var(--samira-text);
}

.samira-button:hover,
.samira-button:focus-visible {
	background: var(--samira-berry);
	color: var(--samira-paper);
}

.samira-button--accent:hover,
.samira-button--accent:focus-visible {
	background: var(--samira-text);
	color: var(--samira-ground);
}

.samira-text-link {
	color: var(--samira-text);
	border-bottom: 1px solid var(--samira-hairline);
	padding-bottom: 2px;
}

.samira-text-link:hover {
	color: var(--samira-accent);
	border-bottom-color: currentcolor;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Arabic typography (inc/i18n). Tracking breaks the joined script, and the display roles'
 * tight leading (0.9 to 1.05) clips Naskh's ascenders and descenders, so both are overridden
 * here for the whole page. !important is deliberate: every type role sets its own values, and
 * this one rule must win over all of them. Mono codes and rail indices keep their tracking:
 * the hero's code row is listed as well as its links, because the links inherit from it.
 * A Latin run marked .samira-latin (the wordmark "SAMIRA", samira_latin_classes()) keeps both
 * its tracking and its leading, so the logo and the 48px phone bar match every other language.
 */
html[lang="ar"] body :not(.samira-mono, .samira-latin, .samira-header__code, .samira-rail__index, .samira-hero__languages, .samira-hero__language) {
	letter-spacing: 0 !important;
}

html[lang="ar"] body :is(h1, h2, h3, .samira-display):not(.samira-latin) {
	line-height: 1.3 !important;
}