/*
 * RTK locked patterns (story #2). Ported from the rtkaction mockup.
 * Pattern structure is locked in the editor; all visual treatment lives here,
 * keyed to classes the patterns ship with.
 */

/*
 * Brand guide v2.0 p.7: ink and cream carry the system and one accent
 * dominates. Every surface, rule and muted-text color below is mixed from
 * the eight theme.json palette colors, so there are no free-floating hex values.
 * The one exception is the redaction bar: solid black, the same as the
 * painted plate behind the logo lettering.
 */
:root {
	--rtk-tint: color-mix(in srgb, var(--wp--preset--color--cream) 30%, var(--wp--preset--color--paper));
	--rtk-tint-strong: color-mix(in srgb, var(--wp--preset--color--cream) 45%, var(--wp--preset--color--paper));
	--rtk-rule: color-mix(in srgb, var(--wp--preset--color--ink) 30%, var(--wp--preset--color--cream));
	--rtk-rule-soft: color-mix(in srgb, var(--wp--preset--color--ink) 15%, var(--wp--preset--color--cream));
	--rtk-muted: color-mix(in srgb, var(--wp--preset--color--ink) 82%, var(--wp--preset--color--paper));
	--rtk-on-dark-body: color-mix(in srgb, var(--wp--preset--color--paper) 78%, var(--wp--preset--color--charcoal));
	--rtk-on-dark-muted: color-mix(in srgb, var(--wp--preset--color--cream) 85%, var(--wp--preset--color--charcoal));
	--rtk-redaction: #000;
}

/* ---------- Shared band shell ---------- */
/* Pages that open or close with a band sit flush against header and footer. */
main:has(> .wp-block-post-content > .rtk-band:first-child) {
	padding-top: 0 !important;
}
main:has(> .wp-block-post-content > .rtk-band:last-child) {
	padding-bottom: 0 !important;
}
.rtk-band {
	padding-block: var(--wp--preset--spacing--60);
}
.wp-block-post-content > .rtk-band + .rtk-band,
.wp-block-post-content > .rtk-band:first-child {
	margin-block-start: 0;
}
.rtk-band :where(h2, h3) {
	overflow-wrap: break-word;
}
.rtk-band .rtk-eyebrow {
	margin-block-end: 25px;
}

.rtk-band.is-dark {
	background: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--paper);
}
.rtk-band.is-dark p:not(.rtk-eyebrow) {
	color: var(--rtk-on-dark-body);
}
.rtk-band.is-dark .rtk-eyebrow {
	color: var(--wp--preset--color--signal);
}
.rtk-band.is-dark :where(a:focus-visible) {
	outline-color: var(--wp--preset--color--signal);
}
.rtk-band.is-paper {
	background: var(--rtk-tint);
}

/* Text link with an arrow that screen readers skip. */
.rtk-text-link a {
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--ochre);
	padding-bottom: 6px;
	display: inline-block;
}
.rtk-text-link a::after,
.rtk-source a::after {
	content: " ↗" / "";
}
.rtk-text-link a:hover {
	border-bottom-width: 2px;
}
.rtk-band.is-dark .rtk-text-link a {
	color: var(--wp--preset--color--signal);
	border-bottom-color: var(--wp--preset--color--signal);
}

