/* ==========================================================================
 * TYPE SCALE — the single source of truth for every font-size, line-height
 * and letter-spacing in this plugin.
 *
 * Transcribed from the Figma V2 variable collection (file 8EpY00T4Y4D6PW3YVc652t),
 * which defines TWO MODES. Desktop values come from the Styleguide node 50:1033;
 * mobile values from its mobile subsection 50:2184, cross-checked against the
 * mobile blocks canvas (521:16584).
 *
 * WHY THIS EXISTS
 * ---------------
 * Every widget used to hardcode raw px, and each `@media` block invented its own
 * mobile number. That is ~50 files x dozens of declarations of independent
 * opportunity to type the wrong value, with nothing tying any of it back to
 * Figma. It produced repeat "the fonts are wrong" rounds — including a 26px card
 * title that was not on the scale at all, and a mobile scale that had simply
 * never been implemented (Figma defines one; the build guessed).
 *
 * HOW TO USE
 * ----------
 *   font-size:      var(--nemra-t-h6-size);
 *   line-height:    var(--nemra-t-h6-lh);
 *   letter-spacing: var(--nemra-t-h6-ls);
 *
 * Mobile comes free — do NOT add a media query to restate a size. The values
 * below already switch at 991px (Elementor's tablet breakpoint, matching every
 * pre-existing override in this codebase).
 *
 * Raw px font-sizes in widgets/*.css are a lint failure — see
 * scripts/qa/lint-type-tokens.mjs. If a comp genuinely needs a value that is not
 * on the scale, add the token here with the Figma node that proves it; do not
 * inline the number.
 *
 * NOTE ON FAMILIES: the Figma collection binds `Font Family/ui` and
 * `Font Family/heading sans` to "42dot Sans" and the serif to "Merriweather" on
 * the stale token set. Neither ships. Current comps resolve to Poppins / Libre
 * Baskerville — see design-tokens.json `_deprecated_token_set`.
 * ========================================================================== */

:root {
	/* Display — H0. Same at both breakpoints. Home hero only. */
	--nemra-t-h0-size: 82px;  --nemra-t-h0-lh: 96px;   --nemra-t-h0-ls: -4px;

	/* Headings — sans (Poppins Medium 500) */
	--nemra-t-h1-size: 60px;  --nemra-t-h1-lh: 1.2;    --nemra-t-h1-ls: -1.5px;
	--nemra-t-h2-size: 48px;  --nemra-t-h2-lh: 1.2;    --nemra-t-h2-ls: -1.5px;
	--nemra-t-h3-size: 40px;  --nemra-t-h3-lh: 1.2;    --nemra-t-h3-ls: -1px;
	--nemra-t-h4-size: 32px;  --nemra-t-h4-lh: 1.2;    --nemra-t-h4-ls: -1px;

	/* Headings — serif (Libre Baskerville Regular 400) */
	--nemra-t-h5-size: 28px;  --nemra-t-h5-lh: 1.2;    --nemra-t-h5-ls: -0.5px;
	--nemra-t-h6-size: 24px;  --nemra-t-h6-lh: 28px;   --nemra-t-h6-ls: -0.5px;

	/* Body — Poppins */
	--nemra-t-b1-size: 20px;  --nemra-t-b1-lh: 1.5;    --nemra-t-b1-ls: 0;
	--nemra-t-b2-size: 14px;  --nemra-t-b2-lh: 1.6;    --nemra-t-b2-ls: 0;
	--nemra-t-b2b-size: 14px; --nemra-t-b2b-lh: 1.5;   --nemra-t-b2b-ls: 0;  /* 700 */
	--nemra-t-b3-size: 12px;  --nemra-t-b3-lh: 1.5;    --nemra-t-b3-ls: 0;

	/* UI */
	--nemra-t-btn-size: 14px; --nemra-t-btn-lh: 20px;  --nemra-t-btn-ls: 0;
	--nemra-t-l1-size: 12px;  --nemra-t-l1-lh: 1;      --nemra-t-l1-ls: 1.44px;  /* 12% */
	--nemra-t-l2-size: 10px;  --nemra-t-l2-lh: 1;      --nemra-t-l2-ls: 1px;     /* 10% */
	--nemra-t-llg-size: 12px; --nemra-t-llg-lh: 16px;  --nemra-t-llg-ls: 1px;
}

