/*
 * labspecs — supplementary front-end styles ("industrial blueprint").
 * Design tokens live in theme.json; this sheet only covers what theme.json
 * cannot express. Radius is 0 everywhere and there are no shadows.
 * Accent (hazard yellow) is used sparingly: category tags, the header's
 * bottom border, the active nav item, code-block left rules, and link hover.
 */

:where(body) {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Sharp corners, always. */
:where(.wp-block-button__link),
:where(.wp-block-image img),
:where(.wp-block-post-featured-image img),
:where(input, textarea, select, .wp-block-search__input) {
	border-radius: 0;
}

/* ---- Masthead ---- */
/* Sticky, surface background, hazard-yellow 2px bottom rule. */
.labspecs-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 2px solid var(--wp--preset--color--accent);
}

/* Active nav item is the only yellow in the nav; hover -> plain text. */
.labspecs-header .wp-block-navigation .current-menu-item > a,
.labspecs-header .wp-block-navigation .current_page_item > a,
.labspecs-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

/* Footer divider. */
.labspecs-footer {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---- Meta / labels / ids ---- */
/* Terminal-style stamp: mono, small, uppercase, tracked, muted. */
.labspecs-meta,
.labspecs-meta a {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	line-height: 1.5;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.labspecs-meta a:hover,
.labspecs-meta a:focus {
	color: var(--wp--preset--color--accent);
}

/* ---- Category tag ---- */
/* Solid hazard-yellow block, base-colour text, flush in a card corner. */
.labspecs-tag {
	display: inline-block;
	background-color: var(--wp--preset--color--accent);
	padding: 5px 8px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.labspecs-tag,
.labspecs-tag a {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* ---- Review / archive cards ---- */
.labspecs-card {
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
	height: 100%;
}
/* Hover: border brightens only. No transform, no shadow. */
.labspecs-card:focus-within,
.labspecs-card:hover {
	border-color: var(--wp--custom--border-hover);
}
/* Card title reads compact; never yellow. */
.labspecs-card .wp-block-post-title,
.labspecs-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.labspecs-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

/* Score chip: mono + bordered, deliberately not yellow. */
.labspecs-score {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.1em 0.5em;
}

/* ---- Homepage hero: blueprint grid (this section only) ---- */
.labspecs-hero-grid {
	background-color: var(--wp--preset--color--surface);
	background-image:
		linear-gradient(#161719 1px, transparent 1px),
		linear-gradient(90deg, #161719 1px, transparent 1px);
	background-size: 22px 22px;
}

/* ---- Spec table pattern ---- */
.labspecs-spec-table {
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
}
.labspecs-spec-table .wp-block-columns {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/* Zebra rows via the surface / surface-raised pair. */
.labspecs-spec-table .wp-block-columns:nth-of-type(even) {
	background-color: var(--wp--preset--color--surface-raised);
}
.labspecs-spec-table .wp-block-columns:last-child {
	border-bottom: 0;
}
.labspecs-spec-table .wp-block-column {
	padding: var(--wp--preset--spacing--30);
	margin: 0;
}
.labspecs-spec-table .wp-block-column:first-child {
	border-right: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	flex-basis: 34%;
}
.labspecs-spec-table .wp-block-column p {
	margin: 0;
}

/* ---- Affiliate disclosure ---- */
.labspecs-disclosure {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--30);
}
.labspecs-disclosure::before {
	content: "// ";
	color: var(--wp--preset--color--muted);
}

/* ---- Article body ---- */
/* Inline links in prose stay legible (underlined), yellow on hover only. */
.wp-block-post-content a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}
/* Inline code (not code blocks). */
.wp-block-post-content :where(p, li) code {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.9em;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.1em 0.35em;
}

/* Content tables: mono headers, hard borders, readable zebra. */
.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.5rem 0.75rem;
}
.wp-block-table th {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	text-align: left;
}
.wp-block-table tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--surface-raised);
}

/* Visible focus for keyboard users (accessibility). */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Skip link. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1rem;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--mono);
}
.skip-link:focus {
	left: 0;
}

/* Respect reduced-motion. Nothing animates by default; this is a guard. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}