/*
 * Civic (styles/civic.json): what the tokens cannot say. Loaded on the
 * Civic page only, every rule keyed off html[data-style="civic"] (block
 * stylesheets print after the theme's; see night.css). Thames Valley
 * Hearing is written for people who may not see or hear well: large type,
 * every text pair 7:1 or better, links underlined, 3px focus rings,
 * every control 44px or taller, labels in sentence case, and nothing that
 * moves on hover. The only motion is the runtime's fades, which it never
 * plays when the system asks for reduced motion.
 */

/* Focus: a 3px navy ring with a white gap, visible on every ground. */
html[data-style="civic"] :where(a, button, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--st-focus);
	outline-offset: 3px;
	border-radius: 4px;
	box-shadow: 0 0 0 3px #fff;
}

/* Labels: sentence case, bold, with a bar; capitals are harder to read. */
html[data-style="civic"] .wu-chip.st-label {
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wu-accent);
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

html[data-style="civic"] .wu-chip.st-label::before {
	content: "";
	width: 4px;
	height: 22px;
	border-radius: 2px;
	background: var(--wu-accent);
}

html[data-style="civic"] .wu-h2 {
	letter-spacing: -0.01em;
	line-height: 1.15;
}

html[data-style="civic"] .wu-standfirst,
html[data-style="civic"] .st-story__body,
html[data-style="civic"] .st-card__body,
html[data-style="civic"] .st-steps__body {
	line-height: 1.6;
}

html[data-style="civic"] .st-story__body {
	font-size: 20px;
}

/* Buttons: larger, at least 52px tall, colour change only on hover. */
html[data-style="civic"] .wu-button {
	min-height: 52px;
	padding: 16px 26px;
	font-size: 18px;
	font-weight: 600;
}

html[data-style="civic"] .wu-button,
html[data-style="civic"] .wu-button:hover,
html[data-style="civic"] .wu-button svg,
html[data-style="civic"] .wu-button:hover svg,
html[data-style="civic"] .wu-textlink svg,
html[data-style="civic"] .wu-textlink:hover svg {
	transform: none;
}

html[data-style="civic"] .wu-button--ghost {
	border-width: 2px;
	border-color: var(--wu-accent);
	color: var(--wu-accent);
}

/* Links: underlined, and every one a 44px target. */
html[data-style="civic"] .wu-textlink {
	min-height: 44px;
	font-size: 19px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}

html[data-style="civic"] .st-hero__call {
	font-size: 22px;
	font-weight: 700;
	text-decoration-thickness: 2px;
}

html[data-style="civic"] .st-nav a,
html[data-style="civic"] .st-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

html[data-style="civic"] .st-nav__list {
	gap: 24px;
}

html[data-style="civic"] .st-nav a {
	color: var(--wu-text);
	font-size: 17px;
	font-weight: 600;
}

html[data-style="civic"] .st-nav a:hover {
	color: var(--wu-accent);
	text-decoration: underline;
	text-underline-offset: 5px;
}

html[data-style="civic"] .st-footer__nav ul {
	gap: 0;
}

html[data-style="civic"] .st-footer__nav a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

html[data-style="civic"] .st-menu__list a:not(.wu-button) {
	font-size: 22px;
}

/* Header: opaque white, the name in navy. */
html[data-style="civic"] .st-header::before {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

html[data-style="civic"] .st-header {
	border-bottom: 2px solid var(--wu-line);
}

html[data-style="civic"] .st-brand__name {
	color: var(--wu-accent);
	font-size: 21px;
}

html[data-style="civic"] .st-brand__tag {
	color: var(--wu-muted);
	font-size: 14px;
}

html[data-style="civic"] .st-header__cta {
	min-height: 48px;
	font-size: 16px;
}

/* The hero: plain, one action and the phone number. */
html[data-style="civic"] .st-hero--plain {
	padding-block: 48px 72px;
	background: var(--wu-surface);
}

html[data-style="civic"] .st-hero__title {
	max-width: 20ch;
	line-height: 1.1;
}

html[data-style="civic"] .st-hero__lead {
	color: var(--wu-text);
}

html[data-style="civic"] .st-proof {
	border-top: 2px solid var(--wu-line);
	font-size: 18px;
	font-weight: 600;
}

/* Cards: white, a firm border, no shadow. */
html[data-style="civic"] .st-card {
	border: 2px solid var(--wu-line);
	background: var(--wu-ground);
}

html[data-style="civic"] .st-card__tag {
	color: var(--wu-accent);
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
}

html[data-style="civic"] .st-card__text {
	padding: 26px 26px 30px;
}

/* Steps: numbers in navy circles. */
html[data-style="civic"] .st-steps__item {
	border-top: 2px solid var(--wu-line);
}

html[data-style="civic"] .st-steps__num {
	display: inline-grid;
	place-items: center;
	justify-self: start;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--wu-accent);
	color: #fff;
	font-family: var(--wu-display);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0;
}

/* Fees: the price on white inside a pale band, a firm border. */
html[data-style="civic"] .st-outcome {
	background: var(--wu-surface);
}

html[data-style="civic"] .st-outcome::before {
	display: none;
}

html[data-style="civic"] .st-price {
	border: 2px solid var(--wu-accent);
	background: var(--wu-ground);
	box-shadow: none;
}

html[data-style="civic"] .st-price__lead,
html[data-style="civic"] .st-price__note {
	font-size: 17px;
}

html[data-style="civic"] .st-price__lines dt {
	color: var(--wu-text);
}

html[data-style="civic"] .st-ticks__tick {
	background: var(--wu-accent);
	color: #fff;
}

/* The call: on the pale blue, everything large. */
html[data-style="civic"] .st-close {
	background: var(--wu-surface-2);
}

html[data-style="civic"] .st-close__lines dt {
	color: var(--wu-text);
	font-size: 17px;
}

html[data-style="civic"] .st-close__lines dd {
	font-size: 20px;
	font-weight: 700;
}

/* Footer: larger small print. */
html[data-style="civic"] .st-footer {
	font-size: 17px;
}

html[data-style="civic"] .st-footer__demo {
	font-size: 16px;
}

html[data-style="civic"] .st-footer__credit {
	font-size: 15px;
}

/* The last targets under 44px: the name link and the two links in the
   demonstration line (inline in a sentence, given the height anyway). */
html[data-style="civic"] .st-brand {
	justify-content: center;
	min-height: 44px;
}

html[data-style="civic"] .st-footer__demo a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}