/*
 * Chennai Home Guide — base styles.
 *
 * theme.json is the source of truth for color/typography/spacing tokens.
 * This file covers resets and cross-cutting rules theme.json can't
 * express. See CLAUDE.md, "CSS Architecture."
 */

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

/*
 * Surface hierarchy (V3 Foundation Slice 1) -- four roles, all existing
 * theme.json tokens, none new:
 *   page canvas    -- "page-bg" (below), sitewide body background.
 *                      Previously defined but unused anywhere -- this is
 *                      that token's first real consumer, not a new
 *                      value. Subtle and warm deliberately, not another
 *                      neutral gray, so it reads as a considered choice
 *                      rather than a second "surface".
 *   card           -- "background" (white), unchanged: every card,
 *                      the header, and the footer already set this
 *                      explicitly, so they keep reading as a distinct
 *                      surface against the canvas below them.
 *   recessed/subtle -- "surface" (unchanged), via the existing
 *                      .chg-section--alt band (layout.css).
 *   inverse/dark   -- "accent-dark" (unchanged), via the existing
 *                      .chg-trust-stats band (patterns/front-page.css).
 * Project Detail (.chg-project-single) already pins its own body region
 * back to plain white via a local override, per a prior deliberate
 * "density audit" decision -- untouched by this change, and doesn't
 * conflict with it.
 */
body {
	margin: 0;
	background-color: var(--wp--preset--color--page-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Heading introducing a page section — used across pages, not one pattern. */
.chg-section__title {
	margin: 0 0 var(--wp--preset--spacing--md);
}

/*
 * Rendered by a Block Bindings source when a field is unset (e.g.
 * ProjectFieldBindings::UNAVAILABLE_HTML) — used across every entity's
 * detail page, not tied to one layout. Styled distinctly so "unknown"
 * can never be mistaken for a real value at a glance. Font-size is
 * explicitly fixed (Design System Slice 2) rather than inherited from
 * context — missing data must always read quieter than the real data
 * role it stands in for, even when it sits inside a large price/figure
 * element that would otherwise make it inherit an oversized size.
 */
.chg-unavailable {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	font-style: italic;
}

/*
 * Visually hidden until focused. This is WordPress's own long-standing
 * accessibility pattern (unchanged from core) — the !important rules are
 * intentional and necessary here: this class must reliably override any
 * conflicting positioning from blocks/patterns to keep the skip link and
 * other screen-reader-only text actually usable.
 */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.chg-skip-link {
	z-index: 100000;
}

.chg-skip-link:focus {
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	width: auto;
	padding: 1rem 1.5rem;
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/*
 * Design System Slice 1 — shared typographic primitives. Font-size is
 * deliberately excluded from both: each consumer keeps its own size so
 * existing size hierarchies (e.g. hero price > config-card price) aren't
 * flattened. Colour is excluded from .chg-eyebrow for the same reason —
 * some eyebrows are muted, one is accent-colored; context sets color.
 */
.chg-figure {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.chg-eyebrow {
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.05em;
}

@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;
	}
}

/* ---------- Section header (V3 Foundation Slice 1) ----------
 * Eyebrow + .chg-section__title (above) + optional description +
 * optional trailing action -- one composite pattern meant to work
 * across Homepage, Project Detail, Builder, Locality, and Blog, not
 * just the page that happened to invent it first. Moved here from
 * patterns/front-page.css (its only consumer until now) since base.css
 * loads on every page and front-page.css only loads on the front page --
 * no visual change to the homepage, same rules, just sourced from a
 * file already loaded there. .chg-section__description is new (the
 * "supporting description" slot didn't exist yet).
 */
.chg-section__eyebrow {
	margin: 0 0 0.25rem;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.chg-section__description {
	max-width: 42rem;
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
}

.chg-section__cta {
	margin: var(--wp--preset--spacing--md) 0 0;
}

.chg-section__cta a {
	font-weight: 600;
	text-decoration: none;
}

/* ---------- Button system (V3 Foundation Slice 1) ----------
 * One shared visual grammar for CTAs, reconciling several previously
 * independent one-off implementations. Existing consumers are folded in
 * via a shared selector where it was safe to do so without a markup
 * change (see patterns/archive-projects.css's .chg-archive-filters__submit);
 * .chg-header-cta (layout.css) and the HubSpot-rendered enquiry/AI-search
 * buttons are deliberately NOT touched here -- both are mid-flight/
 * out-of-scope work, not part of this foundation slice. New consumers
 * should apply .chg-btn directly. Icon-only variant reserved for a
 * future consumer (e.g. a future map/share control) -- not adopted
 * anywhere yet.
 */
.chg-btn,
.chg-archive-filters__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--sm);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chg-btn--primary,
.chg-archive-filters__submit {
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--background);
}

.chg-btn--primary:hover,
.chg-archive-filters__submit:hover {
	border-color: var(--wp--preset--color--accent-dark);
	background-color: var(--wp--preset--color--accent-dark);
	color: var(--wp--preset--color--background);
}

.chg-btn--secondary {
	border-color: var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--background);
	color: var(--wp--preset--color--foreground);
}

.chg-btn--secondary:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-dark);
}

.chg-btn--tertiary {
	min-height: auto;
	padding: 0.25rem 0;
	border: none;
	background: none;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.chg-btn--tertiary:hover {
	color: var(--wp--preset--color--accent-dark);
	text-decoration: underline;
}

.chg-btn--icon {
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
	border-color: transparent;
	background: none;
	color: var(--wp--preset--color--foreground);
}

.chg-btn--icon:hover {
	background-color: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--accent);
}

/* ---------- Empty-state panel (V3 Foundation Slice 1) ----------
 * For a whole section/list resolving to nothing yet (e.g. "No articles
 * published yet", a related-Projects grid, a zero-result archive) --
 * NOT the same thing as the existing .chg-empty-state (components/
 * detail-list.css, Support\GroupedFacts's per-field "currently being
 * researched" inline text), which stays exactly as it is and keeps its
 * own name so the two never collide. This is a new, separately-named,
 * block-level pattern: a quiet recessed panel, not an alarming error
 * state, no icon library, no fabricated copy -- the calling page
 * supplies its own honest message.
 */
.chg-empty-panel {
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.chg-empty-panel > *:first-child {
	margin-top: 0;
}

.chg-empty-panel > *:last-child {
	margin-bottom: 0;
}