/* Uplyt frontend CSS — only what theme.json cannot express. */

/* Light-mode override: dark is this site's primary/default palette
   (theme.json holds the dark values directly, unlike every sibling site,
   which defaults light and overrides dark). This block overrides the same
   CSS custom properties theme.json already generates on :root for users
   with a light OS preference — every value independently computed and
   WCAG-verified, not assumed by analogy. See 05-design-system.md §1. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		--wp--preset--color--background: #F4F7FB;
		--wp--preset--color--surface: #FFFFFF;
		--wp--preset--color--text: #0B1120;
		--wp--preset--color--muted: #4B5670;
		--wp--preset--color--border: #0A6E80;
		--wp--preset--color--accent: #0A6E80;
		--wp--preset--color--accent-secondary: #6D40C9;
	}
}
:root[data-theme="light"] {
	--wp--preset--color--background: #F4F7FB;
	--wp--preset--color--surface: #FFFFFF;
	--wp--preset--color--text: #0B1120;
	--wp--preset--color--muted: #4B5670;
	--wp--preset--color--border: #0A6E80;
	--wp--preset--color--accent: #0A6E80;
	--wp--preset--color--accent-secondary: #6D40C9;
}

/* Visible focus ring everywhere (reference 02 §19 accessibility). */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Skip link */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--background);
	padding: 12px 16px;
	z-index: 100;
}
.skip-link:focus {
	left: 16px;
	top: 16px;
}

/* Breadcrumbs */
.uplyt-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--20);
}
.uplyt-breadcrumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
}
.uplyt-breadcrumbs [aria-current="page"] {
	color: var(--wp--preset--color--text);
}

/* Last-updated freshness line. */
.uplyt-last-updated {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-top: -8px;
	margin-bottom: var(--wp--preset--spacing--10);
}

/* "Reviewed against our editorial guidelines" line — authorship treatment
   in place of a named byline (05-design-system.md §3). */
.uplyt-checked-line {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--30);
}
.uplyt-checked-line a {
	color: var(--wp--preset--color--accent);
}

/* Glass terminal panel: card surfaces with a subtle low-opacity accent
   border, the dark-register equivalent of every sibling site's border
   treatment (05-design-system.md §3). */
.entry-content figure.wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid rgba(95, 227, 240, 0.25);
}
.entry-content figcaption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-top: 8px;
}
.entry-content figure.wp-block-image {
	margin: var(--wp--preset--spacing--40) 0;
}

.wp-block-post-featured-image img {
	border-radius: 8px;
	border: 1px solid rgba(95, 227, 240, 0.25);
}

/* Data tables: tabular numerals so price/percentage columns align, plus an
   accent-tinted header row (05-design-system.md §2/§3). */
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	margin: var(--wp--preset--spacing--30) 0;
	border: 1px solid rgba(95, 227, 240, 0.25);
	font-variant-numeric: tabular-nums;
}
.entry-content th,
.entry-content td {
	border: 1px solid rgba(95, 227, 240, 0.18);
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20);
	text-align: left;
	vertical-align: top;
}
.entry-content thead th {
	background: rgba(95, 227, 240, 0.08);
	font-family: var(--wp--preset--font-family--heading);
}

/* Risk/limitation callout — left-border accent in the secondary (violet)
   color, not a filled alarm-colored box (05-design-system.md §3). */
.uplyt-callout {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(95, 227, 240, 0.2);
	border-left: 3px solid var(--wp--preset--color--accent-secondary);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: 8px;
}

/* Guides-hub thumbnail cards + hero panel: the CSS-only 3D-tilt surfaces.
   tilt.js applies the pointer-driven transform to these same selectors;
   the static values below are the base "dimensional" look for anyone
   without JS or with reduced motion, so depth doesn't depend on the
   script running at all. */
.uplyt-hero-panel,
.guide-card,
.wp-block-post-featured-image,
.entry-content figure.wp-block-image {
	transform-style: preserve-3d;
	will-change: transform;
}
.uplyt-hero-panel {
	background: radial-gradient(120% 140% at 30% 20%, rgba(95, 227, 240, 0.10), transparent 60%),
		var(--wp--preset--color--surface);
	border: 1px solid rgba(95, 227, 240, 0.25);
	border-radius: 16px;
	box-shadow: 0 24px 60px -20px rgba(95, 227, 240, 0.18);
	padding: var(--wp--preset--spacing--40);
}
.guide-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--30) 0;
}
.guide-card {
	border: 1px solid rgba(95, 227, 240, 0.25);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--surface);
	box-shadow: 0 16px 40px -24px rgba(95, 227, 240, 0.25);
}
.guide-card img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin-bottom: var(--wp--preset--spacing--10);
}
.guide-card h3 {
	margin-top: 0;
}

/* Mobile navigation is the core Navigation block's own overlay menu
   (overlayMenu:"mobile" in parts/header.html) — no custom toggle CSS/JS
   needed. Only re-skin its colors to match the palette. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--background);
}

/* Respect reduced motion — also handled at the JS layer (tilt.js exits
   entirely under this media query), but transitions are neutralized here
   too in case any element still carries an inline transform. */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
	}
	.uplyt-hero-panel,
	.guide-card,
	.wp-block-post-featured-image,
	.entry-content figure.wp-block-image {
		transform: none !important;
	}
}