/*
Theme Name:        Quick Link Prime
Theme URI:         https://github.com/EslamEs01/quicklink-prime-wordpress
Author:            Quick Link Prime
Author URI:        https://github.com/EslamEs01/quicklink-prime-wordpress
Description:       Bilingual (Arabic RTL / English LTR) block theme for the Quick Link Prime legal translation website. Presentation only; durable functionality lives in the quicklink-prime-core plugin.
Requires at least: 6.5
Tested up to:      6.6
Requires PHP:      8.1
Version:           0.1.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       quicklink-prime
Tags:              block-patterns, full-site-editing, rtl-language-support, translation-ready, accessibility-ready
*/

/*
 * T057 — the design system and global chrome for the "Ledger" direction
 * selected in T056 (creative brief §13.1).
 *
 * Palette, fluid type scale, spacing and font faces are tokens in
 * theme.json. This file adds everything theme.json cannot express: the
 * `--qlp-*` motion and layout tokens, the bilingual typography system
 * (`:lang()`), the monoline mark set, the header, footer, breadcrumbs,
 * page-header families, quote desk, 404, and the motion contract that the
 * home page (T058) and the quote experience (T059) build on.
 *
 * Direction: every rule uses logical properties. `[dir="rtl"]` appears only
 * where the brief allows it -- motion direction and the placement of a
 * decorative composition (constitution VII, ADR-002, DES-010, C-07).
 */

/* ---------------------------------------------------------------------- *
 * 1. Tokens
 * ---------------------------------------------------------------------- */

:root {
	/* Page frame (brief §4.3). */
	--qlp-gutter: 16px;
	--qlp-content: 1180px;
	--qlp-wide: 1360px;
	--qlp-measure: 68ch;
	--qlp-rhythm: clamp( 4rem, 3rem + 4vw, 7.5rem );
	--qlp-radius: 2px;

	/* Elevation: a paper edge plus one soft petrol shadow, never a blur. */
	--qlp-edge: 1px solid var( --wp--preset--color--paper-300 );
	--qlp-shadow: 0 24px 48px -32px rgb( 16 59 58 / 0.35 );
	--qlp-shadow-deep: 0 32px 64px -34px rgb( 7 28 27 / 0.55 );

	/* Motion (ADR-010 §2, brief §4.4, MOT-001).

	   The values live in theme.json (settings.custom.motion), which is what
	   ADR-010 §2 asks for: one editable source, exported by WordPress as
	   `--wp--custom--motion--*`. The names the design system and every page
	   sheet actually write are the `--qlp-motion-*` ones below, so a token
	   can be retuned in theme.json without touching a stylesheet, and a
	   stylesheet loaded without theme.json (the editor's iframe before the
	   global styles arrive, a print context) still has the literal value.

	   These are the only spellings. The brief §4.4 names
	   (`--qlp-motion-fast`, `--qlp-ease-out`, `--qlp-reveal-distance`) were
	   carried as aliases through Round 3 while four sheets still read them;
	   all four now read the canonical names, so the aliases are gone and
	   there is exactly one name per token (Fable, on T103 §6.1).

	   Durations are 150-700 ms, two easings, one reveal distance (MOT-001). */
	--qlp-motion-duration-fast: var( --wp--custom--motion--duration--fast, 180ms );
	--qlp-motion-duration-base: var( --wp--custom--motion--duration--base, 320ms );
	--qlp-motion-duration-slow: var( --wp--custom--motion--duration--slow, 700ms );
	--qlp-motion-ease-out: var( --wp--custom--motion--ease--out, cubic-bezier( 0.2, 0.7, 0.2, 1 ) );
	--qlp-motion-ease-in-out: var( --wp--custom--motion--ease--in-out, cubic-bezier( 0.65, 0, 0.35, 1 ) );
	--qlp-motion-distance: var( --wp--custom--motion--distance, 16px );

	/* Reading-direction sign: +1 in LTR, -1 in RTL (MOT-006). */
	--qlp-motion-x: 1;

	/* Type roles. */
	--qlp-font-ui: var( --wp--preset--font-family--cairo );
	--qlp-font-display: var( --wp--preset--font-family--source-serif-4 );
	--qlp-font-body: var( --wp--preset--font-family--source-sans-3 );

	/* Contextual pair: redefined on dark grounds so one rule set serves both. */
	--qlp-focus: var( --wp--preset--color--petrol-800 );
	--qlp-rule: var( --wp--preset--color--paper-300 );
	--qlp-hairline: var( --wp--preset--color--gold-line );
	--qlp-text: var( --wp--preset--color--ink );
	--qlp-text-soft: var( --wp--preset--color--muted );
}

@media ( min-width: 600px ) {
	:root {
		--qlp-gutter: 24px;
	}
}

@media ( min-width: 1024px ) {
	:root {
		--qlp-gutter: 40px;
	}
}

@media ( min-width: 1440px ) {
	:root {
		--qlp-gutter: 64px;
	}
}

[dir="rtl"] {
	--qlp-motion-x: -1;
}

/* Arabic sets its display and body text in Cairo; the Latin families are
   not loaded on an Arabic document at all (C-09, functions.php). */
:lang(ar) {
	--qlp-font-display: var( --wp--preset--font-family--cairo );
	--qlp-font-body: var( --wp--preset--font-family--cairo );
}

/* ---------------------------------------------------------------------- *
 * 2. Base document
 * ---------------------------------------------------------------------- */

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

html {
	text-size-adjust: 100%;
}

body {
	background-color: var( --wp--preset--color--ivory );
	color: var( --wp--preset--color--ink );
	font-family: var( --qlp-font-body );
	font-size: 1.0625rem;
	line-height: 1.65;
	margin: 0;
	min-height: 100vh;
	overflow-wrap: break-word;
	text-align: start;
	text-rendering: optimizeLegibility;
}

img,
picture,
video,
svg {
	max-inline-size: 100%;
	block-size: auto;
}

/* ---------------------------------------------------------------------- *
 * 3. Bilingual typography (DES-005, brief §4.2)
 *
 *    English: Source Serif 4 for display, Source Sans 3 for body.
 *    Arabic: Cairo throughout, weight doing the work a second face would.
 *    Arabic is set ~7 % smaller nominally with taller leading so the two
 *    scripts land on the same rendered block depth (§13 amendment), and it
 *    never takes letter-spacing.
 * ---------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5 {
	color: var( --wp--preset--color--petrol-800 );
	font-family: var( --qlp-font-display );
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-block: 0;
	text-wrap: balance;
}

h1 {
	font-size: clamp( 2.5rem, 2rem + 3vw, 4.5rem );
	line-height: 1.05;
}

h2 {
	font-size: clamp( 1.875rem, 1.5rem + 1.6vw, 2.75rem );
	line-height: 1.15;
}

h3 {
	font-size: clamp( 1.3125rem, 1.2rem + 0.4vw, 1.5rem );
	line-height: 1.3;
}

h4 {
	font-size: 1.1875rem;
	line-height: 1.4;
}

:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) h4,
:lang(ar) h5,
:lang(ar) h6 {
	font-family: var( --wp--preset--font-family--cairo );
	font-weight: 700;
	letter-spacing: normal;
}

:lang(ar) h1 {
	font-size: clamp( 2.3rem, 1.8rem + 2.7vw, 4.15rem );
	line-height: 1.3;
}

:lang(ar) h2 {
	font-size: clamp( 1.75rem, 1.4rem + 1.4vw, 2.55rem );
	line-height: 1.35;
}

:lang(ar) h3 {
	font-size: clamp( 1.25rem, 1.15rem + 0.35vw, 1.375rem );
	line-height: 1.5;
}

:lang(ar) body,
:lang(ar) p,
:lang(ar) li {
	line-height: 1.9;
}

:lang(ar) {
	font-family: var( --wp--preset--font-family--cairo );
}

/* Interface type: Cairo in both languages, so one bilingual interface
   reads as a single system rather than switching typeface with content. */
.wp-element-button,
.wp-block-button__link,
.wp-block-navigation,
.wp-block-navigation-item,
button,
input,
select,
textarea,
.qlp-btn,
.qlp-textlink,
.qlp-eyebrow,
.qlp-meta {
	font-family: var( --qlp-font-ui );
}

/* Eyebrow: the verification mark, then the section's own label. Latin is
   tracked and uppercased; Arabic is neither (brief §4.2). */
.qlp-eyebrow {
	align-items: center;
	color: var( --wp--preset--color--gold-700 );
	display: flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.65em;
	letter-spacing: 0.12em;
	line-height: 1.4;
	margin-block: 0;
	text-transform: uppercase;
}

.qlp-eyebrow::before {
	background-color: var( --wp--preset--color--gold-line );
	block-size: 17px;
	content: "";
	flex: none;
	inline-size: 17px;
	-webkit-mask: url( assets/svg/mark-verification.svg ) no-repeat center / contain;
	mask: url( assets/svg/mark-verification.svg ) no-repeat center / contain;
}

