/*
 * Additions to the approved style layer.
 *
 * site.css ships VERBATIM from the design and is not edited. Anything this
 * build needs on top of it lives here, so the diff between the approved
 * artifact and what runs in production is this file and nothing else.
 *
 * THE BAR FOR ADDING SOMETHING HERE: it must not change a single approved
 * pixel. Every rule below is either a pure addition the design has no treatment
 * for, or an accessibility item the handoff itself lists as missing.
 */

/* ---------------------------------------------------------------------------
 * Skip link — WCAG 2.4.1 Bypass Blocks.
 *
 * The handoff lists "no skip link" among the accessibility items carried
 * forward. It is invisible until focused, so it changes nothing at rest.
 * --------------------------------------------------------------------------- */
.tt-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--fg);
	color: var(--bg);
	font-size: 14px;
	font-weight: 500;
	padding: 12px 20px;
	border-radius: 0 0 var(--r-md) 0;
}
.tt-skip:focus { left: 0; }

/* ---------------------------------------------------------------------------
 * scroll-margin-top — WCAG 2.4.11 Focus Not Obscured.
 *
 * The header is sticky with two states. A focused element scrolled underneath
 * it is a failure. Pure CSS, invisible at rest, no change to the composition.
 * --------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, h2, h3, [id]) { scroll-margin-top: 96px; }

/* ---------------------------------------------------------------------------
 * Empty state.
 *
 * The design drops a section rather than showing it blank, which is what the
 * templates do. This covers the one case it cannot: a published hub with
 * nothing under it yet, where the page would otherwise be a heading alone.
 * --------------------------------------------------------------------------- */
.tt-empty {
	background: var(--surface);
	border: 1px solid var(--b60);
	border-radius: var(--r-xl);
	padding: 22px 24px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted-fg);
}

/* ---------------------------------------------------------------------------
 * Pagination — extension E-3. Not designed; pill controls reusing the outline
 * button language, centred, on the section rhythm.
 * --------------------------------------------------------------------------- */
.tt-pag { display: flex; justify-content: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.tt-pag .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 44px; height: 44px; padding-inline: 16px;
	background: #fff; border: 1px solid var(--border); border-radius: 9999px;
	font-size: 14px; font-weight: 500; color: var(--fg);
	transition: background-color 150ms;
}
.tt-pag .page-numbers:hover { background: var(--secondary); }
.tt-pag .page-numbers.current { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------------------------------------------------------------------------
 * The editor's own output inside .abody — the Block Editor allowlist renders
 * paragraphs, headings, lists, images, quotes and tables, and site.css styles
 * the first four. These are the two it does not cover.
 * --------------------------------------------------------------------------- */
.abody blockquote {
	margin: 20px 0; padding: 16px 20px;
	background: var(--surface-warm); border: 1px solid var(--b60);
	border-radius: var(--r-lg);
}
.abody blockquote p:last-child { margin-bottom: 0; }
.abody table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.abody th, .abody td {
	border-bottom: 1px solid var(--b60); padding: 10px 12px;
	text-align: left; font-size: 15px; line-height: 1.6;
}
.abody th { font-weight: 600; color: var(--fg); }
.abody td { color: var(--muted-fg); }
.abody img { max-width: 100%; height: auto; border-radius: var(--r-lg); margin: 20px 0; }
.abody a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* Screen-reader-only, for labels the design shows visually but a form needs. */
.tt-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }