/**
 * HoursHQ stylesheet.
 *
 * ORGANISATION — please keep to it.
 *
 * One component, one place. Every rule for a component, including its
 * responsive rules, lives in that component's section. Do not append new
 * blocks to the end of the file: that is how this stylesheet accumulated
 * three separate 640px media queries and two @supports blocks for the same
 * feature, and it cost three bugs where an older block outlived the design
 * it belonged to and silently won the cascade.
 *
 * Before adding a rule, search for the selector. If it already exists, edit it
 * rather than writing a second one.
 *
 * BREAKPOINTS
 *   780px — navigation collapses to the Menu button
 *   640px — everything else: tables, grids, page order
 * There are exactly two. Adding a third needs a reason.
 *
 * SPECIFICITY
 *   The surfaces section uses `body.wt-page .thing` to scope raised panels to
 *   pages this plugin owns. An override for one of those needs to match that
 *   specificity or it will lose regardless of where it sits in the file.
 *
 * COLOUR
 *   One accent token drives every interactive element. Group hues are used
 *   only on tool card rules and icons. Every text colour is chosen by contrast
 *   ratio against the tinted canvas, not by eye — see the token comments.
 *
 * There is deliberately no dark mode. The reason is in the Colour scheme
 * section and is worth reading before adding one.
 *
 * @package WorkTally
 */

.wt {
	--wt-accent: #1b4965;
	--wt-accent-ink: #ffffff;

	--wt-ink: var(--wp--preset--color--contrast, #1a1d21);
	--wt-muted: #5c6b7a;
	/*
	 * These two are set by contrast ratio, not by eye. Faint carries real text
	 * — group labels, badges, chart titles — so it needs 4.5:1 on white; at
	 * #7d8996 it was 3.56:1. Border-strong outlines form inputs, which WCAG
	 * 1.4.11 puts at 3:1; at #c3ccd6 it was 1.62:1, and an input nobody can see
	 * the edge of is a real problem on a phone.
	 */
	/*
	 * Faint and border-strong are set against the tinted canvas below, not
	 * against white — the tint costs about 0.3 of a contrast point, which was
	 * enough to push the old faint under 4.5:1.
	 */
	--wt-faint: #636e79;
	--wt-border: #dde3e9;
	--wt-border-strong: #7f8a99;

	/*
	 * A tinted page with white cards on it. The site was white on white, which
	 * is honest but flat: nothing looked raised, nothing grouped, and every
	 * card edge had to be carried by a hairline border alone.
	 */
	--wt-canvas: #f4f7f9;
	--wt-raised: #ffffff;
	--wt-shadow: 0 1px 2px rgba(20, 40, 60, 0.04), 0 4px 12px rgba(20, 40, 60, 0.05);
	--wt-shadow-lift: 0 2px 4px rgba(20, 40, 60, 0.06), 0 10px 24px rgba(20, 40, 60, 0.09);
	--wt-accent-wash: color-mix(in srgb, var(--wt-accent) 7%, #ffffff);
	--wt-accent-edge: color-mix(in srgb, var(--wt-accent) 22%, #ffffff);
	--wt-surface: #ffffff;
	--wt-surface-subtle: var(--wp--preset--color--base-2, #f5f7f9);

	--wt-warning-bg: #fff8e6;
	--wt-warning-border: #e0b451;
	--wt-error-bg: #fdf2f2;
	--wt-error-border: #c0392b;

	--wt-radius: 6px;
	--wt-radius-lg: 10px;
	--wt-gap: 1rem;
	--wt-gap-lg: 2rem;
	--wt-gap-xl: 3.5rem;

	--wt-size-sm: 0.875rem;
	--wt-size-xs: 0.8125rem;

	color: var(--wt-ink);
	line-height: 1.6;
}

.wt *,
.wt *::before,
.wt *::after { box-sizing: border-box; }

.wt-figure__value,
.wt-grid__total,
.wt-breakdown td,
.wt-breakdown th,
.wt-workings dd { font-variant-numeric: tabular-nums; }

/* ---------- Home ---------- */

.wt-hero {
	/*
	 * No top padding. Twenty Twenty-Five already applies generous top spacing to
	 * the content group from its own spacing scale, and adding ours on top of it
	 * produced the large empty band under the header.
	 */
	padding: 0 0 var(--wt-gap-lg);
	border-bottom: 3px solid var(--wt-accent);
	margin-bottom: var(--wt-gap-lg);
}

.wt-hero__title {
	font-size: clamp(1.9rem, 5vw, 2.9rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.75rem;
	max-width: 20ch;
}

.wt-hub__intro {
	font-size: 1.1rem;
	color: var(--wt-muted);
	max-width: 56ch;
	margin: 0 0 var(--wt-gap-lg);
}

.wt-hero__intro {
	font-size: 1.15rem;
	color: var(--wt-muted);
	max-width: 56ch;
	margin: 0;
}

.wt-section { margin-bottom: var(--wt-gap-xl); }

.wt-section__title {
	font-size: 1.4rem;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wt-gap);
}

/* ---------- Cards ---------- */

.wt-hub__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--wt-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.35rem;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	background: var(--wt-surface);
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.wt-card:hover {
	border-color: var(--wt-accent);
	transform: translateY(-2px);
}

.wt-card__title { margin: 0; font-size: 1.1rem; line-height: 1.3; }
.wt-card__title a { text-decoration: none; color: inherit; }
.wt-card__title a::after { content: ""; position: absolute; inset: 0; }

.wt-card__desc {
	margin: 0;
	font-size: var(--wt-size-sm);
	color: var(--wt-muted);
	flex-grow: 1;
}

/* ---------- Trust strip ---------- */

.wt-trust__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wt-gap-lg) var(--wt-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wt-trust__item h3 {
	font-size: 1rem;
	margin: 0 0 0.35rem;
	padding-left: 0.75rem;
	border-left: 3px solid var(--wt-accent);
	border-radius: 0;
}

.wt-trust__item p { margin: 0; font-size: var(--wt-size-sm); color: var(--wt-muted); }

/* ---------- Forms ---------- */

.wt-grid { width: 100%; border-collapse: collapse; margin-bottom: var(--wt-gap); }

.wt-grid th,
.wt-grid td {
	padding: 0.55rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--wt-border);
	vertical-align: middle;
}

.wt-grid thead th {
	font-size: var(--wt-size-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wt-faint);
	font-weight: 600;
}

.wt-grid__total {
	text-align: right;
	white-space: nowrap;
	/* Weight is set with the other emphasised figures in the typography
	   section, so totals, chart values and result figures stay in step. The
	   600 that used to be here was overridden by that rule and never applied. */
}

.wt-input {
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--wt-border-strong);
	border-radius: var(--wt-radius);
	font: inherit;
	font-family: inherit;
	font-size: inherit;
	background: var(--wt-surface);
	color: inherit;
}

.wt-input:focus-visible {
	outline: 2px solid var(--wt-accent);
	outline-offset: 1px;
	border-color: var(--wt-accent);
}

.wt-input--time { min-width: 7rem; }
.wt-input--break { max-width: 6rem; }

.wt-options {
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	padding: 1rem 1.25rem;
	margin-bottom: var(--wt-gap);
	background: var(--wt-surface-subtle);
}

.wt-options summary { cursor: pointer; font-weight: 600; }

.wt-options__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--wt-gap);
	margin-top: var(--wt-gap);
}

