/*
Theme Name: CPC Civic
Theme URI: https://futurevanguard.net
Author: Future Vanguard
Author URI: https://futurevanguard.net
Description: An accessible, document-forward block theme for civilian oversight bodies. Built for the Cleveland Community Police Commission as a capability demonstration.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cpc-civic
Tags: block-theme, full-site-editing, accessibility-ready, government, one-column
*/

/* ---------------------------------------------------------------------------
   Design intent
   ---------------------------------------------------------------------------
   This is a public record, not a product page. The people who arrive here are
   often looking for one specific document, one meeting date, or the route to
   filing a complaint about a police officer. Every decision below favours
   legibility and findability over impression.

   Consequently there is no perpetual motion, no parallax, no scroll-triggered
   choreography, and no decorative imagery of police. Motion is limited to
   short state transitions, and every one of them is switched off under
   prefers-reduced-motion. WCAG 2.3.3 does not strictly require that at AA, but
   vestibular triggers on a site people visit while distressed are not a place
   to spend design budget.

   Structure is carried by rules and whitespace rather than card containers, so
   that a screen reader encounters a flat, predictable document rather than a
   nest of boxes.
   --------------------------------------------------------------------------- */

/* --- Focus -----------------------------------------------------------------
   WCAG 2.4.7. A single, loud, consistent focus treatment everywhere. The ring
   sits outside the element with an offset so it stays visible against both
   paper and accent backgrounds. Never remove this without replacing it. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--seal);
	outline-offset: 2px;
	border-radius: 1px;
}

/* Older engines that lack :focus-visible still get a ring. */
:where(a, button, input, select, textarea, summary):focus {
	outline: 3px solid var(--wp--preset--color--seal);
	outline-offset: 2px;
}

:where(a, button, input, select, textarea, summary):focus:not(:focus-visible) {
	outline: none;
}

/* --- Skip link -------------------------------------------------------------
   The live clecpc.org ships a skip link pointing at #content, and no element
   with that id exists on any page. It has been broken sitewide for years.
   Here the target is rendered in the templates and verified. */

.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: underline;
	transform: translateY(-120%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* Focus lands on the container itself, so give it no visible ring but keep the
   programmatic focus move. The heading immediately below announces position. */
#content:focus {
	outline: none;
}

/* --- Type ------------------------------------------------------------------ */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Long-form measure. 1.3.4 and 1.4.8 both benefit; the practical reason is
   that a 110-character line of policy text is unreadable. */
.entry-content p,
.entry-content li {
	max-width: 68ch;
}

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

.cpc-masthead {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.cpc-wordmark {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.012em;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cpc-wordmark:hover {
	text-decoration: underline;
}

.cpc-wordmark small {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin-top: 0.3rem;
}

/* Navigation: underline on hover only, never colour alone (1.4.1). */
.wp-block-navigation .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Hero ------------------------------------------------------------------
   Left-aligned and asymmetric rather than centred. A centred hero reads as
   marketing; this is a masthead for a public body. */

.cpc-hero {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	background: var(--wp--preset--color--paper-sunk);
}

.cpc-hero__lede {
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--ink-muted);
	max-width: 52ch;
}

/* --- Task list -------------------------------------------------------------
   Replaces the three-equal-cards row. These are routes into the site, ordered
   by how often a resident actually needs them, separated by rules rather than
   boxed. Each has distinct link text, because the live site currently ships
   three separate buttons all reading "Learn More". */

.cpc-tasks {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.cpc-task {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.cpc-task > a {
	display: grid;
	grid-template-columns: 2.5rem 1fr auto;
	gap: 1.25rem;
	align-items: baseline;
	padding: 1.5rem 0.25rem;
	text-decoration: none;
	color: inherit;
	transition: background-color 120ms ease, padding-left 120ms ease;
}

.cpc-task > a:hover {
	background: var(--wp--preset--color--paper-sunk);
	padding-left: 0.75rem;
}

.cpc-task__index {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

.cpc-task__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--ink);
	display: block;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--rule);
	text-underline-offset: 5px;
}

.cpc-task > a:hover .cpc-task__title {
	text-decoration-color: var(--wp--preset--color--accent);
}

.cpc-task__note {
	display: block;
	margin-top: 0.4rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
	max-width: 58ch;
	text-decoration: none;
}

.cpc-task__arrow {
	color: var(--wp--preset--color--accent);
	transition: transform 120ms ease;
}

.cpc-task > a:hover .cpc-task__arrow {
	transform: translateX(3px);
}

/* --- Document library ------------------------------------------------------
   Higher density than the rest of the site. This is a records table and it
   should behave like one: tabular figures, tight rows, real column headers. */

.cpc-library {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
	.cpc-library {
		grid-template-columns: 17rem 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.cpc-filters {
	border-top: 2px solid var(--wp--preset--color--ink);
	padding-top: 1.25rem;
	align-self: start;
}

@media (min-width: 60rem) {
	.cpc-filters {
		position: sticky;
		top: 1.5rem;
	}
}

.cpc-filters__legend {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-muted);
	padding: 0;
	margin-bottom: 1rem;
}

.cpc-field {
	display: grid;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
}

.cpc-field label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.cpc-field select,
.cpc-field input[type="search"],
.cpc-field input[type="text"] {
	width: 100%;
	padding: 0.6rem 0.7rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: 2px;
}

.cpc-field__hint {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-muted);
}

.cpc-filters__actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
}

