/**
 * css/components/template-search-404.css — Website 2.0 generic system
 * templates (#129)
 *
 * search.php reuses `.cg-blog-band`/`.cg-blog-head`/`.cg-blog-title`
 * (css/components/template-blog.css, #67) verbatim for its header +
 * `.article-item.cg-article-card` for the grid — no new rules needed
 * for either. This file covers the two pieces neither template-blog.css
 * nor the rest of the shared component library already own:
 * searchform.php's native `<form>` (WordPress core's `get_search_form()`
 * / search widget, NOT a Gravity Forms wrapper — css/components/
 * forms.css is `.gform_wrapper`-scoped) and 404.php's standalone ink
 * CTA band.
 *
 * Tokens only — no raw hex, no @layer, no !important.
 */

/* ------------------------------------------------------------------ *
 * searchform.php — native WP search form, restyled to the #54 form/
 * button tokens. See searchform.php's docblock: currently has no live
 * render path, restyled anyway per #129's explicit file scope.
 * ------------------------------------------------------------------ */

.cg-search-form__fieldset {
	display: flex;
	align-items: stretch;
	gap: 16px;
	max-width: 480px;
	border: 0;
	margin: 0;
	padding: 0;
}

.cg-search-form__input {
	flex: 1;
	min-width: 0;
	height: var( --form-element-height );
	border: 0;
	border-bottom: var( --hairline ) solid var( --form-element-border-color );
	background: var( --form-element-background );
	font-family: var( --font-body );
	font-size: 16px;
	color: var( --text );
	transition: border-color var( --fade-out ) var( --fade-ease );
}

.cg-search-form__input:focus,
.cg-search-form__input:focus-visible {
	outline: 2px solid var( --accent );
	outline-offset: 2px;
	border-bottom-color: var( --form-element-focus-border-color );
}

.cg-search-form__submit {
	flex: none;
}

/* ------------------------------------------------------------------ *
 * 404.php — "Oops." (CD, 2026-09-04). The Contact hero's shape on cream:
 * giant condensed word, lede, a way home; then the shared
 * `.cg-latest-work` band (css/components/template-single-work.css), which
 * needs nothing added here.
 * ------------------------------------------------------------------ */

.cg-404 {
	display: flex;
	align-items: center;
	min-height: 60vh;
}

/*
 * `flex: 1` is load-bearing, not decoration. `.cg-404` is a flex container
 * (for the vertical centring inherited from the #129 band), so without it the
 * inner is a shrink-to-fit flex item: measured 480px at BOTH 1440 and 1920,
 * i.e. sized by the lede's longest line rather than by the layout. That made
 * `.cg-404__lede`'s 805px cap unreachable and left longer copy wrapping at
 * 480px on a 1920px screen. Filling the row hands the width back to the two
 * max-widths that are supposed to own it.
 */
.cg-404__inner {
	flex: 1;
	max-width: 1100px;
}

.cg-404__eyebrow {
	margin: 0 0 24px;
}

/*
 * Mirrors `.cg-contact2__title` (css/components/template-contact.css) — the
 * design's 327px H1 on a 1920px canvas expressed as 327/1920 ≈ 17vw, so it
 * tracks the same proportion at every viewport instead of stepping between
 * breakpoints. Deliberately a COPY, not a shared class: the CD asked for the
 * Contact treatment on this page today, which is not the same as promising
 * the 404 will follow the Contact page's Figma frame forever.
 */
.cg-404__title {
	margin: 0 0 40px;
	font-family: var( --font-condensed );
	font-weight: 700;
	font-size: clamp( 56px, 17vw, 327px );
	line-height: 0.88;
	letter-spacing: -2px;
	text-transform: uppercase;
	color: var( --accent );
}

.cg-404__lede {
	max-width: 805px; /* matches the Contact hero's "Intro copy, 805 wide" */
	margin: 0 0 42px;
}

@media ( max-width: 767px ) {

	.cg-404__title {
		letter-spacing: 0;
	}
}