.wt-field { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.wt-field label { font-weight: 600; font-size: 0.9375rem; }

.wt-field__hint { font-size: var(--wt-size-xs); color: var(--wt-muted); line-height: 1.5; }

.wt-fieldset {
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	padding: 1rem 1.25rem;
	margin: 0 0 var(--wt-gap);
}

.wt-fieldset legend { font-weight: 600; padding: 0 0.4rem; }
.wt-fieldset__note { margin: 0.6rem 0 0; }
.wt-radio { display: block; padding: 0.25rem 0; }

/* ---------- Buttons ---------- */

.wt-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.wt-button {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border: 1px solid var(--wt-accent);
	border-radius: var(--wt-radius);
	background: var(--wt-accent);
	color: var(--wt-accent-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.wt-button:hover { opacity: 0.88; }
.wt-button--secondary { background: transparent; color: var(--wt-accent); }
.wt-button:focus-visible { outline: 2px solid var(--wt-accent); outline-offset: 2px; }

/* ---------- Result ---------- */

.wt-result {
	margin-top: var(--wt-gap-lg);
	padding-top: var(--wt-gap-lg);
	border-top: 3px solid var(--wt-accent);
}

.wt-result:focus { outline: none; }

.wt-result__figures {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-gap);
	margin-bottom: var(--wt-gap);
}

.wt-figure {
	flex: 1 1 11rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	background: var(--wt-surface-subtle);
}

.wt-figure__label {
	display: block;
	font-size: 0.6875rem;
	color: var(--wt-faint);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin-bottom: 0.2rem;
}

.wt-figure__value {
	display: block;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.wt-basis { font-size: var(--wt-size-sm); color: var(--wt-muted); margin: 0 0 var(--wt-gap); }

.wt-breakdown {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--wt-gap);
	font-size: var(--wt-size-sm);
}

.wt-breakdown caption { text-align: left; font-weight: 600; padding-bottom: 0.5rem; font-size: 1rem; }

.wt-breakdown th,
.wt-breakdown td { padding: 0.5rem; text-align: left; border-bottom: 1px solid var(--wt-border); }

.wt-badge {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.4rem;
	font-size: 0.6875rem;
	border: 1px solid var(--wt-border-strong);
	border-radius: 3px;
	color: var(--wt-muted);
	text-decoration: none;
	cursor: help;
}

.wt-workings { margin-bottom: var(--wt-gap); }
.wt-workings summary { cursor: pointer; font-weight: 600; }

.wt-workings dl {
	display: grid;
	grid-template-columns: minmax(9rem, auto) 1fr;
	gap: 0.45rem 1.25rem;
	margin: 0.85rem 0 0;
	font-size: var(--wt-size-sm);
}

.wt-workings dt { color: var(--wt-muted); }
.wt-workings dd { margin: 0; }

.wt-workings__note {
	display: block;
	font-size: var(--wt-size-xs);
	color: var(--wt-muted);
	font-weight: 400;
}

/* ---------- Charts ---------- */

/*
 * A proportional bar, not a chart library. Every result here is a breakdown of
 * one total, which a single stacked bar shows better than anything requiring
 * JavaScript. Colours are derived from the accent so the palette stays coherent
 * whatever accent is set, and the whole thing degrades to a readable legend if
 * the bar fails to render.
 */

.wt-chart {
	margin: 0 0 var(--wt-gap-lg);
}

.wt-chart__title {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wt-faint);
	margin-bottom: 0.5rem;
}

.wt-chart__bar {
	display: flex;
	height: 2.25rem;
	border-radius: var(--wt-radius);
	overflow: hidden;
	background: var(--wt-surface-subtle);
}

.wt-chart__seg {
	display: block;
	height: 100%;
	min-width: 2px;
	background: var(--wt-accent);
}

/* Shades derived from the accent, so one setting drives the whole palette. */
.wt-chart__seg--take-home { background: var(--wt-accent); }
.wt-chart__seg--tax       { background: color-mix(in srgb, var(--wt-accent) 62%, #ffffff); }
.wt-chart__seg--ni        { background: color-mix(in srgb, var(--wt-accent) 42%, #ffffff); }
.wt-chart__seg--loan      { background: color-mix(in srgb, var(--wt-accent) 26%, #ffffff); }
.wt-chart__seg--pension   { background: color-mix(in srgb, var(--wt-accent) 14%, #ffffff); }

.wt-chart__seg--band-1-5  { background: var(--wt-accent); }
.wt-chart__seg--band-1    { background: color-mix(in srgb, var(--wt-accent) 58%, #ffffff); }
.wt-chart__seg--band-0-5  { background: color-mix(in srgb, var(--wt-accent) 30%, #ffffff); }

.wt-chart__legend li:nth-child(odd) .wt-chart__seg--day,
.wt-chart__bar .wt-chart__seg--day:nth-child(odd) { background: var(--wt-accent); }

.wt-chart__bar .wt-chart__seg--day:nth-child(even) {
	background: color-mix(in srgb, var(--wt-accent) 55%, #ffffff);
}

.wt-chart__bar .wt-chart__seg + .wt-chart__seg {
	border-left: 1px solid var(--wt-surface, #fff);
}

.wt-chart__legend {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	font-size: var(--wt-size-sm);
}

.wt-chart__legend li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.3rem 0;
	border-bottom: 1px solid var(--wt-border);
}

.wt-chart__legend li:last-child { border-bottom: 0; }

.wt-chart__key {
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 2px;
	align-self: center;
	background: var(--wt-accent);
}

.wt-chart__label { flex: 1 1 auto; }

.wt-chart__value {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.wt-chart__share {
	flex: 0 0 3.5rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	color: var(--wt-muted);
	font-size: var(--wt-size-xs);
}

/* Fallback where color-mix is unsupported: opacity still differentiates. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.wt-chart__seg--tax     { background: var(--wt-accent); opacity: 0.72; }
	.wt-chart__seg--ni      { background: var(--wt-accent); opacity: 0.54; }
	.wt-chart__seg--loan    { background: var(--wt-accent); opacity: 0.38; }
	.wt-chart__seg--pension { background: var(--wt-accent); opacity: 0.22; }

	.wt { --wt-accent-wash: #eef3f7; --wt-accent-edge: #c2d2dd; }
}

/* Calculating state, while a live result is being fetched. */
.wt-is-calculating .wt-result { opacity: 0.55; transition: opacity 0.12s ease; }

/* ---------- Notices, caveats, sources ---------- */

.wt-notice {
	padding: 0.85rem 1.1rem;
	border-radius: var(--wt-radius);
	border: 1px solid var(--wt-warning-border);
	border-left-width: 4px;
	background: var(--wt-warning-bg);
	margin-bottom: var(--wt-gap);
	font-size: var(--wt-size-sm);
}

.wt-notice p { margin: 0 0 0.5rem; }
.wt-notice p:last-child { margin-bottom: 0; }

.wt-notice--error { border-color: var(--wt-error-border); background: var(--wt-error-bg); }

.wt-caveats,
.wt-sources { margin-bottom: var(--wt-gap); font-size: var(--wt-size-sm); }

.wt-caveats h2, .wt-caveats h3,
.wt-sources h2, .wt-sources h3 { font-size: 1rem; margin: 0 0 0.5rem; }

.wt-caveats ul, .wt-sources ul { margin: 0; padding-left: 1.15rem; }
.wt-caveats li, .wt-sources li { margin-bottom: 0.45rem; line-height: 1.55; }

/*
 * .wt-caveat and .wt-caveat--{key} carry no styling on purpose. The list item
 * is already styled by `.wt-caveats li`; these are hooks so a specific caveat
 * can be picked out later without touching the markup. Declared here so they
 * are visibly intentional rather than looking like classes someone forgot.
 */
.wt-caveat {
	/* intentionally empty — see above */
}

.wt-caveat__guide { display: inline-block; margin-left: 0.35rem; white-space: nowrap; font-weight: 600; }

.wt-disclaimer {
	font-size: var(--wt-size-sm);
	color: var(--wt-muted);
	border-top: 1px solid var(--wt-border);
	padding-top: 0.85rem;
}

.wt-disclaimer--statutory {
	border: 1px solid var(--wt-warning-border);
	border-left-width: 4px;
	background: var(--wt-warning-bg);
	border-radius: var(--wt-radius);
	padding: 1.1rem;
	color: inherit;
}

.wt-disclaimer--statutory p { margin: 0 0 0.6rem; }
.wt-disclaimer--statutory p:last-child { margin-bottom: 0; }

/* ---------- Navigation ---------- */

.wt-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	list-style: none;
	margin: 0 0 var(--wt-gap);
	padding: 0;
	font-size: var(--wt-size-xs);
	color: var(--wt-muted);
}

.wt-crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--wt-border-strong); }

.wt-toolnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 var(--wt-gap-lg);
	padding: 0;
}

.wt-toolnav li a,
.wt-toolnav li span {
	display: inline-block;
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--wt-border);
	border-radius: 999px;
	font-size: var(--wt-size-sm);
	text-decoration: none;
	color: inherit;
	background: var(--wt-surface);
}

.wt-toolnav li a:hover,
.wt-toolnav li a:focus-visible { border-color: var(--wt-accent); color: var(--wt-accent); }

.wt-toolnav li.is-current span {
	background: var(--wt-accent);
	border-color: var(--wt-accent);
	color: var(--wt-accent-ink);
	font-weight: 600;
}

.wt-related {
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	padding: 1.1rem 1.25rem;
	margin-bottom: var(--wt-gap);
}

.wt-related h2, .wt-related h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.wt-related ul { list-style: none; margin: 0; padding: 0; }
.wt-related li { padding: 0.45rem 0; }
.wt-related li + li { border-top: 1px solid var(--wt-border); }

.wt-related__reason { display: block; font-size: var(--wt-size-xs); color: var(--wt-muted); }

.wt-example {
	border-left: 3px solid var(--wt-accent);
	border-radius: 0;
	padding: 0.6rem 0 0.6rem 1rem;
	margin: var(--wt-gap) 0;
}

.wt-example__link { font-weight: 600; }

/* ---------- Answer pages ---------- */

.wt-answer { margin-top: var(--wt-gap); }

.wt-answer__summary {
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	margin: 0 0 0.4rem;
}

.wt-answer__question { font-size: 1rem; color: var(--wt-muted); margin: 0 0 var(--wt-gap-lg); }
.wt-answer__cta { margin: var(--wt-gap-lg) 0; }

/* ---------- Affiliate ---------- */

.wt-affiliate {
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius);
	padding: 0.9rem 1.1rem;
	margin-bottom: var(--wt-gap);
	background: var(--wt-surface-subtle);
	font-size: var(--wt-size-sm);
}

.wt-affiliate__label {
	margin: 0 0 0.35rem;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wt-faint);
}

.wt-affiliate__body p:last-child { margin-bottom: 0; }

/* ---------- Self-constraining containers ---------- */

/*
 * The header logo and site footer render inside theme template parts. When a
 * template part is stripped back to a bare shortcode block, the theme's own
 * constrained-width Group goes with it and the content runs edge to edge.
 *
 * These two blocks constrain themselves using the theme's own layout variables,
 * so they line up with the page content whether or not a Group wraps them. The
 * fallbacks match Twenty Twenty-Five's defaults.
 */

.wt-footer,
.wt-logo-bar {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--50, clamp(1.25rem, 5vw, 2.5rem));
}

/* ---------- Byline and footers ---------- */

.wt-byline {
	border-top: 1px solid var(--wt-border);
	margin-top: var(--wt-gap-lg);
	padding-top: var(--wt-gap);
	font-size: 0.9375rem;
}

.wt-byline__name { margin: 0; font-weight: 700; }
.wt-byline__bio { margin: 0.25rem 0 0; color: var(--wt-muted); }

.wt-sitefoot {
	border-top: 1px solid var(--wt-border);
	margin-top: var(--wt-gap-lg);
	padding-top: var(--wt-gap);
	font-size: var(--wt-size-sm);
	color: var(--wt-muted);
}

.wt-sitefoot__note { margin: 0 0 0.5rem; }

.wt-sitefoot__links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wt-footer { padding-block: var(--wt-gap-lg) var(--wt-gap); font-size: var(--wt-size-sm); }

.wt-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: var(--wt-gap-lg);
	margin-bottom: var(--wt-gap-lg);
}

.wt-footer__heading {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wt-faint);
	margin: 0 0 0.6rem;
	font-weight: 600;
}

.wt-footer__col ul { list-style: none; margin: 0; padding: 0; }
.wt-footer__col li { padding: 0.22rem 0; }
.wt-footer__col a { text-decoration: none; color: inherit; }
.wt-footer__col a:hover { color: var(--wt-accent); }

.wt-footer__note {
	border-top: 1px solid var(--wt-border);
	padding-top: var(--wt-gap);
	margin: 0;
	color: var(--wt-muted);
	max-width: 70ch;
}

/* ---------- Logo and sources page ---------- */

.wt-logo-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wt-gap);
	padding-block: 1.1rem;
	/* Anchors the mobile nav panel, which is positioned against this bar so it
	   spans the full width of the header rather than a corner of it. */
	position: relative;
}

.wt-logo { display: inline-block; line-height: 0; text-decoration: none; flex-shrink: 0; }

/* Used on its own, outside a header bar, it still needs constraining. */
.wt-logo:not(.wt-logo-bar .wt-logo) {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
}

.wt-nav a {
	text-decoration: none;
	color: inherit;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
}

.wt-nav a:hover,
.wt-nav a:focus-visible {
	color: var(--wt-accent);
	border-bottom-color: var(--wt-accent);
}
.wt-logo svg, .wt-logo img { height: 40px; width: auto; max-width: 100%; }

.wt-sources--full ul { list-style: none; padding: 0; }
.wt-sources--full li { padding: 0.6rem 0; border-bottom: 1px solid var(--wt-border); }
.wt-sources__checked { display: block; font-size: var(--wt-size-xs); color: var(--wt-faint); }

/* ---------- Twenty Twenty-Five integration ---------- */

/*
 * Twenty Twenty-Five renders a page as:
 *
 *   <main class="wp-block-group has-global-padding is-layout-constrained"
 *         style="margin-top:var(--wp--preset--spacing--60)">
 *     <div class="wp-block-group alignfull has-global-padding"
 *          style="padding-top:var(--wp--preset--spacing--60);
 *                 padding-bottom:var(--wp--preset--spacing--60)">
 *       <h1 class="wp-block-post-title">…</h1>
 *       <div class="entry-content wp-block-post-content">…</div>
 *
 * Spacing 60 is clamp(30px, 7vw, 70px), and it is applied twice — once as a
 * margin on main, once as padding on the group. On a wide screen that is 140px
 * of empty space before the title, and the title itself then adds its own.
 *
 * Both are INLINE styles, so no ordinary selector can override them however
 * specific it is. That is why earlier attempts had no effect: the rules were
 * valid and simply lost to the cascade. !important is the only lever, and the
 * .wt-page body class keeps it off every page the plugin does not own.
 *
 * Other TT5 facts worth recording:
 * - Content width 645px, wide 1340px.
 * - Root padding is spacing 50 left/right, zero top/bottom.
 * - Palette is base, contrast, accent-1 to accent-6. There is no base-2.
 * - Default box-sizing is content-box, so our border-box reset matters here.
 * - Body font is Manrope at weight 300, headings at 400.
 */

body.wt-page .wp-site-blocks > main {
	margin-top: var(--wp--preset--spacing--40, 30px) !important;
}

body.wt-page .wp-site-blocks > main > .wp-block-group {
	padding-top: 0 !important;
	padding-bottom: var(--wp--preset--spacing--50, clamp(30px, 5vw, 50px)) !important;
}

/*
 * The home page renders its own H1 in the hero, so the theme's title block is a
 * duplicate. Assigning the "Page (No Title)" template removes it structurally
 * and is the better fix; this keeps the page tidy until that is done.
 */
body.wt-page--home .wp-block-post-title {
	display: none;
}

/*
 * Tool pages keep the theme's title — it is the page's real H1 and carries the
 * search term. No override needed beyond the shared spacing above; the class is
 * declared so the markup has no orphaned hooks.
 */
body.wt-page--tool .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--30, 20px);
}

/*
 * Content pages — the hub, guides, About, Sources — keep their title, since it
 * is the page's real H1. They only need the doubled top spacing removed.
 */
body.wt-page--content .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--30, 20px);
}

