/* ==========================================================================
   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 → Colours & style
   (inc/design-tokens.php); the values below are only fallbacks.
   The look follows the DX-ZEMO logo: black, brushed silver, one turquoise dash.
   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;
}

/* Bitcount Single — the pixel typeface of English titles, labels and numbers. Latin only. */
@font-face {
	font-family: "Bitcount Single";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/bitcount-single-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: #21c7c2;
	--dx-secondary: #c9ced6;
	--dx-accent: #8ff0ec;
	--dx-dark: #050506;
	--dx-light: #eef0f3;

	/* 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: #050506;
	--dx-on-secondary: #050506;
	--dx-on-accent: #050506;
	--dx-primary-l: #0e5957;
	--dx-primary-d: #21c7c2;
	--dx-secondary-l: #5a5d60;
	--dx-secondary-d: #c9ced6;
	--dx-accent-l: #406c6a;
	--dx-accent-d: #8ff0ec;

	/* 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;

	/* The pixel typeface. It has no Arabic, so Arabic text set in it falls back to Cairo. */
	--dx-font-tech: "Bitcount Single", "Cairo", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
	--dx-font-body: var(--dx-font-en);
	--dx-font-head: var(--dx-font-tech);

	/* Interface text: menu, buttons, small labels. Per language, like the headings. */
	--dx-font-ui: var(--dx-font-tech);
	--dx-fs-ui: 0.84rem;
	--dx-fw-ui: 500;
	--dx-tracking-ui: 0.06em;

	/* 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.16;
	--dx-tracking-head: 0;
	--dx-fw-head: 400;
	--dx-fw-sub: 400;

	/* 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-frame: 1560px;
	--dx-gutter: clamp(20px, 4vw, 40px);
	--dx-cell: clamp(14px, 1.7vw, 26px);
	--dx-header-h: 68px;
	--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-font-ui: var(--dx-font-ar);
	--dx-fs-ui: 0.9rem;
	--dx-fw-ui: 600;
	--dx-tracking-ui: 0;
	--dx-lh-body: 1.85;
	--dx-lh-head: 1.4;
	--dx-fw-head: 700;
	--dx-fw-sub: 700;
}

/* English: Bitcount Single for titles and interface text, Inter for reading text. */
:lang(en) {
	--dx-font-body: var(--dx-font-en);
	--dx-font-head: var(--dx-font-tech);
	--dx-font-ui: var(--dx-font-tech);
	--dx-fs-ui: 0.84rem;
	--dx-fw-ui: 500;
	--dx-tracking-ui: 0.06em;
	--dx-lh-body: 1.65;
	--dx-lh-head: 1.16;
	--dx-fw-head: 400;
	--dx-fw-sub: 400;
}

/* 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.
   Latin text marked lang="en" inside an Arabic page keeps its own styling. */
: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: var(--dx-fw-sub);
}

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

.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;
}

/* Numbers and Latin labels in the pixel typeface, in either language. */
.dx-tech {
	font-family: var(--dx-font-tech);
	font-weight: 400;
}

/* [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;
}

/* The wide frame of the header, the footer and the home page. Its edges and
   sixths carry the page's vertical lines. */
.dx-frame {
	width: 100%;
	max-width: calc(var(--dx-frame) + var(--dx-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--dx-gutter);
}

.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 --------------------------------------------------------------
   Always dark (.dx-scheme-dark), so the silver logo works in both colour
   schemes. A row of cells divided by hairlines: on wide screens the brand and
   the tools are each one sixth of the frame, so their dividers continue the
   vertical lines of the home page. */
.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) 72%, transparent);
	border-bottom: 1px solid var(--dx-border);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	transition: background-color var(--dx-dur-2);
}

.dx-header.is-scrolled {
	background-color: color-mix(in srgb, var(--dx-dark) 90%, transparent);
}

.dx-header__in {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.dx-brand {
	display: flex;
	flex: 0 0 calc(100% / 6);
	align-items: center;
	gap: 10px;
	min-width: max-content;
	padding-inline-end: var(--dx-cell);
	border-inline-end: 1px solid var(--dx-border);
}

.dx-brand__mark,
.dx-brand__word {
	width: auto;
	height: 30px;
}

.dx-brand__text {
	font-family: var(--dx-font-tech);
	font-size: 1.15rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: #fff;
}

.dx-nav {
	display: flex;
	flex: 1;
	align-items: center;
	gap: clamp(16px, 2.2vw, 34px);
	padding-inline: var(--dx-cell);
	font-family: var(--dx-font-ui);
	font-size: var(--dx-fs-ui);
	font-weight: var(--dx-fw-ui);
	letter-spacing: var(--dx-tracking-ui);
	text-transform: uppercase;
	color: var(--dx-muted);
}

.dx-nav a:not(.dx-btn) {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-block: 6px;
	transition: color var(--dx-dur-1);
}

/* A turquoise dash — the one in the logo — marks the section being read. */
.dx-nav a:not(.dx-btn)::before {
	content: "";
	width: 0;
	height: 3px;
	background: var(--dx-primary);
	transition: width var(--dx-dur-2) var(--dx-ease);
}

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

.dx-nav a.is-active::before {
	width: 10px;
}

/* On wide screens the call-to-action sits with the tools; inside the menu it is for phones. */
.dx-nav .dx-nav__cta {
	display: none;
}

.dx-header__tools {
	display: flex;
	flex: 0 0 calc(100% / 6);
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	min-width: max-content;
	padding-inline-start: var(--dx-cell);
	border-inline-start: 1px solid var(--dx-border);
}

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

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

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

.dx-lang {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding-inline: 10px;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--dx-muted);
	transition: color var(--dx-dur-1);
}

