/*
Theme Name: Is It Oven Safe?
Theme URI: https://isitovensafe.com/
Author: Is It Oven Safe?
Description: Custom block theme for isitovensafe.com — a cross-appliance material & container safety database (microwave, oven, air fryer, dishwasher, freezer). Warm test-kitchen design: cream surface, serif headings, traffic-light verdict badges, item × appliance verdict tables. No page builders, no external fonts.
Version: 1.2.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: isitovensafe
*/

/* ---- Theme tokens (drive light + dark; verdict hues keep meaning across modes) ---- */
:root {
	--ovs-surface: #ffffff;            /* cards, tables, content surface */
	--ovs-brand-btn: #b4531f;          /* solid terracotta button — white text, both modes */
	--ovs-hero-fg: #fbf3ea;            /* text on the dark hero/panel band */
	--ovs-input-border: #5a4a3e;
	--ovs-crumb: #8a7a6c;
	--ovs-note-bg: #fdf7ec;
	--ovs-note-strong: #9a6a10;
	--ovs-c-safe-bg: #e9f5ee;
	--ovs-c-caution-bg: #fbf1dc;
	--ovs-c-unsafe-bg: #fbe7e5;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Remap shared tokens — same warm hues, luminance lifted for AA.
		   NB: `surface` and `panel` are NOT remapped: they carry the light text on
		   the always-dark header/footer/hero bands, so they must stay as-is. */
		--wp--preset--color--cream: #17130f;   /* app background + table zebra */
		--wp--preset--color--ink: #f2e9df;     /* body text */
		--wp--preset--color--border: #3a2f27;  /* hairlines */
		--wp--preset--color--brand: #e8925c;   /* links / mark — AA on dark ground */

		--ovs-surface: #221b16;
		--ovs-hero-fg: #f7ede1;
		--ovs-input-border: #4a3d33;
		--ovs-crumb: #b0a08f;
		--ovs-note-bg: #2a2114;
		--ovs-note-strong: #e6b566;
		--ovs-c-safe-bg: #16342a;
		--ovs-c-caution-bg: #392d13;
		--ovs-c-unsafe-bg: #3a1f1c;
	}
}

/* ---- Header / footer band ---- */
.ovs-panel a { color: var(--ovs-hero-fg); }
.ovs-wordmark { display: inline-flex; align-items: center; }
.ovs-wordmark a { text-decoration: none; display: inline-flex; align-items: center; }
.ovs-wordmark svg { display: block; height: 30px; width: auto; }
.ovs-search-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 999px; color: var(--ovs-hero-fg);
}
.ovs-search-icon:hover { background: rgba(255,255,255,0.10); }
.ovs-search-icon svg { width: 20px; height: 20px; }

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

/* ---- Verdict badges (label + icon + color; never color alone) ---- */
.ovs-verdict {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 800;
	font-size: 0.82rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #fff;
	border-radius: 999px;
	padding: 0.36em 0.95em;
	line-height: 1.35;
	box-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
.ovs-verdict--safe { background: var(--wp--preset--color--safe); }
.ovs-verdict--caution { background: var(--wp--preset--color--caution); }
.ovs-verdict--unsafe { background: var(--wp--preset--color--unsafe); }

/* ---- Trust masthead (byline + last-verified date under the H1) ---- */
.ovs-masthead {
	font-size: 0.9rem;
	color: var(--ovs-crumb);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: 0.75rem;
}
.ovs-masthead .ovs-verified { font-variant-numeric: tabular-nums; color: var(--wp--preset--color--ink); font-weight: 600; }

/* ---- Verdict / data tables ---- */
.ovs-table table { border-collapse: collapse; width: 100%; background: var(--ovs-surface); }
.ovs-table th, .ovs-table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6rem 0.75rem;
	text-align: left;
	vertical-align: top;
}
.ovs-table thead th {
	background: var(--wp--preset--color--panel);
	color: var(--ovs-hero-fg);
	font-size: 0.9rem;
	letter-spacing: 0.02em;
}
.ovs-table tbody tr:nth-child(even) td { background: var(--wp--preset--color--cream); }
/* verdict cell tints inside a table */
.ovs-table td.ovs-c-safe { background: var(--ovs-c-safe-bg) !important; font-weight: 600; }
.ovs-table td.ovs-c-caution { background: var(--ovs-c-caution-bg) !important; font-weight: 600; }
.ovs-table td.ovs-c-unsafe { background: var(--ovs-c-unsafe-bg) !important; font-weight: 600; }

