/*
 * VLINZZA — Base layer
 * Layer 2 of 4. Element defaults, typography, and the RTL/LTR corrections
 * this theme owns. Depends on tokens.css.
 *
 * Direction policy: physical properties (left/right/margin-left/text-align:
 * left) are not used. Everything is expressed with logical properties
 * (inline-start/inline-end, margin-inline, padding-block, text-align: start)
 * so a single stylesheet serves Arabic RTL and English LTR from one DOM.
 * This theme therefore ships no rtl.css.
 *
 * ---------------------------------------------------------------------------
 * Why this layer restates values that theme.json already sets
 *
 * WordPress deliberately emits root and element styles from theme.json at
 * element specificity and WITHOUT the `:root :where()` wrapper
 * (wp-includes/class-wp-theme-json.php, "Root selector (body) styles should
 * not be wrapped … to keep specificity at (0,0,1)"). GeneratePress emits its
 * Customizer typography at the same (0,0,1) — `body { font-size: 17px }`,
 * `h1 { font-size: 42px }` — from the dynamic `generate-style-inline-css`
 * block, which WordPress prints AFTER the global-styles block. At equal
 * specificity the later declaration wins, so the parent theme would silently
 * override the design system.
 *
 * This file is therefore the ENFORCEMENT layer: it restates the element
 * defaults at the same specificity but from a stylesheet that loads after
 * both, so the design system wins on order without `!important`.
 *
 * It restates the SELECTORS, never the VALUES: every declaration below reads a
 * `--vlz-*` token, and every one of those tokens resolves to a theme.json
 * preset (see assets/css/tokens.css). Changing a size or colour is still a
 * single edit in theme.json.
 * ---------------------------------------------------------------------------
 */

/* ---------------------------------------------------------------
 * Full-bleed safety — RETAINED after a redundancy review, 2026-08-04
 *
 * Original reason (Foundation Batch 1). GeneratePress makes .alignfull
 * full-bleed with
 *   .no-sidebar .entry-content .alignfull {
 *     margin-left:  calc(-100vw / 2 + 100% / 2);
 *     margin-right: calc(-100vw / 2 + 100% / 2);
 *     max-width: 100vw;
 *   }
 * (generatepress/assets/css/main.css — unchanged in 3.6.1). 100vw includes
 * the classic scrollbar width, so a full-bleed section resolves WIDER than the
 * client area. The overflow is symmetric, but in RTL the document scroll
 * origin is on the inline-start side, which makes it visible as a scrollable
 * gap.
 *
 * What changed. The VLINZZA Marketing Page no longer renders `.entry-content`
 * at all, and `.vlz-content` now owns alignment by releasing a max-width
 * instead of out-denting by 100vw (assets/css/global-classes.css). The parent
 * theme's mechanism therefore cannot fire inside the project boundary, and no
 * project rule uses 100vw.
 *
 * Redundancy test performed. The two declarations below were commented out,
 * synchronised and measured on foundation-pattern-test-ltr,
 * foundation-boundary-alignment and foundation-legacy-markup, at 1440 / 768 /
 * 390px, in LTR and in RTL: 18 of 18 measurements returned
 * scrollWidth - clientWidth = 0 with no overflowing element.
 *
 * Kept anyway, deliberately, for two reasons:
 *   1. Scope. This rule is global. Pages that do NOT use the marketing
 *      template still render `.entry-content`, so the parent theme's 100vw
 *      mechanism is still live for them. Removing the guard would change the
 *      rendering of output the project does not own, which is out of scope.
 *   2. Evidence. The harness runs headless with overlay scrollbars, where
 *      clientWidth equals innerWidth. The classic-scrollbar condition that
 *      originally produced the defect was therefore NOT reproduced, so the
 *      clean result above cannot by itself prove the rule redundant.
 *
 * overflow-x: clip is used rather than overflow-x: hidden because `hidden`
 * turns the element into a scroll container and would break position: sticky
 * on descendants. Sticky behaviour is a protected project requirement
 * (CLAUDE.md §7.6, component C-08), so `clip` is the only acceptable fix.
 * --------------------------------------------------------------- */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------
 * Typography base
 * --------------------------------------------------------------- */
body {
	font-family: var(--vlz-font-active, var(--wp--preset--font-family--ibm-plex-sans-arabic));
	font-size: var(--vlz-text-base);
	font-weight: var(--vlz-weight-regular);
	line-height: var(--vlz-leading-body);
	color: var(--vlz-color-text);
	background-color: var(--vlz-color-surface);
	text-align: start;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
	font-family: inherit;
	font-weight: var(--vlz-weight-bold);
	line-height: var(--vlz-leading-heading);
	color: var(--vlz-color-heading);
	text-wrap: balance;
}

h1 {
	font-size: var(--vlz-text-h1);
	line-height: var(--vlz-leading-tight);
	letter-spacing: var(--vlz-tracking-heading);
}

h2 {
	font-size: var(--vlz-text-h2);
	letter-spacing: var(--vlz-tracking-heading);
}

h3 {
	font-size: var(--vlz-text-h3);
}

h4 {
	font-size: var(--vlz-text-h4);
}

/*
 * Arabic script must never be letter-spaced: negative or positive tracking
 * breaks the cursive joining of letters. The heading tracking above is a
 * Latin-only refinement, so it is removed whenever the document (or an
 * element inside it) is Arabic.
 */
:lang(ar) h1,
:lang(ar) h2,
:lang(ar) h3,
:lang(ar) h4 {
	letter-spacing: var(--vlz-tracking-none);
}

p {
	margin-block: 0 var(--vlz-space-sm);
}

p:last-child {
	margin-block-end: 0;
}

/* ---------------------------------------------------------------
 * Links
 * --------------------------------------------------------------- */
a {
	color: var(--vlz-color-link);
	text-underline-offset: 0.15em;
}

a:hover,
a:focus-visible {
	color: var(--vlz-color-link-hover);
}

/* ---------------------------------------------------------------
 * Focus visibility
 *
 * Focus is never signalled by colour alone: a solid outline of a fixed width
 * is drawn with an offset, so it remains perceivable regardless of the
 * surface colour or of the reader's colour perception.
 * --------------------------------------------------------------- */
:focus-visible {
	outline: var(--vlz-focus-width) solid var(--vlz-color-focus);
	outline-offset: var(--vlz-focus-offset);
}

/* ---------------------------------------------------------------
 * Media
 * --------------------------------------------------------------- */
img,
picture,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------
 * Lists inside project sections keep their marker on the inline-start side
 * without a physical padding-left.
 * --------------------------------------------------------------- */
ul,
ol {
	padding-inline-start: var(--vlz-space-md);
	margin-block: 0 var(--vlz-space-sm);
}

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