/*
Theme Name: Texas Ballot Compare
Description: A polling-place signage design for the Texas Ballot Compare voter guide: sign yellow, black and white, big plain lettering and one arrow. Child theme of Twenty Twenty-Five. Colours, fonts and sizes are set in theme.json (Appearance > Editor > Styles); layout and detail are in this file.
Template: twentytwentyfive
Version: 2.1.1
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tbc

Fonts (Archivo, Atkinson Hyperlegible Next) are licensed under the SIL Open Font License 1.1 and are
served from this theme's assets/fonts folder. Nothing is loaded from another server.
*/

/* Contents
   1. Tokens          5. Front page        9. Comparison tool (Candidate Portal plugin)
   2. Base            6. Prose pages      10. Race and candidate pages
   3. Masthead        7. Dates lists      11. Footer
   4. Shared parts    8. Compare page     12. Motion, print
   Capitals in condensed Archivo are for signs (the name, page titles, front-page headings, buttons, labels).
   Anything meant to be read is set in Atkinson Hyperlegible Next, mixed case.
   Spacing follows a 4/8px rhythm: 4 8 12 16 24 32 48 64 96. */

/* ---------- 1. Tokens ---------- */

:root {
	--tbc-white: var(--wp--preset--color--base, #FFFFFF);
	--tbc-ink: var(--wp--preset--color--contrast, #111111);
	--tbc-yellow: var(--wp--preset--color--accent-1, #FFD400);
	--tbc-grey: var(--wp--preset--color--accent-2, #F0F1F2);
	--tbc-teal: var(--wp--preset--color--accent-3, #005A6B);
	--tbc-muted: var(--wp--preset--color--accent-4, #4A4F55);
	--tbc-rule: var(--wp--preset--color--accent-6, #C8CBCE);
	--tbc-on-yellow: #3D3300; /* quieter text on the yellow, tinted from it */
	--tbc-on-black: #D9DBDD;  /* quieter text on the black */
	--tbc-display: var(--wp--preset--font-family--archivo, Archivo, "Arial Narrow", Arial, sans-serif);
	--tbc-text: var(--wp--preset--font-family--atkinson, "Atkinson Hyperlegible Next", system-ui, sans-serif);

	/* Side padding of every band: fluid, and on very large monitors the content stops growing at --tbc-max
	   while backgrounds and rules still run edge to edge. */
	--tbc-gutter: clamp(16px, 4vw, 56px);
	--tbc-max: 1440px;
	--tbc-pad: max(var(--tbc-gutter), calc((100% - var(--tbc-max)) / 2));
	--tbc-measure: 68ch;
	--tbc-heavy: 4px solid var(--tbc-ink);
	--tbc-hair: 1px solid var(--tbc-rule);
	--tbc-radius: 8px;
	/* A sign plate: a rounded field with a line set in from its edge. */
	--tbc-plate: inset 0 0 0 3px var(--tbc-ink), inset 0 0 0 5px var(--tbc-yellow);

	/* Drawn marks: one block arrow, a tick and a cross. Used as masks so they take the text colour. */
	--tbc-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 9h11V3l9 9-9 9v-6H2z'/%3E%3C/svg%3E");
	--tbc-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5l6 6L20.5 6' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E");
	--tbc-i-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
	overflow-wrap: break-word; font-kerning: normal; font-variant-numeric: lining-nums; accent-color: var(--tbc-ink); caret-color: var(--tbc-ink) }
.wp-site-blocks { overflow-x: clip }
.wp-site-blocks > * { margin-block-start: 0 }
main { display: block }

a { text-decoration-thickness: 1px; text-underline-offset: 0.18em }
a:hover { text-decoration-thickness: 2px }
:where(a, button, select, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--tbc-ink); outline-offset: 2px; border-radius: 2px }
::selection { background: var(--tbc-yellow); color: var(--tbc-ink) }
h1, h2, h3 { text-wrap: balance }
h1 { font-stretch: 75% }
h2, h3, h4 { font-stretch: 92% }
strong { font-weight: 700 }

/* Small sign lettering. */
.tbc-label,
.tbc-masthead__date,
.tbc-colophon__base {
	font-family: var(--tbc-display); font-stretch: 88%; font-size: 0.8125rem; font-weight: 750; line-height: 1.35; letter-spacing: 0.05em; text-transform: uppercase;
}
p.tbc-label { color: var(--tbc-muted); margin: 0 }

/* A link that ends in the arrow. */
.tbc-arrow-link a { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 700; color: var(--tbc-ink); text-decoration-thickness: 2px }
.tbc-arrow-link a::after { content: ""; flex: none; width: 0.85em; height: 0.85em; background: currentColor;
	-webkit-mask: var(--tbc-i-arrow) center / contain no-repeat; mask: var(--tbc-i-arrow) center / contain no-repeat }
.tbc-arrow-link a:hover { text-decoration-thickness: 3px }

/* Buttons are sign plates: black, a yellow line set in from the edge, the arrow at the end. */
.wp-block-button__link { display: inline-flex; align-items: center; gap: 0.7em; transition: none; font-stretch: 82%; box-shadow: var(--tbc-plate) }
.wp-block-button__link::after { content: ""; flex: none; width: 1em; height: 1em; background: var(--tbc-yellow);
	-webkit-mask: var(--tbc-i-arrow) center / contain no-repeat; mask: var(--tbc-i-arrow) center / contain no-repeat }
.wp-block-button__link:focus-visible { outline: 3px solid var(--tbc-ink); outline-offset: 3px; border-radius: var(--tbc-radius) }

/* ---------- 3. Masthead ---------- */

/* The yellow band: the name on a black plate, then the election date. */
.tbc-masthead.wp-block-group { background: var(--tbc-yellow); color: var(--tbc-ink); padding: 12px var(--tbc-pad); gap: 8px 24px }
.tbc-masthead .wp-block-site-title { margin: 0 }
.tbc-masthead .wp-block-site-title a { display: inline-flex; align-items: center; gap: 0.6em; padding: 14px 18px 13px; border-radius: var(--tbc-radius); background: var(--tbc-ink);
	font-stretch: 78%; box-shadow: var(--tbc-plate) }
.tbc-masthead .wp-block-site-title a::after { content: ""; flex: none; width: 0.9em; height: 0.9em; background: var(--tbc-yellow);
	-webkit-mask: var(--tbc-i-arrow) center / contain no-repeat; mask: var(--tbc-i-arrow) center / contain no-repeat }
.tbc-masthead .wp-block-site-title a:focus-visible { outline-offset: 3px; border-radius: var(--tbc-radius) }
.tbc-masthead__lines.wp-block-group > * { margin: 0 }
.tbc-masthead__lines .tbc-masthead__date { font-size: 0.875rem }
.tbc-masthead__lines .tbc-masthead__aside { font-size: 0.875rem; line-height: 1.4; color: var(--tbc-on-yellow) }
@media (min-width: 700px) { .tbc-masthead__lines.wp-block-group { text-align: right } }
@media (max-width: 599px) {
	.tbc-masthead__lines .tbc-masthead__aside { display: none }
	.tbc-masthead__lines .tbc-masthead__date { font-size: 0.75rem; letter-spacing: 0.04em }
}

/* The black band: every page of the guide. On phones it folds into a menu button beside the name. */
.tbc-navband.wp-block-group { background: var(--tbc-ink); padding: 0 var(--tbc-pad) }
.tbc-navband .wp-block-navigation { margin: 0; color: var(--tbc-white) }
.tbc-navband .wp-block-navigation__container { gap: 0 clamp(18px, 2.6vw, 40px) }
.tbc-navband .wp-block-navigation-item__content { display: block; padding: 11px 0 7px; border-bottom: 4px solid transparent; color: var(--tbc-white);
	font-stretch: 88%; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2 }
.tbc-navband .wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--tbc-yellow) }
.tbc-navband .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"],
.tbc-navband .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content { color: var(--tbc-yellow); border-bottom-color: var(--tbc-yellow) }
.tbc-navband :focus-visible { outline-color: var(--tbc-yellow) }
@media (min-width: 700px) { .tbc-navband .wp-block-navigation-item__content { padding: 15px 0 11px } }

/* Phones: the menu button is a small sign plate at the right of the yellow band; it opens a full black sheet. */
.tbc-navband .wp-block-navigation__responsive-container-open,
.tbc-navband .wp-block-navigation__responsive-container-close { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tbc-radius) }
.tbc-navband .wp-block-navigation__responsive-container-open { background: var(--tbc-ink); color: var(--tbc-yellow); box-shadow: var(--tbc-plate) }
.tbc-navband .wp-block-navigation__responsive-container-open:focus-visible { outline-color: var(--tbc-ink); outline-offset: 3px; border-radius: var(--tbc-radius) }
.tbc-navband .wp-block-navigation__responsive-container-open svg,
.tbc-navband .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px }
@media (min-width: 600px) { .tbc-navband .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none } }
@media (max-width: 599px) {
	header.wp-block-template-part { position: relative }
	.tbc-navband.wp-block-group { position: absolute; top: 12px; right: var(--tbc-gutter); padding: 0; background: transparent }
	.tbc-masthead .wp-block-site-title { max-width: calc(100% - 58px) }
}
.tbc-navband .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--tbc-ink) !important; color: var(--tbc-white) !important; padding: 12px var(--tbc-gutter) 32px;
	animation: none !important; opacity: 1; transform: none } /* a solid sheet at once: no fade to get stuck half way */