/* Answer pages open with their own summary line, so the title sits tighter. */
body.wt-page--answer .wp-block-post-title {
	margin-bottom: var(--wp--preset--spacing--20, 10px);
}

body.wt-page .wp-block-post-content,
body.wt-page .entry-content {
	margin-block-start: 0;
}

/*
 * Twenty Twenty-Five sets a content measure of 645px, which is right for an
 * article and far too narrow for a calculator: a timesheet grid, a result with
 * three figures side by side, or a six-card tool grid all need more room.
 *
 * The theme's own wide measure is 1340px, so this is not inventing a width —
 * it is using the one the theme already defines for content that needs it. Text
 * inside our markup keeps its own max-width per element, so lines never become
 * uncomfortably long just because the container grew.
 */
body.wt-page .entry-content > .wt,
body.wt-page .wp-block-post-content > .wt {
	max-width: min( 1080px, var( --wp--style--global--wide-size, 1340px ) );
	margin-inline: auto;
}

/*
 * Text pages are the exception, and getting this wrong is very visible.
 *
 * The theme constrains its own paragraphs and headings to the content measure
 * — 645px in Twenty Twenty-Five — and centres them. Our blocks were taking the
 * wider 1080px measure and centring that. Two centred columns of different
 * widths have different left edges, so a page alternating between theme prose
 * and a plugin block visibly stepped left and right down the screen. On the
 * contact page the intro sat inset, the form jumped out to the left, and the
 * list after it stepped back in again.
 *
 * On a page that is mostly prose there is no reason for our blocks to be
 * wider: a form and a paragraph want the same measure. Calculator, answer and
 * home pages keep the wider one, because a ten-tool grid and a results table
 * genuinely need it.
 */