/* Mobile mode. Only the values that actually differ are restated — b2/b2b are
 * 14px in BOTH modes, which is why the most-used body size never looked wrong
 * on phones while everything around it did. */
@media ( max-width: 991px ) {
	:root {
		--nemra-t-h1-size: 48px;
		--nemra-t-h2-size: 36px;
		--nemra-t-h3-size: 32px;
		--nemra-t-h4-size: 28px;
		--nemra-t-h5-size: 24px;
		--nemra-t-h6-size: 20px;
		--nemra-t-b1-size: 16px;
		--nemra-t-b3-size: 10px;
		--nemra-t-btn-size: 12px;
		--nemra-t-l1-size: 10px;  --nemra-t-l1-ls: 1.2px;
		--nemra-t-l2-size: 8px;   --nemra-t-l2-ls: 0.8px;
	}
}

/*
 * NEMRA Blocks — shared widget styles.
 *
 * Per-widget layout/structural styles live in assets/css/widgets/*.css.
 * This file is for rules that must hold across every widget.
 */

/* Form controls do not inherit font-family — the UA default (Arial) wins
 * unless a rule sets it explicitly. Every unstyled <button> in a widget was
 * therefore rendering its label and its "→"/"‹" glyphs in Arial while the
 * text beside it was Poppins. Fixing that per widget means the next new
 * button reintroduces the bug, so it is asserted once, here.
 *
 * Only font-family is inherited on purpose: size and weight are set
 * deliberately by the widget sheets, and inheriting those would silently
 * resize controls that currently rely on the UA value. */
[class*="nemra-"] button,
[class*="nemra-"] input,
[class*="nemra-"] select,
[class*="nemra-"] textarea {
	font-family: inherit;
}

/* COVER IMAGES — read this before writing `height: 100%; object-fit: cover`.
 *
 * Elementor ships `.elementor img { height: auto }`. That is specificity
 * (0,1,1), so a widget rule written as `.nemra-x__photo-img { height: 100% }`
 * (0,1,0) LOSES to it. This was invisible for months: with no width/height
 * attributes on the tag, `height: auto` had no intrinsic ratio to resolve
 * against and the image filled its frame anyway. Once the image-optimisation
 * pass began emitting real dimension attributes, `auto` started resolving to
 * the intrinsic aspect ratio and every such image quietly grew past its
 * overflow:hidden frame — object-fit never applies, so a supposedly centred
 * crop silently became a top crop. On the single-article hero that meant a
 * 1353px image in a 575px window: all sky, no people.
 *
 * `inset: 0` does not rescue it either — an absolutely positioned REPLACED
 * element with height:auto still uses its intrinsic height.
 *
 * So: give any fill-the-frame image a two-class selector. Prefixing with
 * `.elementor` is the convention here — it reads as "outrank the reset" and
 * every widget renders inside that wrapper. `scripts/qa/img-overflow.mjs`
 * fails the build if one slips through. */

/* The house right-arrow, swapped in for the "→" character that ten widgets
 * used to print. Poppins has no U+2192 glyph, so every one of those fell back
 * to the platform symbol font and rendered in a different typeface from its
 * own label — and a different one per OS. Sized in `em` and stroked in
 * `currentColor` so it inherits whatever the span around it already set;
 * `vertical-align` sits it on the text baseline the character used to hold. */
.nemra-arrow__glyph {
	display: inline-block;
	vertical-align: -0.125em;
	flex: 0 0 auto;
}