/* ---- Disclaimer / last-verified callout ---- */
.ovs-note {
	border: 1px solid var(--wp--preset--color--caution);
	border-left-width: 5px;
	background: var(--ovs-note-bg);
	border-radius: 8px;
	padding: 1rem 1.15rem;
	font-size: 0.95rem;
}
.ovs-note strong { color: var(--ovs-note-strong); }

/* ---- Cards ---- */
.ovs-card {
	background: var(--ovs-surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1.15rem 1.2rem;
	height: 100%;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.ovs-card:hover { box-shadow: 0 6px 18px rgba(43,35,32,0.10); border-color: var(--wp--preset--color--brand); }
.ovs-card h3 { margin-top: 0; }

/* ---- Breadcrumbs ---- */
.ovs-crumbs { font-size: 0.85rem; color: var(--ovs-crumb); }
.ovs-crumbs a { color: var(--ovs-crumb); }

/* ---- Content surface ---- */
.ovs-surface { background: var(--ovs-surface); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; }

/* =====================================================================
   COMPARISON-MATRIX HOMEPAGE — the material × appliance grid IS the page.
   Server-rendered HTML table; scrolls in its own container on mobile with a
   sticky material column. Verdict cells: colour field + glyph + word.
   ===================================================================== */

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Intro band above the matrix (search stays one tap away). */
.ovs-matrix-intro h1 { margin-top: 0; }
.ovs-matrix-intro .ovs-search { max-width: 560px; }

.ovs-matrix-wrap { margin-top: var(--wp--preset--spacing--40); }

/* Stat band — the "complete institution" signal. */
.ovs-statband {
	display: flex; flex-wrap: wrap; gap: 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px; overflow: hidden;
	background: var(--ovs-surface);
	margin-bottom: var(--wp--preset--spacing--40);
}
.ovs-stat {
	flex: 1 1 120px; display: flex; flex-direction: column; align-items: center;
	padding: 0.9rem 1rem; text-align: center;
	border-left: 1px solid var(--wp--preset--color--border);
}
.ovs-stat:first-child { border-left: 0; }
.ovs-stat-n { font-family: var(--wp--preset--font-family--serif); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--wp--preset--color--brand); }
.ovs-stat-l { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ovs-crumb); margin-top: 0.35rem; }

/* Toolbar: title + JS-injected filter. */
.ovs-matrix-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.75rem; }
.ovs-matrix-title { font-size: var(--wp--preset--font-size--large); margin: 0; }
.ovs-filter input {
	font: inherit; font-size: 0.9rem; padding: 0.5rem 0.8rem;
	border: 1px solid var(--ovs-input-border); border-radius: 8px;
	background: var(--ovs-surface); color: var(--wp--preset--color--ink); min-width: 220px;
}

/* Scroll container — the wide table never breaks mobile. */
.ovs-matrix-scroll {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border: 1px solid var(--wp--preset--color--border); border-radius: 12px;
	background: var(--ovs-surface);
}
.ovs-matrix-scroll:focus-visible { outline: 3px solid var(--wp--preset--color--brand); outline-offset: 2px; }

table.ovs-matrix { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; }
.ovs-matrix th, .ovs-matrix td { border-bottom: 1px solid var(--wp--preset--color--border); border-right: 1px solid var(--wp--preset--color--border); padding: 0; text-align: left; }
.ovs-matrix thead th { border-bottom: 2px solid var(--wp--preset--color--border); }
.ovs-matrix tr td:last-child, .ovs-matrix tr th:last-child { border-right: 0; }
.ovs-matrix tbody tr:last-child th, .ovs-matrix tbody tr:last-child td { border-bottom: 0; }