/* Source citation: Special Elite, underlined. */
.rtk-source {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	line-height: 1.8;
	letter-spacing: 0.2px;
	margin-block-start: 15px;
}
.rtk-source a {
	color: var(--rtk-muted);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.rtk-band.is-dark .rtk-source a {
	color: var(--wp--preset--color--cream);
}

.rtk-small-note {
	font-size: 13px;
	line-height: 1.7;
	color: var(--rtk-muted);
}
.rtk-band.is-dark p.rtk-small-note {
	color: var(--rtk-on-dark-muted);
}

/* ---------- Redaction reveal ---------- */
/*
 * Deliberately slow and obvious (direction from Allen, 2026-11-03): the bar
 * holds long enough to register as a redaction, then peels off over ~2s with
 * an ease-in so the start of the motion is visible. Bars lifted together are
 * staggered by the script through --rtk-redaction-stagger.
 */
.rtk-redaction {
	--rtk-redaction-hold: 900ms;
	--rtk-redaction-lift: 2200ms;
	--rtk-redaction-stagger: 0ms;
	--rtk-redaction-start: calc(var(--rtk-redaction-hold) + var(--rtk-redaction-stagger));
	position: relative;
	display: inline-block;
	font-weight: inherit;
}
.rtk-redaction.is-covered::after {
	content: "";
	position: absolute;
	/* Bleed past the glyphs so it reads as a marker bar, not a highlight. */
	inset: -0.06em -0.12em;
	background: var(--rtk-redaction);
	transform: scaleX(1);
	transform-origin: right;
	transition: transform var(--rtk-redaction-lift) cubic-bezier(0.7, 0, 0.3, 1) var(--rtk-redaction-start);
	pointer-events: none;
}
.rtk-redaction.is-uncovered::after {
	transform: scaleX(0);
	/* Drop the zero-width bar after the lift so no antialiased hairline remains. */
	visibility: hidden;
	transition:
		transform var(--rtk-redaction-lift) cubic-bezier(0.7, 0, 0.3, 1) var(--rtk-redaction-start),
		visibility 0s linear calc(var(--rtk-redaction-start) + var(--rtk-redaction-lift));
}
/* On dark bands a black bar would sink into the charcoal; give it the same
   white edge the guide uses for the logo plate on dark. */
.rtk-band.is-dark .rtk-redaction.is-covered::after {
	box-shadow: 0 0 0 2px var(--wp--preset--color--paper);
}
.rtk-reveal-inline strong {
	font-weight: inherit;
}
@media (prefers-reduced-motion: reduce) {
	.rtk-redaction::after {
		display: none !important;
		transition: none !important;
	}
}

/* ---------- Statement band ---------- */
.rtk-statement h2 {
	font-size: clamp(49px, 6vw, 90px);
	max-width: 1000px;
}
.rtk-statement .rtk-text-link {
	margin-block-start: 30px;
}

/* ---------- Stat with source ---------- */
.rtk-stat .wp-block-columns {
	gap: 12%;
	align-items: center;
}
.rtk-stat .rtk-big-stat {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(110px, 15vw, 220px);
	line-height: 1;
	letter-spacing: -6px;
	color: var(--wp--preset--color--cream);
	margin-block: 25px;
	max-width: none;
}
.rtk-stat.is-dark p.rtk-big-stat {
	color: var(--wp--preset--color--cream);
}
.rtk-stat h2 {
	font-size: clamp(32px, 3vw, 38px);
}

/* ---------- Quote cards ---------- */
.rtk-quotes .wp-block-columns {
	gap: 25px;
	margin-block-start: 40px;
}
.rtk-quote-card {
	background: var(--rtk-tint);
	border-top: 3px solid var(--wp--preset--color--ink);
	padding: 32px;
	height: 100%;
}
.rtk-quote-card .rtk-quote-text {
	font-family: var(--wp--preset--font-family--label);
	font-size: clamp(22px, 2vw, 26px);
	line-height: 1.4;
	margin-block: 15px 25px;
}
.rtk-quote-card .rtk-quote-name {
	font-weight: 700;
	font-size: 15px;
	margin-block-end: 0;
}
.rtk-quote-card .rtk-quote-context {
	font-size: 13px;
	margin-block-start: 5px;
}

/* ---------- Bill tracker ---------- */
.rtk-note {
	padding: 22px;
	border-left: 3px solid var(--wp--preset--color--ochre);
	background: var(--rtk-tint-strong);
	font-size: 14px;
}
.rtk-bills .rtk-bill-card {
	margin-block-start: 30px;
}
.rtk-bill-card {
	border: 1px solid var(--rtk-rule);
	padding: 35px;
	background: var(--rtk-tint);
}
.rtk-bill-head {
	gap: 20px;
}
.rtk-bill-head p {
	margin: 0;
}
.rtk-file-number {
	font-family: var(--wp--preset--font-family--label);
	font-size: 14px;
}
.rtk-tag {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	border: 1px solid var(--rtk-rule);
	color: var(--rtk-muted);
	padding: 6px 10px;
}
.rtk-bill-card h2 {
	font-size: clamp(34px, 3vw, 40px);
}
.rtk-bill-name {
	font-family: var(--wp--preset--font-family--label);
	font-size: 17px;
}
.rtk-bill-card .rtk-progress {
	gap: 0;
	align-items: stretch;
	margin-block-start: 30px;
	max-width: 700px;
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
}
.rtk-progress > p {
	flex: 1;
	margin: 0;
	border-top: 4px solid var(--rtk-rule);
	padding: 15px 5px;
	color: var(--rtk-muted);
}
.rtk-progress > p.is-done {
	border-color: var(--wp--preset--color--ochre);
	color: var(--wp--preset--color--ink);
}
/* Status is conveyed in text, not color alone. */
.rtk-progress > p.is-done::before {
	content: "✓ " / "Complete: ";
}
.rtk-progress > p.is-pending::before {
	content: "" / "Pending: ";
}
.rtk-bill-card .wp-block-details {
	border-bottom: 1px solid var(--rtk-rule-soft);
	padding: 20px 0;
}
.rtk-bill-card summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 19px;
	min-height: 32px;
}
.rtk-bill-card .rtk-text-link {
	margin-block-start: 25px;
}
.rtk-hint {
	font-size: 13px;
	color: var(--rtk-muted);
}

