/*
Theme Name: EV Model Compare
Theme URI: https://evmodelcompare.com/
Author: EV Model Compare
Description: Purpose-built block theme for evmodelcompare.com. Eco-tech design system, first-class dark mode, self-hosted variable fonts, no jQuery and no third-party requests.
Version: 1.0.36
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: evmodelcompare
Tags: full-site-editing, block-theme, dark-mode, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   Design tokens.

   theme.json points every palette entry at one of these custom properties, so
   a block colour class and a hand-written rule always resolve to the same value
   and both follow the theme automatically. The palette is defined once for
   light, then redefined for dark in two places: the system preference, and an
   explicit data-theme override so the toggle can win in both directions.
   --------------------------------------------------------------------------- */

:root {
	color-scheme: light;

	--evmc-base:        #ffffff;
	--evmc-surface:     #f4f7f5;
	--evmc-surface-2:   #e9efec;
	--evmc-contrast:    #0d1b17;
	--evmc-muted:       #4d5f58;
	/* Frame weight is NOT symmetric between the schemes at equal contrast ratio.
	   Measured 2026-09-14: the light border was #dbe3df (1.31:1 on white) and the
	   dark one #22302b (1.38:1 on its base) - near-identical ratios, yet the light
	   cards read as unframed while the dark ones read as boxes. A light line on
	   white sits at the top of the eye's adaptation range, where the same ratio
	   carries far less signal. So light gets its own, firmer step rather than a
	   ratio copied from dark: card and table frames now land at 1.76:1 and the
	   firm step at 2.31:1, which also gives form controls a visible boundary. */
	--evmc-border:      #b9c6c0;
	--evmc-border-firm: #9cafa6;

	/* Accent carries meaning: it marks the better value in a comparison.
	   Chosen to clear 4.5:1 on the light base, not just to look electric. */
	--evmc-accent:      #007a48;
	--evmc-accent-soft: #e2f6ec;
	--evmc-accent-line: #00a35f;

	--evmc-warn:        #8a5200;
	--evmc-warn-soft:   #fdf3e2;
	--evmc-danger:      #a51f1f;
	--evmc-danger-soft: #fceded;


	/* Chart series. Four lines have to be told apart at 3px on the page
	   background, so each scheme gets its own set rather than one compromise
	   pair. Line style differs too - colour is never the only signal. */
	--evmc-series-1:    var(--evmc-accent);
	--evmc-series-2:    #1c5fbf;
	--evmc-series-3:    #a2560a;
	--evmc-series-4:    #a3236a;
	--evmc-shadow:      0 1px 2px rgba(13, 27, 23, .06), 0 8px 24px -12px rgba(13, 27, 23, .18);
	--evmc-radius:      10px;
	--evmc-radius-sm:   6px;

	--evmc-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--evmc-font-display: "Plus Jakarta Sans", var(--evmc-font-body);
	--evmc-font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--evmc-base:        #0b1210;
		--evmc-surface:     #121b18;
		--evmc-surface-2:   #1a2521;
		--evmc-contrast:    #eaf2ee;
		--evmc-muted:       #9cb0a8;
		--evmc-border:      #22302b;
		--evmc-border-firm: #35473f;

		--evmc-accent:      #2ee68f;
		--evmc-accent-soft: #0e2a1e;
		--evmc-accent-line: #2ee68f;


		--evmc-series-1:    var(--evmc-accent);
		--evmc-series-2:    #7fb3ff;
		--evmc-series-3:    #ffb457;
		--evmc-series-4:    #ff8fa3;
		--evmc-warn:        #f0b849;
		--evmc-warn-soft:   #2c2110;
		--evmc-danger:      #ff8a80;
		--evmc-danger-soft: #2d1414;

		--evmc-shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -14px rgba(0, 0, 0, .8);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--evmc-base:        #0b1210;
	--evmc-surface:     #121b18;
	--evmc-surface-2:   #1a2521;
	--evmc-contrast:    #eaf2ee;
	--evmc-muted:       #9cb0a8;
	--evmc-border:      #22302b;
	--evmc-border-firm: #35473f;

	--evmc-accent:      #2ee68f;
	--evmc-accent-soft: #0e2a1e;
	--evmc-accent-line: #2ee68f;


	--evmc-series-1:    var(--evmc-accent);
	--evmc-series-2:    #7fb3ff;
	--evmc-series-3:    #ffb457;
	--evmc-series-4:    #ff8fa3;
	--evmc-warn:        #f0b849;
	--evmc-warn-soft:   #2c2110;
	--evmc-danger:      #ff8a80;
	--evmc-danger-soft: #2d1414;

	--evmc-shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 10px 30px -14px rgba(0, 0, 0, .8);
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */

body {
	background: var(--evmc-base);
	color: var(--evmc-contrast);
	font-family: var(--evmc-font-body);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title {
	font-family: var(--evmc-font-display);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

p, li { text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.16em; text-decoration-thickness: from-font; }
a:hover { text-decoration-thickness: 2px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--evmc-accent-line);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Respect the setting instead of animating over it. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

.evmc-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: .75rem 1.25rem;
	background: var(--evmc-contrast);
	color: var(--evmc-base);
	border-radius: 0 0 var(--evmc-radius-sm) 0;
}
.evmc-skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------------
   Header, footer and the theme toggle
   --------------------------------------------------------------------------- */

/* Published as a variable so the sticky table head in blocks.css can dock
   beneath the header instead of behind it. */
:root { --evmc-header-h: 3.75rem; }

.evmc-header {
	border-bottom: 1px solid var(--evmc-border);
	background: color-mix(in srgb, var(--evmc-base) 88%, transparent);
	backdrop-filter: saturate(140%) blur(8px);
	position: sticky;
	top: 0;
	z-index: 20;
}

.evmc-theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	border: 1px solid var(--evmc-border-firm);
	background: transparent;
	color: inherit;
	border-radius: 999px;
	padding: .38rem .7rem;
	font: inherit;
	font-size: .8125rem;
	cursor: pointer;
	line-height: 1;
}
.evmc-theme-toggle:hover { background: var(--evmc-surface); }
.evmc-theme-toggle svg { width: 1em; height: 1em; }
.evmc-theme-toggle .evmc-icon-sun  { display: none; }
:root[data-theme="dark"] .evmc-theme-toggle .evmc-icon-sun,
:root:not([data-theme="light"]) .evmc-theme-toggle .evmc-icon-sun { display: inline; }
:root[data-theme="dark"] .evmc-theme-toggle .evmc-icon-moon,
:root:not([data-theme="light"]) .evmc-theme-toggle .evmc-icon-moon { display: none; }
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .evmc-theme-toggle .evmc-icon-sun  { display: none; }
	:root:not([data-theme="dark"]) .evmc-theme-toggle .evmc-icon-moon { display: inline; }
}