/* Appliance column heads. */
.ovs-matrix thead th { background: var(--wp--preset--color--panel); }
.ovs-appcol { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.6rem 0.65rem; color: var(--ovs-hero-fg); text-decoration: none; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; }
.ovs-appcol:hover { background: rgba(255,255,255,0.08); color: #fff; }
.ovs-appicon { width: 22px; height: 22px; display: block; }

/* Corner + sticky material column. */
.ovs-matrix-corner { background: var(--wp--preset--color--panel); color: var(--ovs-hero-fg); font-size: 0.82rem; padding: 0.6rem 0.85rem; }
.ovs-matrix-rowh { background: var(--ovs-surface); font-family: var(--wp--preset--font-family--serif); font-weight: 700; font-size: 0.95rem; padding: 0.7rem 0.85rem; min-width: 180px; }
.ovs-matrix-rowh a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ovs-matrix-rowh a:hover { color: var(--wp--preset--color--brand); text-decoration: underline; }
.ovs-matrix th.ovs-matrix-corner, .ovs-matrix th.ovs-matrix-rowh { position: sticky; left: 0; z-index: 2; border-right: 2px solid var(--wp--preset--color--border); }
.ovs-matrix thead th.ovs-matrix-corner { z-index: 3; }

/* Verdict cells: colour field + chip (glyph + word) + condition line. */
.ovs-cell { vertical-align: top; }
.ovs-cell--safe { background: var(--ovs-c-safe-bg); }
.ovs-cell--caution { background: var(--ovs-c-caution-bg); }
.ovs-cell--unsafe { background: var(--ovs-c-unsafe-bg); }
.ovs-cell--na { background: transparent; }
.ovs-cell-link { display: block; padding: 0.6rem 0.7rem; text-decoration: none; color: inherit; min-width: 108px; height: 100%; }
.ovs-cell-link:hover { background: rgba(180,83,31,0.06); }
.ovs-chip { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 700; font-size: 0.82rem; }
.ovs-chip-g { display: inline-flex; align-items: center; justify-content: center; width: 1.25em; height: 1.25em; border-radius: 999px; color: #fff; font-size: 0.72em; font-weight: 800; flex: 0 0 auto; }
.ovs-chip--safe .ovs-chip-g { background: var(--wp--preset--color--safe); }
.ovs-chip--caution .ovs-chip-g { background: var(--wp--preset--color--caution); }
.ovs-chip--unsafe .ovs-chip-g { background: var(--wp--preset--color--unsafe); }
.ovs-chip--na .ovs-chip-g { background: var(--ovs-crumb); }
.ovs-chip-t { color: var(--wp--preset--color--ink); }
.ovs-chip--na .ovs-chip-t { color: var(--ovs-crumb); font-weight: 600; }
.ovs-cell-note { display: block; font-size: 0.72rem; line-height: 1.3; color: var(--ovs-crumb); margin-top: 0.25rem; }

/* Methodology band — visible sourcing furniture. */
.ovs-matrix-method {
	margin-top: var(--wp--preset--spacing--40); font-size: 0.88rem; line-height: 1.55;
	color: var(--ovs-crumb);
	border-left: 3px solid var(--wp--preset--color--brand);
	padding: 0.15rem 0 0.15rem 0.9rem;
}
.ovs-matrix-method strong { color: var(--wp--preset--color--ink); }

@media (max-width: 600px) {
	.ovs-stat-n { font-size: 1.35rem; }
	.ovs-matrix-title { font-size: 1.1rem; }
}

/* ---- Accessibility: visible keyboard focus ---- */
:where(a, button, input, .wp-block-search__button, .wp-block-navigation-item__content):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ovs-card { transition: none; }
}