.dx-lang:lang(en) {
	font-family: var(--dx-font-tech);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dx-lang:hover {
	color: #fff;
}

/* 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-brand,
	.dx-header__tools {
		flex: none;
		border: 0;
	}

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

	.dx-burger {
		display: inline-flex;
	}

	/* The menu panel hangs below the header and fills the rest of the screen.
	   Not position:fixed — the header's backdrop-filter would make the header,
	   not the screen, the box a fixed child is placed in. */
	.dx-nav {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		height: calc(100dvh - var(--dx-header-h));
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px var(--dx-gutter) 32px;
		overflow-y: auto;
		background-color: var(--dx-dark);
		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: 20px 2px;
		font-size: 1.15rem;
		border-bottom: 1px solid var(--dx-border);
	}

	.dx-nav .dx-nav__cta {
		display: inline-flex;
		margin-top: 26px;
	}
}

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

	.dx-brand__mark,
	.dx-brand__word {
		height: 26px;
	}
}

/* Phones: the call-to-action is in the menu, so the header keeps room for the logo. */
@media (max-width: 519px) {
	.dx-header__tools .dx-header__cta {
		display: none;
	}
}

/* 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;
	}
}

@media (max-width: 600px) {

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

/* 8. Footer --------------------------------------------------------------
   Sits above the fixed decor of the home page, so it needs its own layer. */
.dx-footer {
	position: relative;
	z-index: var(--dx-z-raised);
	color: var(--dx-muted);
	background-color: var(--dx-dark);
	border-top: 1px solid var(--dx-border);
}

.dx-footer__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
	padding-block: clamp(44px, 7vw, 84px);
}

.dx-footer__logo {
	display: block;
	flex: none;
}

.dx-footer__logo-img {
	width: min(72vw, 380px);
	height: auto;
}

.dx-footer__brand {
	display: grid;
	gap: 22px;
	max-width: 440px;
}

.dx-footer__about {
	font-size: var(--dx-fs-sm);
	text-wrap: pretty;
}

.dx-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	font-family: var(--dx-font-ui);
	font-size: var(--dx-fs-ui);
	font-weight: var(--dx-fw-ui);
	letter-spacing: var(--dx-tracking-ui);
	text-transform: uppercase;
}

.dx-footer__nav a,
.dx-to-top {
	transition: color var(--dx-dur-1);
}

.dx-footer__nav a:hover,
.dx-to-top:hover {
	color: #fff;
}

.dx-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	padding-block: 22px;
	font-size: var(--dx-fs-sm);
	border-top: 1px solid var(--dx-border);
}

.dx-footer__copy:lang(en),
.dx-footer__tag {
	font-family: var(--dx-font-tech);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dx-footer__tag {
	color: var(--dx-faint);
}

/* A Latin line on an Arabic page keeps its own order: "© 2026 NAME", not mirrored. */
.dx-footer__copy:lang(en),
.dx-footer__tag:lang(en) {
	direction: ltr;
}

.dx-to-top {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--dx-font-ui);
	font-size: var(--dx-fs-ui);
	font-weight: var(--dx-fw-ui);
	letter-spacing: var(--dx-tracking-ui);
	text-transform: uppercase;
}

.dx-to-top .dx-ic {
	width: 1.1em;
	height: 1.1em;
	color: var(--dx-primary-ink);
}

@media (max-width: 640px) {
	.dx-footer__top,
	.dx-footer__bar {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* 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;
}

/* Going from one page of the site to another cross-fades too, in browsers
   with cross-page view transitions. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* Switching language. Each language is its own page, but it should feel like
   one page changing: the old one blurs and swells away as the new one comes
   into focus, and the visitor stays on the section they were reading
   (main.js saves it, inc/assets.php and inc/home.php restore it).
   plus-lighter: no flash of the page background halfway through. */
html:active-view-transition-type(dx-lang)::view-transition-old(root) {
	animation: dx-lang-out 0.55s var(--dx-ease) both;
	mix-blend-mode: plus-lighter;
}

html:active-view-transition-type(dx-lang)::view-transition-new(root) {
	animation: dx-lang-in 0.55s var(--dx-ease) both;
	mix-blend-mode: plus-lighter;
}

@keyframes dx-lang-out {
	to {
		opacity: 0;
		transform: scale(1.04);
		filter: blur(6px);
	}
}

@keyframes dx-lang-in {
	from {
		opacity: 0;
		transform: scale(1.04);
		filter: blur(6px);
	}
}

/* Browsers without cross-page view transitions (html.dx-vt is absent): the
   page fades out before the switch and the new one fades in. Opacity only —
   a transform on <body> would unpin the fixed header. */
html.dx-lang-out body {
	opacity: 0;
	transition: opacity 0.24s var(--dx-ease);
}

html.dx-lang-in:not(.dx-vt) body {
	animation: dx-fade-in 0.45s var(--dx-ease) both;
}

@keyframes dx-fade-in {
	from {
		opacity: 0;
	}
}

@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;
	}
}