/*
 * Apartment Cats: rules theme.json cannot express.
 * Load after the theme stylesheet. Colors come from the theme.json palette variables.
 */

/* Metric-matched fallbacks, so text does not move when the web fonts arrive (values from tools/check_design.py). */
@font-face {
	font-family: "Atkinson Fallback";
	src: local("Arial");
	size-adjust: 99.34%;
	ascent-override: 99.05%;
	descent-override: 31.81%;
	line-gap-override: 0%;
}
/* Bold text in the body face (labels, buttons, card titles) falls back to Arial Bold, scaled to Atkinson's bold
   width (theme 1.24.5, design audit: Atkinson bold ran 7.6% wider than the synthesized fallback bold, so bold lines
   broke differently when the font arrived on a slow connection). */
@font-face {
	font-family: "Atkinson Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 600 800;
	size-adjust: 99.76%;
	ascent-override: 99.05%;
	descent-override: 31.81%;
	line-gap-override: 0%;
}
@font-face {
	font-family: "Bricolage Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 700;
	/* 98.24% (was 99.59%): measured on guide headings, the fallback ran 1.3% wider than Bricolage (1.24.5). */
	size-adjust: 98.24%;
	ascent-override: 93.39%;
	descent-override: 27.11%;
	line-gap-override: 0%;
}

/* Light is the default for every reader, whatever their system setting (Bader, 16 Oct 2026, theme 1.5.0). Dark
   mode is only the header switch: html[data-theme="dark"], set in the head before paint from the saved choice. */
:root[data-theme="dark"] {
	--wp--preset--color--page: #0F1217;
	--wp--preset--color--surface: #171B22;
	--wp--preset--color--surface-2: #1F242D;
	--wp--preset--color--ink: #E9ECF2;
	--wp--preset--color--ink-2: #B8BFCC;
	--wp--preset--color--ink-3: #98A0AF;
	--wp--preset--color--line: #2E3542;
	--wp--preset--color--accent: #8FA8FF;
	--wp--preset--color--accent-hover: #B3C4FF;
	--wp--preset--color--accent-tint: #1C2747;
	--wp--preset--color--accent-ink: #0F1217;
	--wp--preset--color--warn-ink: #FF9C90;
	--wp--preset--color--warn-bg: #3A1A17;
	--wp--preset--color--vet-ink: #FFC266;
	--wp--preset--color--vet-bg: #33240D;
	--wp--preset--color--tip-ink: #7FD9A3;
	--wp--preset--color--tip-bg: #13301F;
}

:root {
	color-scheme: light;
	accent-color: var(--wp--preset--color--accent);
	caret-color: var(--wp--preset--color--accent);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* Spacing scale (theme 1.23.5; Bader, 22 Oct: "consistency in the space between every section"). block: between
	   boxed blocks in a column (share rows, What to buy, takeaways, callouts, tables, choosers, tools). card: between
	   cards in a list. section: the padding of every full-width band on the home page. */
	--ac-gap-block: clamp(1.5rem, 1.3rem + 0.6vw, 2rem);
	--ac-gap-card: 1rem;
	--ac-gap-section: 3rem;
}

/* The switch also sets the browser's own parts (scrollbars, form controls) to match. */
:root[data-theme="dark"] {
	color-scheme: dark;
}

::selection {
	background: var(--wp--preset--color--accent-tint);
	color: var(--wp--preset--color--ink);
}

/* Reading column: never wider than the content column, so text lines up with headings, boxes and images. The
   cap was 68ch (theme.json measure); it is now the same width in em, 44em, because a ch is the width of a zero in
   the font in use: 0.648em in Atkinson but 0.552em in the Arial fallback, so a 15px note was 567px wide until the
   font arrived and 660px after, and rewrapped on screen (theme 1.24.5, design audit). */
.entry-content > :where(p, ul, ol, blockquote) {
	max-width: min(44em, var(--wp--style--global--content-size, 680px));
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}
a:hover {
	text-decoration-thickness: 2px;
}

/* One visible focus style everywhere (WCAG 2.4.7 and 2.4.13). */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Tap targets of at least 44px for buttons and menu links (WCAG 2.5.8 asks for 24px; 44px is the comfortable size). */
.wp-element-button,
.wp-block-navigation-item__content,
.wp-block-search__button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Numbers line up in tables, spec cards and tool results. */
table,
.ac-spec,
.ac-result {
	font-variant-numeric: tabular-nums lining-nums;
}

/* Spec tables: the product name column stays put on phones, the rest scrolls sideways. */
.ac-spec-table {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--container);
}
.ac-spec-table table {
	border-collapse: separate;
	border-spacing: 0;
	min-width: 640px;
	width: 100%;
}
.ac-spec-table th,
.ac-spec-table td {
	padding: 0.75rem 0.9rem;
	text-align: left;
	vertical-align: top;
}
.ac-spec-table thead th {
	background: var(--wp--preset--color--surface-2);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink-2);
}
.ac-spec-table tbody tr + tr td,
.ac-spec-table tbody tr + tr th {
	border-top: 1px solid var(--wp--preset--color--line);
}
.ac-spec-table :where(th, td):first-child {
	position: sticky;
	left: 0;
	background: var(--wp--preset--color--surface);
	z-index: 1;
}

/* Callouts keep their meaning colors; shape and spacing are shared. */
.ac-callout {
	border-radius: var(--wp--custom--radius--container);
	padding: 1rem 1.15rem;
}
.ac-callout--vet { background: var(--wp--preset--color--vet-bg); color: var(--wp--preset--color--vet-ink); }
.ac-callout--warn { background: var(--wp--preset--color--warn-bg); color: var(--wp--preset--color--warn-ink); }
.ac-callout--tip { background: var(--wp--preset--color--tip-bg); color: var(--wp--preset--color--tip-ink); }
.ac-callout--note { background: var(--wp--preset--color--surface-2); color: var(--wp--preset--color--ink-2); }

/* Motion: one short transition for interactive states; none for readers who ask for less. */
.wp-element-button,
a {
	transition: background-color 160ms ease, color 160ms ease, text-decoration-thickness 160ms ease;
}
.wp-element-button:active {
	transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}