/*
 * OAMF -- bill archive + legislator grid
 *
 * Type and contrast are deliberately generous: OAMF's audience skews older (parents, grandparents,
 * patients researching exemptions). Base 1.0625rem, AA contrast minimum, 44px tap targets.
 * Colour is carried by BOTH hue and text -- position badges never rely on colour alone.
 *
 * Theme-agnostic: everything is namespaced .oamf-* and uses custom properties so a theme swap
 * (still undecided on this build) doesn't require touching this file.
 */

:root {
	--oamf-ink: #14213d;
	--oamf-ink-soft: #4a5568;
	--oamf-line: #d8dee9;
	--oamf-bg-soft: #f6f8fb;
	--oamf-accent: #b3252b;      /* OAMF red */
	--oamf-accent-dark: #8a1c21;
	--oamf-support: #16624a;
	--oamf-support-bg: #e3f3ec;
	--oamf-oppose: #99231d;
	--oamf-oppose-bg: #fbe9e7;
	--oamf-watch: #6b5000;
	--oamf-watch-bg: #fdf3d6;
	--oamf-radius: 8px;
}

.oamf-archive,
.oamf-leg-grid {
	font-size: 1.0625rem;
	line-height: 1.55;
	color: var(--oamf-ink);
}

/* ---------- filter ---------- */

.oamf-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	padding: 1.25rem;
	margin: 0 0 1.75rem;
	background: var(--oamf-bg-soft);
	border: 1px solid var(--oamf-line);
	border-radius: var(--oamf-radius);
}

.oamf-filter__field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1 1 12rem;
}

.oamf-filter__field span {
	font-weight: 600;
	font-size: .9375rem;
}

.oamf-filter input,
.oamf-filter select {
	min-height: 44px;
	padding: .5rem .65rem;
	font-size: 1rem;
	border: 1px solid var(--oamf-line);
	border-radius: 6px;
	background: #fff;
	color: var(--oamf-ink);
}

.oamf-filter input:focus-visible,
.oamf-filter select:focus-visible,
.oamf-bill-title a:focus-visible,
.oamf-btn:focus-visible {
	outline: 3px solid var(--oamf-accent);
	outline-offset: 2px;
}

.oamf-btn {
	display: inline-block;
	min-height: 44px;
	padding: .6rem 1.4rem;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: var(--oamf-accent);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	text-decoration: none;
}

.oamf-btn:hover { background: var(--oamf-accent-dark); color: #fff; }

.oamf-btn--action {
	font-size: 1.0625rem;
	padding: .8rem 1.6rem;
}

.oamf-clear {
	align-self: center;
	font-size: .9375rem;
	color: var(--oamf-ink-soft);
}

.oamf-count {
	margin: 0 0 1rem;
	color: var(--oamf-ink-soft);
	font-size: .9375rem;
}

.oamf-empty {
	padding: 1.25rem;
	background: var(--oamf-bg-soft);
	border-radius: var(--oamf-radius);
}

/* ---------- bill list ---------- */

.oamf-group {
	margin: 2.25rem 0 .9rem;
	padding-bottom: .4rem;
	font-size: 1.4rem;
	border-bottom: 2px solid var(--oamf-line);
}

.oamf-bill-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.oamf-bill-card {
	padding: 1.15rem 1.25rem;
	background: #fff;
	border: 1px solid var(--oamf-line);
	border-left: 5px solid var(--oamf-line);
	border-radius: var(--oamf-radius);
}

.oamf-bill-card:has(.oamf-pos--support) { border-left-color: var(--oamf-support); }
.oamf-bill-card:has(.oamf-pos--oppose)  { border-left-color: var(--oamf-oppose); }
.oamf-bill-card:has(.oamf-pos--watching){ border-left-color: var(--oamf-watch); }

.oamf-pos {
	display: inline-block;
	margin-bottom: .5rem;
	padding: .18rem .6rem;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-radius: 999px;
}

.oamf-pos--support  { color: var(--oamf-support); background: var(--oamf-support-bg); }
.oamf-pos--oppose   { color: var(--oamf-oppose);  background: var(--oamf-oppose-bg); }
.oamf-pos--watching { color: var(--oamf-watch);   background: var(--oamf-watch-bg); }

.oamf-bill-title {
	margin: 0 0 .45rem;
	font-size: 1.125rem;
	line-height: 1.35;
}

.oamf-bill-title a { color: var(--oamf-ink); text-decoration: none; }
.oamf-bill-title a:hover { text-decoration: underline; }

.oamf-bill-number {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	color: var(--oamf-accent);
	font-weight: 800;
}

.oamf-bill-summary {
	margin: 0;
	font-size: .96875rem;
	color: var(--oamf-ink-soft);
}

/* ---------- single bill ---------- */

.oamf-bill-header {
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	background: var(--oamf-bg-soft);
	border-radius: var(--oamf-radius);
}

.oamf-bill-facts {
	display: grid;
	gap: .85rem 2rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, auto));
	margin: 0 0 1rem;
}