body.wt-page--content .entry-content > .wt,
body.wt-page--content .wp-block-post-content > .wt {
	max-width: var( --wp--style--global--content-size, 645px );
}

/*
 * Two exceptions, and they are the reason this is a list rather than a blanket
 * rule. The calculators hub and the statutory rates page are both content
 * pages by every other measure, but one holds a ten-tool grid and the other a
 * table of every statutory figure. Squeezing either into the prose measure
 * would break it to fix an alignment problem it does not have.
 */
body.wt-page--content .entry-content > .wt-hub,
body.wt-page--content .entry-content > .wt-rates,
body.wt-page--content .wp-block-post-content > .wt-hub,
body.wt-page--content .wp-block-post-content > .wt-rates {
	max-width: min( 1080px, var( --wp--style--global--wide-size, 1340px ) );
}

body.wt-page .entry-content,
body.wt-page .wp-block-post-content {
	max-width: none;
}

/* Prose inside the wider container keeps a readable measure. */
.wt-hero__intro,
.wt-card__desc,
.wt-answer__commentary p,
.wt-dia__caption,
.wt-disclaimer p,
.wt-trust__item p {
	max-width: 68ch;
}

.wt-home,
.wt-answer {
	margin-block-start: 0;
}

/*
 * Belt and braces alongside the render_block filter that removes these server
 * side. Kept because a theme could render post meta through a path the filter
 * does not see, and an empty byline is worse than a missing one.
 */

body.wt-page--answer .wp-block-post-author-name,
body.wt-page--answer .wp-block-post-author,
body.wt-page--answer .wp-block-post-terms,
body.wt-page--answer .wp-block-post-date {
	display: none;
}

/*
 * TT5 sets body font-weight 300, which is too light for figures and labels.
 * Nudged up only inside our own markup.
 */
.wt {
	font-weight: 400;
}

.wt-figure__value,
.wt-chart__value,
.wt-grid__total {
	font-weight: 700;
}

/* ---------- Utilities ---------- */

.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;
}

.wt-grid,
.wt-breakdown,
.wt-hub__grid,
.wt-result__figures { max-width: 100%; }

[data-wt-when][hidden] { display: none; }

/* ---------- Responsive ---------- */