.cpc-btn {
	display: inline-block;
	padding: 0.65rem 1.1rem;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--accent);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 120ms ease, transform 80ms ease;
}

.cpc-btn:hover {
	background: var(--wp--preset--color--accent-deep);
}

.cpc-btn:active {
	transform: translateY(1px);
}

.cpc-btn--quiet {
	color: var(--wp--preset--color--accent);
	background: transparent;
	border-color: var(--wp--preset--color--field-border);
}

.cpc-btn--quiet:hover {
	background: var(--wp--preset--color--paper-sunk);
	color: var(--wp--preset--color--accent-deep);
}

.cpc-results__summary {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 0.75rem;
	margin-bottom: 0;
}

.cpc-results__summary strong {
	color: var(--wp--preset--color--ink);
	font-variant-numeric: tabular-nums;
}

.cpc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
}

.cpc-table caption {
	text-align: left;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-muted);
	padding-bottom: 0.75rem;
}

.cpc-table th {
	text-align: left;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--ink-muted);
	padding: 0.75rem 0.75rem 0.75rem 0;
	border-bottom: 2px solid var(--wp--preset--color--ink);
	white-space: nowrap;
}

.cpc-table td {
	padding: 0.9rem 0.75rem 0.9rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
	vertical-align: top;
}

.cpc-table tbody tr:hover {
	background: var(--wp--preset--color--paper-sunk);
}

.cpc-table__title a {
	font-weight: 600;
	text-underline-offset: 3px;
}

.cpc-table__meta {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--ink-muted);
}

.cpc-num {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Custody tag. Distinguishes a document we hold from a catalogue record that
   points at the Commission's own copy. Uses a border and a label, never colour
   alone, so it survives greyscale and colour-blind viewing (1.4.1). */
.cpc-custody {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	line-height: 1.4;
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: 2px;
	color: var(--wp--preset--color--ink-muted);
	white-space: nowrap;
}

.cpc-custody--hosted {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/* Mobile: the table collapses to stacked records rather than scrolling
   sideways, so no horizontal scroll is required at 320px (1.4.10). */
@media (max-width: 47.99rem) {
	.cpc-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.cpc-table tr {
		display: block;
		border-bottom: 1px solid var(--wp--preset--color--rule);
		padding: 1rem 0;
	}

	.cpc-table td {
		display: block;
		border: 0;
		padding: 0.15rem 0;
	}

	.cpc-table td[data-label]::before {
		content: attr(data-label) ": ";
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		color: var(--wp--preset--color--ink-muted);
	}

	.cpc-table__title {
		padding-bottom: 0.4rem;
	}

	.cpc-table__title::before {
		content: none;
	}
}

/* --- Empty and error states ------------------------------------------------ */

.cpc-empty {
	border: 1px dashed var(--wp--preset--color--field-border);
	padding: var(--wp--preset--spacing--40);
	text-align: left;
}

.cpc-empty h2 {
	font-size: var(--wp--preset--font-size--md);
	margin: 0 0 0.5rem;
}

.cpc-empty p {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--ink-muted);
	max-width: 52ch;
}

/* --- Document detail ------------------------------------------------------- */

.cpc-docmeta {
	border-top: 2px solid var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--rule);
	margin: 0 0 var(--wp--preset--spacing--40);
	padding: 1.25rem 0;
	display: grid;
	gap: 0.9rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.cpc-docmeta div {
	margin: 0;
}

.cpc-docmeta dt {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--ink-muted);
	margin-bottom: 0.25rem;
}