/* ---------- Partner grid ---------- */
.rtk-partner-grid {
	gap: 30px;
	margin-block-start: 40px;
}
.rtk-partner-card {
	border-top: 4px solid var(--wp--preset--color--ochre);
	padding-top: 25px;
}
.rtk-partner-card h3 {
	margin-block-end: 6px;
}
.rtk-partner-card .rtk-partner-name {
	font-weight: 700;
	margin-block-start: 0;
}
.rtk-partner-card .rtk-eyebrow {
	margin-block: 18px 6px;
}
.rtk-partner-card p {
	font-size: 15px;
}

/* ---------- Call to action ---------- */
.rtk-cta {
	background: var(--wp--preset--color--signal);
	color: var(--wp--preset--color--ink);
	padding-block: 65px;
}
.rtk-cta-row {
	gap: 35px;
}
.rtk-cta h2 {
	font-size: clamp(42px, 5vw, 70px);
	max-width: 750px;
}
.rtk-cta .rtk-eyebrow {
	color: var(--wp--preset--color--ink);
}
.rtk-cta .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	min-height: 48px;
}
.rtk-cta .wp-block-button__link:hover,
.rtk-cta .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--charcoal);
	color: var(--wp--preset--color--paper);
}
.rtk-cta :where(a:focus-visible) {
	outline-color: var(--wp--preset--color--ink);
}

/* ---------- Small screens ---------- */
@media (max-width: 781px) {
	.rtk-stat .rtk-big-stat {
		font-size: min(150px, 28vw);
		letter-spacing: -4px;
		margin-block: 20px;
	}
	.rtk-stat .wp-block-columns {
		gap: 30px;
	}
	.rtk-bill-card {
		padding: 25px;
	}
	.rtk-bill-head {
		flex-direction: column;
		align-items: flex-start !important;
		gap: 10px;
	}
	.rtk-bill-card .rtk-progress {
		font-size: 10px;
	}
	.rtk-progress > p {
		padding-inline: 0 4px;
	}
	.rtk-quote-card {
		padding: 26px;
	}
	.rtk-cta-row {
		flex-direction: column;
		align-items: flex-start !important;
	}
}