@media (max-width: 640px) {
	.wt { --wt-gap-xl: 2.25rem; --wt-gap-lg: 1.5rem; }

	/*
	 * Header sizing lives in the header's own media block above, not here.
	 * This copy set flex-wrap: wrap and a 32px logo, and being later in the
	 * file it silently beat the newer rules — the header kept wrapping onto
	 * two rows no matter what was written earlier.
	 */

	.wt-grid thead { display: none; }

	.wt-grid,
	.wt-grid tbody,
	.wt-grid tr,
	.wt-grid td { display: block; width: 100%; }

	.wt-grid__row {
		border: 1px solid var(--wt-border);
		border-radius: var(--wt-radius-lg);
		padding: 0.75rem;
		margin-bottom: 0.75rem;
	}

	.wt-grid td { border-bottom: 0; padding: 0.25rem 0; }
	.wt-figure__value { font-size: 1.6rem; }
	.wt-workings dl { grid-template-columns: 1fr; gap: 0.15rem; }
	.wt-workings dt { margin-top: 0.6rem; }

	/*
	 * Result breakdowns and the statutory rates tables never reflowed, so on a
	 * phone they pushed the page sideways. Only the timesheet grid had mobile
	 * handling, because it was the only table that existed when this was
	 * written.
	 *
	 * These are genuine data tables with meaningful column relationships, so
	 * they are scrolled rather than stacked — stacking a three-column
	 * comparison destroys the comparison. The wrapper keeps the scroll inside
	 * the table instead of moving the whole page.
	 */
	.wt-breakdown {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.wt-breakdown th,
	.wt-breakdown td {
		white-space: nowrap;
	}

	.wt-breakdown th[scope="row"] {
		white-space: normal;
		min-width: 9rem;
	}

	.wt-rates .wt-breakdown th[scope="row"] {
		width: auto;
	}

	.wt-answers a {
		padding: 0.85rem 0.25rem;
	}

	.wt-result__figures {
		gap: 0.6rem;
	}

	.wt-figure {
		flex: 1 1 100%;
		padding: 0.9rem 1rem;
	}

	.wt-howto li {
		padding-left: 2.3rem;
	}

	.wt-faq summary {
		padding: 1rem 0;
	}

	/*
	 * On a phone the grouped switcher was a full screen of navigation before the
	 * calculator the visitor actually came for — ten pills, four labels, roughly
	 * 1,100px. Grouping is genuinely useful on a wide screen where it all sits
	 * in view at once; on a narrow one it just buries the tool.
	 *
	 * So on mobile it collapses to a single horizontally scrollable row. The
	 * groups still exist in the markup and for screen readers; they simply stop
	 * taking vertical space. Roughly 1,100px becomes about 60px.
	 */
	.wt-toolnav--grouped {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0.4rem;
		padding-bottom: 0.6rem;
		margin-bottom: var(--wt-gap);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}

	.wt-toolnav--grouped::-webkit-scrollbar {
		display: none;
	}

	/* The group becomes transparent to layout so its pills join the one row. */
	.wt-toolnav__group {
		display: contents;
	}

	.wt-toolnav__label {
		display: none;
	}

	.wt-toolnav--grouped ul {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.4rem;
		margin: 0;
	}

	.wt-toolnav--grouped li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.wt-toolnav--grouped li a,
	.wt-toolnav--grouped li span {
		white-space: nowrap;
	}

	/*
	 * The current tool is already the page's H1 directly above. Repeating it as
	 * the first pill pushes every other option off-screen, so it is dropped from
	 * the row and the visitor sees where else they can go instead.
	 */
	.wt-toolnav--grouped li.is-current {
		display: none;
	}

	/*
	 * On a phone the tool comes first and the introduction follows it.
	 *
	 * Two paragraphs of context are worth reading on a wide screen where they
	 * sit beside the form; on a narrow one they push the calculator below the
	 * fold, and someone who searched "holiday entitlement calculator" has
	 * already decided they want the calculator.
	 *
	 * Done with flex order rather than by moving the markup, so the document
	 * order a screen reader follows is unchanged — intro, then tool. Only the
	 * visual order differs, and only here.
	 */
	.wt-tool {
		display: flex;
		flex-direction: column;
	}

	.wt-tool__main {
		order: 1;
	}

	.wt-tool__intro {
		order: 2;
		margin-top: var(--wt-gap-lg);
		padding-top: var(--wt-gap);
		border-top: 1px solid var(--wt-border);
	}

	.wt-tool__after {
		order: 3;
	}

	/* The lead paragraph loses its emphasis once it is no longer the opening. */
	.wt-tool__intro .wt-intro__lead {
		font-size: 1rem;
	}
}

/* Anything unexpectedly wide is contained rather than pushing the page. */
.wt img,
.wt svg,
.wt table,
.wt pre {
	max-width: 100%;
}

.wt {
	overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
	.wt-card, .wt-button { transition: none; }
	.wt-card:hover { transform: none; }
}

/* ---------- Dark mode ---------- */

/* Admin-only; its bar is styled inline so the front-end sheet stays lean. */
.wt-setup-progress {
	max-width: 60rem;
}

/* ---------- Surfaces ---------- */

/*
 * A tinted canvas with raised white panels. Applied only to pages the plugin
 * owns, so the rest of the site keeps the theme's own background.
 */

body.wt-page {
	background: var(--wt-canvas);
}

body.wt-page .wt-card,
body.wt-page .wt-options,
body.wt-page .wt-figure,
body.wt-page .wt-related,
body.wt-page .wt-dia,
body.wt-page .wt-fieldset,
body.wt-page .wt-affiliate,
body.wt-page .wt-embed-builder__item,
body.wt-page .wt-menu__panel {
	background: var(--wt-raised);
	box-shadow: var(--wt-shadow);
}

body.wt-page .wt-card:hover {
	box-shadow: var(--wt-shadow-lift);
	border-color: var(--wt-accent-edge);
}

/* The header sits on white so it reads as chrome above the tinted page. */
body.wt-page .wt-logo-bar {
	background: var(--wt-raised);
	border-bottom: 1px solid var(--wt-border);
}

/* The form is the point of a calculator page, so it gets a panel of its own. */
body.wt-page--tool .wt-form {
	background: var(--wt-raised);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	box-shadow: var(--wt-shadow);
	padding: 1.5rem;
}

body.wt-page--tool .wt-form .wt-options {
	box-shadow: none;
	background: var(--wt-canvas);
}

/* The result is the answer — it earns the accent. */
body.wt-page .wt-result {
	background: var(--wt-accent-wash);
	border: 1px solid var(--wt-accent-edge);
	border-top-width: 3px;
	border-top-color: var(--wt-accent);
	border-radius: var(--wt-radius-lg);
	padding: 1.5rem;
	margin-top: var(--wt-gap-lg);
}

body.wt-page .wt-figure {
	border-color: var(--wt-accent-edge);
}

body.wt-page .wt-figure__value {
	color: var(--wt-accent);
}

/*
 * One rule, not two. There used to be an earlier .wt-card__badge higher up
 * setting a grey colour, which this one then overrode — the only genuine
 * conflicting duplicate in the file. Its typography is folded in here.
 */
.wt-card__badge {
	margin: 0;
	display: inline-block;
	align-self: flex-start;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
	background: var(--wt-accent-wash);
	color: var(--wt-accent);
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* A short accent rule under section headings, to break up long pages. */
.wt-section__title::after,
.wt-howto h2::after,
.wt-faqs h2::after,
.wt-guidelinks h2::after,
.wt-toolanswers h2::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.5rem;
	border-radius: 2px;
	background: var(--wt-accent);
}



/* ---------- Colour scheme ---------- */

/*
 * There is deliberately no prefers-color-scheme: dark block here, and this is
 * the reason.
 *
 * There used to be one. It flipped our muted text, faint text and borders to
 * white when the device was set to dark mode — which is correct only if the
 * page background goes dark too. Twenty Twenty-Five has no dark mode: its
 * background stays white whatever the device is set to.
 *
 * The result was white text on a white page for every visitor browsing in dark
 * mode, which is most phone users in the evening. Card descriptions, the hero
 * intro, field hints, the tool group labels and every input border simply
 * disappeared, while the headings stayed visible because they inherited the
 * theme's own dark contrast colour. The page looked like it had enormous
 * spacing bugs; the text was there all along, just invisible.
 *
 * Our palette follows the theme's, so if a dark theme is ever used the tokens
 * that reference --wp--preset--color--* adapt on their own. Anything we cannot
 * derive from the theme stays light, because guessing wrong is what broke it.
 *
 * If a dark variant is wanted later, it belongs behind a class the theme sets,
 * not a media query that assumes the theme followed the device.
 */


/* ---------- Remaining structural hooks ---------- */

/*
 * These carry no visual weight of their own but exist as styling hooks and as
 * print/JS targets. Declared explicitly so nothing in the markup is orphaned.
 */

.wt-home,
.wt-hub,
.wt-form { display: block; }

.wt-input--label { font-weight: 600; }

.wt-notice--warning {
	border-color: var(--wt-warning-border);
	background: var(--wt-warning-bg);
}

.wt-citation__publisher {
	color: var(--wt-faint);
	font-size: var(--wt-size-xs);
}

/* .wt-no-print is a print-stylesheet target; no screen styling by design. */

/* ---------- Preset chips ---------- */

.wt-presets {
	margin: 0 0 var(--wt-gap-lg);
}

.wt-presets__label {
	display: block;
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wt-faint);
	margin-bottom: 0.5rem;
}

.wt-presets ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wt-presets a {
	display: inline-block;
	padding: 0.35rem 0.8rem;
	border: 1px dashed var(--wt-border-strong);
	border-radius: 999px;
	font-size: var(--wt-size-sm);
	text-decoration: none;
	color: inherit;
	background: var(--wt-surface);
}

.wt-presets a:hover,
.wt-presets a:focus-visible {
	border-style: solid;
	border-color: var(--wt-accent);
	color: var(--wt-accent);
}

.wt-footer__note--independent {
	border-top: 0;
	padding-top: 0.5rem;
	font-size: var(--wt-size-xs);
	color: var(--wt-faint);
}

/* ---------- Embed builder ---------- */

.wt-embed-builder p { max-width: 70ch; }

.wt-embed-builder h3 {
	font-size: 1.05rem;
	margin: var(--wt-gap-lg) 0 0.5rem;
}

/*
 * The embed's own footer is styled inline in the standalone document, since it
 * renders outside this stylesheet's .wt scope. Declared here so the class is
 * not orphaned and so a theme override has something to target.
 */
.wt-embed__foot {
	font-size: var(--wt-size-xs);
	color: var(--wt-muted);
}

.wt-embed-builder__item {
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	padding: 1.25rem;
	margin-bottom: var(--wt-gap);
}

.wt-embed-builder__item h3 {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
}

.wt-embed-builder__code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	line-height: 1.5;
	resize: vertical;
}

.wt-embed .wt-result { margin-top: var(--wt-gap); }

.wt-answer__commentary {
	margin: 0 0 var(--wt-gap-lg);
	max-width: 68ch;
}

.wt-answer__commentary p {
	margin: 0 0 0.85rem;
}

.wt-answer__commentary p:first-child {
	font-size: 1.05rem;
}

/* ---------- Guide diagrams ---------- */

.wt-dia {
	margin: var(--wt-gap-lg) 0;
	padding: 1.25rem;
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
}

.wt-dia__title {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wt-faint);
	margin-bottom: 0.85rem;
}

.wt-dia__svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.wt-dia__band {
	fill: var(--wt-accent);
}

