/* ==========================================================================
   DX — base
   1. Fonts   2. Design tokens   3. Colour schemes   4. Reset   5. Typography
   6. Layout  7. Header          8. Footer           9. Motion preferences

   The five brand colours are printed inline from DX Theme → Design
   (inc/design-tokens.php); the values below are only fallbacks.
   Logical properties are used throughout, so this one file serves RTL and LTR.
   ========================================================================== */

/* 1. Fonts — bundled variable fonts (SIL Open Font License), one file per script.
   unicode-range lets the browser fetch only the scripts a page really uses. */
@font-face {
	font-family: "Cairo";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/cairo-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
	font-family: "Cairo";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/cairo-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. Design tokens ------------------------------------------------------- */
:root {

	/* Brand — overridden inline from the control panel. */
	--dx-primary: #4f46e5;
	--dx-secondary: #22d3ee;
	--dx-accent: #f59e0b;
	--dx-dark: #0b1020;
	--dx-light: #f5f7fb;

	/* Text colour to use ON a brand colour, and readable versions of each brand
	   colour for text on light (-l) and dark (-d) backgrounds. Computed in PHP. */
	--dx-on-primary: #fff;
	--dx-on-secondary: #0b1020;
	--dx-on-accent: #0b1020;
	--dx-primary-l: #4f46e5;
	--dx-primary-d: #9590f0;
	--dx-secondary-l: #0e7a8a;
	--dx-secondary-d: #22d3ee;
	--dx-accent-l: #a16807;
	--dx-accent-d: #f59e0b;

	/* Status */
	--dx-success: #16a34a;
	--dx-warning: #d97706;
	--dx-danger: #dc2626;

	/* Type families. Cairo follows Inter so an Arabic word on an English page
	   (the language switch, a client's name) is still set in the brand typeface. */
	--dx-font-en: "Inter", "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--dx-font-ar: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
	--dx-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
	--dx-font-body: var(--dx-font-en);
	--dx-font-head: var(--dx-font-en);

	/* Type scale (fluid from 360px to 1280px) */
	--dx-fs-xs: 0.78rem;
	--dx-fs-sm: 0.875rem;
	--dx-fs-base: 1rem;
	--dx-fs-md: 1.125rem;
	--dx-fs-lg: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
	--dx-fs-xl: clamp(1.45rem, 1.29rem + 0.7vw, 1.85rem);
	--dx-fs-2xl: clamp(1.8rem, 1.49rem + 1.4vw, 2.6rem);
	--dx-fs-3xl: clamp(2.15rem, 1.62rem + 2.35vw, 3.5rem);
	--dx-fs-4xl: clamp(2.5rem, 1.72rem + 3.5vw, 4.5rem);
	--dx-lh-body: 1.65;
	--dx-lh-head: 1.12;
	--dx-tracking-head: -0.022em;
	--dx-fw-head: 800;

	/* Spacing scale (4px base) */
	--dx-space-1: 0.25rem;
	--dx-space-2: 0.5rem;
	--dx-space-3: 0.75rem;
	--dx-space-4: 1rem;
	--dx-space-5: 1.5rem;
	--dx-space-6: 2rem;
	--dx-space-7: 3rem;
	--dx-space-8: 4rem;
	--dx-space-9: 6rem;
	--dx-space-10: 8rem;

	/* Radius — the panel's "corner style" sets --dx-radius-scale. */
	--dx-radius-scale: 1;
	--dx-radius-sm: calc(6px * var(--dx-radius-scale));
	--dx-radius-md: calc(12px * var(--dx-radius-scale));
	--dx-radius-lg: calc(18px * var(--dx-radius-scale));
	--dx-radius-xl: calc(28px * var(--dx-radius-scale));
	--dx-radius-pill: 999px;

	/* Motion */
	--dx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dx-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
	--dx-dur-1: 0.15s;
	--dx-dur-2: 0.25s;
	--dx-dur-3: 0.6s;

	/* Layout */
	--dx-container: 1200px;
	--dx-gutter: clamp(20px, 4vw, 40px);
	--dx-header-h: 76px;
	--dx-section-y: clamp(72px, 9vw, 128px);

	/* Layers */
	--dx-z-raised: 10;
	--dx-z-header: 100;
	--dx-z-float: 150;
	--dx-z-overlay: 200;
}

/* Arabic: Cairo for both scripts, more line height, never letter-spaced. */
:lang(ar) {
	--dx-font-body: var(--dx-font-ar);
	--dx-font-head: var(--dx-font-ar);
	--dx-lh-body: 1.85;
	--dx-lh-head: 1.4;
	--dx-tracking-head: 0;
}

:lang(en) {
	--dx-font-body: var(--dx-font-en);
	--dx-font-head: var(--dx-font-en);
	--dx-lh-body: 1.65;
	--dx-lh-head: 1.12;
	--dx-tracking-head: -0.022em;
}

/* 3. Colour schemes ------------------------------------------------------
   Semantic tokens. Components only ever use these, never the brand colours
   directly for text or surfaces — that is what makes dark mode work.
   --dx-text, --dx-muted and the three -ink colours pass WCAG AA on every
   surface; --dx-faint does not and is for borders and decoration only.
   .dx-scheme-dark / .dx-scheme-light force a scheme on one block (header,
   footer, a dark call-to-action) whatever the page scheme is. */
:root,
.dx-scheme-light {
	color-scheme: light;
	--dx-bg: #fff;
	--dx-bg-alt: var(--dx-light);
	--dx-surface: #fff;
	--dx-surface-2: color-mix(in srgb, var(--dx-light) 70%, #fff);
	--dx-text: color-mix(in srgb, var(--dx-dark) 92%, #fff);
	--dx-heading: var(--dx-dark);
	--dx-muted: color-mix(in srgb, var(--dx-dark) 66%, #fff);
	--dx-faint: color-mix(in srgb, var(--dx-dark) 44%, #fff);
	--dx-border: color-mix(in srgb, var(--dx-dark) 10%, #fff);
	--dx-border-strong: color-mix(in srgb, var(--dx-dark) 22%, #fff);
	--dx-primary-ink: var(--dx-primary-l);
	--dx-secondary-ink: var(--dx-secondary-l);
	--dx-accent-ink: var(--dx-accent-l);
	--dx-primary-soft: color-mix(in srgb, var(--dx-primary) 9%, #fff);
	--dx-secondary-soft: color-mix(in srgb, var(--dx-secondary) 12%, #fff);
	--dx-accent-soft: color-mix(in srgb, var(--dx-accent) 14%, #fff);
	--dx-grid-line: color-mix(in srgb, var(--dx-dark) 7%, transparent);
	--dx-glow: color-mix(in srgb, var(--dx-primary) 22%, transparent);
	--dx-shadow-xs: 0 1px 2px color-mix(in srgb, var(--dx-dark) 6%, transparent);
	--dx-shadow-sm: 0 2px 10px -3px color-mix(in srgb, var(--dx-dark) 12%, transparent);
	--dx-shadow-md: 0 14px 30px -14px color-mix(in srgb, var(--dx-dark) 22%, transparent);
	--dx-shadow-lg: 0 30px 60px -26px color-mix(in srgb, var(--dx-dark) 32%, transparent);
	--dx-shadow-glow: 0 12px 28px -12px color-mix(in srgb, var(--dx-primary) 60%, transparent);
}

[data-theme="dark"],
.dx-scheme-dark {
	color-scheme: dark;
	--dx-bg: var(--dx-dark);
	--dx-bg-alt: color-mix(in srgb, var(--dx-dark) 95%, #fff);
	--dx-surface: color-mix(in srgb, var(--dx-dark) 92%, #fff);
	--dx-surface-2: color-mix(in srgb, var(--dx-dark) 86%, #fff);
	--dx-text: color-mix(in srgb, var(--dx-light) 88%, var(--dx-dark));
	--dx-heading: #fff;
	--dx-muted: color-mix(in srgb, var(--dx-light) 62%, var(--dx-dark));
	--dx-faint: color-mix(in srgb, var(--dx-light) 40%, var(--dx-dark));
	--dx-border: color-mix(in srgb, var(--dx-light) 11%, var(--dx-dark));
	--dx-border-strong: color-mix(in srgb, var(--dx-light) 24%, var(--dx-dark));
	--dx-primary-ink: var(--dx-primary-d);
	--dx-secondary-ink: var(--dx-secondary-d);
	--dx-accent-ink: var(--dx-accent-d);
	--dx-primary-soft: color-mix(in srgb, var(--dx-primary) 20%, var(--dx-dark));
	--dx-secondary-soft: color-mix(in srgb, var(--dx-secondary) 14%, var(--dx-dark));
	--dx-accent-soft: color-mix(in srgb, var(--dx-accent) 14%, var(--dx-dark));
	--dx-grid-line: color-mix(in srgb, var(--dx-light) 7%, transparent);
	--dx-glow: color-mix(in srgb, var(--dx-primary) 38%, transparent);
	--dx-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
	--dx-shadow-sm: 0 2px 10px -3px rgb(0 0 0 / 0.45);
	--dx-shadow-md: 0 14px 30px -14px rgb(0 0 0 / 0.6);
	--dx-shadow-lg: 0 30px 60px -26px rgb(0 0 0 / 0.75);
	--dx-shadow-glow: 0 12px 30px -10px color-mix(in srgb, var(--dx-primary) 70%, transparent);
}

.dx-scheme-dark,
.dx-scheme-light {
	color: var(--dx-text);
	background-color: var(--dx-bg);
}

/* 4. Reset --------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--dx-header-h) + 12px);
}

body {
	margin: 0;
	font-family: var(--dx-font-body);
	font-size: var(--dx-fs-base);
	line-height: var(--dx-lh-body);
	color: var(--dx-text);
	background-color: var(--dx-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

body.dx-no-scroll {
	overflow: hidden;
}

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

img,
video {
	height: auto;
}

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

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

button {
	cursor: pointer;
}

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

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

:focus-visible {
	outline: 3px solid var(--dx-primary-ink);
	outline-offset: 3px;
	border-radius: var(--dx-radius-sm);
}

::selection {
	background: color-mix(in srgb, var(--dx-primary) 28%, transparent);
}

/* Arabic must never be letter-spaced or upper-cased: it breaks letter joining. */
:lang(ar) * {
	letter-spacing: 0 !important;
	text-transform: none !important;
}

.screen-reader-text,
.dx-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.dx-skip {
	position: fixed;
	inset-inline-start: 12px;
	top: -80px;
	z-index: var(--dx-z-overlay);
	padding: 10px 16px;
	font-weight: 600;
	color: var(--dx-on-primary);
	background: var(--dx-primary);
	border-radius: var(--dx-radius-md);
	transition: top var(--dx-dur-2);
}

.dx-skip:focus {
	top: 12px;
}

/* 5. Typography ---------------------------------------------------------- */
h1,
h2,
h3,
h4,
.dx-display,
.dx-h1,
.dx-h2,
.dx-h3,
.dx-h4 {
	font-family: var(--dx-font-head);
	font-weight: var(--dx-fw-head);
	line-height: var(--dx-lh-head);
	letter-spacing: var(--dx-tracking-head);
	color: var(--dx-heading);
	text-wrap: balance;
}

.dx-display {
	font-size: var(--dx-fs-4xl);
}

h1,
.dx-h1 {
	font-size: var(--dx-fs-3xl);
}

h2,
.dx-h2 {
	font-size: var(--dx-fs-2xl);
}

h3,
.dx-h3 {
	font-size: var(--dx-fs-xl);
	font-weight: 700;
}

h4,
.dx-h4 {
	font-size: var(--dx-fs-lg);
	font-weight: 700;
}

.dx-lead {
	font-size: var(--dx-fs-md);
	color: var(--dx-muted);
	max-width: 60ch;
	text-wrap: pretty;
}

.dx-small {
	font-size: var(--dx-fs-sm);
}

.dx-muted {
	color: var(--dx-muted);
}

.dx-mono {
	font-family: var(--dx-font-mono);
	font-size: 0.92em;
}

/* [hl]word[/hl] in a panel text becomes a highlighted word. */
.dx-hl {
	color: var(--dx-primary-ink);
}

/* Keeps numbers, code and Latin brand names in their own direction inside Arabic text. */
.dx-ltr {
	direction: ltr;
	unicode-bidi: isolate;
}

/* 6. Layout -------------------------------------------------------------- */
.dx-container {
	width: 100%;
	max-width: calc(var(--dx-container) + var(--dx-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--dx-gutter);
}

.dx-container--narrow {
	--dx-container: 820px;
}

.dx-page {
	min-height: 60vh;
	padding-block: calc(var(--dx-header-h) + clamp(48px, 7vw, 96px)) var(--dx-section-y);
}

/* Inline SVG icons (inc/icons.php) */
.dx-ic {
	flex: none;
	width: 1.25em;
	height: 1.25em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Arrows and chevrons point the other way in RTL. */
[dir="rtl"] .dx-flip {
	transform: scaleX(-1);
}

/* 7. Header --------------------------------------------------------------
   The header is always dark (.dx-scheme-dark), so the white logo works in
   both colour schemes. */
.dx-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--dx-z-header);
	height: var(--dx-header-h);
	background-color: color-mix(in srgb, var(--dx-dark) 92%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--dx-light) 8%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	transition: background-color var(--dx-dur-2), box-shadow var(--dx-dur-2);
}

.dx-header.is-scrolled {
	background-color: color-mix(in srgb, var(--dx-dark) 97%, transparent);
	box-shadow: 0 10px 30px -18px rgb(0 0 0 / 0.6);
}

.dx-header__in {
	display: flex;
	align-items: center;
	gap: var(--dx-space-5);
	height: 100%;
}

.dx-brand {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 10px;
}

.dx-brand__mark {
	width: auto;
	height: 38px;
}

.dx-brand__word {
	width: auto;
	height: 36px;
}

.dx-brand__text {
	font-family: var(--dx-font-head);
	font-size: 1.15rem;
	font-weight: 800;
	color: #fff;
}

.dx-nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	margin-inline-start: auto;
	font-size: 0.93rem;
	font-weight: 500;
	color: var(--dx-muted);
}

.dx-nav a:not(.dx-btn) {
	position: relative;
	padding-block: 6px;
	transition: color var(--dx-dur-1);
}

.dx-nav a:not(.dx-btn)::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: linear-gradient(90deg, var(--dx-primary-ink), var(--dx-secondary-ink));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dx-dur-2) var(--dx-ease);
}

[dir="rtl"] .dx-nav a:not(.dx-btn)::after {
	transform-origin: right;
}

.dx-nav a:not(.dx-btn):hover,
.dx-nav a.is-active {
	color: #fff;
}

.dx-nav a:not(.dx-btn):hover::after,
.dx-nav a.is-active::after {
	transform: scaleX(1);
}

.dx-nav__cta {
	margin-inline-start: 6px;
}

.dx-header__tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Square header buttons: colour-scheme switch, mobile menu. */
.dx-tool {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	color: #fff;
	background: transparent;
	border: 1.5px solid var(--dx-border-strong);
	border-radius: var(--dx-radius-md);
	transition: border-color var(--dx-dur-1), color var(--dx-dur-1), background-color var(--dx-dur-1);
}

.dx-tool:hover {
	color: var(--dx-secondary-ink);
	border-color: var(--dx-secondary-ink);
}

.dx-tool .dx-ic {
	width: 20px;
	height: 20px;
}

.dx-lang {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding-inline: 14px;
	font-size: 0.88rem;
	font-weight: 600;
	color: #fff;
	border: 1.5px solid var(--dx-border-strong);
	border-radius: var(--dx-radius-md);
	transition: border-color var(--dx-dur-1), color var(--dx-dur-1);
}

.dx-lang:hover {
	color: var(--dx-secondary-ink);
	border-color: var(--dx-secondary-ink);
}

/* Colour-scheme switch: shows the icon of the scheme you would switch TO. */
.dx-theme-toggle .dx-ic--sun,
[data-theme="dark"] .dx-theme-toggle .dx-ic--moon {
	display: none;
}

[data-theme="dark"] .dx-theme-toggle .dx-ic--sun {
	display: block;
}

/* The new icon pops in — only after a click, not on every page load. */
.dx-theme-toggle.is-switched .dx-ic {
	animation: dx-pop var(--dx-dur-3) var(--dx-ease-spring);
}

/* Without JavaScript the switch cannot work, so it is not shown. */
html:not(.js) .dx-theme-toggle {
	display: none;
}

.dx-burger {
	display: none;
}

.dx-burger .dx-ic--close,
.dx-burger[aria-expanded="true"] .dx-ic--menu {
	display: none;
}

.dx-burger[aria-expanded="true"] .dx-ic--close {
	display: block;
}

@media (max-width: 860px) {
	.dx-burger {
		display: inline-flex;
	}

	.dx-nav {
		position: fixed;
		inset: var(--dx-header-h) 0 0 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 18px var(--dx-gutter) 32px;
		overflow-y: auto;
		background-color: color-mix(in srgb, var(--dx-dark) 98%, transparent);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: opacity var(--dx-dur-2), transform var(--dx-dur-2), visibility var(--dx-dur-2);
	}

	.dx-nav.is-open {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.dx-nav a:not(.dx-btn) {
		padding: 18px 4px;
		font-size: 1.2rem;
		font-weight: 600;
		border-bottom: 1px solid var(--dx-border);
	}

	.dx-nav a:not(.dx-btn)::after {
		display: none;
	}

	.dx-nav__cta {
		margin: 24px 0 0;
	}

	.dx-header__tools {
		margin-inline-start: auto;
	}
}

@media (max-width: 640px) {
	:root {
		--dx-header-h: 68px;
	}

	.dx-brand__word {
		height: 30px;
	}

	.dx-brand__mark {
		height: 32px;
	}
}

/* WordPress admin bar pushes the fixed header down. */
body.admin-bar .dx-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .dx-header {
		top: 46px;
	}

	body.admin-bar .dx-nav {
		top: calc(var(--dx-header-h) + 46px);
	}
}

@media (max-width: 600px) {

	/* The admin bar scrolls away on small screens. */
	body.admin-bar .dx-header {
		top: 0;
	}

	body.admin-bar .dx-nav {
		top: var(--dx-header-h);
	}
}

/* 8. Footer -------------------------------------------------------------- */
.dx-footer {
	padding-block: 40px;
	color: var(--dx-muted);
	background-color: color-mix(in srgb, var(--dx-dark), #000 45%);
	border-top: 1px solid var(--dx-border);
}

.dx-footer__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
}

.dx-footer__tag {
	font-family: var(--dx-font-head);
	font-size: var(--dx-fs-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dx-secondary-ink);
}

:lang(ar) .dx-footer__tag {
	font-size: var(--dx-fs-sm);
}

.dx-footer__copy {
	font-size: 0.88rem;
}

.dx-to-top {
	padding: 8px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	color: #fff;
	border: 1.5px solid var(--dx-border-strong);
	border-radius: var(--dx-radius-md);
	transition: border-color var(--dx-dur-1), color var(--dx-dur-1);
}

.dx-to-top:hover {
	color: var(--dx-secondary-ink);
	border-color: var(--dx-secondary-ink);
}

@media (max-width: 640px) {
	.dx-footer__in {
		flex-direction: column;
		text-align: center;
	}
}

/* 9. Motion preferences -------------------------------------------------- */
@keyframes dx-pop {
	from {
		opacity: 0;
		transform: rotate(-50deg) scale(0.5);
	}
}

/* Switching colour scheme cross-fades where the browser supports view transitions. */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.35s;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}