/**
 * The Tool Trial — styles that theme.json cannot express.
 *
 * theme.json owns the palette, typography, spacing, widths, links and buttons.
 * This file only covers what the schema has no field for: :focus-visible, the skip
 * link, the editorial utility classes used by the patterns, table overflow, reduced
 * motion, and a few breakpoints.
 *
 * Every value below reads from a theme.json preset. No literal colors, no imports,
 * no remote assets.
 */

/* --------------------------------------------------------------------------
   1. Focus. theme.json has no :focus-visible field, and the ring must never be
      removed, so it is declared once here for everything.
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset);
	border-radius: 3px;
}

/* On the dark bands the blue ring loses contrast against the background. */
.ttt-band-dark :where(a, button, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--surface);
}

.skip-link:focus {
	background: var(--wp--preset--color--ink-950);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	text-decoration: none;
	z-index: 100;
}

/* --------------------------------------------------------------------------
   2. Editorial utilities used by the patterns
   -------------------------------------------------------------------------- */

/* Monospace label: a data point, a status or a content type — never prose. */
.ttt-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--ink-600);
}

.ttt-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--evidence-ink);
}

/**
 * Editorial status chip.
 *
 * The chip carries the honest state of a piece. The theme ships the presentation
 * only; it never presets `tested`. See docs/PHASE-6B-IMPLEMENTATION.md for why the
 * value itself belongs in a companion plugin rather than in the theme.
 */
.ttt-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface-soft);
	color: var(--wp--preset--color--ink-600);
	white-space: nowrap;
}

.ttt-chip::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

.ttt-chip--pending,
.ttt-chip--hold {
	color: var(--wp--preset--color--warning);
	background: var(--wp--preset--color--warning-soft);
	border-color: var(--wp--custom--chip--pending);
}

.ttt-chip--prepared,
.ttt-chip--tested,
.ttt-chip--updated {
	color: var(--wp--preset--color--evidence-ink);
	background: var(--wp--preset--color--evidence-soft);
	border-color: var(--wp--custom--chip--prepared);
}

/* Ruled index item. Used by Browse by Goal so that section does not become a
   fourth grid of identical rounded cards. */
.ttt-rule-top {
	border-top: 2px solid var(--wp--preset--color--ink-900);
	padding-top: var(--wp--preset--spacing--40);
}

.ttt-rule-hairline {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
}

/* Numbered step marker in the methodology section. */
.ttt-step-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--evidence-ink);
}

/* Editorial note: limits, scope, disclaimers. Filet on the left, never a card. */
.ttt-note {
	border-left: 2px solid var(--wp--preset--color--border);
	padding-left: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-600);
	font-size: var(--wp--preset--font-size--small);
}

.ttt-note--evidence {
	border-left-color: var(--wp--preset--color--evidence);
}

.ttt-note--warning {
	border-left-color: var(--wp--preset--color--warning);
}

/* Decorative marks in the wordmark and section icons. */
.ttt-mark {
	display: inline-flex;
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--evidence);
	flex: none;
}

.ttt-mark svg {
	width: 100%;
	height: 100%;
	display: block;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   3. Header, navigation, footer
   -------------------------------------------------------------------------- */
.ttt-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.ttt-wordmark {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	min-height: var(--wp--custom--tap--min);
}

/* Tap targets. Navigation links inherit core markup, so the height is set here. */
.wp-block-navigation .wp-block-navigation-item__content,
.ttt-footer-nav .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--tap--min);
}

.ttt-band-dark {
	background: var(--wp--preset--color--ink-950);
	color: var(--wp--preset--color--surface);
}

.ttt-band-dark :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--surface);
}

.ttt-footer {
	background: var(--wp--preset--color--ink-900);
	color: var(--wp--custom--ondark--body);
}

.ttt-footer :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--surface);
}

.ttt-footer a {
	color: var(--wp--custom--ondark--link);
}

.ttt-footer a:hover {
	color: var(--wp--preset--color--surface);
}

.ttt-footer .ttt-mark {
	color: var(--wp--custom--ondark--mark);
}

/* Body copy and rules on the two dark bands. */
.ttt-dim {
	color: var(--wp--custom--ondark--body);
}

.ttt-muted {
	color: var(--wp--custom--ondark--muted);
}

.ttt-rule-dark {
	border: 0;
	border-top: 1px solid var(--wp--custom--ondark--rule);
	height: 0;
}

/* --------------------------------------------------------------------------
   4. Reading measure
      Article body stays readable. theme.json sets contentSize to 720px for this
      reason; this only stops long paragraphs from stretching inside wide groups.
   -------------------------------------------------------------------------- */
.ttt-measure {
	max-width: var(--wp--custom--reading--measure);
}

/* --------------------------------------------------------------------------
   5. Tables
      The table is the one element allowed to be wider than the screen. It scrolls
      inside its own container. assets/js/table-a11y.js adds tabindex when it
      actually overflows, so it can also be panned with the keyboard.
   -------------------------------------------------------------------------- */
.wp-block-table {
	overflow-x: auto;
	max-width: 100%;
}

.wp-block-table.is-scrollable:focus-visible,
.wp-block-table.is-scrollable:focus {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--sm);
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

.wp-block-table tbody tr:last-child :where(th, td) {
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.ttt-header .wp-block-group {
		row-gap: var(--wp--preset--spacing--30);
	}
}

@media (max-width: 599px) {
	:root {
		--wp--preset--font-size--display: 2.125rem;
		--wp--preset--font-size--xxx-large: 1.75rem;
		--wp--preset--font-size--xx-large: 1.5rem;
	}

	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* Nothing may push the page sideways. The table above opts out on purpose. */
html,
body {
	overflow-x: hidden;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   6b. Guide cards (front-page Query Loop)
   --------------------------------------------------------------------------
   The grid itself is WordPress's own: the Query Loop's post-template uses a grid
   layout with minimumColumnWidth, which gives two columns at the wide alignment
   and collapses to one on a narrow viewport without a media query of ours. What
   is added here is only the card treatment and the vertical rhythm inside a card.
   -------------------------------------------------------------------------- */
#latest-guides {
	/* Keep the heading clear of the top edge when the in-page anchor is followed. */
	scroll-margin-top: var(--wp--preset--spacing--40, 1.5rem);
}

.ttt-guide-cards > li {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--40, 1.5rem);
	border: var(--wp--custom--rule--width) solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm);
}

.ttt-guide-cards .wp-block-post-title {
	margin: 0;
}

.ttt-guide-cards .wp-block-post-excerpt {
	margin: 0;
	/* Push the "Read guide" link to the bottom edge so cards of unequal excerpt
	   length still line their calls to action up with each other. */
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.ttt-guide-cards .wp-block-post-excerpt__more-text {
	margin-top: auto;
	padding-top: 0.75rem;
}

/* --------------------------------------------------------------------------
   7. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}