.tbc-navband .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-dialog { margin-top: 0 }
.tbc-navband .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close { position: absolute; top: 0; right: 0; background: var(--tbc-yellow); color: var(--tbc-ink) }
.tbc-navband .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 70px; align-items: stretch }
.tbc-navband .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { width: 100%; align-items: stretch; gap: 0; border-top: 4px solid var(--tbc-white) }
.tbc-navband .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item { width: 100%; align-items: stretch; border-bottom: 1px solid #45484C }
.tbc-navband .wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { display: flex; align-items: center; justify-content: space-between; gap: 16px; box-sizing: border-box; width: 100%; padding: 20px 2px 18px; border-bottom: 0;
	font-size: 1.75rem; font-weight: 850; font-stretch: 78%; letter-spacing: 0.01em; line-height: 1.05; text-align: left }
.tbc-navband .wp-block-navigation .is-menu-open .wp-block-navigation-item__content::after { content: ""; flex: none; width: 0.7em; height: 0.7em; background: var(--tbc-yellow);
	-webkit-mask: var(--tbc-i-arrow) center / contain no-repeat; mask: var(--tbc-i-arrow) center / contain no-repeat }

/* ---------- 4. Shared parts ---------- */

/* Page title band (every page but the front page). */
.wp-block-group.tbc-page { margin: 0 }
.wp-block-group.tbc-page > * { margin-block: 0 }
/* It continues the black navigation band: the title is the sign you are standing under. */
.wp-block-group.tbc-pagehead { margin: 0; padding: clamp(24px, 5vw, 56px) var(--tbc-pad) clamp(20px, 3.4vw, 40px); background: var(--tbc-ink); border-top: 1px solid #45484C }
.wp-block-group.tbc-pagehead > * { margin-block: 0 }
.tbc-pagehead .wp-block-post-title { margin: 0; max-width: 20ch; overflow-wrap: break-word; color: var(--tbc-white) }
.tbc-pagehead p.tbc-pagehead__meta { margin-top: 10px; color: var(--tbc-on-black); font-size: 1rem }
.wp-block-group.tbc-pagehead--compact { padding-top: clamp(16px, 3vw, 32px); padding-bottom: clamp(14px, 2.4vw, 26px) }
.tbc-pagehead--compact .wp-block-post-title { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); max-width: none }

/* A full-width band. On laptops and up: a narrow heading column on the left, the content on the right. */
.wp-block-group.tbc-section { margin: 0; padding: clamp(40px, 6vw, 80px) var(--tbc-pad) }
.wp-block-group.tbc-section > * { margin-block: 0 }
.tbc-section > * + * { margin-top: 28px !important }
.tbc-section__head.wp-block-group > * { margin-block: 0 }
.tbc-section__head.wp-block-group > h2 { max-width: 16ch; font-stretch: 76%; font-weight: 850; line-height: 1; letter-spacing: 0; text-transform: uppercase;
	font-size: clamp(1.875rem, 1.4rem + 2.2vw, 3rem) }
.tbc-section__head.wp-block-group > h2 + p { margin-top: 14px; color: var(--tbc-muted); max-width: 46ch; font-size: 1rem }
.tbc-section__head.wp-block-group > .tbc-arrow-link { margin-top: 20px }
@media (min-width: 1000px) {
	.wp-block-group.tbc-section:not(.tbc-opening) { display: grid; grid-template-columns: minmax(260px, 0.4fr) minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 96px); align-items: start }
	.tbc-section:not(.tbc-opening) > * + * { margin-top: 0 !important }
}

