/*
 * IQ Construct — base layer.
 *
 * SCOPE: this establishes the type system, link/focus behaviour and the motion
 * baseline. It does NOT restyle Woodmart's chrome by overriding its selectors —
 * Woodmart's own colour and typography options were realigned to these same
 * tokens in M2 instead, so the theme generates its CSS from the right values
 * rather than being fought with counter-rules. Every value below comes from
 * tokens.css; nothing is hardcoded.
 */

/* ── Type ─────────────────────────────────────────────────────────────────── */

/* Woodmart paints the body white from its own stylesheet, which outranks a bare
   `body` selector here. The child-theme body class is enough to win without
   resorting to !important — the value still comes from the token. */
body.wp-child-theme-iq-construct {
	background-color: var(--iq-ground);
}

body {
	font-family: var(--iq-font-body);
	font-size: var(--iq-size-body);
	line-height: var(--iq-leading-body);
	color: var(--iq-ink);
	background-color: var(--iq-ground);
	font-optical-sizing: auto; /* Newsreader carries an opsz axis */
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--iq-font-display);
	font-weight: 600;
	color: var(--iq-ink);
	letter-spacing: var(--iq-track-display);
	line-height: var(--iq-leading-tight);
	text-wrap: balance;
}

/* The width axis is spent on display type only — it is the face's characteristic
   move, and it stops being characteristic if everything is expanded. */
h1, h2 {
	font-stretch: var(--iq-display-stretch);
}

h1 { font-size: var(--iq-size-display-l); line-height: var(--iq-leading-display); }
h2 { font-size: var(--iq-size-h2); }
h3 { font-size: var(--iq-size-h3); }
h4 { font-size: var(--iq-size-h4); }
h5 { font-size: var(--iq-size-h5); }
h6 { font-size: var(--iq-size-h6); }

/* The Elementor kit previously sized h1–h6 in raw vw (h1 5.1vw desktop / 7.5vw
   mobile) with no floor and no ceiling: unreadable on a 320px phone, absurd on a
   wide monitor. Elementor's font-size control stores {unit,size,sizes} and cannot
   express clamp(), so those 24 kit settings were removed and the fluid scale lives
   here instead. Keep it that way — do not reintroduce sizes into the kit. */

p { text-wrap: pretty; }

/* ── Technical face ───────────────────────────────────────────────────────── */

.iq-mono,
.iq-label {
	font-family: var(--iq-font-mono);
	font-size: var(--iq-size-mono);
	font-weight: 500;
	letter-spacing: var(--iq-track-mono);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.iq-mono--micro { font-size: var(--iq-size-mono-micro); }

/* Dimensions and codes must not re-wrap or re-align between rows. */
.iq-dimension {
	font-family: var(--iq-font-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ── Links and focus ──────────────────────────────────────────────────────── */

a {
	color: var(--iq-signal);
	text-underline-offset: .18em;
	transition: color var(--iq-dur-micro) var(--iq-ease);
}

a:hover { color: var(--iq-signal-deep); }

/* Never remove the focus ring. It must stay visible on ground, surface and
   inverted contexts alike, so it is drawn with an offset outline rather than a
   background change. */
:focus-visible {
	outline: 2px solid var(--iq-signal);
	outline-offset: 2px;
	border-radius: var(--iq-radius-control);
}

.iq-invert :focus-visible {
	outline-color: var(--iq-inv-text);
}

/* ── Inverted context ─────────────────────────────────────────────────────── */

.iq-invert {
	background-color: var(--iq-inv-ground);
	color: var(--iq-inv-text);
}

.iq-invert h1,
.iq-invert h2,
.iq-invert h3,
.iq-invert h4,
.iq-invert h5,
.iq-invert h6 { color: var(--iq-inv-text); }

.iq-invert a { color: var(--iq-inv-text); }

/* ── Material ─────────────────────────────────────────────────────────────── */

/* The slab is the layout unit: one proportion, used everywhere material appears. */
.iq-slab {
	aspect-ratio: var(--iq-ratio-slab);
	border-radius: var(--iq-radius-material);
	overflow: hidden;
	background-color: var(--iq-ground-sunk);
}

.iq-slab > img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */

.iq-container {
	inline-size: min(100%, var(--iq-container));
	margin-inline: auto;
	padding-inline: var(--iq-gutter);
}

.iq-section { padding-block: var(--iq-section); }

/* ── Interaction floor ────────────────────────────────────────────────────── */

.iq-hit {
	min-block-size: var(--iq-hit);
	min-inline-size: var(--iq-hit);
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

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