/* =========================================================================
   LUMA — base
   Reset, document rhythm, typography, layout primitives, a11y utilities.
   Everything is written with logical properties so RTL is a direction flip,
   not a second stylesheet.
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Anchor targets clear the sticky header. */
	scroll-padding-block-start: calc(var(--header-h) + 1.5rem);
}

body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--step-0);
	line-height: var(--leading-body);
	font-weight: 400;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Arabic: switch the stack, add leading, and drop the tracking that would
   otherwise break Arabic letter joining. */
.luma-lang-ar {
	--font-body: var(--font-arabic);
	--font-display: var(--font-arabic);
	--tracking-label: 0;
	--leading-body: 1.85;
	--leading-snug: 1.5;
	--leading-tight: 1.28;
}

.luma-lang-ar .eyebrow,
.luma-lang-ar .footer-col__title,
.luma-lang-ar .field__label,
.luma-lang-ar .btn {
	text-transform: none;
}

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

img {
	height: auto;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
	margin: 0;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

p,
h1,
h2,
h3,
h4,
figure {
	margin: 0;
}

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

/* Hello Elementor colours bare anchors with its own brand pink, in both the
 * base state and — more awkwardly — in `a:hover, a:focus, a:active`. That is a
 * (0,1,1) selector, so it outranks a plain `a` rule and the pink came back on
 * every interaction.
 *
 * The scope is wrapped in :where() so this selector stays at (0,1,1): it beats
 * the parent theme purely on source order (LUMA's sheets are enqueued after
 * it), while every LUMA component rule below — all of which carry two or more
 * classes — still outranks this. It is a safety net for anchors, not a global
 * override, and it needs no !important. */
:where(body.luma-front-page, body.home) a:hover,
:where(body.luma-front-page, body.home) a:focus,
:where(body.luma-front-page, body.home) a:focus-visible,
:where(body.luma-front-page, body.home) a:active,
:where(body.luma-front-page, body.home) a:visited {
	color: inherit;
	text-decoration: none;
	text-decoration-color: currentColor;
}

::selection {
	background-color: var(--color-primary-soft);
	color: var(--color-dark-deep);
}

/* ------------------------------------------------------------------ type */
h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: var(--leading-tight);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

.luma-lang-ar h1,
.luma-lang-ar h2,
.luma-lang-ar h3 {
	letter-spacing: 0;
}

.eyebrow {
	margin-block-end: var(--space-s);
	font-family: var(--font-body);
	font-size: var(--step--2);
	font-weight: 500;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-primary-strong);
}

.eyebrow--on-dark {
	color: var(--color-primary-soft);
}

.section-title {
	font-size: var(--step-4);
	max-inline-size: 26ch;
}

.section-lead {
	margin-block-start: var(--space-m);
	max-inline-size: 52ch;
	color: var(--color-muted);
	font-size: var(--step-1);
	line-height: var(--leading-body);
}

/* ================================================== parent-theme reset
 * Hello Elementor boxes its chrome to `max-width: 1140px; margin-inline: auto`
 * (plus `padding-inline: 30px`) and Elementor does the same for
 * .elementor / .elementor-section-wrap. That is what made the landing page
 * read as constrained. LUMA supplies all of this chrome itself, so the
 * inherited box model is neutralised rather than fought further down.
 *
 * Scope rules:
 *   - .site-header / .site-footer / .site-header__inner exist ONLY in this
 *     child theme's own templates, so resetting them globally cannot reach
 *     an unrelated page.
 *   - .site-main / .page-content / .entry-content / .elementor* are shared
 *     with the parent theme's other templates, so those resets are scoped to
 *     the LUMA landing page and leave every other page alone.
 * ================================================================== */
.site-header,
.site-footer {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	margin-inline: 0;
	padding-inline: 0;
}

.site-header__inner {
	flex-direction: row;
}

/* Ordering-independent hardening for the two bands that must always run edge
 * to edge.
 *
 * The rules above are (0,1,0) and therefore only beat the parent theme's own
 * (0,1,0) `.site-header { max-width: … }` because LUMA's sheets happen to be
 * enqueued later. That is true today, but it is a property of enqueue order,
 * not of the stylesheet — a parent-theme update, a caching/combining plugin, or
 * Elementor's kit CSS re-ordering the output would silently box the header and
 * footer again.
 *
 * `body.luma` is added by luma_body_class() and therefore exists only while
 * this child theme is the active theme, so this is tightly scoped to LUMA's own
 * chrome: (0,2,1) outranks any single-class parent rule regardless of order,
 * and !important is confined to the four width properties that carry the bug.
 * It cannot leak to any other theme, page or element. */
body.luma .site-header,
body.luma .site-footer {
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
}

/* Landing page only — never blog, archive or other pages.
 *
 * (0,2,1) already outranks the parent theme's own (0,1,0) rules irrespective of
 * enqueue order. !important is added on the four width properties for the same
 * reason as the header/footer block above: a parent-theme or Elementor update
 * that marks its container widths !important would otherwise re-box the whole
 * landing page. Still confined to the LUMA front page. */
body.luma-front-page .site-main,
body.home .site-main,
body.luma-front-page .page-content,
body.luma-front-page .entry-content,
body.luma-front-page .elementor,
body.luma-front-page .elementor-section-wrap {
	inline-size: 100% !important;
	max-inline-size: none !important;
	margin-inline: 0 !important;
	padding-inline: 0 !important;
	float: none;
}

/* ---------------------------------------------------------------- layout */

/* Full-bleed band. Backgrounds run edge to edge; only the container inside
   is capped. */
.section,
.hero,
.site-header,
.site-footer {
	inline-size: 100%;
}

/* The one content rail: min(100% - 2 * pad, 1280px), centred.
   `.wrap` is the pre-existing class name, kept as an alias. */
.luma-container,
.wrap {
	inline-size: min(100% - (var(--container-pad) * 2), var(--container-max));
	margin-inline: auto;
	padding-inline: 0;
}

.section {
	padding-block: var(--space-3xl);
}

.section-head {
	max-inline-size: 62rem;
}

.site-main {
	display: block;
}

/* Hairline divider used between major sections. */
.section + .section {
	border-block-start: 1px solid var(--color-border);
}

/* ------------------------------------------------------------------- a11y */
.sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link,
.skip-link:visited,
.skip-link:hover,
.skip-link:focus,
.skip-link:focus-visible,
.skip-link:active {
	position: fixed;
	inset-block-start: var(--space-2xs);
	inset-inline-start: var(--space-2xs);
	z-index: 200;
	padding: 0.75rem 1.125rem;
	background-color: var(--color-dark);
	color: var(--color-on-dark);
	text-decoration: none;
	font-size: var(--step--1);
	border-radius: var(--radius-s);
	transition: transform var(--dur) var(--ease);
}

.skip-link {
	transform: translateY(-160%);
}

.skip-link:focus-visible {
	transform: translateY(0);
}

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-primary-strong);
	outline-offset: 3px;
	border-radius: var(--radius-xs);
}

/* Keyboard-only focus ring on the scrollable carousel track. */
[data-luma-carousel-track]:focus-visible {
	outline-offset: -2px;
}

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ------------------------------------------------------- print (courtesy) */
@media print {
	.site-header,
	.nav-toggle,
	.to-top,
	.carousel__controls,
	.newsletter {
		display: none !important;
	}
}