/**
 * Base element styles.
 *
 * The minimal cross-browser baseline every page inherits: body
 * font/colour/line-height, heading typography, link colour, a visible
 * :focus-visible ring (WCAG 2.4.7), and the shared .sigma-button rule.
 * The button is the one deliberate exception to "nothing
 * component-specific lives here" (CONVENTIONS.md): it is rendered by
 * twelve different blocks, each block used to carry its own copy, and
 * that was exactly the bug -- three of those copies drifted to three
 * different horizontal paddings for what QA reported (correctly) as
 * the same button. One definition here, loaded before every block's
 * own stylesheet (inc/assets.php pins tokens.css then base.css first),
 * ends the drift regardless of load order.
 *
 * Type is set to the client's comps (docs/qa/comp-spec/SPEC-*.md): every
 * heading is Cormorant Garamond BOLD -- the PDFs embed
 * CormorantGaramond-Bold for the 70/46/40/30/26px runs and never the
 * Regular at those sizes. Body is the Regular at 20px on a 1.1 pitch
 * (22px per line, measured on the comps' paragraph runs). An earlier
 * version left headings at --weight-serif-regular, which rendered the
 * 70px headlines at 400 -- visibly lighter than the comp -- so the weight
 * is stated here rather than inherited.
 */

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

body {
	margin: 0;
	background-color: var(--color-white);
	color: var(--color-navy);
	font-family: var(--font-serif);
	font-size: var(--text-body);
	font-weight: var(--weight-serif-regular);
	line-height: var(--leading-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--font-serif);
	font-weight: var(--weight-serif-bold);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-heading);
}

h1 {
	font-size: var(--text-h1);
}

h2 {
	font-size: var(--text-h2);
}

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

/*
 * Below 768 a 70px headline is wider than the viewport on any real word
 * ("Confidential" alone is 420px at 70px), so h1/h2 step down to the
 * statement size. The comps have no mobile view; this is the smallest
 * step that keeps the display hierarchy (h1/h2 > statement > h3) intact.
 */
@media (max-width: 767px) {
	h1,
	h2 {
		font-size: var(--text-statement);
	}
}

p {
	margin: 0;
}

/*
 * The italic gold phrase inside a headline ("Sell it right.", "clients",
 * "Insights"): the comps set it in Cormorant Garamond Bold Italic at the
 * same size as the line it sits in, coloured --color-gold even on white --
 * COMPOSITION.md records that decision (the client asked for the comp's
 * colour at display size). Blocks that carry their own accent class
 * (.hero__accent etc.) are unaffected; this is the shared one.
 */
.accent {
	font-style: italic;
	font-weight: var(--weight-serif-italic);
	color: var(--color-gold);
}

a {
	color: var(--color-navy);
}

/*
 * The registry button every block above renders (hero, cta-band,
 * heading-text, stats-band/stat-band, two-door, media-text, card-pair,
 * value-prop, office-card, news-resources -- CONVENTIONS.md still has
 * each of those own its own layout, colour-on-its-own-background, and
 * margin/position; this is only the chrome and geometry that must be
 * identical everywhere. box-sizing: border-box makes min-width below a
 * true outer-box measurement, matching the comp's own BOX numbers
 * (SPEC-*.md, 316.2x33.0 and 227.3x33.0) instead of a min-width that
 * excludes the border and padding.
 *
 * Height is deliberately not a property here: 18px content (line-height
 * 1 on the 18px label) + 0.375rem padding-block each side (6px) + the
 * 1.5px border each side sums to the comp's 33px, but as a SUM rather
 * than a fixed height so a label the box can't fit on one line grows
 * the box instead of clipping it. white-space: nowrap is the other half
 * of that: with a min-width and no fixed width, a wrapped label would
 * otherwise still fit inside min-width and clip or reflow instead of
 * widening the box, which is what the client's longer approved labels
 * ("Get Your Confidential Valuation") need. Any block that stacks its
 * button to the full column width on mobile resets this back to normal
 * in its own @media block -- a wrapped label there is the wanted
 * behaviour, not a bug.
 */