.cpc-docmeta dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
}

.cpc-attribution {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-muted);
	border-left: 3px solid var(--wp--preset--color--rule);
	padding-left: 1rem;
	margin: var(--wp--preset--spacing--30) 0;
	max-width: 62ch;
}

/* --- Notices ---------------------------------------------------------------
   Used for the demonstration banner and for the honest "this form does not
   send mail" message. Border plus text, never colour alone. */

.cpc-notice {
	border: 1px solid var(--wp--preset--color--field-border);
	border-left: 4px solid var(--wp--preset--color--seal);
	background: var(--wp--preset--color--paper-sunk);
	padding: 1rem 1.25rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink);
	max-width: 68ch;
}

.cpc-notice p { margin: 0; }
.cpc-notice p + p { margin-top: 0.5rem; }

.cpc-notice__label {
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: 0.07em;
}

.cpc-demo-bar {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-size: var(--wp--preset--font-size--xs);
	padding: 0.6rem 0;
}

.cpc-demo-bar a {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
}

/* --- Footer ---------------------------------------------------------------- */

.cpc-colophon {
	border-top: 2px solid var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--sm);
}

.cpc-colophon h2 {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 0.75rem;
}

/* --- Pagination ------------------------------------------------------------ */

.cpc-pagination {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	font-size: var(--wp--preset--font-size--sm);
}

.cpc-pagination a,
.cpc-pagination span {
	padding: 0.4rem 0.7rem;
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.cpc-pagination a:hover {
	background: var(--wp--preset--color--paper-sunk);
	border-color: var(--wp--preset--color--field-border);
	text-decoration: underline;
}

.cpc-pagination [aria-current="page"] {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-weight: 700;
}

/* --- Screen reader only ---------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Motion ---------------------------------------------------------------- */

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

/* --- Print -----------------------------------------------------------------
   People print meeting minutes and policy documents. Make that work. */

@media print {
	.cpc-demo-bar,
	.cpc-filters,
	.wp-block-navigation,
	.skip-link,
	.cpc-pagination {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 11pt;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		word-break: break-all;
	}
}

/* --- Facet links -----------------------------------------------------------
   Ordinary links to taxonomy archives. These are what keep the archive
   filterable once the site is served as flat files with no PHP behind it. */

.cpc-facets {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.cpc-facets__title {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--ink-muted);
	margin: 0 0 0.6rem;
}

.cpc-facets ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cpc-facets li + li { margin-top: 0.15rem; }

.cpc-facets a {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.3rem 0.4rem 0.3rem 0;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.cpc-facets a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpc-facets a[aria-current="page"] {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
	border-bottom-color: var(--wp--preset--color--accent);
}

.cpc-facets__count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink-muted);
}

/* --- Full-text search ------------------------------------------------------
   Sits above the results, full width of the results column, because it
   searches everything rather than narrowing the current view. */

.cpc-fulltext {
	margin-bottom: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.cpc-fulltext:empty { display: none; }

/* The sidebar is a single grid child. Without this wrapper the filter form and
   each facet list become separate grid items and the results table is pushed
   below them instead of sitting alongside. */
.cpc-sidebar { align-self: start; }

@media (min-width: 60rem) {
	.cpc-sidebar { position: sticky; top: 1.5rem; }
	.cpc-filters { position: static; }
}