/* ---------- 5. Front page ---------- */

/* 5.1 Opening: the yellow sign. */
.wp-block-group.tbc-opening { position: relative; background: var(--tbc-yellow); padding-top: clamp(32px, 6vw, 80px); padding-bottom: clamp(40px, 6vw, 88px) }
.tbc-opening__text.wp-block-group > * { margin-block: 0 }
.tbc-opening__text .tbc-headline { font-size: var(--wp--preset--font-size--huge); font-stretch: 68%; font-weight: 880; line-height: 0.92; letter-spacing: 0; max-width: 13ch }
.tbc-opening__text .tbc-standfirst { font-size: var(--wp--preset--font-size--large); line-height: 1.5; margin-top: clamp(20px, 3vw, 28px); max-width: 54ch }
.tbc-opening__text .wp-block-buttons { margin-top: 28px }
.tbc-opening__text p.tbc-facts { margin-top: 24px; max-width: 54ch; font-size: 0.9375rem; line-height: 1.5; color: var(--tbc-on-yellow) }
.tbc-opening__text p.tbc-facts strong { color: var(--tbc-ink) }
.tbc-opening a:not(.wp-block-button__link) { color: var(--tbc-ink) }
/* Phones: the way forward comes straight after the headline; the explanation follows it. */
@media (max-width: 599px) {
	.tbc-opening__text.wp-block-group { display: flex; flex-direction: column }
	.tbc-opening__text .wp-block-buttons { order: 1; margin-top: 20px }
	.tbc-opening__text .tbc-standfirst { order: 2; font-size: 1.0625rem; line-height: 1.55 }
	.tbc-opening__text p.tbc-facts { order: 3; margin-top: 16px }
	.wp-block-group.tbc-opening { padding-top: 28px; padding-bottom: 32px }
}
/* From laptops up, the arrow itself: it points down the page to the county list. */
@media (min-width: 1000px) {
	.tbc-opening__text.wp-block-group { max-width: 64% }
	.wp-block-group.tbc-opening::after { content: ""; position: absolute; right: var(--tbc-pad); bottom: clamp(40px, 6vw, 88px); width: clamp(200px, 24vw, 360px); aspect-ratio: 1;
		background: var(--tbc-ink); transform: rotate(90deg); -webkit-mask: var(--tbc-i-arrow) center / contain no-repeat; mask: var(--tbc-i-arrow) center / contain no-repeat }
}