.sigma-button {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding-block: 0.375rem;
	padding-inline: var(--space-lg);
	border: 1.5px solid var(--color-gold-bright);
	border-radius: var(--radius-none);
	box-shadow: var(--shadow-none);
	background-color: transparent;
	font-family: var(--font-sans);
	font-size: var(--text-button-label);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-button-label);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	color: var(--color-navy);
	cursor: pointer;
}

.sigma-button:not(.sigma-button--unlinked):hover,
.sigma-button:not(.sigma-button--unlinked):focus-visible {
	background-color: var(--color-gold-bright);
	color: var(--color-white);
}

/*
 * phase2_unlinked buttons render as an <a> with no href attribute at all
 * (every block's render.php) -- that already makes them non-focusable
 * and inert; this just signals the same thing visually instead of
 * looking like a live, dead-end button.
 */
.sigma-button--unlinked {
	cursor: default;
	opacity: 0.55;
}

/*
 * The navy-band swap, generalised: most blocks nest inside sigma/section
 * and key it off the ancestor's .sigma-section--bg-navy instead (their
 * own context-specific override, kept in each block's own stylesheet).
 * blocks/hero renders outside that wrapper and has no ancestor to key
 * off, so it flags the same swap on the button itself with this
 * modifier class.
 */
.sigma-button--inverse {
	border-color: var(--color-white);
	color: var(--color-white);
}

.sigma-button--inverse:not(.sigma-button--unlinked):hover,
.sigma-button--inverse:not(.sigma-button--unlinked):focus-visible {
	background-color: var(--color-white);
	color: var(--color-navy);
}

:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/*
 * Balanced line lengths on every display heading, in one place.
 *
 * A greedy wrap fills each line to the cap and drops whatever is left on
 * the last one, so a heading that runs a word or two past its width ends
 * with a single word hanging: "Since / 2003.", "...the next one on this /
 * page.". It is the most visible typographic defect this build has, it
 * moves with every copy change, and chasing it per heading is how the
 * gold accents moved three wraps in one afternoon (QA 810).
 *
 * Two blocks turned it on for themselves first -- blocks/hero (whose
 * comment carries the full measurement) and blocks/heading-text. The rest
 * are listed here rather than copied into twenty files, and the list is
 * explicit rather than a bare `h1, h2, h3` so that a heading which
 * genuinely wants a greedy wrap can simply stay off it.
 *
 * Verified before turning on, at 375 / 768 / 1024 / 1280 / 1366 / 1440
 * across all 31 pages: no heading changes its LINE COUNT anywhere, and on
 * the four pages whose headline the client actually drew nothing moves at
 * all. Browsers without support ignore the property and get today's wrap.
 */
.accordion__heading,
.card-pair__card-heading,
.cta-band__heading,
.faq__heading,
.faq__title,
.insights-feed__card-heading,
.media-text__heading,
.news-resources__heading,
.office-card__heading,
.sigma-form-embed__heading,
.stat-band__headline,
.stats-band__headline,
.team-cards__title,
.testimonials__heading,
.two-door__card-heading,
.value-prop__card-heading {
	text-wrap: balance;
}


/*
 * The touch floor, for every button the registry renders.
 *
 * The comp draws these at 32-33px, which is a mouse-and-1440 measurement:
 * it is 11px under the 44px minimum, and until now only phones got the
 * taller box. Tablets sat in the gap -- measured at 1024 on Businesses
 * For Sale, five buttons at 316x32 with a finger on them.
 *
 * Applied to the shared class rather than per block, because that per
 * block drift is exactly what this file exists to end. Above 1024 the
 * comp's own height is untouched.
 */
@media (max-width: 1024px) {
	.sigma-button {
		min-height: 2.75rem;
	}
}