.wt-dia__band--free {
	fill: color-mix(in srgb, var(--wt-accent) 25%, #ffffff);
}

.wt-dia__line {
	fill: none;
	stroke: var(--wt-accent);
	stroke-width: 2.5;
	stroke-linejoin: round;
}

.wt-dia__grid {
	stroke: var(--wt-border);
	stroke-width: 1;
}

.wt-dia__marker {
	stroke: var(--wt-accent);
	stroke-width: 1;
	stroke-dasharray: 3 3;
	opacity: 0.6;
}

.wt-dia__tick {
	font-size: 11px;
	fill: var(--wt-faint);
	text-anchor: end;
	font-family: inherit;
}

.wt-dia__tick--x {
	text-anchor: middle;
}

.wt-dia__label {
	font-size: 13px;
	fill: var(--wt-ink);
	dominant-baseline: middle;
	font-family: inherit;
}

.wt-dia__note {
	font-size: 12px;
	fill: var(--wt-accent);
	font-weight: 700;
	font-family: inherit;
}

.wt-dia__caption {
	margin: 0.85rem 0 0;
	font-size: var(--wt-size-sm);
	color: var(--wt-muted);
	max-width: 68ch;
}

@supports not (fill: color-mix(in srgb, red 50%, blue)) {
	.wt-dia__band--free { fill: var(--wt-accent); opacity: 0.3; }
}

/* ---------- Popular answers ---------- */

.wt-answers {
	display: grid;
	/* 19rem is 304px, wider than a 320px screen once padding is taken off. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 0;
	list-style: none;
	margin: var(--wt-gap) 0 0;
	padding: 0;
	border-top: 1px solid var(--wt-border);
}

.wt-answers li {
	border-bottom: 1px solid var(--wt-border);
}

.wt-answers a {
	display: block;
	padding: 0.7rem 0.25rem;
	text-decoration: none;
	color: inherit;
	font-size: var(--wt-size-sm);
	line-height: 1.45;
}

.wt-answers a::before {
	content: "→";
	margin-right: 0.5rem;
	color: var(--wt-accent);
}

.wt-answers a:hover,
.wt-answers a:focus-visible {
	color: var(--wt-accent);
}

.wt-freshness {
	margin: var(--wt-gap-lg) 0 0;
	padding-top: var(--wt-gap);
	border-top: 1px solid var(--wt-border);
	font-size: var(--wt-size-sm);
	color: var(--wt-muted);
}

/* ---------- Calculator page content ---------- */

.wt-intro {
	margin-bottom: var(--wt-gap-lg);
}

.wt-intro p {
	margin: 0 0 0.85rem;
	max-width: 68ch;
}

.wt-intro__lead {
	font-size: 1.15rem;
	line-height: 1.5;
}

.wt-howto,
.wt-faqs,
.wt-guidelinks,
.wt-toolanswers {
	margin-top: var(--wt-gap-xl);
	padding-top: var(--wt-gap-lg);
	border-top: 1px solid var(--wt-border);
}

.wt-howto h2,
.wt-faqs h2,
.wt-guidelinks h2,
.wt-toolanswers h2 {
	font-size: 1.3rem;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wt-gap);
}

.wt-howto ol {
	counter-reset: wt-step;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 72ch;
}

.wt-howto li {
	counter-increment: wt-step;
	position: relative;
	padding: 0 0 1rem 2.6rem;
}

.wt-howto li::before {
	content: counter(wt-step);
	position: absolute;
	left: 0;
	top: 0.1rem;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--wt-accent);
	color: var(--wt-accent-ink);
	font-size: 0.8125rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wt-howto li strong {
	display: block;
	margin-bottom: 0.15rem;
}

.wt-howto li span {
	color: var(--wt-muted);
	font-size: var(--wt-size-sm);
	line-height: 1.55;
}

.wt-faq {
	border-bottom: 1px solid var(--wt-border);
}

.wt-faq summary {
	cursor: pointer;
	padding: 0.85rem 0;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	align-items: baseline;
}

.wt-faq summary::-webkit-details-marker {
	display: none;
}

.wt-faq summary::after {
	content: "+";
	color: var(--wt-accent);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1;
	flex: 0 0 auto;
}

.wt-faq[open] summary::after {
	content: "\2212";
}

.wt-faq__answer {
	padding: 0 0 1rem;
	max-width: 70ch;
}

.wt-faq__answer p {
	margin: 0 0 0.75rem;
	color: var(--wt-muted);
	font-size: var(--wt-size-sm);
	line-height: 1.6;
}

.wt-faq__answer p:last-child {
	margin-bottom: 0;
}

/* ---------- Tool icons ---------- */

.wt-card--tool {
	padding-top: 1.15rem;
}

.wt-card__icon {
	width: 30px;
	height: 34px;
	color: var(--wt-accent);
	margin-bottom: 0.35rem;
	display: block;
	opacity: 0.9;
}

.wt-card--tool:hover .wt-card__icon {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.wt-card__icon {
		transition: opacity 0.15s ease;
	}
}

/* ---------- Grouped tool switcher ---------- */

/*
 * Ten tools in one row is a list, not a switcher, so they group into four
 * labelled sets. Two things this layout has to get right:
 *
 * The label must not look tappable. It is a span, and the pill styling above
 * originally caught every span inside the nav, so "HOURS AND PAY" rendered as
 * a bordered pill sitting next to real links. Scoping that rule to `li a` and
 * `li span` fixes it at the source.
 *
 * And the groups must not float. A plain flex row let a two-tool group drift
 * to wherever there was space, so "FAMILY LEAVE" ended up stranded on the far
 * right, level with a heading it had nothing to do with. A grid keeps each
 * group in a column of its own.
 */

.wt-toolnav--grouped {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
	gap: var(--wt-gap) var(--wt-gap-lg);
	align-items: start;
	margin-bottom: var(--wt-gap-lg);
	padding-bottom: var(--wt-gap);
	border-bottom: 1px solid var(--wt-border);
}

.wt-toolnav--grouped ul {
	margin: 0;
	gap: 0.35rem;
}

.wt-toolnav__group {
	flex: 0 1 auto;
}

.wt-toolnav__label {
	display: block;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wt-faint);
	font-weight: 600;
	margin-bottom: 0.4rem;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 0;
}

.wt-toolnav--grouped li a,
.wt-toolnav--grouped li span {
	font-size: 0.8125rem;
	/*
	 * 0.55rem vertical padding plus the line box clears 44px, the minimum
	 * comfortable touch target. At 0.3rem these measured about 33px, which is
	 * fiddly on a phone where ten of them sit close together.
	 */
	padding: 0.55rem 0.85rem;
}



/* ---------- Statutory rates page ---------- */

.wt-rates > p {
	max-width: 70ch;
}

.wt-rates h2 {
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	margin: var(--wt-gap-lg) 0 0.6rem;
	padding-top: var(--wt-gap);
	border-top: 1px solid var(--wt-border);
}

.wt-rates h2:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.wt-rates .wt-breakdown {
	font-size: var(--wt-size-sm);
	margin-bottom: 0;
}

.wt-rates .wt-breakdown th[scope="row"] {
	font-weight: 400;
	color: var(--wt-muted);
	width: 45%;
}

.wt-rates .wt-breakdown td {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* ---------- Calculator page order ---------- */

.wt-tool__intro,
.wt-tool__main,
.wt-tool__after {
	display: block;
}



/* ---------- Header dropdown ---------- */

.wt-menu {
	position: relative;
}

.wt-menu > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
}

.wt-menu > summary::-webkit-details-marker {
	display: none;
}

/*
 * Twenty Twenty-Five puts a 2px solid outline on anything focused, and tapping
 * a summary focuses it — so on a phone the Calculators row got a heavy navy box
 * drawn around it the moment it was opened.
 *
 * A tap should not leave a focus ring; keyboard focus still should. That is
 * exactly the difference between :focus and :focus-visible, so the outline is
 * removed for the first and restored for the second.
 */
.wt-menu > summary:focus {
	outline: none;
}

.wt-menu > summary:focus-visible {
	outline: 2px solid var(--wt-accent);
	outline-offset: 2px;
	border-radius: var(--wt-radius);
}

.wt-menu > summary::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	opacity: 0.55;
}

.wt-menu[open] > summary::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.wt-menu > summary:hover,
.wt-menu[open] > summary {
	color: var(--wt-accent);
	border-bottom-color: var(--wt-accent);
}

.wt-menu__panel {
	position: absolute;
	top: calc(100% + 0.75rem);
	right: 0;
	z-index: 60;
	min-width: 30rem;
	max-width: min(38rem, calc(100vw - 2rem));
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
	padding: 1.25rem;
	background: var(--wt-surface);
	border: 1px solid var(--wt-border);
	border-radius: var(--wt-radius-lg);
	box-shadow: 0 12px 32px rgba(20, 30, 40, 0.13);
}

.wt-menu__label {
	display: block;
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--wt-faint);
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.wt-menu__group ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wt-menu__group li {
	padding: 0;
}

