/*
Theme Name: Car Seat & Stroller Fit
Theme URI: https://carseatstrollerfit.com/
Author: Car Seat & Stroller Fit
Description: Custom block theme for carseatstrollerfit.com — a neutral, cross-brand car-seat x stroller compatibility database. Faceted fit-finder homepage: two-picker seat + stroller finder over a browsable brand-pair matrix, warm blush canvas, berry-rose accent, three-state verdict chips (Fits / Adapter / No fit), monospace adapter part-number chips, cited data tables. No page builders, no external fonts.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: carseatfit
*/

/* ---- Header / footer band ---- */
.csf-band { background: var(--wp--preset--color--ink); }
.csf-band a { color: #f3dfe6; }
.csf-wordmark { font-weight: 700; letter-spacing: -0.02em; }
.csf-wordmark .csf-plus { color: var(--wp--preset--color--brand); font-weight: 800; }

/* ---- Search-first hero ---- */
.csf-hero { background: var(--wp--preset--color--brand); }
.csf-hero, .csf-hero :where(h1,h2,p) { color: #fff5f8; }
.csf-hero .csf-plus { color: #ffe08a; }
.csf-search .wp-block-search__input {
	border: 1px solid #d98cab;
	border-radius: 8px 0 0 8px;
	padding: 0.85rem 1rem;
	font-size: 1.05rem;
	background: #fff;
	color: var(--wp--preset--color--ink);
}
.csf-search .wp-block-search__button {
	background: var(--wp--preset--color--ink);
	color: #fff;
	border: 0;
	border-radius: 0 8px 8px 0;
	font-weight: 700;
	padding: 0 1.4rem;
}

/* ---- Verdict chips (the core data semantics) ---- */
.csf-verdict {
	display: inline-block;
	border-radius: 999px;
	padding: 0.1em 0.7em;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
	line-height: 1.5;
	white-space: nowrap;
}
.csf-verdict.is-fits { background: var(--wp--preset--color--fits); }
.csf-verdict.is-adapter { background: var(--wp--preset--color--adapter); }
.csf-verdict.is-nofit { background: var(--wp--preset--color--nofit); }

/* ---- Adapter part-number chips ---- */
.csf-part,
.wp-block-code {
	font-family: var(--wp--preset--font-family--mono);
}
.csf-part {
	display: inline-block;
	background: #f1e7ef;
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.06em 0.45em;
	font-weight: 600;
	font-size: 0.9em;
	letter-spacing: 0.01em;
}

/* ---- Data / compatibility tables ---- */
.csf-table table { border-collapse: collapse; width: 100%; background: #fff; }
.csf-table th, .csf-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
.csf-table thead th {
	background: var(--wp--preset--color--ink);
	color: #fdeef3;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}
.csf-table tbody tr:nth-child(even) td { background: var(--wp--preset--color--canvas); }

/* ---- Safety / confirm-before-you-buy disclaimer (danger only) ---- */
.csf-disclaimer {
	border: 1px solid var(--wp--preset--color--danger);
	border-left-width: 5px;
	background: #fdf2f1;
	border-radius: 6px;
	padding: 1rem 1.15rem;
}
.csf-disclaimer strong { color: var(--wp--preset--color--danger); }

/* ---- "Last verified" meta line ---- */
.csf-verified { color: var(--wp--preset--color--muted); font-size: 0.85rem; }

/* ---- Entry / hub cards ---- */
.csf-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: 1.1rem 1.15rem;
	height: 100%;
}
.csf-card h3 { margin-top: 0; }

/* ---- Breadcrumbs ---- */
.csf-crumbs { font-size: 0.85rem; color: var(--wp--preset--color--muted); }
.csf-crumbs a { color: var(--wp--preset--color--muted); }

/* ---- Content surface ---- */
.csf-surface { background: #fff; border: 1px solid var(--wp--preset--color--border); border-radius: 12px; }

/* ---- Brand wordmark / click-in connector logo ---- */
.csf-logo, .csf-logo:hover, .csf-logo:focus { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none !important; }
.csf-logo-mark { flex: 0 0 auto; display: block; }
.csf-logo .csf-wordmark { color: #fff; font-weight: 700; font-size: 1.3rem; line-height: 1.1; letter-spacing: -0.02em; text-decoration: none; }
.csf-band .csf-wordmark .csf-plus { color: #e784aa; margin: 0 0.06em; }

/* ---- Verdict chips: icon + word (never colour alone) ---- */
.csf-verdict::before { margin-right: 0.3em; font-weight: 700; }
.csf-verdict.is-fits::before { content: "\2713"; }   /* check */
.csf-verdict.is-adapter::before { content: "\21C4"; } /* two-way arrows = bridging adapter */
.csf-verdict.is-nofit::before { content: "\2715"; }   /* cross */

/* ---- Trust masthead (byline · verified date · source count) ---- */
.csf-masthead {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: 0.3rem 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 0.55rem 0; margin: 0.4rem 0 1.25rem;
	color: var(--wp--preset--color--muted);
}
.csf-masthead p { margin: 0; }
.csf-masthead strong { color: var(--wp--preset--color--ink); font-weight: 650; }
.csf-masthead .csf-date { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink); }

/* ---- Sources: proud, styled primary-source list ---- */
.csf-sources {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-left: 4px solid var(--wp--preset--color--brand);
	border-radius: 8px; padding: 1rem 1.2rem;
}
.csf-sources h2, .csf-sources h3 { margin-top: 0; }
.csf-sources ol { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.csf-sources li { margin: 0.35rem 0; font-size: 0.93rem; }

/* ---- Breadcrumb page-title crumb (page template) ---- */
.csf-crumbs .wp-block-post-title { margin: 0; font-weight: 400; font-size: 0.85rem; color: var(--wp--preset--color--muted); }

/* ---- Content form fields (contact / suggest-an-update) ---- */
.csf-surface input[type="text"], .csf-surface input[type="email"],
.csf-surface input[type="url"], .csf-surface input[type="tel"],
.csf-surface input[type="search"], .csf-surface textarea {
	width: 100%; max-width: 34rem; box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border); border-radius: 8px;
	padding: 0.55rem 0.7rem; font: inherit; font-size: 1rem;
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--ink);
}
.csf-surface textarea { max-width: 100%; }
.csf-surface input[type="submit"], .csf-surface button[type="submit"] {
	background: var(--wp--preset--color--brand); color: #fff; border: 0;
	border-radius: 8px; padding: 0.6rem 1.3rem; font-weight: 700; cursor: pointer;
}
.csf-surface input[type="submit"]:hover, .csf-surface button[type="submit"]:hover { filter: brightness(1.05); }

/* ---- Visible keyboard focus ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
.wp-block-search__input:focus-visible, .wp-block-search__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--brand); outline-offset: 2px;
}
.csf-band a:focus-visible, .csf-hero .wp-block-search__button:focus-visible { outline-color: #ffe08a; }

/* ---- Accessible visually-hidden helper ---- */
.csf-visually-hidden {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* ============================================================
   Faceted fit finder — the homepage signature (two pickers)
   ============================================================ */
.csf-finder-band {
	background: var(--wp--preset--color--brand);
	background-image: linear-gradient(180deg, #c23a6b 0%, #a72f5b 100%);
	padding: clamp(2.25rem, 1.5rem + 4vw, 4rem) var(--wp--preset--spacing--40);
}
.csf-finder-inner { max-width: 940px; margin: 0 auto; text-align: center; }
.csf-finder-h1 {
	color: #fff5f8; margin: 0 auto;
	font-size: clamp(1.9rem, 1.35rem + 2.6vw, 2.9rem);
	font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; max-width: 18ch;
}
.csf-finder-h1 .csf-plus { color: #ffe08a; }
.csf-finder-sub {
	color: #fbe4ec; max-width: 60ch; margin: 0.75rem auto 0;
	font-size: 1.05rem; line-height: 1.55;
}

/* The finder itself — two "connector tiles" that click together around the + */
.csf-finder {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	justify-content: center; gap: 0.55rem;
	margin: 1.6rem auto 0;
}
.csf-pick {
	display: flex; flex-direction: column; align-items: flex-start;
	gap: 0.25rem; text-align: left;
	background: #fff; border-radius: 12px;
	padding: 0.6rem 0.75rem 0.7rem;
	box-shadow: 0 6px 20px rgba(42, 34, 48, 0.18);
	min-width: 230px; flex: 1 1 230px; max-width: 300px;
}
.csf-pick-label {
	font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--wp--preset--color--brand);
}
.csf-pick select {
	width: 100%; border: 0; background: transparent;
	font: inherit; font-size: 1.05rem; font-weight: 600;
	color: var(--wp--preset--color--ink);
	min-height: 40px; cursor: pointer; padding: 0;
}
.csf-finder-plus {
	color: #ffe08a; font-weight: 800; font-size: 1.9rem; line-height: 1;
	padding-bottom: 0.75rem; user-select: none;
}
.csf-finder-go {
	background: var(--wp--preset--color--ink); color: #fff;
	border: 0; border-radius: 12px; cursor: pointer;
	padding: 0 1.5rem; min-height: 58px;
	font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em;
	box-shadow: 0 6px 20px rgba(42, 34, 48, 0.18);
}
.csf-finder-go:hover { filter: brightness(1.12); }

.csf-finder-legend {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 0.4rem 0.55rem; margin: 1.4rem auto 0;
}
.csf-finder-legend .csf-legend-note { color: #fbe4ec; font-size: 0.9rem; }
.csf-finder-browse { color: #fbe4ec; font-size: 0.9rem; margin: 0.9rem auto 0; }
.csf-finder-browse a { color: #fff; text-decoration: underline; }

/* ============================================================
   Brand-pair matrix — the browsable seat × stroller grid
   ============================================================ */
.csf-matrix-wrap {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px; background: var(--wp--preset--color--surface);
	margin-top: var(--wp--preset--spacing--40);
}
.csf-matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 620px; }
.csf-matrix th, .csf-matrix td {
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-right: 1px solid var(--wp--preset--color--border);
	text-align: center; padding: 0;
}
.csf-matrix thead th {
	background: var(--wp--preset--color--ink); color: #fdeef3;
	font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
	padding: 0.55rem 0.5rem; position: sticky; top: 0; z-index: 2;
}
.csf-matrix th[scope="row"] {
	background: var(--wp--preset--color--canvas); color: var(--wp--preset--color--ink);
	text-align: left; font-weight: 600; font-size: 0.9rem;
	padding: 0.55rem 0.75rem; position: sticky; left: 0; z-index: 1;
	white-space: nowrap;
}
.csf-matrix-corner {
	position: sticky; left: 0; z-index: 3;
	background: var(--wp--preset--color--ink) !important;
}
.csf-matrix-corner .csf-plus { color: #ffb3ce; font-weight: 800; font-size: 1.15rem; }
.csf-matrix td a {
	display: flex; align-items: center; justify-content: center;
	min-height: 44px; min-width: 44px; height: 100%;
	color: var(--wp--preset--color--nofit); font-size: 1.2rem; font-weight: 700;
	text-decoration: none; transition: background-color 0.12s ease, color 0.12s ease;
}
.csf-matrix td a:hover, .csf-matrix td a:focus-visible {
	background: #fbeaf1; color: var(--wp--preset--color--brand);
}

/* ============================================================
   Trust stat band (B-calibration furniture)
   ============================================================ */
.csf-statband {
	list-style: none; margin: 0; padding: 0.85rem 1.15rem;
	display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; justify-content: center;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px; font-size: 0.92rem; color: var(--wp--preset--color--muted);
}
.csf-statband li { position: relative; }
.csf-statband li + li::before {
	content: "·"; position: absolute; left: -0.9rem; color: var(--wp--preset--color--border);
}
.csf-statband b { color: var(--wp--preset--color--ink); font-weight: 700; }
.csf-statband .csf-date { font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink); }

/* ============================================================
   Dark mode — same tokens, hue kept, luminance lifted to AA.
   Additive only; the shipped light rendering is untouched.
   ============================================================ */
@media (prefers-color-scheme: dark) {
	:root {
		--wp--preset--color--ink: #f3e9ee;
		--wp--preset--color--canvas: #161014;
		--wp--preset--color--surface: #211820;
		--wp--preset--color--border: #35262f;
		--wp--preset--color--muted: #b6a7b0;
		--wp--preset--color--brand: #e06a96;
	}
	body { background: var(--wp--preset--color--canvas); color: var(--wp--preset--color--ink); }

	/* Header/footer bands must stay dark even though the ink token is now light */
	.csf-band, .has-ink-background-color { background-color: #1b131a !important; }
	.csf-band { color: #f0e6ec; }
	.csf-band :where(p, strong, li) { color: #f0e6ec; }
	.csf-band .has-surface-color { color: #f0e6ec !important; }
	.csf-band .has-border-color { color: #9c8f97 !important; }

	/* Hero: deepen the berry so light text keeps contrast */
	.csf-hero { background: #9e2f59; }
	/* Search button uses the ink token (now light) — force it dark so the label reads */
	.csf-search .wp-block-search__button { background: #2a1f28; color: #fff; }

	/* Surfaces & cards follow the surface token */
	.csf-card, .csf-surface { background: var(--wp--preset--color--surface); }

	/* Tables */
	.csf-table table { background: var(--wp--preset--color--surface); }
	.csf-table thead th { background: #2a1f28; color: #fdeef3; }
	.csf-table tbody tr:nth-child(even) td { background: #2a1f28; }

	/* Search input keeps a light field but forces dark text */
	.csf-search .wp-block-search__input { color: #2a2230; }

	/* Part-number chips */
	.csf-part { background: #3a2c36; color: #f3e9ee; border-color: #4a3a44; }

	/* Confirm-before-you-buy disclaimer */
	.csf-disclaimer { background: #2e1a1c; }
	.csf-disclaimer strong { color: #f2a59d; }

	/* Finder band — deepen the berry so light text keeps contrast */
	.csf-finder-band { background-image: linear-gradient(180deg, #9e2f59 0%, #7c2447 100%); }
	.csf-pick { background: #2a1f28; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); }
	.csf-pick select { color: #f3e9ee; }
	.csf-pick select option { background: #2a1f28; color: #f3e9ee; }
	.csf-finder-go { background: #17101a; }

	/* Matrix */
	.csf-matrix thead th { background: #2a1f28; color: #fdeef3; }
	.csf-matrix-corner { background: #2a1f28 !important; }
	.csf-matrix th[scope="row"] { background: #241922; color: #f3e9ee; }
	.csf-matrix td a:hover, .csf-matrix td a:focus-visible { background: #3a2331; color: #e06a96; }

	/* Stat band */
	.csf-statband { background: var(--wp--preset--color--surface); }
}