/*
 * Goldendome — utility-page styles
 *
 * Shared across the four redesigned utility surfaces:
 *   - 404 (Page not found)
 *   - Search results
 *   - Author archive
 *   - Date / non-category archive
 *
 * Loaded conditionally via goldendome_enqueue_utility_page_css() in
 * functions.php on is_404() || is_search() || is_author() ||
 * (is_archive() && !is_category() && !is_tag() && !is_tax('season_new')).
 *
 * Phase 4c (2026-05-22) of the CSS rebuild — see
 * tasks/css-rebuild-plan.md Phase 4c.
 *
 * Markup contract:
 *   <main class="page page--utility">
 *     <div class="page">{breadcrumbs}</div>
 *     <div class="utility-layout">
 *       <header class="utility-header">…</header>
 *       <div class="utility-body">…surface-specific body…</div>
 *     </div>
 *   </main>
 *
 * Single column. No rail (utility pages are search-and-find surfaces;
 * the body IS the destination — a rail with "recent articles" would be
 * redundant when the body is itself a list of recent articles).
 */

/* ===== Page shell ==================================================== *
 * Inherits the .page max-width + page-pad base. Inside .page--utility,
 * the body+rail grid uses the article-template `.layout` directly so
 * the rail content (recent + ads, from template-parts/rail/*) lines up
 * with the article rail register without per-surface gap tuning. */

/* ===== Utility header ================================================ */

.utility-header {
	padding: 0 0 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--line-soft);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.utility-header__kicker {
	font-family: var(--font-mono);
	font-size: var(--type-mono-label-size);
	letter-spacing: var(--tracking-mono-loose);
	text-transform: uppercase;
	color: var(--nd-gold);
	font-weight: 700;
}
/* The .page parent prefix bumps specificity past .wf-active h1
 * (0,1,1 → 0,2,1) so Source Serif 4 wins regardless of Web Font Loader
 * timing. font-size uses !important because Jannah's customizer emits
 * `h1 { font-size: 34px !important }` — same fight as the article
 * headline (style.css §"Article header lockup"). */
.page--utility .utility-header__title {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 2.6vw, 2.5rem) !important;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
	color: var(--nd-navy);
	margin: 0;
	text-wrap: pretty;
}
.utility-header__title em,
.utility-header__title .utility-header__query {
	font-style: italic;
	color: var(--ink-2);
}
.utility-header__deck {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.45;
	color: var(--text-muted);
	margin: 0;
}

/* ===== Search form ==================================================== *
 * Reused by 404 (Page-not-found prompt) and search-results (refinement
 * input). Wraps WP's get_search_form() which emits
 *   <form role="search">
 *     <label>
 *       <span class="screen-reader-text">…</span>
 *       <input type="search" class="search-field" …>
 *     </label>
 *     <input type="submit" class="search-submit" …>
 *   </form>
 *
 * Layout: outer .utility-search has no padding/background of its own;
 * the form itself is a flex row with the input + button stretched to
 * the same height. Field height comes from `--utility-search-h` so
 * input + button line up regardless of font/padding inheritance from
 * the base styles. */

.utility-search {
	margin: 24px 0;
	max-width: 540px;
}
.utility-search form {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	margin: 0;
	--utility-search-h: 44px;
}
.utility-search label {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
}
.utility-search input[type="search"],
.utility-search input[type="text"] {
	flex: 1 1 auto;
	width: 100%;
	height: var(--utility-search-h);
	border: 1px solid var(--line);
	background: var(--card-raised);
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--text);
	padding: 0 14px;
	border-radius: var(--r-input);
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-sizing: border-box;
}
.utility-search input::placeholder {
	color: var(--ink-3);
}
.utility-search input:focus {
	border-color: var(--nd-green);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--nd-green) 14%, transparent);
}
.utility-search input[type="submit"],
.utility-search button[type="submit"] {
	flex: 0 0 auto;
	height: var(--utility-search-h);
	background: var(--nd-navy);
	color: #fff;
	border: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--tracking-mono-tight);
	text-transform: uppercase;
	padding: 0 22px;
	border-radius: var(--r-input);
	cursor: pointer;
	box-sizing: border-box;
}
.utility-search input[type="submit"]:hover,
.utility-search button[type="submit"]:hover {
	background: var(--accent-hover);
}

/* ===== Result list =================================================== *
 * Single-column stacked list of `.related-card` items. The `.related-card`
 * primitive (style.css §"Related articles") provides the thumb + kicker +
 * title + meta-mini structure; this surface lays them out vertically with
 * a horizontal layout per card (thumb left, text right) instead of the
 * 3-up grid used in the article-template related row. Pattern mirrors the
 * recent-item row used in the article rail. */

.utility-results {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.utility-results > li {
	border-bottom: 1px solid var(--line-soft);
}
.utility-results > li:last-child {
	border-bottom: 0;
}
.utility-results .related-card {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 24px;
	padding: 22px 0;
	align-items: start;
}
.utility-results .related-card .thumb {
	aspect-ratio: 16 / 9;
	border-radius: 3px;
	overflow: hidden;
}
.utility-results .related-card .title {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--nd-navy);
	line-height: 1.25;
	letter-spacing: -0.005em;
	margin: 2px 0 6px;
	text-wrap: pretty;
}
.utility-results .related-card .excerpt {
	font-family: var(--font-serif);
	font-size: 15px;
	line-height: 1.55;
	color: var(--ink-2);
	margin: 4px 0 8px;
	max-width: 65ch;
}
/* .utility-results .related-card .meta-mini → canonical .meta-mini (2026-06-06). */
.utility-results .related-card:hover .title {
	color: var(--accent-hover);
}

@media (max-width: 720px) {
	.utility-results .related-card {
		grid-template-columns: 120px 1fr;
		gap: 14px;
		padding: 18px 0;
	}
	.utility-results .related-card .excerpt {
		font-size: 14px;
	}
}

/* ===== Empty state =================================================== */

.utility-empty {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	font-style: italic;
	color: var(--text-muted);
	padding: 48px 0;
	text-align: center;
}

/* ===== 404 helper grid =============================================== */

.utility-body--404 {
	padding-top: 4px;
}
.utility-404-hint {
	font-family: var(--font-sans);
	font-size: var(--type-meta-size);
	color: var(--ink-3);
	letter-spacing: var(--tracking-mono-tight);
	text-transform: uppercase;
	font-weight: 700;
	margin: 32px 0 12px;
}
.utility-404-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}
.utility-404-links a {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--nd-navy);
	text-decoration: none;
	background: var(--card-raised);
}
.utility-404-links a:hover {
	border-color: var(--nd-navy);
	background: var(--bg-sunk);
}

/* ===== Author bio block (author archive only) ======================== *
 * Renders above the post list on /author/{slug}/ when the author has a
 * description. Reuses .bio-full (style.css §"Author bio (full)") — adds
 * a wrapper margin so it sits comfortably above the post list. The
 * .text line-clamp from the article-template variant is overridden
 * here because the author archive is the destination — show the full
 * bio rather than truncate to 3 lines. */

.utility-author-bio {
	margin: 0 0 36px;
}
.utility-author-bio .bio-full .text {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: unset;
	overflow: visible;
}

/* ===== Pagination ===================================================== *
 * Reuses .pagination-list + .pagination-row from category.css for
 * consistency. Add the wrapper margin here so .pagination-row's
 * top-margin doesn't compound with the post-list bottom-padding. */

.page--utility .pagination-row {
	margin-top: 36px;
}