/**
 * css/base.css — Base element styles for the lrxd theme.
 *
 * Establishes the foundational appearance of raw HTML elements using
 * design tokens from css/tokens.css. style.css cascades on top and may
 * add to or override any declaration here.
 *
 * Rules:
 *   - All values must reference var(--…) tokens. No hex literals.
 *   - No @layer (project decision).
 *
 * Load order: tokens → reset → base → style → theme
 */

/* ─── Root ───────────────────────────────────────────────────────────────── */

html {
	font-size:                var(--font-size-base);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

/* ─── Body ───────────────────────────────────────────────────────────────── */

body {
	color:       var(--base-text-color);
	background:  var(--base-background-color);
	font-family: var(--base-font-family);
	font-size:   var(--font-size-base);
	line-height: var(--line-height-base);
	min-width:   var(--base-min-width);
	margin:      0;
}

/* ─── Headings ───────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
	color:       var(--headings-color);
	line-height: 1.3;
	margin:      0 0 15px;
}

/* H1 = Tungsten Narrow Bold, H2 = Averta Std Semibold (#302); H3–H6 stay on Noe Text. */
/* #326: ALL CAPS on every H1, per the CD (2026-08-05).
 *
 * Done in CSS, not by re-typing the ACF copy: the underlying text stays
 * mixed-case, so the document outline, <title>, search results, social
 * shares and the accessible name are unchanged, and it reverts in one line.
 *
 * A bare element selector is genuinely enough here — unlike font-family in
 * #325. Checked before writing it: nothing in css/, style.css or theme.css
 * sets text-transform on an h1 or on any of the four H1 component classes
 * (.cg-hero__title, .cg-case-hero__title, .cg-work-hero__title,
 * .cg-blog-title), so there is no (0,1,0) declaration for this one to lose
 * to. Adding [class] here would be copying #325's fix without its reason.
 */
h1 {
	font-family: var(--h1-font-family);
	font-weight: 700;
	text-transform: uppercase;
}

h2 {
	font-family: var(--h2-font-family);
	font-weight: 600;
}

/* #325: the rule above reaches only *unclassed* <h2>s, which is almost none
 * of them — so item 6 of the CD's edit list ("H2 headers -> Averta Std
 * Semibold") rendered nowhere. A browser sweep of 19 pages found 0 of 167
 * H2s on Averta; every one carried a component class that sets font-family
 * itself, and a class (0,1,0) beats a bare element selector (0,0,1):
 * `.cg-statement` and `.cg-h3` (css/components/type.css) and
 * `.cg-work-tile__name` all force var(--font-serif). This is the
 * "companion CSS" trap in docs/2.0-system-guide.md §2.
 *
 * `h2[class]` raises this to (0,1,1) so it clears those, and the two
 * :not()s add (0,1,0) each for a total of (0,3,1) — enough to also clear
 * any (0,2,0) descendant rule, with no !important (locked rule).
 *
 * The exclusions are CD item 8, not an oversight: `.cg-believe__word` and
 * `.cg-caps__word` are the Tungsten Narrow giant-word treatment (#304),
 * and blocks/cg/giant-word.php:51,104 print both with a variable tag, so
 * either can land on an <h2> and must keep Tungsten.
 *
 * Scope is deliberately tag-literal per the CD's 2026-08-05 decision:
 * every <h2>, including card and tile titles, not just the 43.2px
 * statement tier. Known accepted consequence — blocks/content.php:68 and
 * blocks/content-work.php:59 render one card component with a `level`
 * arg, so `.cg-article-card__title` is an h2 18x on /blog/ and an h3 12x
 * elsewhere: visually identical cards now carry two different faces. The
 * CD was shown this before choosing. See #325.
 */
h2[class]:not(.cg-believe__word):not(.cg-caps__word) {
	font-family: var(--h2-font-family);
	font-weight: 600;
}

h3,
h4,
h5,
h6 {
	font-family: var(--headings-font-family);
	font-weight: 700;
}

h1 { font-size: var(--h1-font-size); }
h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
h5 { font-size: var(--h5-font-size); }
h6 { font-size: var(--h6-font-size); }

/* ─── Links ──────────────────────────────────────────────────────────────── */

a {
	color:           var(--base-link-color);
	text-decoration: none;
}

/* ─── Paragraphs ─────────────────────────────────────────────────────────── */

p {
	margin: 0 0 20px;
}

/* ─── Lists ──────────────────────────────────────────────────────────────── */

/*
 * Zero browser-default list margins/padding. style.css overrides with
 * custom bullet styling via ul:not([class]) and counter-based ol rules.
 */

ul,
ol {
	margin:  0;
	padding: 0;
}

/* ─── Images / media ─────────────────────────────────────────────────────── */

/*
 * img intentionally stays inline (no display:block) — style.css uses
 * `vertical-align:top` to suppress the descender gap; block display
 * would shift wrapped-image layouts in post content.
 */

img {
	max-width: 100%;
	height:    auto;
}

picture {
	display: block;
}

figure {
	display: block;
}

/* ─── Forms ──────────────────────────────────────────────────────────────── */

form,
fieldset {
	margin:       0;
	padding:      0;
	border-style: none;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea {
	background:    var(--form-element-background);
	border-bottom: 3px solid var(--form-element-border-color);
	color:         var(--placeholder-color);
	height:        var(--form-element-height);
	padding:       var(--form-element-padding);
	font-size:     var(--form-font-size);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	background:  transparent;
	border:      2px solid var(--form-element-border-color);
	cursor:      pointer;
	transition:  color var(--time), background var(--time), border var(--time);
}

/* ─── Accessibility utilities ────────────────────────────────────────────── */

/*
 * Visually hide an element while keeping it in the accessibility tree and the
 * raw HTML (unlike .screen-reader-text, which uses display:none and is dropped
 * by axe-core / assistive tech). Used for the structural <h1> on templates
 * whose visible title lives inside a decorative hero. Clip-based per WHATWG.
 */
.visually-hidden {
	position:    absolute;
	width:       1px;
	height:      1px;
	margin:      -1px;
	padding:     0;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	clip-path:   inset(50%);
	white-space: nowrap;
	border:      0;
}