:lang(ar) .qlp-eyebrow {
	font-size: 0.875rem;
	letter-spacing: normal;
	text-transform: none;
}

.qlp-lead,
.wp-block-post-excerpt.qlp-lead p {
	color: var( --wp--preset--color--ink-700 );
	font-size: clamp( 1.125rem, 1.05rem + 0.3vw, 1.25rem );
	line-height: 1.5;
	max-inline-size: 54ch;
}

:lang(ar) .qlp-lead,
:lang(ar) .wp-block-post-excerpt.qlp-lead p {
	font-size: clamp( 1.0625rem, 1rem + 0.28vw, 1.1875rem );
	line-height: 1.8;
	max-inline-size: 48ch;
}

.qlp-statement {
	font-family: var( --qlp-font-display );
	font-size: clamp( 1.5rem, 1.2rem + 1.2vw, 2.25rem );
	font-weight: 600;
	line-height: 1.25;
	margin-block: 0;
	text-wrap: balance;
}

:lang(ar) .qlp-statement {
	font-weight: 700;
	line-height: 1.55;
}

.qlp-meta {
	color: var( --qlp-text-soft );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

:lang(ar) .qlp-meta {
	letter-spacing: normal;
}

/* Reference numbers and ordinals: Latin, tabular, isolated (L10N-006). */
.qlp-num {
	color: var( --wp--preset--color--gold-700 );
	font-family: var( --wp--preset--font-family--source-sans-3 );
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	letter-spacing: 0.06em;
}

bdi {
	unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------- *
 * 4. Marks (DES-012)
 *    One asset per shape under assets/svg/, painted with currentColor
 *    through a mask so a mark always matches the text it sits beside.
 *    Shapes that carry reading direction have an authored counterpart
 *    rather than a scaleX flip (C-02).
 * ---------------------------------------------------------------------- */

.qlp-mark {
	background-color: currentColor;
	display: inline-block;
	flex: none;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	vertical-align: middle;
}

.qlp-mark--verification {
	block-size: 18px;
	inline-size: 18px;
	-webkit-mask-image: url( assets/svg/mark-verification.svg );
	mask-image: url( assets/svg/mark-verification.svg );
}

.qlp-mark--align {
	block-size: 16px;
	inline-size: 22px;
	-webkit-mask-image: url( assets/svg/mark-align.svg );
	mask-image: url( assets/svg/mark-align.svg );
}

[dir="rtl"] .qlp-mark--align {
	-webkit-mask-image: url( assets/svg/mark-align-rtl.svg );
	mask-image: url( assets/svg/mark-align-rtl.svg );
}

.qlp-mark--tick {
	block-size: 8px;
	inline-size: 14px;
	-webkit-mask-image: url( assets/svg/tick.svg );
	mask-image: url( assets/svg/tick.svg );
}

[dir="rtl"] .qlp-mark--tick {
	-webkit-mask-image: url( assets/svg/tick-rtl.svg );
	mask-image: url( assets/svg/tick-rtl.svg );
}

.qlp-mark--arrow {
	block-size: 10px;
	inline-size: 15px;
	-webkit-mask-image: url( assets/svg/arrow.svg );
	mask-image: url( assets/svg/arrow.svg );
}

[dir="rtl"] .qlp-mark--arrow {
	-webkit-mask-image: url( assets/svg/arrow-rtl.svg );
	mask-image: url( assets/svg/arrow-rtl.svg );
}

.qlp-mark--chevron {
	block-size: 7px;
	inline-size: 10px;
	-webkit-mask-image: url( assets/svg/chevron.svg );
	mask-image: url( assets/svg/chevron.svg );
}

/* The register line: the one gold hairline that rules a composition. */
.qlp-register {
	background-color: var( --qlp-hairline );
	block-size: 1px;
	border: 0;
	display: block;
	inline-size: 72px;
	margin: 0;
}

/* ---------------------------------------------------------------------- *
 * 5. Layout helpers
 * ---------------------------------------------------------------------- */

.qlp-wrap {
	margin-inline: auto;
	max-inline-size: calc( var( --qlp-content ) + var( --qlp-gutter ) * 2 );
	padding-inline: var( --qlp-gutter );
}

.qlp-wrap--wide {
	max-inline-size: calc( var( --qlp-wide ) + var( --qlp-gutter ) * 2 );
}

.qlp-section {
	padding-block: var( --qlp-rhythm );
	position: relative;
}

.qlp-main {
	display: block;
}

/* Grounds. Redefining the contextual pair is what lets one rule set serve
   a light and a dark section without a second copy of every rule. */
.qlp-ground--ivory {
	background-color: var( --wp--preset--color--ivory );
}

.qlp-ground--paper {
	background-color: var( --wp--preset--color--paper-200 );
}

.qlp-ground--dark,
.qlp-ground--deep {
	--qlp-focus: var( --wp--preset--color--gold-300 );
	--qlp-rule: rgb( 36 120 116 / 0.42 );
	--qlp-hairline: var( --wp--preset--color--gold-300 );
	--qlp-text: var( --wp--preset--color--on-dark );
	--qlp-text-soft: var( --wp--preset--color--on-dark-muted );

	color: var( --wp--preset--color--on-dark );
}

.qlp-ground--dark {
	background-color: var( --wp--preset--color--petrol-900 );
}

.qlp-ground--deep {
	background-color: var( --wp--preset--color--petrol-950 );
}

.qlp-ground--dark h1,
.qlp-ground--dark h2,
.qlp-ground--dark h3,
.qlp-ground--deep h1,
.qlp-ground--deep h2,
.qlp-ground--deep h3 {
	color: var( --wp--preset--color--on-dark );
}

.qlp-ground--dark .qlp-eyebrow,
.qlp-ground--deep .qlp-eyebrow {
	color: var( --wp--preset--color--gold-300 );
}

.qlp-ground--dark .qlp-eyebrow::before,
.qlp-ground--deep .qlp-eyebrow::before {
	background-color: var( --wp--preset--color--gold-300 );
}

/* Prose: the reading measure, not the page measure. */
.qlp-prose {
	margin-inline: auto;
	max-inline-size: calc( var( --qlp-content ) + var( --qlp-gutter ) * 2 );
	padding-block: clamp( 2.5rem, 2rem + 2vw, 4.5rem ) var( --qlp-rhythm );
	padding-inline: calc( var( --qlp-gutter ) + clamp( 18px, 1.8vw, 26px ) ) var( --qlp-gutter );
	position: relative;
}

/* The ruled margin the page header hangs its title on, continued down the
   body so the page reads as one ledger rather than two stacked blocks. */
@media ( min-width: 900px ) {
	.qlp-prose::before {
		background-color: var( --wp--preset--color--paper-300 );
		content: "";
		inline-size: 1px;
		inset-block: clamp( 2.5rem, 2rem + 2vw, 4.5rem ) var( --qlp-rhythm );
		inset-inline-start: var( --qlp-gutter );
		position: absolute;
	}
}

/* Lists in the body take the ledger's own marker: a gold tick, mirrored by
   composition for Arabic, never a bullet. */
.qlp-prose ul {
	list-style: none;
	padding-inline-start: 0;
}

.qlp-prose ul > li {
	padding-inline-start: 1.75em;
	position: relative;
}

.qlp-prose ul > li::before {
	background-color: var( --wp--preset--color--gold-line );
	block-size: 8px;
	content: "";
	inline-size: 14px;
	inset-block-start: 0.62em;
	inset-inline-start: 0;
	-webkit-mask: url( assets/svg/tick.svg ) no-repeat center / contain;
	mask: url( assets/svg/tick.svg ) no-repeat center / contain;
	position: absolute;
}

[dir="rtl"] .qlp-prose ul > li::before {
	-webkit-mask-image: url( assets/svg/tick-rtl.svg );
	mask-image: url( assets/svg/tick-rtl.svg );
}

.qlp-prose ol {
	padding-inline-start: 1.4em;
}

.qlp-prose li::marker {
	color: var( --wp--preset--color--gold-700 );
}

.qlp-prose h2 {
	font-size: clamp( 1.625rem, 1.4rem + 1vw, 2.125rem );
}

:lang(ar) .qlp-prose h2 {
	font-size: clamp( 1.5rem, 1.32rem + 0.85vw, 1.95rem );
}

.qlp-prose > * {
	max-inline-size: var( --qlp-measure );
}

.qlp-prose > .alignwide,
.qlp-prose > .alignfull,
.qlp-prose > .qlp-full {
	max-inline-size: none;
}

.qlp-prose h2 {
	margin-block-start: 1.6em;
}

.qlp-prose h3 {
	margin-block-start: 1.4em;
}

.qlp-prose h2:first-child,
.qlp-prose h3:first-child {
	margin-block-start: 0;
}

/* A ruled row list: the "ledger" list form used across the site. */
.qlp-ruled {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qlp-ruled > li {
	border-block-start: 1px solid var( --qlp-rule );
	padding-block: 0.9rem;
}

.qlp-ruled > li:last-child {
	border-block-end: 1px solid var( --qlp-rule );
}

/* A sheet: legal paper, a 1 px edge, one soft shadow, 2 px corners. */
.qlp-sheet-surface {
	background-color: var( --wp--preset--color--paper-50 );
	border: var( --qlp-edge );
	border-radius: var( --qlp-radius );
	box-shadow: var( --qlp-shadow );
}

/* The precision grid sits behind a section's content (C-08). */
.qlp-grid {
	block-size: 100%;
	inline-size: 100%;
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* ---------------------------------------------------------------------- *
 * 6. Focus, skip link, visually hidden (A11Y-004, A11Y-012)
 * ---------------------------------------------------------------------- */

:where( a, button, summary, input, select, textarea, label, [tabindex] ):focus-visible {
	border-radius: 1px;
	outline: 2px solid var( --qlp-focus );
	outline-offset: 3px;
}

.skip-link {
	align-items: center;
	background-color: var( --wp--preset--color--petrol-800 );
	color: var( --wp--preset--color--ivory );
	display: inline-flex;
	font-family: var( --qlp-font-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	inset-block-start: 0;
	inset-inline-start: var( --qlp-gutter );
	min-block-size: 44px;
	padding-block: 0.7em;
	padding-inline: 1.2em;
	position: absolute;
	text-decoration: none;
	transform: translateY( -140% );
	z-index: 60;
}

.skip-link:focus {
	transform: translateY( 10px );
}

.qlp-vh {
	block-size: 1px;
	clip-path: inset( 50% );
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------- *
 * 7. Links, buttons, text links (DES-011)
 * ---------------------------------------------------------------------- */

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.qlp-prose a:hover {
	text-decoration-color: var( --qlp-hairline );
}

.qlp-btn,
.wp-element-button,
.wp-block-button__link {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var( --qlp-radius );
	cursor: pointer;
	display: inline-flex;
	font-family: var( --qlp-font-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.55em;
	justify-content: center;
	line-height: 1.2;
	min-block-size: 48px;
	padding-block: 0.72em;
	padding-inline: 1.5em;
	text-decoration: none;
	transition: background-color var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out ),
		color var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out );
}

.qlp-btn--primary,
.wp-element-button,
.wp-block-button__link {
	background-color: var( --wp--preset--color--petrol-800 );
	color: var( --wp--preset--color--ivory );
}

.qlp-btn--primary:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background-color: var( --wp--preset--color--petrol-700 );
	color: var( --wp--preset--color--ivory );
}

.qlp-btn--primary:active,
.wp-element-button:active,
.wp-block-button__link:active {
	background-color: var( --wp--preset--color--petrol-950 );
	color: var( --wp--preset--color--ivory );
}

.qlp-btn--light {
	background-color: var( --wp--preset--color--ivory );
	color: var( --wp--preset--color--petrol-950 );
}

.qlp-btn--light:hover {
	background-color: var( --wp--preset--color--paper-200 );
	color: var( --wp--preset--color--petrol-950 );
}

.qlp-btn .qlp-mark {
	block-size: 17px;
	inline-size: 17px;
	opacity: 0.82;
}

.wp-element-button:disabled,
.wp-element-button[aria-disabled="true"],
.wp-block-button__link:disabled,
.wp-block-button__link[aria-disabled="true"],
.qlp-btn[aria-disabled="true"] {
	background-color: var( --wp--preset--color--muted-400 );
	color: var( --wp--preset--color--ivory );
	cursor: not-allowed;
}

.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border-color: var( --wp--preset--color--petrol-800 );
	color: var( --wp--preset--color--petrol-800 );
}

.is-style-outline > .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--petrol-800 );
	color: var( --wp--preset--color--ivory );
}

/* The secondary affordance: a ruled text link, never a second button. */
.qlp-textlink {
	align-items: center;
	border-block-end: 1px solid var( --qlp-hairline );
	color: var( --wp--preset--color--petrol-800 );
	display: inline-flex;
	font-family: var( --qlp-font-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 0.5em;
	min-block-size: 44px;
	padding-block-end: 3px;
	text-decoration: none;
}

.qlp-textlink:hover {
	border-block-end-color: var( --wp--preset--color--petrol-800 );
}

.qlp-ground--dark .qlp-textlink,
.qlp-ground--deep .qlp-textlink {
	color: var( --wp--preset--color--on-dark );
}

/* ---------------------------------------------------------------------- *
 * 8. Form controls (base; the quote form's own styling is T059)
 * ---------------------------------------------------------------------- */

input,
select,
textarea {
	background-color: var( --wp--preset--color--paper-50 );
	border: 1px solid var( --wp--preset--color--muted-400 );
	border-radius: var( --qlp-radius );
	color: var( --wp--preset--color--ink );
	padding-block: 0.6em;
	padding-inline: 0.75em;
}

input:hover,
select:hover,
textarea:hover {
	border-color: var( --wp--preset--color--petrol-800 );
}

input:disabled,
select:disabled,
textarea:disabled {
	background-color: var( --wp--preset--color--paper-200 );
	color: var( --wp--preset--color--muted );
	cursor: not-allowed;
}

.qlp-field-error,
[aria-invalid="true"] {
	border-color: var( --wp--preset--color--error );
}

.qlp-field-success {
	border-color: var( --wp--preset--color--success );
}

.wp-block-quote {
	border-inline-start: 2px solid var( --qlp-hairline );
	margin-inline: 0;
	padding-inline-start: var( --wp--preset--spacing--md );
}

/* ---------------------------------------------------------------------- *
 * 9. Header (DES-006, C-11)
 *    One bar at every width: 72 px from 1024 px up, 60 px below it.
 *    1200 px and up carries the full CTA label; 1024-1199 px condenses to
 *    the short one; below 1024 px the bar becomes wordmark, switcher,
 *    short CTA and the menu disclosure.
 * ---------------------------------------------------------------------- */

.qlp-header {
	background-color: var( --wp--preset--color--ivory );
	border-block-end: 1px solid var( --wp--preset--color--paper-300 );
	position: relative;
	z-index: 40;
}

.qlp-header__inner {
	align-items: center;
	display: flex;
	gap: clamp( 8px, 2.2vw, 34px );
	min-block-size: 60px;
}


@media ( min-width: 1024px ) {
	.qlp-header__inner {
		min-block-size: 72px;
	}
}

/* Wordmark lockup: the verification mark, then the name. The name stays
   Latin in both languages (CNT-005) and is bidi-isolated. */
.qlp-brand {
	align-items: center;
	color: var( --wp--preset--color--petrol-800 );
	display: inline-flex;
	flex: none;
	gap: 0.6em;
	text-decoration: none;
}

.qlp-brand__mark {
	block-size: 24px;
	color: var( --wp--preset--color--gold-line );
	inline-size: 24px;
}

.qlp-brand__name {
	font-family: var( --qlp-font-display );
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	white-space: nowrap;
}

:lang(ar) .qlp-brand__name {
	font-family: var( --wp--preset--font-family--cairo );
	font-weight: 700;
}

/* Primary navigation: text items with a gold rule on hover; the Documents
   item is a disclosure that opens as a sheet. */
/* Qualified with the bar so this wins over core/navigation's own
   `.wp-block-navigation { display: flex }`, which carries the same
   specificity and is printed after the theme's stylesheet. */
.qlp-header__inner > .qlp-primary-nav {
	display: none;
	margin-inline-start: auto;
}

@media ( min-width: 1024px ) {
	.qlp-header__inner > .qlp-primary-nav {
		display: block;
	}
}

.qlp-primary-nav .wp-block-navigation__container,
.qlp-primary-nav ul {
	align-items: center;
	display: flex;
	gap: clamp( 12px, 1.7vw, 26px );
	list-style: none;
	margin: 0;
	padding: 0;
}

/* WCAG 2.5.8 spacing floor for the top-level row only (A11Y-012, VR-F036).
   The old `clamp( 12px, 1.7vw, 26px )` leaves 17.4 px between two adjacent
   nav targets at 1024 and 21.8 px at 1280 -- under the 24 px the success
   criterion asks for when a target is not itself 24 x 24. It only reaches
   24 px at about 1412 px wide, which is why the criterion held at 1440 and
   not below it. The floor is raised to 24 px; above 1412 the value is
   unchanged, so the bar at 1440 and wider looks exactly as it did.

   Scoped to `.wp-block-navigation__container` rather than to the rule above,
   which also matches the Documents sheet's own `ul`: the sheet keeps its own
   rhythm. */
.qlp-primary-nav .wp-block-navigation__container {
	gap: clamp( 24px, 1.7vw, 26px );
}

.qlp-primary-nav .wp-block-navigation-item__content,
.qlp-primary-nav .qlp-nav-submenu__toggle {
	align-items: center;
	border-block-end: 1px solid transparent;
	color: var( --wp--preset--color--ink-700 );
	display: inline-flex;
	font-size: 0.9375rem;
	gap: 0.4em;
	min-block-size: 44px;
	/* A target is never narrower than the criterion either (A11Y-012,
	   VR-F036). No shipped label comes close -- the narrowest, "About", is
	   40 px -- but the nav's labels are editable (CR-011), and a one- or
	   two-character label would otherwise draw a target narrower than the
	   44 px tall box it sits in. Block padding is deliberately not used for
	   the height: the label's line box is 25.8 px, so any block padding over
	   9 px would push the box past `min-block-size` and take the header bar
	   with it. */
	min-inline-size: 24px;
	text-decoration: none;
	white-space: nowrap;
}

.qlp-primary-nav .wp-block-navigation-item__content:hover,
.qlp-primary-nav .qlp-nav-submenu__toggle:hover {
	border-block-end-color: var( --qlp-hairline );
	color: var( --wp--preset--color--petrol-800 );
}

.qlp-primary-nav [aria-current="page"] {
	border-block-end-color: var( --qlp-hairline );
	color: var( --wp--preset--color--petrol-800 );
}

/* Documents disclosure: a native <details> element, so it opens with the
   keyboard and with no JavaScript at all (A11Y-003). */
.qlp-nav-submenu {
	position: relative;
}

.qlp-nav-submenu__details {
	display: inline-block;
}

.qlp-nav-submenu__toggle {
	cursor: pointer;
	list-style: none;
}

.qlp-nav-submenu__toggle::-webkit-details-marker {
	display: none;
}

.qlp-nav-submenu__toggle::after {
	background-color: currentColor;
	block-size: 7px;
	content: "";
	inline-size: 10px;
	-webkit-mask: url( assets/svg/chevron.svg ) no-repeat center / contain;
	mask: url( assets/svg/chevron.svg ) no-repeat center / contain;
	transition: transform var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out );
}

.qlp-nav-submenu__details[open] .qlp-nav-submenu__toggle::after {
	transform: rotate( 180deg );
}

.qlp-nav-submenu__list {
	background-color: var( --wp--preset--color--paper-50 );
	border: var( --qlp-edge );
	border-block-start: 2px solid var( --qlp-hairline );
	border-radius: var( --qlp-radius );
	box-shadow: var( --qlp-shadow );
	inset-inline-start: 0;
	list-style: none;
	margin: 0;
	margin-block-start: 10px;
	max-inline-size: min( 19rem, calc( 100vw - 2 * var( --qlp-gutter ) ) );
	min-inline-size: 15rem;
	padding-block: 0.4rem;
	position: absolute;
	z-index: 20;
}

/* The sheet is a vertical list, one link per row -- not a row of columns
   (VR-F039). `.qlp-primary-nav ul` above matches this list too, and has
   since T057 (108ec32) broadened the bar's flex row from
   `.wp-block-navigation__container` to every `ul` inside the bar; before
   that the bar's row was scoped to the container and this list was an
   ordinary block list. The four links were laid out as four narrow columns
   with the fourth outside the sheet, on every page at desktop, in both
   languages. Qualified with the bar so it outweighs that rule at the same
   specificity, declared later. */
.qlp-primary-nav .qlp-nav-submenu__list {
	display: block;
	/* Sized to its longest label rather than to a fixed column, then
	   capped by `max-inline-size` above (and floored by `min-inline-size`),
	   so a label an editor lengthens widens the sheet instead of wrapping
	   it into a ragged block. */
	inline-size: max-content;
	/* Inline-start in English, inline-end in Arabic. This is the initial
	   value; it is written out because the alignment is part of what the
	   sheet must do, in both directions. */
	text-align: start;
}

/* Core's own `.wp-block-navigation-item { display: flex }` would otherwise
   make each link a flex item and shrink it to its text, leaving a target
   that is only as wide as its label sitting in a full-width row. */
.qlp-primary-nav .qlp-nav-submenu__list > li {
	display: block;
}

.qlp-primary-nav .qlp-nav-submenu__list > li + li {
	border-block-start: 1px solid var( --qlp-rule );
}

.qlp-nav-submenu__list .wp-block-navigation-item__content {
	border-block-end: 0;
	display: block;
	font-size: 0.9375rem;
	min-block-size: 0;
	padding-block: 0.7rem;
	padding-inline: 1.1rem;
	white-space: normal;
}

.qlp-nav-submenu__list .wp-block-navigation-item__content:hover {
	background-color: var( --wp--preset--color--petrol-50 );
}

/* Language switcher: two text links, the current one ruled in gold. */
.qlp-language-switcher {
	display: none;
	flex: none;
}

@media ( min-width: 1024px ) {
	.qlp-language-switcher {
		display: block;
	}
}

.qlp-language-switcher__list {
	align-items: center;
	display: flex;
	gap: 0.85em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qlp-language-switcher__item a {
	align-items: center;
	border-block-end: 1px solid transparent;
	color: var( --wp--preset--color--muted );
	display: inline-flex;
	font-family: var( --qlp-font-ui );
	font-size: 0.875rem;
	font-weight: 600;
	justify-content: center;
	min-block-size: 44px;
	padding-block-end: 3px;
	text-decoration: none;
}

.qlp-language-switcher__item a:hover {
	color: var( --wp--preset--color--petrol-800 );
}

.qlp-language-switcher__item--current a {
	border-block-end-color: var( --qlp-hairline );
	color: var( --wp--preset--color--ink );
}

/* The switcher's target-language label is the one Arabic string an English
   page contains. C-09 keeps the Arabic subset off English pages, so that
   label falls to whatever Arabic font the visitor's system happens to have,
   or to tofu on a machine with none. This face is the theme's own Cairo
   Arabic file restricted by `unicode-range` to the seven letters of the
   word, so it is fetched for the label and for nothing else, and no Arabic
   body face reaches an English page. Arabic pages already load the full
   subset through theme.json and are excluded here so the file is not
   instantiated twice. */
@font-face {
	font-display: swap;
	font-family: "QLP Switcher Arabic";
	font-style: normal;
	font-weight: 400 700;
	src: url( "assets/fonts/cairo/cairo-arabic.woff2" ) format( "woff2" );
	unicode-range: U+0627-0629, U+0631, U+0639, U+0644, U+064A;
}

html:not( :lang( ar ) ) .qlp-language-switcher__item a:lang( ar ),
html:not( :lang( ar ) ) .qlp-language-switcher--compact:lang( ar ),
html:not( :lang( ar ) ) .qlp-menu__switch a:lang( ar ) {
	font-family: "QLP Switcher Arabic", var( --qlp-font-ui );
}

/* The compact bar's switcher is a single link to the other language, so
   the bar carries one navigation landmark, not two.

   VR-F012: it sits next to the wordmark, so it is separated by a hairline
   and set in the meta size and colour. Without that the two read as one
   lockup ("Quick Link Prime العربية") instead of a name and a control. */
.qlp-language-switcher--compact {
	align-items: center;
	border-block-end: 1px solid transparent;
	border-inline-start: 1px solid var( --wp--preset--color--muted-400 );
	color: var( --wp--preset--color--muted );
	display: inline-flex;
	flex: none;
	font-family: var( --qlp-font-ui );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-inline-start: auto;
	min-block-size: 44px;
	padding-inline-end: 0.35em;
	padding-inline-start: 0.9em;
	text-decoration: none;
}

/* The label is the other language's own name, so the element's language,
   not the document's, decides whether it is tracked (brief §4.2). */
.qlp-language-switcher--compact:lang( ar ) {
	letter-spacing: normal;
}

.qlp-language-switcher--compact:hover {
	border-block-end-color: var( --qlp-hairline );
	color: var( --wp--preset--color--ink-700 );
}

@media ( min-width: 1024px ) {
	.qlp-language-switcher--compact {
		display: none;
	}
}

/* Header CTA. */
.qlp-header__cta {
	flex: none;
	min-block-size: 44px;
	padding-block: 0.6em;
	padding-inline: 1.15em;
}

.qlp-header__cta--full {
	display: none;
}

@media ( min-width: 1024px ) {
	.qlp-header__cta--full {
		display: inline-flex;
	}

	.qlp-header__cta--compact {
		display: none;
	}
}

.qlp-header__cta--compact {
	font-size: 0.8125rem;
	padding-inline: 0.9em;
}

.qlp-cta-label--full {
	display: none;
}

@media ( min-width: 1200px ) {
	.qlp-cta-label--full {
		display: inline;
	}

	.qlp-header__cta--full .qlp-cta-label--short {
		display: none;
	}

	.qlp-header__cta--full .qlp-mark {
		display: inline-block;
	}
}

.qlp-header__cta--full .qlp-mark {
	display: none;
}

/* At 479 px and below the bar still carries all four controls DES-006
   requires -- wordmark, language switcher, quote CTA and the menu -- so
   each is tightened until the set fits 360 px, and none is dropped. This
   block sits after the rules it narrows so it wins on source order at
   equal specificity. */
@media ( max-width: 519px ) {
	.qlp-header__inner {
		gap: 4px;
		min-block-size: 56px;
	}

	.qlp-brand {
		gap: 0.45em;
	}

	.qlp-brand__mark {
		block-size: 20px;
		inline-size: 20px;
	}

	.qlp-brand__name {
		font-size: 0.875rem;
	}

	.qlp-language-switcher--compact {
		font-size: 0.8125rem;
		letter-spacing: normal;
		padding-inline-end: 0.15em;
		padding-inline-start: 0.7em;
	}

	.qlp-header__cta--compact {
		font-size: 0.75rem;
		padding-inline: 0.65em;
	}
}

/* The bar has to hold its gutter, not just stay inside the viewport: the
   four controls plus the wordmark live in the content box, and anything
   that spills into the 16 px gutter reads as a control glued to the screen
   edge. Arabic sets that budget, because "اطلب عرض سعر" and "العربية" are
   wider than their Latin counterparts at the same size, so these two steps
   are sized from the Arabic bar and the Latin one inherits the headroom.
   Measured at 320, 360 and 390 in both languages (DES-008, VR-F013). */
@media ( max-width: 399px ) {
	.qlp-header__inner {
		gap: 3px;
	}

	.qlp-brand {
		gap: 0.35em;
	}

	.qlp-brand__mark {
		block-size: 18px;
		inline-size: 18px;
	}

	.qlp-brand__name {
		font-size: 0.75rem;
	}

	/* The divider now carries the separation the gap used to, so the inset
	   around the label is what gives the width back at 320 px. */
	.qlp-language-switcher--compact {
		font-size: 0.6875rem;
		padding-inline-end: 0;
		padding-inline-start: 0.5em;
	}

	.qlp-header__cta--compact {
		font-size: 0.6875rem;
		padding-inline: 0.4em;
	}
}

/* 320 px is the narrowest width the design has to hold (DES-008), and it is
   the Arabic bar that decides what fits there. */
@media ( max-width: 339px ) {
	.qlp-header__inner {
		gap: 2px;
	}

	.qlp-brand {
		gap: 0.3em;
	}

	.qlp-brand__mark {
		block-size: 16px;
		inline-size: 16px;
	}

	.qlp-brand__name {
		font-size: 0.6875rem;
	}

	.qlp-language-switcher--compact {
		padding-inline-start: 0.4em;
	}

	.qlp-header__cta--compact {
		padding-inline: 0.3em;
	}
}

/* ---------------------------------------------------------------------- *
 * 10. Compact menu (DES-006)
 *     Without JavaScript this is a native disclosure that reveals the same
 *     list inline, below the bar. With JavaScript it becomes a full-height
 *     sheet on the inline end, with a scrim, focus moved in and restored,
 *     and Escape to close (nav.js).
 * ---------------------------------------------------------------------- */

.qlp-menu {
	flex: none;
	margin-inline-start: 0;
}

@media ( min-width: 1024px ) {
	.qlp-menu {
		display: none;
	}
}

.qlp-menu__disclosure {
	display: block;
}

.qlp-menu__toggle {
	align-items: center;
	border: 1px solid var( --wp--preset--color--paper-300 );
	border-radius: 999px;
	color: var( --wp--preset--color--ink-700 );
	cursor: pointer;
	display: inline-flex;
	font-family: var( --qlp-font-ui );
	font-size: 0.875rem;
	font-weight: 600;
	gap: 0.5em;
	list-style: none;
	min-block-size: 44px;
	padding-inline: 0.9em;
}

.qlp-menu__toggle::-webkit-details-marker {
	display: none;
}

.qlp-menu__toggle .qlp-mark {
	block-size: 10px;
	inline-size: 16px;
	-webkit-mask-image: url( assets/svg/menu.svg );
	mask-image: url( assets/svg/menu.svg );
}

.qlp-menu__disclosure[open] .qlp-menu__toggle .qlp-mark {
	-webkit-mask-image: url( assets/svg/close.svg );
	mask-image: url( assets/svg/close.svg );
}

@media ( max-width: 479px ) {
	.qlp-menu__toggle {
		inline-size: 44px;
		justify-content: center;
		padding-inline: 0;
	}

	.qlp-menu__toggle .qlp-menu__toggle-label {
		block-size: 1px;
		clip-path: inset( 50% );
		inline-size: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
	}
}

/* A closed disclosure is hidden explicitly rather than relying on the
   browser's own treatment of `<details>` content: recent engines keep that
   content in the box tree (it is skipped for layout, not removed), which is
   enough to widen the document at 390 px. */
.qlp-menu__disclosure:not( [open] ) .qlp-menu__panel,
.qlp-menu__disclosure:not( [open] ) .qlp-menu__scrim {
	display: none;
}

/* No-JavaScript presentation: the panel is an ordinary block under the
   bar, full width, in the page flow (MOT-003, DES-006). */
.qlp-menu__scrim {
	display: none;
}

.qlp-menu__panel {
	--qlp-focus: var( --wp--preset--color--gold-300 );

	background-color: var( --wp--preset--color--petrol-950 );
	color: var( --wp--preset--color--on-dark );
	display: flex;
	flex-direction: column;
	inline-size: 100%;
	inset-block-start: 100%;
	inset-inline: 0;
	padding-block: 20px 32px;
	padding-inline: var( --qlp-gutter );
	position: absolute;
	z-index: 41;
}

.qlp-menu__close {
	display: none;
}

.qlp-menu__top {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-block-end: 22px;
	min-block-size: 40px;
}

.qlp-menu__label {
	color: var( --wp--preset--color--gold-300 );
	font-family: var( --qlp-font-ui );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

:lang(ar) .qlp-menu__label {
	letter-spacing: normal;
	text-transform: none;
}

.qlp-menu__list {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qlp-menu__list > li + li {
	border-block-start: 1px solid rgb( 36 120 116 / 0.38 );
}

.qlp-menu__list > li > a,
.qlp-menu__group-label {
	color: var( --wp--preset--color--on-dark );
	display: block;
	font-family: var( --qlp-font-display );
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.35;
	padding-block: 15px;
	text-decoration: none;
}

:lang(ar) .qlp-menu__list > li > a,
:lang(ar) .qlp-menu__group-label {
	font-family: var( --wp--preset--font-family--cairo );
	font-weight: 700;
}

.qlp-menu__sub {
	border-inline-start: 1px solid var( --wp--preset--color--gold );
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	margin: 0;
	margin-block-start: -4px;
	padding-block: 8px 16px;
	padding-inline-start: 16px;
}

.qlp-menu__group-label {
	color: var( --wp--preset--color--on-dark-muted );
	display: block;
	font-size: 1.125rem;
	padding-block: 15px 6px;
}

.qlp-menu__sub li > a {
	color: var( --wp--preset--color--on-dark-muted );
	font-family: var( --qlp-font-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	padding-block: 6px;
	text-decoration: none;
}

.qlp-menu__panel a:hover {
	text-decoration: underline;
	text-decoration-color: var( --wp--preset--color--gold-300 );
}

.qlp-menu__foot {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-block-start: auto;
	padding-block-start: 24px;
}

.qlp-menu__switch {
	display: flex;
	font-family: var( --qlp-font-ui );
	font-size: 0.9375rem;
	font-weight: 600;
	gap: 1.4em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qlp-menu__switch a {
	border-block-end: 1px solid transparent;
	color: var( --wp--preset--color--on-dark-muted );
	display: inline-flex;
	font-size: 0.9375rem;
	min-block-size: 44px;
	padding-block-end: 4px;
	text-decoration: none;
}

.qlp-menu__switch .qlp-language-switcher__item--current a {
	border-block-end-color: var( --wp--preset--color--gold-300 );
	color: var( --wp--preset--color--on-dark );
}

/* Enhanced presentation: a full-height sheet on the inline end. */
.qlp-js .qlp-menu__scrim {
	background-color: rgb( 7 28 27 / 0.55 );
	display: block;
	inset: 0;
	position: fixed;
	z-index: 50;
}

.qlp-js .qlp-menu__panel {
	block-size: 100%;
	border-inline-start: 1px solid rgb( 36 120 116 / 0.55 );
	inline-size: min( 360px, 86vw );
	inset-block: 0;
	inset-inline-end: 0;
	inset-inline-start: auto;
	overflow-y: auto;
	position: fixed;
	z-index: 51;
}

.qlp-js .qlp-menu__close {
	align-items: center;
	background: none;
	border: 1px solid rgb( 36 120 116 / 0.6 );
	border-radius: 999px;
	block-size: 44px;
	color: var( --wp--preset--color--on-dark );
	cursor: pointer;
	display: inline-flex;
	inline-size: 44px;
	justify-content: center;
}

.qlp-js .qlp-menu__close .qlp-mark {
	block-size: 14px;
	inline-size: 14px;
	-webkit-mask-image: url( assets/svg/close.svg );
	mask-image: url( assets/svg/close.svg );
}

/* ---------------------------------------------------------------------- *
 * 11. Breadcrumbs: gold ticks as separators, never shown on Home.
 * ---------------------------------------------------------------------- */

.qlp-breadcrumbs {
	padding-block-end: 1.1rem;
}

.qlp-breadcrumbs__list {
	align-items: center;
	column-gap: 0.7rem;
	display: flex;
	flex-wrap: wrap;
	font-family: var( --qlp-font-ui );
	font-size: 0.8125rem;
	font-weight: 600;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: 0.2rem;
}

.qlp-breadcrumbs__item {
	align-items: center;
	color: var( --qlp-text-soft );
	display: inline-flex;
	gap: 0.7rem;
}

.qlp-breadcrumbs__item a {
	color: var( --wp--preset--color--muted );
	display: inline-block;
	min-block-size: 24px;
	padding-block: 0.2rem;
	text-decoration: none;
}

.qlp-breadcrumbs__item a:hover {
	color: var( --wp--preset--color--petrol-800 );
	text-decoration: underline;
}

.qlp-breadcrumbs__item:not( :last-child )::after {
	background-color: var( --wp--preset--color--gold-line );
	block-size: 8px;
	content: "";
	flex: none;
	inline-size: 14px;
	-webkit-mask: url( assets/svg/tick.svg ) no-repeat center / contain;
	mask: url( assets/svg/tick.svg ) no-repeat center / contain;
}

[dir="rtl"] .qlp-breadcrumbs__item:not( :last-child )::after {
	-webkit-mask-image: url( assets/svg/tick-rtl.svg );
	mask-image: url( assets/svg/tick-rtl.svg );
}

.qlp-breadcrumbs__item--current {
	color: var( --wp--preset--color--ink-700 );
}

/* ---------------------------------------------------------------------- *
 * 12. Page-header family (DES-002)
 *     Ivory sheet over a paper base, ruled by the register line, with the
 *     family's own composition in the inline-end third.
 * ---------------------------------------------------------------------- */

.qlp-pagehead {
	background-color: var( --wp--preset--color--paper-200 );
	border-block-end: 1px solid var( --wp--preset--color--paper-300 );
	display: block;
	overflow: hidden;
	position: relative;
}

.qlp-pagehead > .qlp-wrap {
	padding-block: clamp( 1.75rem, 1.2rem + 1.6vw, 2.75rem ) clamp( 2.5rem, 1.8rem + 2.6vw, 4.5rem );
	position: relative;
	z-index: 1;
}

.qlp-pagehead__grid {
	align-items: center;
	display: grid;
	gap: clamp( 28px, 3vw, 48px );
}

@media ( min-width: 720px ) {
	.qlp-pagehead__grid {
		grid-template-columns: minmax( 0, 8fr ) minmax( 0, 4fr );
	}
}

.qlp-pagehead__text {
	display: flex;
	flex-direction: column;
	gap: clamp( 14px, 1.4vw, 20px );
	padding-inline-start: clamp( 18px, 1.8vw, 26px );
	position: relative;
}

.qlp-pagehead__text::before {
	background-color: var( --wp--preset--color--gold-line );
	content: "";
	inline-size: 1px;
	inset-block: 4px;
	inset-inline-start: 0;
	position: absolute;
}

.qlp-pagehead__text .qlp-eyebrow {
	margin-inline-start: calc( -1 * clamp( 18px, 1.8vw, 26px ) - 8px );
}

.qlp-pagehead h1 {
	font-size: clamp( 2.125rem, 1.6rem + 2.4vw, 3.5rem );
}

:lang(ar) .qlp-pagehead h1 {
	font-size: clamp( 1.95rem, 1.5rem + 2.1vw, 3.25rem );
}

.qlp-pagehead .wp-block-post-excerpt {
	margin: 0;
}

.qlp-pagehead__mark {
	background-color: var( --wp--preset--color--ivory );
	border: var( --qlp-edge );
	border-radius: var( --qlp-radius );
	box-shadow: var( --qlp-shadow );
	color: var( --wp--preset--color--muted-400 );
	display: block;
	justify-self: start;
	max-inline-size: 132px;
	padding: 16px 14px;
}

@media ( min-width: 720px ) {
	.qlp-pagehead__mark {
		justify-self: end;
		max-inline-size: 264px;
		padding: 26px 22px;
	}
}

.qlp-pagehead__mark svg,
.qlp-404__mark svg {
	display: block;
	inline-size: 100%;
}

/* The one gold element a family mark is allowed: its register line (C-06). */
.qlp-famark__gold {
	color: var( --wp--preset--color--gold-line );
}

/* ---------------------------------------------------------------------- *
 * 13. Quote desk (brief §5.9): an ivory desk sheet on a deep petrol ground.
 *     This is the CTA on every inner page.
 * ---------------------------------------------------------------------- */

.qlp-cta-desk {
	background-color: var( --wp--preset--color--petrol-950 );
	overflow: hidden;
	padding-block: var( --qlp-rhythm );
	position: relative;
}

.qlp-cta-desk__sheet {
	background-color: var( --wp--preset--color--ivory );
	border-radius: var( --qlp-radius );
	box-shadow: var( --qlp-shadow-deep );
	display: flex;
	flex-direction: column;
	gap: clamp( 16px, 1.6vw, 22px );
	margin-inline: auto;
	max-inline-size: 760px;
	padding: clamp( 30px, 2rem + 2vw, 56px );
	position: relative;
	z-index: 1;
}

.qlp-cta-desk__sheet .qlp-notice--cta-desk-heading {
	color: var( --wp--preset--color--petrol-800 );
	font-family: var( --qlp-font-display );
	font-size: clamp( 1.625rem, 1.3rem + 1.3vw, 2.25rem );
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0;
}

:lang(ar) .qlp-cta-desk__sheet .qlp-notice--cta-desk-heading {
	font-family: var( --wp--preset--font-family--cairo );
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.45;
}

.qlp-cta-desk__sheet .qlp-notice--cta-desk-line {
	color: var( --wp--preset--color--ink-700 );
	font-size: 1.0625rem;
	margin: 0;
	max-inline-size: 52ch;
}

.qlp-cta-desk__actions {
	margin-block-start: 0.25rem;
}

.qlp-cta-desk__actions .wp-block-buttons {
	margin: 0;
}

.qlp-cta-desk__reassurances {
	display: flex;
	flex-wrap: wrap;
	font-family: var( --qlp-font-ui );
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.6rem 1.6rem;
	list-style: none;
	margin: 0;
	margin-block-start: 0.5rem;
	padding: 0;
}

.qlp-cta-desk__reassurances li {
	align-items: center;
	color: var( --wp--preset--color--muted );
	display: flex;
	gap: 0.6em;
}

.qlp-cta-desk__reassurances .qlp-mark {
	color: var( --wp--preset--color--gold-line );
}

/* ---------------------------------------------------------------------- *
 * 14. Footer (DES-007)
 * ---------------------------------------------------------------------- */

.qlp-footer {
	background-color: var( --wp--preset--color--petrol-900 );
	color: var( --wp--preset--color--on-dark-muted );
	--qlp-focus: var( --wp--preset--color--gold-300 );
}

.qlp-footer__inner {
	display: grid;
	gap: clamp( 30px, 3vw, 48px );
	padding-block: clamp( 3rem, 2.2rem + 2.4vw, 5rem ) clamp( 2rem, 1.6rem + 1.4vw, 3rem );
}

@media ( min-width: 720px ) {
	.qlp-footer__inner {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 1024px ) {
	.qlp-footer__inner {
		grid-template-columns: minmax( 0, 4fr ) repeat( 3, minmax( 0, 2.6fr ) );
	}
}

.qlp-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.qlp-footer .qlp-brand {
	color: var( --wp--preset--color--on-dark );
}

.qlp-footer .qlp-brand__mark {
	color: var( --wp--preset--color--gold-300 );
}

/* VR-F014: the paragraph keeps the column's direction so it aligns with
   the rest of the column, and the `bdi` inside it carries the Latin run's
   character order. `direction: ltr` on the paragraph itself would flip its
   inline axis too, leaving the line flush against the wrong edge of the
   right-aligned Arabic column (L10N-006). */
.qlp-footer__legal-name {
	color: var( --wp--preset--color--on-dark-muted );
	font-family: var( --qlp-font-ui );
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	margin: 0;
	text-align: start;
}

.qlp-footer__legal-name bdi {
	unicode-bidi: isolate;
}

.qlp-footer__note {
	border-block-start: 1px solid rgb( 36 120 116 / 0.42 );
	color: var( --wp--preset--color--on-dark-muted );
	font-size: 0.875rem;
	margin: 0;
	max-inline-size: 34ch;
	padding-block-start: 14px;
}

.qlp-footer .qlp-footer__heading {
	color: var( --wp--preset--color--gold-300 );
	font-family: var( --qlp-font-ui );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	margin: 0;
	margin-block-end: 14px;
	text-transform: uppercase;
}

:lang(ar) .qlp-footer .qlp-footer__heading {
	letter-spacing: normal;
	text-transform: none;
}

.qlp-footer__links {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: 2px;
}

.qlp-footer__links a {
	color: var( --wp--preset--color--on-dark-muted );
	display: inline-block;
	font-size: 0.9375rem;
	min-block-size: 32px;
	padding-block: 5px;
	text-decoration: none;
}

.qlp-footer__links a:hover {
	color: var( --wp--preset--color--on-dark );
	text-decoration: underline;
	text-decoration-color: var( --wp--preset--color--gold-300 );
}

.qlp-footer__col {
	min-inline-size: 0;
}

/* ---------------------------------------------------------------------- *
 * 15. 404 (FR-007)
 * ---------------------------------------------------------------------- */

.qlp-404 {
	padding-block: clamp( 3.5rem, 2.5rem + 4vw, 7rem );
	position: relative;
}

.qlp-404__inner {
	display: grid;
	gap: clamp( 32px, 4vw, 64px );
}

@media ( min-width: 900px ) {
	.qlp-404__inner {
		align-items: center;
		grid-template-columns: minmax( 0, 7fr ) minmax( 0, 5fr );
	}
}

.qlp-404__text {
	display: flex;
	flex-direction: column;
	gap: clamp( 16px, 1.6vw, 22px );
	padding-inline-start: clamp( 18px, 1.8vw, 26px );
	position: relative;
}

.qlp-404__text::before {
	background-color: var( --wp--preset--color--gold-line );
	content: "";
	inline-size: 1px;
	inset-block: 4px;
	inset-inline-start: 0;
	position: absolute;
}

.qlp-404 .qlp-notice--404-heading {
	color: var( --wp--preset--color--petrol-800 );
	font-family: var( --qlp-font-display );
	font-size: clamp( 2rem, 1.5rem + 2.2vw, 3.25rem );
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0;
}

:lang(ar) .qlp-404 .qlp-notice--404-heading {
	font-family: var( --wp--preset--font-family--cairo );
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.4;
}

.qlp-404__text .qlp-textlink {
	align-self: flex-start;
}

.qlp-404 .qlp-notice--404-body {
	color: var( --wp--preset--color--ink-700 );
	font-size: 1.0625rem;
	margin: 0;
	max-inline-size: 46ch;
}

.qlp-404__mark {
	color: var( --wp--preset--color--muted-400 );
	justify-self: center;
	max-inline-size: 300px;
}

/* ---------------------------------------------------------------------- *
 * 16. Notices, FAQ disclosures and shared content forms
 * ---------------------------------------------------------------------- */

.qlp-notice {
	margin: 0;
}

.qlp-faq-list {
	display: flex;
	flex-direction: column;
}

.qlp-faq-item {
	border-block-start: 1px solid var( --qlp-rule );
}

.qlp-faq-item:last-child {
	border-block-end: 1px solid var( --qlp-rule );
}

.qlp-faq-item summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-family: var( --qlp-font-ui );
	font-weight: 600;
	gap: 1em;
	justify-content: space-between;
	list-style: none;
	min-block-size: 44px;
	padding-block: 1rem;
}

.qlp-faq-item summary::-webkit-details-marker {
	display: none;
}

.qlp-faq-item summary::after {
	background-color: var( --wp--preset--color--gold-line );
	block-size: 7px;
	content: "";
	flex: none;
	inline-size: 10px;
	-webkit-mask: url( assets/svg/chevron.svg ) no-repeat center / contain;
	mask: url( assets/svg/chevron.svg ) no-repeat center / contain;
	transition: transform var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out );
}

.qlp-faq-item[open] summary::after {
	transform: rotate( 180deg );
}

.qlp-faq-item > *:not( summary ) {
	padding-block-end: 1.1rem;
}

/* ---------------------------------------------------------------------- *
 * 17. Aligned sheets composition (brief §3, C-07)
 *     Offsets are logical; the stack order is swapped by direction so the
 *     reader's own language is always the front sheet. Nothing is flipped.
 * ---------------------------------------------------------------------- */

.qlp-sheets {
	display: grid;
	position: relative;
}

/* VR-F023. The stage is exactly two sheets wide: each sheet is 88 % of it
   and they are justified to opposite edges, so the composition always fills
   its container edge to edge. Wherever the container is the full content
   column -- which is every single-column layout below the point where the
   page splits into text and art -- that puts the front sheet's own border
   on the inline-start gutter line, the back sheet's on the inline-end one,
   and runs the gold register rule the whole width of the column, so the
   composition rules the page instead of sitting on it.

   Below 768 px the stage is therefore inset by one further gutter on each
   side and centred. The sheets scale with it (they are percentage-width SVG
   with a viewBox), the back one keeps its full offset behind the front, and
   the register line -- which is `inset-inline: 0` of the stage -- ends at
   the composition's own edges rather than at the column's. The brief asks
   for a rule that rules the composition (§3), not a full-bleed one, so only
   this needs to change.

   Two selectors, on purpose. The quote form's success composition (T059)
   uses the same `qlp-sheets` container class for a different, fixed-size
   drawing, so the bare class must not be targeted; both selectors below
   exclude it, because only this composition has `.qlp-sheet` children.

   `--stage` is the class the helper emits from now on. The structural
   selector beside it is what fixes the pages that are already published:
   the helper's output is baked into post content when a page is saved, so
   every page seeded before this change still carries the old markup and
   would otherwise keep the flaw until its next save. */
@media ( max-width: 767px ) {
	.qlp-sheets--stage,
	.qlp-sheets:has( > .qlp-sheet ) {
		margin-inline: auto;
		max-inline-size: calc( 100% - var( --qlp-gutter ) * 2 );
	}
}

.qlp-sheet {
	border-radius: var( --qlp-radius );
	grid-area: 1 / 1;
	inline-size: 88%;
}

.qlp-sheet--back {
	justify-self: end;
	margin-block-start: 0;
	z-index: 1;
}

.qlp-sheet--front {
	filter: drop-shadow( 0 22px 30px rgb( 16 59 58 / 0.22 ) );
	justify-self: start;
	margin-block-start: 34px;
	z-index: 2;
}

[dir="rtl"] .qlp-sheet--back {
	justify-self: start;
}

[dir="rtl"] .qlp-sheet--front {
	justify-self: end;
}

.qlp-sheets__register {
	align-items: center;
	display: flex;
	inset-block-start: 52%;
	inset-inline: 0;
	justify-content: flex-end;
	pointer-events: none;
	position: absolute;
	z-index: 3;
}

.qlp-sheets__register::before {
	background-color: var( --qlp-hairline );
	block-size: 1px;
	content: "";
	flex: 1;
}

.qlp-sheets__register i {
	background-color: var( --qlp-hairline );
	block-size: 13px;
	flex: none;
	inline-size: 1px;
}

/* ====================================================================== *
 * 18. MOTION — BEGIN (T103; MOT-001 to MOT-006, ADR-010 §1–§5)
 *
 *     Everything in this block, and nothing outside it, decides how the
 *     site moves. The component sections above own colour, box and type;
 *     where one of them carries a `transition` it is a hover or open/close
 *     feedback on a single component and is listed in the T103 motion
 *     inventory with this section as its token source.
 *
 *     The contract every page family builds on:
 *
 *       html.js           motion.js ran (set while the document parses)
 *       html.qlp-reduced  the visitor asked for reduced motion
 *       .qlp-reveal       block-axis reveal, gains .is-visible when seen
 *       .qlp-reveal--x    inline-axis reveal, enters from the inline start
 *       [data-qlp-delay]  1-4, staggers a reveal by 70 ms steps; pattern-
 *                         owned markup only. Core blocks stagger with a
 *                         modifier class and a transition-delay instead,
 *                         because an arbitrary data attribute does not
 *                         survive an editor re-save (T100 §4.5).
 *       .qlp-align        once-per-session alignment hook; motion.js adds
 *                         .is-aligned the first time it is seen and
 *                         .is-settled when the animation has finished
 *
 *     Three invariants hold for every rule below.
 *
 *     1. The settled state is the CSS default. Every starting state is
 *        gated on `html.js:not(.qlp-reduced)`, so a document with no
 *        JavaScript, or one whose visitor asked for less motion, is
 *        painted complete from the first frame (MOT-002, MOT-003).
 *     2. Only `opacity` and `transform` are animated on load. No rule here
 *        animates `height`, `inline-size`, `margin`, `padding`, `inset` or
 *        `font-size`, so motion contributes nothing to CLS (MOT-004).
 *     3. Anything that travels on the inline axis is multiplied by
 *        `--qlp-motion-x`, which is +1 in LTR and −1 in RTL, so the motion
 *        enters from the reading start in both languages (MOT-006).
 * ---------------------------------------------------------------------- */

/* --- 18.1 Page reveal ------------------------------------------------- *
 *
 *     The page reveal is the above-the-fold run of `.qlp-reveal` elements
 *     arriving in reading order: motion.js releases everything already at
 *     or above the fold as soon as it can query the document, so the page
 *     header (eyebrow, H1, lead, register line) rises the moment the
 *     document is interactive rather than waiting for an intersection that
 *     has already happened. There is deliberately no opacity animation on
 *     `body` or on `html`: fading the whole document delays the largest
 *     contentful paint by the length of the fade and promotes every glyph
 *     on the page to a composited layer for its duration, which is the
 *     cost VR-F016 was chasing. The reveal primitive below is the page
 *     reveal, the section reveal and the stagger, in one mechanism.
 * ---------------------------------------------------------------------- */

/* --- 18.2 Reveal primitive ------------------------------------------- */

.js:not( .qlp-reduced ) .qlp-reveal {
	opacity: 0;
	transform: translateY( var( --qlp-motion-distance ) );
	transition: opacity var( --qlp-motion-duration-base ) var( --qlp-motion-ease-out ),
		transform var( --qlp-motion-duration-base ) var( --qlp-motion-ease-out );
}

/* `will-change` is a promise to the compositor and a cost while it stands:
   it holds a layer open and switches that layer's text rasterisation. It is
   declared only while an element is still waiting to be revealed, and the
   `.is-visible` rule below retires it, so a settled page holds no layer
   this file asked for (MOT-004, VR-F016). */
.js:not( .qlp-reduced ) .qlp-reveal:not( .is-visible ) {
	will-change: opacity, transform;
}

.js:not( .qlp-reduced ) .qlp-reveal--x {
	transform: translateX( calc( var( --qlp-motion-distance ) * var( --qlp-motion-x ) * -1 ) );
}

.js:not( .qlp-reduced ) .qlp-reveal[data-qlp-delay="1"] {
	transition-delay: 70ms;
}

.js:not( .qlp-reduced ) .qlp-reveal[data-qlp-delay="2"] {
	transition-delay: 140ms;
}

.js:not( .qlp-reduced ) .qlp-reveal[data-qlp-delay="3"] {
	transition-delay: 210ms;
}

.js:not( .qlp-reduced ) .qlp-reveal[data-qlp-delay="4"] {
	transition-delay: 280ms;
}

.js:not( .qlp-reduced ) .qlp-reveal.is-visible {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* --- 18.3 The alignment ---------------------------------------------- *
 *
 *     The back sheet travels in from the inline start and the register
 *     line draws across. Transform and opacity only, never on a heading,
 *     and only the first time in a session (C-10).
 *
 *     `backwards`, not `both`: the animation needs its starting frame
 *     before it begins, and its last frame is the element's own default,
 *     so a forwards fill would only hold a value the cascade already
 *     supplies — at the price of an animation that never ends and a
 *     composited layer that is never released. `.is-settled`, which
 *     motion.js adds on `animationend`, takes the animation off the
 *     element altogether. Those two together are what make the JS-on
 *     render pixel-identical to the reduced-motion render (VR-F016).
 * ---------------------------------------------------------------------- */

.js:not( .qlp-reduced ) .qlp-align.is-aligned:not( .is-settled ) .qlp-sheet--back {
	animation: qlp-settle var( --qlp-motion-duration-slow ) var( --qlp-motion-ease-out ) backwards;
}

.js:not( .qlp-reduced ) .qlp-align.is-aligned:not( .is-settled ) .qlp-sheets__register {
	animation: qlp-rule var( --qlp-motion-duration-slow ) var( --qlp-motion-ease-out ) backwards;
}

@keyframes qlp-settle {
	from {
		transform: translate( calc( var( --qlp-motion-x ) * -30px ), -18px );
	}

	to {
		transform: translate( 0, 0 );
	}
}

@keyframes qlp-rule {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* --- 18.4 Navigation open -------------------------------------------- *
 *
 *     The compact menu is a native <details>; with the script present its
 *     panel is a sheet on the inline end (§10). It now arrives from the
 *     edge it is anchored to and the scrim fades under it, both on the
 *     compositor, both gated on `.qlp-js` so the unenhanced inline list is
 *     never animated. `--qlp-motion-x` makes the panel enter from the
 *     inline end in each direction: the right in English, the left in
 *     Arabic, which is the edge the panel sits on in that language.
 *
 *     Opening only, by decision rather than omission (Fable, Round 3, on
 *     T103 §6.3). Closing a <details> removes its content in the same
 *     frame, so an exit animation has to hold the element open in script,
 *     which would change when focus returns and when the rest of the page
 *     stops being inert. An instant close keeps both deterministic, and it
 *     is the reduced-motion render in any case.
 * ---------------------------------------------------------------------- */

.qlp-js:not( .qlp-reduced ) .qlp-menu__disclosure[open] .qlp-menu__panel {
	animation: qlp-panel-in var( --qlp-motion-duration-base ) var( --qlp-motion-ease-out ) backwards;
}

.qlp-js:not( .qlp-reduced ) .qlp-menu__disclosure[open] .qlp-menu__scrim {
	animation: qlp-scrim-in var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out ) backwards;
}

@keyframes qlp-panel-in {
	from {
		transform: translateX( calc( var( --qlp-motion-x ) * 100% ) );
	}

	to {
		transform: translateX( 0 );
	}
}

@keyframes qlp-scrim-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* --- 18.5 Feedback on interactive elements --------------------------- *
 *
 *     One duration and one easing for every hover, open and active state
 *     the site has, so the feedback reads as one system (MOT-001). The
 *     selector is zero-specificity (`:where()`), so a component that
 *     already declares its own transition above keeps it; this only fills
 *     in the ones that had none. Colour, background, border and mask move.
 *     The focus ring does not: a focus indicator has to appear in the
 *     frame the focus lands, so `outline` is deliberately absent here
 *     (WCAG 2.2 AA, A11Y-010).
 * ---------------------------------------------------------------------- */

.js:not( .qlp-reduced ) :where( a, button, summary, label, .qlp-btn, .wp-element-button, .wp-block-button__link ) {
	transition: background-color var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out ),
		border-color var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out ),
		color var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out ),
		text-decoration-color var( --qlp-motion-duration-fast ) var( --qlp-motion-ease-out );
}

/* --- 18.6 Reduced-motion parity -------------------------------------- *
 *
 *     The belt to §18's braces. Every starting state above is already
 *     gated on `html.js:not(.qlp-reduced)`, so this block exists for
 *     motion the theme does not own: a core block, a plugin, an embed.
 *     Delays are zeroed as well as durations — a 0.001 ms transition that
 *     still waits 280 ms before it runs is not an instant final state
 *     (MOT-002).
 * ---------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-delay: 0s !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-delay: 0s !important;
		transition-duration: 0.001ms !important;
	}
}

/* ====================================================================== *
 * 18. MOTION — END
 * ====================================================================== */

/* ---------------------------------------------------------------------- *
 * 19. Preview notice (T071-preview)
 *
 *     One calm system line above the header while the setup plugin's
 *     preview mode is on: paper ground, a rule below it, the verification
 *     mark and a sentence. It is printed server-side at `wp_body_open`, so
 *     it is in the document before anything paints and nothing below it
 *     ever moves; with preview mode off the element is simply absent and
 *     this section draws nothing.
 *
 *     The band runs the full width of the viewport and the line inside it
 *     starts on the same gutter as the header's wordmark, so the notice
 *     reads as part of the frame rather than a banner laid over it. Both
 *     directions come out of the logical properties; nothing is mirrored.
 * ---------------------------------------------------------------------- */

.qlp-preview-notice {
	align-items: center;
	background-color: var( --wp--preset--color--paper-200 );
	border-block-end: 1px solid var( --wp--preset--color--paper-300 );
	color: var( --wp--preset--color--ink-700 );
	display: flex;
	font-family: var( --qlp-font-ui );
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.6em;
	letter-spacing: 0.02em;
	line-height: 1.5;
	margin-block: 0;
	/* Full-bleed ground, content on the header's own gutter line: the
	   centring term collapses to the plain gutter below the content
	   width, which is exactly what `.qlp-wrap` does there. */
	padding-block: 9px;
	padding-inline: max( var( --qlp-gutter ), calc( ( 100% - var( --qlp-content ) ) / 2 ) );
}

.qlp-preview-notice::before {
	background-color: var( --wp--preset--color--gold-line );
	block-size: 15px;
	content: "";
	flex: none;
	inline-size: 15px;
	-webkit-mask: url( assets/svg/mark-verification.svg ) no-repeat center / contain;
	mask: url( assets/svg/mark-verification.svg ) no-repeat center / contain;
}

/* Arabic is not tracked, and takes the script's own leading (brief §4.2). */
:lang(ar) .qlp-preview-notice {
	font-size: 0.875rem;
	letter-spacing: normal;
	line-height: 1.7;
}