.oamf-bill-facts dt {
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--oamf-ink-soft);
	margin-bottom: .15rem;
}

.oamf-bill-facts dd { margin: 0; font-size: 1.0625rem; }
.oamf-ga { color: var(--oamf-ink-soft); font-size: .9375rem; }

.oamf-action { margin: 0; }
.oamf-leg-link, .oamf-back { margin-top: 1.5rem; }

/* ---------- legislator grid ---------- */

.oamf-leg-grid {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
}

.oamf-leg {
	position: relative;
	padding: .85rem;
	text-align: center;
	background: #fff;
	border: 1px solid var(--oamf-line);
	border-radius: var(--oamf-radius);
}

.oamf-leg__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}

.oamf-leg__photo--none {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	background: repeating-linear-gradient(45deg, #eef1f6, #eef1f6 10px, #e4e9f1 10px, #e4e9f1 20px);
}

.oamf-grade {
	position: absolute;
	top: .5rem;
	right: .5rem;
	min-width: 2.4rem;
	padding: .25rem .45rem;
	font-size: 1.0625rem;
	font-weight: 800;
	color: #fff;
	background: var(--oamf-support);
	border-radius: 6px;
	font-variant-numeric: tabular-nums;
}

.oamf-leg__name { margin: .65rem 0 .2rem; font-size: 1rem; line-height: 1.3; }
.oamf-leg__meta { margin: 0; font-size: .875rem; color: var(--oamf-ink-soft); }

/* ---------- motion + small screens ---------- */

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}

@media (max-width: 40rem) {
	.oamf-filter { padding: 1rem; }
	.oamf-filter__field { flex: 1 1 100%; }
	.oamf-btn { width: 100%; }
	.oamf-bill-list { grid-template-columns: 1fr; }
}

/* ---------- home page hero ----------
 *
 * CSS-only crossfade. Slides stack, each fades in on its turn via one shared keyframe with a
 * per-slide animation-delay (emitted inline by the shortcode, since the timing depends on how
 * many photos there are). No JS: a hero that fails to initialise is a blank first impression.
 */

.oamf-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(78vh, 620px);
	overflow: hidden;
	background: var(--oamf-ink);
}

.oamf-hero__slides,
.oamf-hero__scrim {
	position: absolute;
	inset: 0;
}

.oamf-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation-name: oamfHero;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

/* Single slide: no animation to run, just show it. */
.oamf-hero[data-slides="1"] .oamf-hero__slide { opacity: 1; animation: none; }

.oamf-hero__scrim {
	/* Keeps the headline legible over any photo -- darker at the left where the text sits. */
	background: linear-gradient(90deg, rgba(20,33,61,.92) 0%, rgba(20,33,61,.72) 45%, rgba(20,33,61,.45) 100%);
}

.oamf-hero__inner {
	position: relative;
	width: 100%;
	max-width: 62rem;
	margin: 0 auto;
	padding: 3.5rem 1.5rem;
	color: #fff;
}

.oamf-hero__headline {
	margin: 0 0 .75rem;
	max-width: 20ch;
	font-size: clamp(2rem, 5vw, 3.5rem);
	line-height: 1.08;
	font-weight: 800;
	color: #fff;
}

.oamf-hero__sub {
	margin: 0 0 1.75rem;
	max-width: 46ch;
	font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	color: #e8edf7;
}

.oamf-hero__cta { margin: 0; }

/* Motion is decorative here -- pin the first slide and drop the animation entirely. */
@media (prefers-reduced-motion: reduce) {
	.oamf-hero__slide { animation: none; opacity: 0; }
	.oamf-hero__slide:first-child { opacity: 1; }
}

/* ---------- home page sections ---------- */