/* An earlier version of the front page had a small table of figures here. */
.wp-block-table.tbc-figures { margin: 24px 0 0 }
.wp-block-table.tbc-figures table { border-collapse: collapse; width: auto; table-layout: auto }
.wp-block-table.tbc-figures td { border: 0; border-top: 1px solid var(--tbc-ink); padding: 8px 24px 8px 0; vertical-align: baseline; font-size: 1rem }
.wp-block-table.tbc-figures td:first-child { font-family: var(--tbc-display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap }
.wp-block-table.tbc-figures figcaption { margin: 10px 0 0; text-align: left; font-size: 0.875rem; line-height: 1.5; color: var(--tbc-on-yellow) }

/* 5.2 County index: every county is an arrow row. */
.wp-block-group.tbc-counties, .wp-block-group.tbc-keydates { background: var(--tbc-white) }
ul.tbc-county-index { list-style: none; margin: 0; padding: 0; border-top: var(--tbc-heavy); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 264px), 1fr)); gap: 0 32px }
ul.tbc-county-index li { margin: 0; padding: 0; border-bottom: var(--tbc-hair) }
ul.tbc-county-index a { position: relative; display: block; min-height: 72px; padding: 15px 56px 15px 0; color: var(--tbc-muted); text-decoration: none; font-size: 0.9375rem; line-height: 1.4 }
ul.tbc-county-index a strong { display: block; font-family: var(--tbc-display); font-stretch: 88%; font-size: 1.3125rem; font-weight: 800; line-height: 1.15; color: var(--tbc-ink); margin-bottom: 2px }
ul.tbc-county-index a::before { content: ""; position: absolute; right: 2px; top: 50%; margin-top: -19px; width: 38px; height: 38px; border-radius: 6px; background: var(--tbc-yellow) }
ul.tbc-county-index a::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -9px; width: 18px; height: 18px; background: var(--tbc-ink);
	-webkit-mask: var(--tbc-i-arrow) center / contain no-repeat; mask: var(--tbc-i-arrow) center / contain no-repeat }