.wt-menu__group a {
	display: block;
	padding: 0.4rem 0.5rem;
	margin-left: -0.5rem;
	border-radius: var(--wt-radius);
	font-size: var(--wt-size-sm);
	font-weight: 400;
	text-decoration: none;
	color: inherit;
	line-height: 1.35;
}

.wt-menu__group a:hover,
.wt-menu__group a:focus-visible {
	background: var(--wt-surface-subtle);
	color: var(--wt-accent);
}

.wt-menu__group a[aria-current="page"] {
	color: var(--wt-accent);
	font-weight: 700;
}

.wt-menu__all {
	grid-column: 1 / -1;
	padding-top: 0.85rem;
	border-top: 1px solid var(--wt-border);
	font-size: var(--wt-size-sm);
	font-weight: 600;
	text-decoration: none;
	color: var(--wt-accent);
}



/* ---------- Group colour ---------- */

/*
 * One hue per tool group, used only on the icon and a hairline at the top of
 * the card. Enough to make the four groups scannable at a glance without
 * turning a reference site into a colour chart — the accent still carries
 * every interactive element.
 *
 * All four are darkened toward the accent rather than picked independently, so
 * they read as one family.
 */

.wt-card--tool {
	position: relative;
	overflow: hidden;
}

.wt-card--tool::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--wt-group, var(--wt-accent));
}

.wt-card--tool .wt-card__icon {
	color: var(--wt-group, var(--wt-accent));
}