.evmc-footer {
	border-top: 1px solid var(--evmc-border);
	background: var(--evmc-surface);
	color: var(--evmc-muted);
	font-size: .875rem;
}

/* Footer links sat close enough together to fail the 24px minimum touch
   target on a phone. Padding the anchors rather than the list items keeps the
   whole tappable area inside the link. */
.evmc-footer li { margin-block: 0; }
.evmc-footer li a {
	display: inline-block;
	padding-block: .3rem;
	min-height: 24px;
}
.evmc-footer ul { display: grid; gap: .15rem; }

/* ---------------------------------------------------------------------------
   Editorial content
   --------------------------------------------------------------------------- */

.evmc-prose > * + * { margin-block-start: 1.1em; }
.evmc-prose h2 { margin-block-start: 2.2em; }
.evmc-prose h3 { margin-block-start: 1.7em; }
.evmc-prose :is(h2, h3) + * { margin-block-start: .6em; }

.evmc-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}
.evmc-prose :is(th, td) {
	border-bottom: 1px solid var(--evmc-border);
	padding: .6rem .75rem;
	text-align: left;
}
.evmc-prose th { background: var(--evmc-surface); font-weight: 600; }

.evmc-prose blockquote {
	border-left: 3px solid var(--evmc-accent-line);
	padding-left: 1.1rem;
	margin-left: 0;
	color: var(--evmc-muted);
}

/* Any wide element scrolls inside its own box; the page itself never does. */
.evmc-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }

/* ---------------------------------------------------------------------------
   Cards and shared furniture
   --------------------------------------------------------------------------- */

.evmc-card {
	background: var(--evmc-base);
	border: 1px solid var(--evmc-border);
	border-radius: var(--evmc-radius);
	box-shadow: var(--evmc-shadow);
	overflow: hidden;
}

.evmc-tag {
	display: inline-block;
	font-size: .6875rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .2rem .5rem;
	border-radius: 999px;
	background: var(--evmc-surface-2);
	color: var(--evmc-muted);
}
.evmc-tag--estimate { background: var(--evmc-warn-soft); color: var(--evmc-warn); }
.evmc-tag--good     { background: var(--evmc-accent-soft); color: var(--evmc-accent); }
.evmc-tag--risk     { background: var(--evmc-danger-soft); color: var(--evmc-danger); }

.evmc-source {
	font-size: .75rem;
	color: var(--evmc-muted);
}
.evmc-source a { color: var(--evmc-accent); }

.wp-block-post-featured-image img { border-radius: var(--evmc-radius); }

/* Query-loop cards (home "Latest EV models" / "Analysis", archives in grid layout).
   They had no frame at all, so on the white theme titles from neighbouring cards ran
   together; they now carry the same frame as the comparison cards above them. Grid
   layouts only - list-layout loops stay as rows. */
.wp-block-post-template.is-layout-grid > .wp-block-post {
	border: 1px solid var(--evmc-border);
	border-radius: var(--evmc-radius);
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 0;
}
.wp-block-post-template.is-layout-grid > .wp-block-post > * { margin-block: 0; }
.wp-block-post-template.is-layout-grid > .wp-block-post .wp-block-post-title { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Touch targets. Everything interactive clears 44px, which several controls did
   not: the compare picker's remove button was 20x20 sitting 8px from its
   neighbour, and the "only rows that differ" and TCO region labels had no
   padding at all, so their hit area was the text line box. The visual size is
   unchanged where it mattered - the extra area comes from padding and, where
   padding would move the layout, a transparent ::after that only grows the
   hit region.
   --------------------------------------------------------------------------- */
.evmc-theme-toggle { min-height: 44px; min-width: 44px; }
.evmc-unit-switch button { min-height: 44px; }
.evmc-compare__add { min-height: 44px; }
.evmc-compare__picker select { min-height: 44px; }

/* Labels wrapping a native control: pad the label, not the control, so the
   checkbox/radio glyph stays where the reader expects it. */
.evmc-compare__diffonly,
.evmc-tco__region label { min-height: 44px; padding-block: .5rem; }
.evmc-compare__diffonly input,
.evmc-tco__region input[type="radio"] { width: 1.15rem; height: 1.15rem; }

/* The remove button keeps its 20px look but gets a 44px hit area around it. */
.evmc-compare__remove { position: relative; }
.evmc-compare__remove::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* The range slider's thumb is whatever the browser ships - often 12-16px, the
   most awkward control on the page to operate with a thumb. */
.evmc-tco input[type="range"] { height: 44px; }
.evmc-tco input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--evmc-accent);
	border: 2px solid var(--evmc-base);
	box-shadow: var(--evmc-shadow);
	cursor: pointer;
}
.evmc-tco input[type="range"]::-moz-range-thumb {
	width: 26px;
	height: 26px;
	border: 2px solid var(--evmc-base);
	border-radius: 50%;
	background: var(--evmc-accent);
	cursor: pointer;
}

/* Pagination was the one interactive class in the whole site with no styling at
   all - it fell through to WP core's minimal defaults, so tiny, closely packed
   number links on a phone. */
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
	margin-top: var(--wp--preset--spacing--40, 2rem);
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: .6rem;
	border: 1px solid var(--evmc-border);
	border-radius: var(--evmc-radius-sm);
	text-decoration: none;
	font-size: .9375rem;
	color: var(--evmc-contrast);
}
.wp-block-query-pagination a:hover { border-color: var(--evmc-border-firm); background: var(--evmc-surface); }
.wp-block-query-pagination .page-numbers.current {
	background: var(--evmc-accent-soft);
	border-color: var(--evmc-accent-line);
	font-weight: 700;
}

/* Footer link rows sat 2-3px apart, so two 24px targets were effectively one
   26px band. */
.evmc-footer li + li { margin-top: .35rem; }

/* The header row is nowrap at two nesting levels, so on a 360px phone the site
   title, the hamburger and the toggle had nowhere to go if they did not fit -
   and the header is sticky, so any overflow would be pinned to every page. */
.evmc-header .wp-block-site-title { min-width: 0; }
.evmc-header .wp-block-site-title a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Touch targets in core block markup
   --------------------------------------------------------------------------
   The 44px pass above covered our own controls but not WordPress's. Measured
   in a 390px viewport, the mobile navigation toggle came out 24x24 - the one
   control a phone visitor cannot avoid - and the standalone links in list
   blocks, the ticker and the post grid sat between 16 and 23px tall. Links
   inside a sentence are deliberately left alone; WCAG exempts them, and
   padding them would wreck the line height of body copy. */

@media (max-width: 781.98px) {
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}

	.wp-block-list > li > a:only-child,
	.evmc-ticker__track > a,
	.wp-block-post-terms a,
	.wp-block-post-title a {
		display: inline-block;
		padding-block: .5rem;
	}
}