ul.tbc-county-index a:hover strong, ul.tbc-county-index a:focus-visible strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em }
ul.tbc-county-index a:hover::before, ul.tbc-county-index a:focus-visible::before { background: var(--tbc-ink) }
ul.tbc-county-index a:hover::after, ul.tbc-county-index a:focus-visible::after { background: var(--tbc-yellow) }
ul.tbc-county-index a:focus-visible { outline-offset: -3px }

/* 5.3 How to read a comparison: the parts of a comparison, each under its own rule. */
ol.tbc-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px clamp(24px, 3vw, 48px) }
ol.tbc-steps li { margin: 0; padding: 14px 0 0; border-top: var(--tbc-heavy); font-size: 1rem; line-height: 1.6 }
ol.tbc-steps li strong { display: block; font-family: var(--tbc-display); font-stretch: 90%; font-size: 1.3125rem; font-weight: 800; line-height: 1.2; margin: 0 0 8px }
@media (min-width: 640px) { ol.tbc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) } }

/* 5.4 What this guide is, and is not: the black band. */
.wp-block-group.tbc-band { background: var(--tbc-ink); color: var(--tbc-white) }
.tbc-band :is(h2, h3) { color: var(--tbc-white) }
.tbc-band .tbc-section__head.wp-block-group > h2 + p { color: var(--tbc-on-black) }
.tbc-band p.tbc-label { color: var(--tbc-yellow) }
.tbc-band a { color: var(--tbc-white) }
.tbc-band .tbc-arrow-link a::after { background: var(--tbc-yellow) }
.tbc-band :focus-visible { outline-color: var(--tbc-yellow) }
.wp-block-columns.tbc-band__columns { gap: 32px clamp(24px, 4vw, 64px); margin: 0 }
.tbc-band__columns .wp-block-column > * { margin-block: 0 }
.tbc-band__columns h3 { font-stretch: 78%; font-weight: 850; font-size: 1.625rem; line-height: 1; text-transform: uppercase; color: var(--tbc-yellow); padding-bottom: 12px; border-bottom: 4px solid var(--tbc-white) }
ul.tbc-marks { list-style: none; margin: 0; padding: 0 }
ul.tbc-marks li { position: relative; margin: 0; padding: 14px 0 14px 36px; border-bottom: 1px solid #45484C; font-size: 1rem; line-height: 1.55 }
ul.tbc-marks li::before { content: ""; position: absolute; left: 0; top: 18px; width: 18px; height: 18px; background: var(--tbc-yellow);
	-webkit-mask: var(--tbc-i-check) center / contain no-repeat; mask: var(--tbc-i-check) center / contain no-repeat }
ul.tbc-marks--not li::before { background: var(--tbc-white); -webkit-mask-image: var(--tbc-i-cross); mask-image: var(--tbc-i-cross) }

/* 5.5 Key dates band: see 7. */

/* ---------- 6. Prose pages (page.html) ---------- */

.wp-block-group.tbc-article { margin: 0; padding: clamp(28px, 4vw, 56px) var(--tbc-pad) clamp(48px, 7vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start }
.wp-block-group.tbc-article > * { margin-block: 0; min-width: 0 }
.tbc-article__body.wp-block-group { max-width: var(--tbc-measure); width: 100% }
.tbc-article__rail { max-width: var(--tbc-measure) }
@media (min-width: 1000px) {
	.wp-block-group.tbc-article { grid-template-columns: minmax(0, var(--tbc-measure)) minmax(240px, 320px); justify-content: space-between }
	.tbc-article__rail { position: sticky; top: 24px }
}

/* Running text */
.tbc-article__body .wp-block-post-content > * { margin-block: 0 }
.tbc-article__body .wp-block-post-content > * + * { margin-top: 20px }
.tbc-article__body .wp-block-post-content > p:first-child { font-size: var(--wp--preset--font-size--large); line-height: 1.5 }
.tbc-article__body .wp-block-post-content > h2 { margin-top: 48px; padding-top: 18px; border-top: 2px solid var(--tbc-ink) }
.tbc-article__body .wp-block-post-content > h3 { margin-top: 32px }
.tbc-article__body .wp-block-post-content > :is(h2, h3) + * { margin-top: 12px }
.tbc-article__body a:hover { background: var(--tbc-yellow); color: var(--tbc-ink) }
.tbc-article__body ul.wp-block-list:not([class*="tbc-"]) { list-style: none; padding-left: 0 }
.tbc-article__body ul.wp-block-list:not([class*="tbc-"]) > li { position: relative; padding-left: 26px; margin: 0 }
.tbc-article__body ul.wp-block-list:not([class*="tbc-"]) > li + li { margin-top: 10px }
/* List marker: a small black square, like a sign's bullet. */
.tbc-article__body ul.wp-block-list:not([class*="tbc-"]) > li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 8px; height: 8px; background: var(--tbc-ink) }
.tbc-article__body ol.wp-block-list { padding-left: 1.6rem }
.tbc-article__body ol.wp-block-list > li { padding-left: 4px }
.tbc-article__body ol.wp-block-list > li + li { margin-top: 10px }
.tbc-article__body ol.wp-block-list > li::marker { font-family: var(--tbc-display); font-weight: 800 }

/* Editor's note: bold text starting "[To complete before launch:" (see functions.php). Deliberately loud. */
.tbc-editor-note { display: block; position: relative; margin: 12px 0 0; padding: 44px 16px 14px; background: var(--tbc-white); border: 2px dashed var(--tbc-ink); border-radius: var(--tbc-radius);
	color: var(--tbc-ink); font-weight: 600; font-size: 1rem; line-height: 1.5 }
.tbc-editor-note::before { content: "Editor\2019s note \00B7  not yet written"; position: absolute; left: 12px; top: 12px; padding: 4px 8px 3px; border-radius: 3px; background: var(--tbc-ink); color: var(--tbc-yellow);
	font-family: var(--tbc-display); font-stretch: 88%; font-size: 0.75rem; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.2 }
p > .tbc-editor-note:first-child { margin-top: 0 }

/* Side rail */
.tbc-article__rail .tbc-rail.wp-block-group { background: var(--tbc-white); border: 2px solid var(--tbc-ink); border-radius: var(--tbc-radius); padding: 4px 22px }
.tbc-rail.wp-block-group > * { margin: 0 }
.tbc-rail__item.wp-block-group { padding: 18px 0 20px }
.tbc-rail__item.wp-block-group + .tbc-rail__item.wp-block-group { border-top: 2px solid var(--tbc-ink) }
.tbc-rail__item.wp-block-group > * { margin-block: 0 }
.tbc-rail__item.wp-block-group > p:not(.tbc-label) { font-size: 0.9375rem; line-height: 1.55; color: var(--tbc-muted); margin-top: 6px }
.tbc-rail__item.wp-block-group > p.tbc-label { margin-top: 0; color: var(--tbc-ink) }
.tbc-rail__item.wp-block-group > .tbc-rail__lead { font-family: var(--tbc-display); font-stretch: 78%; font-size: 1.375rem; font-weight: 850; line-height: 1.05; text-transform: uppercase; color: var(--tbc-ink); margin-top: 0 }
.tbc-rail__item.wp-block-group > p.tbc-rail__value { font-family: var(--tbc-display); font-stretch: 90%; font-size: 1.125rem; font-weight: 750; line-height: 1.25; color: var(--tbc-ink) }
.tbc-rail__item.wp-block-group > p.tbc-arrow-link { margin-top: 12px; color: var(--tbc-ink) }

/* ---------- 7. Dates lists ---------- */

/* A table-like list, the date on the left. The last line (Election Day) is the yellow one. */
ul.tbc-dates { list-style: none; margin: 0; padding: 0; border-top: var(--tbc-heavy) }
ul.tbc-dates li { margin: 0; padding: 14px 0; border-bottom: var(--tbc-hair); display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 24px; font-size: 1rem; line-height: 1.5 }
ul.tbc-dates li strong { font-family: var(--tbc-display); font-stretch: 90%; font-weight: 750; font-size: 1.0625rem; line-height: 1.35; font-variant-numeric: lining-nums tabular-nums }
ul.tbc-dates li:last-child { background: var(--tbc-yellow); border-bottom: 0; border-radius: 0 0 var(--tbc-radius) var(--tbc-radius); padding-inline: 14px; margin-inline: -14px }
@media (min-width: 560px) { ul.tbc-dates li { grid-template-columns: 16.5rem minmax(0, 1fr) } }
.tbc-article__body .wp-block-post-content > ul.tbc-dates { margin-top: 24px }

/* ---------- 8. Compare page and other wide pages (page-wide.html) ---------- */

.wp-block-group.tbc-wide { margin: 0; padding: clamp(16px, 2.5vw, 28px) var(--tbc-pad) clamp(48px, 6vw, 80px) }
.wp-block-group.tbc-wide > * { margin-block: 0 }
.tbc-wide > .wp-block-post-content > * { margin-block: 0; max-width: none }
.tbc-wide > .wp-block-post-content > * + * { margin-top: 20px }
.tbc-wide > .wp-block-post-content > p { max-width: var(--tbc-measure) }
.tbc-wide > .wp-block-post-content > p:first-child { color: var(--tbc-muted); font-size: 1rem }
/* Phones: finding a race comes first. The page's opening line (the finder says the same) gives way to it,
   and with a race open the page title steps aside so the race leads. Both stay on wider screens. */
@media (max-width: 719px) {
	.tbc-wide > .wp-block-post-content:has(.ccp-portal[data-ccp-app]) > p:first-child { display: none }
}
@media (max-width: 1099px) {
	body.ccp-race-open .tbc-pagehead--compact { display: none }
	body.ccp-race-open .tbc-wide > .wp-block-post-content:has(.ccp-portal[data-ccp-app]) > p:first-child { display: none }
}

/* ---------- 9. Comparison tool (Candidate Portal plugin) ---------- */

/* The plugin carries the same design and picks up this theme's fonts by name. Here it only loses its own
   margins, and its optional dark colour scheme gets a frame because the page around it stays light. */
body .ccp-portal { padding: 0; border-radius: 0 }
body .ccp-portal .wrap { max-width: none; margin: 0 }
body .ccp-portal[data-theme="dark"] { padding: 16px; border-radius: 10px }
@media (prefers-color-scheme: dark) { body .ccp-portal[data-theme="auto"] { padding: 16px; border-radius: 10px } }

/* ---------- 10. Race and candidate pages ---------- */

.tbc-single .tbc-wide > .wp-block-post-content { margin-top: 8px }
.tbc-single .tbc-wide > p.tbc-single__back { margin-top: 32px }

/* ---------- 11. Footer ---------- */

.tbc-colophon.wp-block-group { background: var(--tbc-ink); color: var(--tbc-on-black); margin-top: 0 }
.tbc-colophon__grid.wp-block-group { padding: clamp(36px, 5vw, 64px) var(--tbc-pad); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 96px) }
.tbc-colophon__grid.wp-block-group > * { margin: 0 }
.tbc-colophon__grid .wp-block-group > * { margin-block: 0 }
.tbc-colophon__grid p, .tbc-colophon__grid li { font-size: 0.9375rem; line-height: 1.6; color: var(--tbc-on-black) }
.tbc-colophon__grid p:not(.tbc-label):not(.tbc-colophon__name) { max-width: 46ch }
.tbc-colophon__grid p.tbc-label { color: var(--tbc-yellow); margin-bottom: 12px }
.tbc-colophon__grid p.tbc-colophon__name { font-family: var(--tbc-display); font-stretch: 78%; font-size: 1.5rem; font-weight: 850; letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.1; color: var(--tbc-white); margin-bottom: 12px }
ul.tbc-plain-list { list-style: none; margin: 0; padding: 0 }
ul.tbc-plain-list li { margin: 0; padding: 0 }
ul.tbc-plain-list li + li { margin-top: 8px }
.tbc-colophon__grid a { color: var(--tbc-white) }
.tbc-colophon__grid a:hover { color: var(--tbc-yellow) }
.tbc-colophon :focus-visible { outline-color: var(--tbc-yellow) }
p.tbc-colophon__base { margin: 0; padding: 12px var(--tbc-pad); background: var(--tbc-yellow); color: var(--tbc-ink) }
@media (min-width: 700px) { .tbc-colophon__grid.wp-block-group { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.3fr) } }