.wt-card--pay      { --wt-group: #1b4965; }
.wt-card--time-off { --wt-group: #2a7d6f; }
.wt-card--family   { --wt-group: #7a4a86; }
.wt-card--leaving  { --wt-group: #a8582f; }

.wt-card--tool:hover {
	border-color: var(--wt-group, var(--wt-accent));
}

/* Group labels in the header menu pick up the same hue. */
.wt-menu__group:nth-child(1) .wt-menu__label { color: #1b4965; }
.wt-menu__group:nth-child(2) .wt-menu__label { color: #2a7d6f; }
.wt-menu__group:nth-child(3) .wt-menu__label { color: #7a4a86; }
.wt-menu__group:nth-child(4) .wt-menu__label { color: #a8582f; }


/* ---------- Primary navigation ---------- */

/*
 * One markup structure, two layouts. On a wide screen the panel is a row of
 * links and the Menu button is hidden. On a phone the button appears and the
 * panel becomes a full-width list of rows behind it.
 *
 * The toggle is a checkbox, not a script and not a details element. Whether a
 * details element is open is DOM state, so CSS cannot open it at one breakpoint
 * and close it at another — which is exactly what a nav that changes shape
 * needs. A checkbox can be ignored entirely on desktop.
 */

.wt-nav__checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.wt-nav__button {
	display: none;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	border: 1px solid var(--wt-border-strong);
	border-radius: var(--wt-radius);
	font-size: var(--wt-size-sm);
	font-weight: 600;
	cursor: pointer;
	background: var(--wt-raised, #fff);
	user-select: none;
}

/* Three bars, drawn rather than shipped as an icon. */
.wt-nav__bars,
.wt-nav__bars::before,
.wt-nav__bars::after {
	display: block;
	width: 1rem;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.wt-nav__bars {
	position: relative;
}

.wt-nav__bars::before,
.wt-nav__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.wt-nav__bars::before { top: -5px; }
.wt-nav__bars::after  { top: 5px; }

.wt-nav__checkbox:focus-visible + .wt-nav__button {
	outline: 2px solid var(--wt-accent);
	outline-offset: 2px;
}

.wt-nav__panel {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.wt-nav__link {
	text-decoration: none;
	color: inherit;
	font-weight: 600;
	padding: 0.25rem 0;
	border-bottom: 2px solid transparent;
}

.wt-nav__link:hover,
.wt-nav__link:focus-visible {
	color: var(--wt-accent);
	border-bottom-color: var(--wt-accent);
}

@media (max-width: 780px) {
	.wt-nav__button {
		display: inline-flex;
	}

	/*
	 * Full width and below the header bar, so the panel is a page of its own
	 * rather than a box squeezed into a corner. This is the part that makes it
	 * feel calm on a phone: every row is the same width, tappable across its
	 * whole length, and separated by a hairline.
	 */
	.wt-nav__panel {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 60;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-inline: var(--wp--preset--spacing--50, clamp(1.25rem, 5vw, 2.5rem));
		background: var(--wt-raised, #fff);
		border-bottom: 1px solid var(--wt-border);
		box-shadow: var(--wt-shadow-lift, 0 10px 24px rgba(20, 40, 60, 0.09));
		max-height: calc(100vh - 5rem);
		overflow-y: auto;
	}

	.wt-nav__checkbox:checked ~ .wt-nav__panel {
		display: flex;
	}

	.wt-nav__link,
	.wt-menu > summary {
		padding: 1rem 0;
		border-bottom: 1px solid var(--wt-border);
		border-top: 0;
		font-size: 1rem;
		font-weight: 500;
		width: 100%;
	}

	.wt-nav__link:last-child {
		border-bottom: 0;
	}

	.wt-menu {
		width: 100%;
	}

	.wt-menu > summary {
		justify-content: space-between;
	}

	/* Nested inside the panel, so it indents rather than floating. */
	body.wt-page .wt-menu__panel,
	.wt-menu__panel {
		position: static;
		width: auto;
		min-width: 0;
		max-width: none;
		grid-template-columns: 1fr;
		gap: 0.6rem;
		margin: 0;
		padding: 0.9rem 0 1rem 0.75rem;
		/* No card edges inside the panel — it is already inside one. */
		background: none;
		border: 0;
		border-bottom: 1px solid var(--wt-border);
		border-radius: 0;
		box-shadow: none;
		max-height: none;
		overflow: visible;
	}

	/* The open row keeps its hairline; nothing heavier. */
	.wt-menu[open] > summary {
		color: inherit;
		border-bottom-color: var(--wt-border);
	}

	.wt-menu > summary:hover {
		color: var(--wt-accent);
	}
}

/* ---------- Contact form ---------- */

.wt-contact__form {
	max-width: 42rem;
}

/*
 * The honeypot. Positioned off-screen rather than display:none, because some
 * bots skip anything that is display:none — and hidden from assistive
 * technology, so a screen reader never announces a field nobody should fill.
 */
.wt-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wt-notice {
	padding: 1rem 1.15rem;
	margin-bottom: var(--wt-gap-lg);
	border: 1px solid var(--wt-border);
	border-left-width: 3px;
	border-radius: var(--wt-radius);
	background: var(--wt-raised, #fff);
}

.wt-notice p:last-child,
.wt-notice ul:last-child {
	margin-bottom: 0;
}

.wt-notice--good {
	border-left-color: #1e7a52;
}

.wt-notice--error {
	border-left-color: #c0392b;
}

.wt-contact textarea.wt-input {
	min-height: 9rem;
	resize: vertical;
}

/* ---------- Page sidebar ---------- */

/*
 * Breathing room above a heading that has just been jumped to, so it does not
 * sit flush against the top of the window — and clear of the admin bar when
 * one is logged in.
 */
.wt-page--content h2[id] {
	scroll-margin-top: 2rem;
}

.admin-bar .wt-page--content h2[id],
body.admin-bar .wt-page--content h2[id] {
	scroll-margin-top: 4.5rem;
}

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

/*
 * A contents column beside the prose.
 *
 * Laid out by the theme, not by us: the sidebar sits in a wp:column in a page
 * template, so there is no grid to override and nothing to trick. An earlier
 * version used a :has() grid on the content wrapper and it fought the theme —
 * the post title sits outside that wrapper, so the two disagreed about how many
 * columns there were and the content disappeared entirely.
 *
 * Everything below styles the aside itself and assumes nothing about where it
 * sits, so it works in either column, at any width.
 */



.wt-sidebar {
	margin-bottom: var(--wt-gap-lg);
	font-size: var(--wt-size-sm);
}

@media (min-width: 782px) {
	/*
	 * 782px is where WordPress stacks columns, so above it the sidebar is
	 * genuinely beside the prose and can follow the reader down.
	 */
	.wt-sidebar {
		position: sticky;
		top: 2rem;
	}
}

.wt-sidebar__toc > summary {
	cursor: pointer;
	list-style: none;
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wt-faint);
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wt-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wt-sidebar__toc > summary::-webkit-details-marker {
	display: none;
}

/* A tap should not leave a focus ring; keyboard focus still should. */
.wt-sidebar__toc > summary:focus {
	outline: none;
}

.wt-sidebar__toc > summary:focus-visible {
	outline: 2px solid var(--wt-accent);
	outline-offset: 2px;
}

.wt-sidebar__toc > summary::after {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	opacity: 0.6;
}

.wt-sidebar__toc[open] > summary::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.wt-sidebar__toc ol {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	counter-reset: wt-toc;
}

.wt-sidebar__toc li {
	counter-increment: wt-toc;
	margin: 0;
}

.wt-sidebar__toc a {
	display: block;
	padding: 0.5rem 0 0.5rem 1.6rem;
	position: relative;
	text-decoration: none;
	color: var(--wt-muted);
	line-height: 1.35;
	border-left: 2px solid var(--wt-border);
}

.wt-sidebar__toc a::before {
	content: counter(wt-toc);
	position: absolute;
	left: 0.6rem;
	color: var(--wt-faint);
	font-variant-numeric: tabular-nums;
}

.wt-sidebar__toc a:hover,
.wt-sidebar__toc a:focus-visible {
	color: var(--wt-accent);
	border-left-color: var(--wt-accent);
}

/* Set by the scroll spy, which is an enhancement — links work without it. */
.wt-sidebar__toc a.is-current {
	color: var(--wt-accent);
	border-left-color: var(--wt-accent);
	font-weight: 600;
}

.wt-sidebar__tool {
	margin-top: var(--wt-gap-lg);
	padding: 1rem;
	border: 1px solid var(--wt-accent-edge, var(--wt-border));
	border-radius: var(--wt-radius-lg);
	background: var(--wt-accent-wash, var(--wt-surface-subtle));
}

.wt-sidebar__label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wt-faint);
	margin-bottom: 0.35rem;
}

.wt-sidebar__cta {
	display: block;
	font-weight: 700;
	text-decoration: none;
	color: var(--wt-accent);
	line-height: 1.3;
}

.wt-sidebar__tool p {
	margin: 0.4rem 0 0;
	font-size: var(--wt-size-xs);
	color: var(--wt-muted);
}

/*
 * 781px, matching where WordPress stacks columns — not 899px, which it was.
 * Between the two the sidebar sat beside the prose while still wearing the
 * boxed treatment meant for the stacked state.
 */
@media (max-width: 781px) {
	/*
	 * On a phone the sidebar sits above the article, so everything in it is a
	 * tax on getting to the first sentence. Open, the whole thing came to about
	 * 990px — two and a half screens before a word of the guide.
	 *
	 * What stays: the contents, closed, and the calculator the guide is about.
	 * What goes: related guides, the sign-up and the checked-on line. None of
	 * it is lost — the guide ends with its own checked-on date and sources, and
	 * the footer carries the links. Asking for an email before a word has been
	 * read is the weakest of the three anyway.
	 */
	.wt-sidebar__block,
	.wt-sidebar__checked {
		display: none;
	}

	/* Above the content, boxed, and never sticky on a small screen. */
	.wt-sidebar {
		border: 1px solid var(--wt-border);
		border-radius: var(--wt-radius-lg);
		padding: 0 1rem;
		background: var(--wt-raised, #fff);
	}

	.wt-sidebar__toc > summary {
		border-bottom: 0;
	}

	.wt-sidebar__toc[open] > summary {
		border-bottom: 1px solid var(--wt-border);
	}

	.wt-sidebar__toc ol {
		margin-bottom: 0.75rem;
	}

	.wt-sidebar__tool {
		margin-bottom: 1rem;
	}
}

/*
 * The sidebar column in the page template. Narrower than the theme's default
 * gap allows for, so the contents list does not crowd the prose.
 */
/*
 * No column gap: the space either side of the divider comes from the columns'
 * own padding instead, so the line sits centred between them rather than with
 * the gap stacked on one side of it.
 */
.wt-sidebar-layout {
	gap: 0;
}

@media (max-width: 781px) {
	.wt-sidebar-layout {
		gap: 0;
	}
}

.wt-sidebar__block {
	margin-top: var(--wt-gap-lg);
	padding-top: var(--wt-gap);
	border-top: 1px solid var(--wt-border);
}

.wt-sidebar__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wt-sidebar__links li {
	margin: 0;
}

.wt-sidebar__links a {
	display: block;
	padding: 0.45rem 0;
	text-decoration: none;
	color: var(--wt-muted);
	line-height: 1.35;
}

.wt-sidebar__links a:hover,
.wt-sidebar__links a:focus-visible {
	color: var(--wt-accent);
}

.wt-sidebar__checked {
	margin-top: var(--wt-gap);
	padding-top: var(--wt-gap);
	border-top: 1px solid var(--wt-border);
	font-size: var(--wt-size-xs);
	color: var(--wt-faint);
	line-height: 1.45;
}

/* ---------- Email list ---------- */

.wt-subscribe form {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.6rem;
}

.wt-subscribe p {
	margin: 0.3rem 0 0;
	font-size: var(--wt-size-xs);
	color: var(--wt-muted);
	line-height: 1.45;
}

.wt-subscribe__small {
	color: var(--wt-faint);
}

.wt-subscribe__done {
	padding: 0.75rem 0.85rem;
	border-left: 3px solid var(--wt-accent);
	background: var(--wt-accent-wash, var(--wt-surface-subtle));
	border-radius: var(--wt-radius);
}

.wt-button--small {
	padding: 0.5rem 0.9rem;
	font-size: var(--wt-size-sm);
}

/*
 * A divider between the sidebar and the prose.
 *
 * On the column rather than the aside: the aside is sticky, so a border on it
 * would only be as tall as its own content and would stop partway down a long
 * guide. The column is full height, so the line runs the length of the page.
 *
 * The layout class declares its own spacing tokens rather than using --wt-*.
 * Those are declared on .wt, and this wrapper is an ANCESTOR of .wt-sidebar
 * rather than a descendant — so var(--wt-gap-lg) resolved to nothing here, the
 * padding collapsed to zero, and the heading sat flush against the line.
 */
.wt-sidebar-layout {
	--wt-col-gap: 2.5rem;
	--wt-col-line: #dde3e9;
}

@media (min-width: 782px) {
	.wt-sidebar-layout > .wp-block-column:first-child {
		border-right: 1px solid var(--wt-col-line);
		padding-right: var(--wt-col-gap);
	}

	.wt-sidebar-layout > .wp-block-column:last-child {
		padding-left: var(--wt-col-gap);
	}
}

/* ---------- Answer page extras ---------- */

.wt-nearby {
	margin: var(--wt-gap-lg) 0;
	padding-top: var(--wt-gap);
	border-top: 1px solid var(--wt-border);
}

.wt-nearby__label {
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wt-faint);
	font-weight: 600;
	margin-bottom: 0.6rem;
}

.wt-nearby ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wt-nearby li {
	margin: 0;
}

.wt-nearby a {
	display: inline-block;
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--wt-border-strong);
	border-radius: 999px;
	font-size: var(--wt-size-sm);
	text-decoration: none;
	color: inherit;
	white-space: nowrap;
}

.wt-nearby a:hover,
.wt-nearby a:focus-visible {
	border-color: var(--wt-accent);
	color: var(--wt-accent);
}

/*
 * Set apart from the answer rather than dressed up. It is the last thing on
 * the page and should read as an offer, not an interruption.
 */
.wt-answer__signup {
	margin-top: var(--wt-gap-xl);
	padding-top: var(--wt-gap-lg);
	border-top: 1px solid var(--wt-border);
	max-width: 34rem;
}

@media (max-width: 640px) {
	.wt-nearby a {
		white-space: normal;
	}
}