.oamf-home-section { margin: 3.5rem auto; max-width: 62rem; padding: 0 1.5rem; }
.oamf-home-section > h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .5rem; }
.oamf-home-section > p.oamf-lede { margin: 0 0 1.5rem; font-size: 1.0625rem; color: var(--oamf-ink-soft); max-width: 60ch; }

.oamf-cta-row {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	margin: 3.5rem auto;
	max-width: 62rem;
	padding: 0 1.5rem;
}

.oamf-cta {
	display: block;
	padding: 1.5rem;
	background: var(--oamf-bg-soft);
	border: 1px solid var(--oamf-line);
	border-top: 4px solid var(--oamf-accent);
	border-radius: var(--oamf-radius);
	text-decoration: none;
	color: var(--oamf-ink);
}

.oamf-cta:hover { background: #eef2f8; }
.oamf-cta strong { display: block; font-size: 1.125rem; margin-bottom: .35rem; }
.oamf-cta span { font-size: .96875rem; color: var(--oamf-ink-soft); }

/* ---------- block-theme layout escapes ----------
 *
 * Twenty Twenty-Five wraps post content in a constrained container and renders the page title
 * above it. Two consequences on the front page, both fixed here rather than by forking the
 * theme's templates (which would break on a theme swap):
 *
 * 1. The hero rendered as a BOX inside the content column. The 100vw + negative-margin pattern
 *    is the standard full-bleed escape from a constrained parent.
 * 2. The theme printed "Home" as an <h1> above a hero that already carries its own <h1> --
 *    duplicate H1s, and a heading nobody wants to read. Hidden on the front page only.
 */

.oamf-hero {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Front page only -- inner pages still need their titles. */
body.home .wp-block-post-title,
body.home h1.wp-block-post-title,
body.home .entry-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The hero supplies its own vertical rhythm; kill the container's leading gap under it. */
body.home .oamf-hero + * { margin-top: 0; }

/* Front page: the hero must sit flush under the header.
 * Measured on the live page -- three stacked offsets pushed it down 159px:
 *   main            margin-top    70px
 *   > wp-block-group padding-top  70px
 *   > .entry-content margin-top   19.2px
 * Zeroed on the home page ONLY; inner pages keep the theme's normal rhythm. */
body.home main.wp-block-group { margin-top: 0; }
body.home main > .wp-block-group { padding-top: 0; }
body.home .wp-block-post-content { margin-top: 0; }

/* Placeholders carry baked-in label text; deepen the scrim so the real headline dominates.
 * Safe to soften once actual photos land. */
.oamf-hero__scrim {
	background: linear-gradient(90deg, rgba(20,33,61,.95) 0%, rgba(20,33,61,.86) 50%, rgba(20,33,61,.62) 100%);
}

/* The theme applies these as `margin-block-start` (a LOGICAL property) from a stylesheet that
 * loads after this one, so a plain `margin-top: 0` lost the cascade even at higher specificity.
 * Override both the logical and physical forms. !important is deliberate: this is a layout
 * override against a third-party theme we do not control, which is the case it exists for. */
body.home main.wp-block-group {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}
body.home main > .wp-block-group {
	padding-block-start: 0 !important;
	padding-top: 0 !important;
}
body.home .wp-block-post-content {
	margin-block-start: 0 !important;
	margin-top: 0 !important;
}

/* ---------- page furniture (exemptions, placeholders, notices) ---------- */

.oamf-page-intro, .oamf-ex, .oamf-jump, .oamf-notice, .oamf-form-placeholder {
	max-width: 62rem; margin-left: auto; margin-right: auto;
}

.oamf-page-intro { margin-bottom: 2rem; }

/* Jump nav -- 2,400 words is a lot of scrolling on a phone when you need one answer. */
.oamf-jump {
	display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
	padding: 1rem 1.25rem; margin: 0 auto 2.5rem;
	background: var(--oamf-bg-soft); border: 1px solid var(--oamf-line);
	border-radius: var(--oamf-radius); font-size: .96875rem;
}
.oamf-jump > span { font-weight: 700; }
.oamf-jump a { color: var(--oamf-accent); }

.oamf-ex { margin-bottom: 3rem; scroll-margin-top: 5rem; }
.oamf-ex > h2 {
	display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
	padding-bottom: .5rem; margin-bottom: 1rem;
	border-bottom: 2px solid var(--oamf-line); font-size: clamp(1.35rem, 3vw, 1.75rem);
}

/* The guaranteed / not-guaranteed distinction is the whole point of the page --
 * carried by TEXT as well as colour, never colour alone. */
.oamf-ex__flag {
	padding: .2rem .7rem; border-radius: 999px;
	font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.oamf-ex__flag--yes { color: var(--oamf-support); background: var(--oamf-support-bg); }
.oamf-ex__flag--no  { color: var(--oamf-oppose);  background: var(--oamf-oppose-bg); }

.oamf-notice {
	padding: 1rem 1.25rem; margin: 0 auto 2rem;
	background: var(--oamf-watch-bg); border-left: 5px solid var(--oamf-watch);
	border-radius: var(--oamf-radius); font-size: .96875rem;
}
.oamf-notice--placeholder {
	background: var(--oamf-oppose-bg); border-left-color: var(--oamf-oppose);
}
.oamf-notice em { display: block; margin-top: .35rem; color: var(--oamf-ink-soft); }

.oamf-form-placeholder {
	padding: 1.5rem; margin: 2rem auto;
	background: var(--oamf-bg-soft);
	border: 2px dashed var(--oamf-line); border-radius: var(--oamf-radius);
}
.oamf-form-placeholder p:last-child { margin-bottom: 0; }

/* CTA row: cap at 3 across so a 5-tile set wraps 3+2 rather than squeezing to 5. */
.oamf-cta-row { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
@media (min-width: 60rem) { .oamf-cta-row { grid-template-columns: repeat(3, 1fr); } }

/* ---------- legislator contacts ----------
 * Was 89 bullets of "Name - email - phone". Now a scannable grid: name / email / phone as
 * three aligned columns on desktop, stacked cards on mobile. Phone numbers are tel: links --
 * on a "call your legislator" page that is the difference between a tap and a transcription. */

.oamf-contacts { max-width: 62rem; margin: 3rem auto; }
.oamf-contacts__title { margin: 0 0 .4rem; font-size: clamp(1.4rem, 3vw, 1.85rem); }
.oamf-contacts__intro { margin: 0 0 1.25rem; color: var(--oamf-ink-soft); font-size: .96875rem; }

.oamf-contacts__tools {
	display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
	padding: 1rem 1.25rem; margin-bottom: 1.75rem;
	background: var(--oamf-bg-soft); border: 1px solid var(--oamf-line); border-radius: var(--oamf-radius);
}
.oamf-contacts__search { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 16rem; }
.oamf-contacts__search span { font-weight: 600; font-size: .9375rem; }
.oamf-contacts__search input {
	min-height: 44px; padding: .5rem .65rem; font-size: 1rem;
	border: 1px solid var(--oamf-line); border-radius: 6px; background: #fff; color: var(--oamf-ink);
}
.oamf-btn--ghost {
	background: #fff; color: var(--oamf-accent); border: 2px solid var(--oamf-accent);
}
.oamf-btn--ghost:hover { background: var(--oamf-accent); color: #fff; }

.oamf-contacts__chamber {
	display: flex; align-items: baseline; gap: .6rem;
	margin: 2rem 0 .75rem; padding-bottom: .35rem;
	font-size: 1.2rem; border-bottom: 2px solid var(--oamf-line);
}
.oamf-contacts__chamber span {
	font-size: .8125rem; font-weight: 700; color: var(--oamf-ink-soft);
	background: var(--oamf-bg-soft); padding: .1rem .5rem; border-radius: 999px;
}

.oamf-contacts__list { list-style: none; margin: 0; padding: 0; }

.oamf-contact {
	display: grid; gap: .15rem 1.25rem; align-items: baseline;
	grid-template-columns: minmax(11rem, 1.1fr) minmax(13rem, 1.4fr) auto;
	padding: .7rem .5rem; border-bottom: 1px solid var(--oamf-line);
}
.oamf-contact:nth-child(odd) { background: #fbfcfe; }
.oamf-contact__name  { font-weight: 700; }
.oamf-contact__email { font-size: .96875rem; word-break: break-all; }
.oamf-contact__phone { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.oamf-contact__phone, .oamf-contact__email { color: var(--oamf-accent); }

@media (max-width: 46rem) {
	.oamf-contact { grid-template-columns: 1fr; padding: .85rem .5rem; }
	.oamf-contact__phone { text-align: left; }
	/* Tap targets on the two things people actually tap. */
	.oamf-contact__email, .oamf-contact__phone { display: inline-block; min-height: 32px; padding: .25rem 0; }
	.oamf-contacts__tools .oamf-btn { width: 100%; }
}