/* ---------- 12. Motion and print ---------- */

/* One movement: the arrow steps forward when you point at what it leads to. */
@media (prefers-reduced-motion: no-preference) {
	ul.tbc-county-index a::after, .tbc-arrow-link a::after, .wp-block-button__link::after, .tbc-masthead .wp-block-site-title a::after { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1) }
	ul.tbc-county-index a:hover::after, .tbc-arrow-link a:hover::after, .wp-block-button__link:hover::after, .tbc-masthead .wp-block-site-title a:hover::after { transform: translateX(4px) }
	ul.tbc-county-index a::before { transition: background-color 0.12s ease-out }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important }
}

@media print {
	header.wp-block-template-part, footer.wp-block-template-part, .tbc-article__rail, .tbc-single__back, .wp-block-buttons, .tbc-opening::after { display: none !important }
	body { background: #fff !important; color: #000; font-size: 11pt }
	.wp-block-group.tbc-wide, .wp-block-group.tbc-article, .wp-block-group.tbc-section, .wp-block-group.tbc-pagehead { padding-left: 0; padding-right: 0 }
	.wp-block-group.tbc-band, .wp-block-group.tbc-opening, .wp-block-group.tbc-pagehead, ul.tbc-dates li:last-child { background: #fff; color: #000 }
	.tbc-pagehead .wp-block-post-title, .tbc-pagehead p.tbc-pagehead__meta { color: #000 }
	.tbc-band :is(h2, h3), .tbc-band a, .tbc-band p.tbc-label, .tbc-band .tbc-section__head.wp-block-group > h2 + p { color: #000 }
	ul.tbc-marks li::before { background: #000 }
	a { color: inherit !important }
	.tbc-editor-note { border: 2px solid #000; background: #fff }
}