/**
 * Theme styles that theme.json cannot express.
 *
 * The visual idea: a broadcast consumer-affairs segment from the era of local
 * television news, translated to a page. Hard rules, an eyebrow above every
 * headline, a red bar that reads as a lower third, and body copy set in a
 * serif so the substance reads like a report rather than a pitch.
 */

/* ---------------------------------------------------------------- Eyebrow */

.sitim-eyebrow {
	font-family: var(--wp--preset--font-family--broadcast);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
	margin-bottom: 0.6rem !important;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.sitim-eyebrow::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 3px;
	background: currentColor;
	flex: 0 0 auto;
}

.sitim-eyebrow-light {
	color: var(--wp--preset--color--silver);
}

/* ------------------------------------------------------------ Lower third */

/*
 * The banner that used to sit across the bottom of the screen while a reporter
 * spoke. Here it carries the site name in the header and the standing
 * disclaimer in the footer.
 */
.sitim-lower-third {
	display: inline-flex;
	align-items: stretch;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--broadcast);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.15;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

.sitim-lower-third > span {
	padding: 0.55rem 0.85rem;
	display: flex;
	align-items: center;
}

.sitim-lower-third > span + span {
	background: var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------- Report card */

/*
 * The visual anchor of the site: a page that looks like a filled-in inspection
 * form. Used for the "how it works" steps and the reassurance panels.
 */
.sitim-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--rule);
	border-top: 4px solid var(--wp--preset--color--ink);
	padding: 1.75rem;
	height: 100%;
	position: relative;
}

.sitim-card-red { border-top-color: var(--wp--preset--color--red); }
.sitim-card-amber { border-top-color: var(--wp--preset--color--amber); }
.sitim-card-navy { border-top-color: var(--wp--preset--color--navy); }

.sitim-card h3 {
	margin-top: 0.25rem;
}

.sitim-step-number {
	font-family: var(--wp--preset--font-family--broadcast);
	font-size: 2.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--silver);
	display: block;
	margin-bottom: 0.35rem;
}

/* ------------------------------------------------------- Ruled section head */

.sitim-ruled {
	border-top: 3px solid var(--wp--preset--color--ink);
	padding-top: 0.75rem;
}

/* ------------------------------------------------------------- Stat figures */

.sitim-figure {
	font-family: var(--wp--preset--font-family--broadcast);
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 3rem);
	line-height: 1;
	letter-spacing: -0.03em;
	display: block;
}

.sitim-figure-label {
	font-family: var(--wp--preset--font-family--broadcast);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	display: block;
	margin-top: 0.4rem;
}

/* ------------------------------------------------------------------ Notice */

.sitim-notice {
	border-left: 4px solid var(--wp--preset--color--amber);
	background: rgba(200, 121, 26, 0.08);
	padding: 1.1rem 1.35rem;
	font-size: var(--wp--preset--font-size--small);
}

.sitim-notice p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- Site header */

.sitim-header {
	border-bottom: 3px solid var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
}

.sitim-header .wp-block-navigation__responsive-container-open,
.sitim-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--ink);
}

/*
 * Mobile overlay menu.
 *
 * The navigation block is set to justify right, which is what the desktop bar
 * wants. Core then reuses that setting inside the full-screen overlay --
 *
 *     align-items: var(--navigation-layout-justification-setting, inherit);
 *
 * -- so every item pinned itself to the right edge and the longest one,
 * "Report an illness", ran off the screen.
 *
 * Rather than fight core's declarations, redefine the variable for the overlay
 * only. Core's own rules then produce left alignment on their own, which keeps
 * working if those rules are ever rewritten.
 */
.wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-align: flex-start;
	--navigation-layout-justify: flex-start;
}

/*
 * The selectors below deliberately repeat core's own descendant chain. Core
 * sets `padding: 0` on the item content at a specificity of 0,4,0; a shorter
 * selector loses and the rows collapse to 21px, which is a link you aim at
 * rather than a row you tap. Matching the chain wins on source order instead
 * of reaching for !important.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	width: 100%;
	gap: 0;
}

/* Full-width rows, so the tap target is the line rather than the words. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-pages-list__item {
	width: 100%;
	border-bottom: 1px solid rgba( 21, 23, 27, 0.1 );
}

/*
 * A menu with no menu assigned falls back to the Page List block, which is
 * what this site currently uses. Its rows are <li class="wp-block-pages-list__item">
 * rather than .wp-block-navigation-item, so every rule written for the
 * navigation-link markup silently missed. Both are listed everywhere below.
 */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
	width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-pages-list__item__link {
	display: block;
	width: 100%;
	padding: 0.9rem 0;
	font-size: 1.125rem;
}

/* The close button is the one control in an overlay that must never be
 * fiddly -- it is how somebody gets out. */
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
	min-width: 44px;
	min-height: 44px;
}

/* A thin tricolour strip, the way a station ident used to sign off a segment. */
.sitim-signal {
	display: flex;
	height: 4px;
	width: 100%;
}

.sitim-signal span { flex: 1 1 0; }
.sitim-signal span:nth-child(1) { background: var(--wp--preset--color--red); }
.sitim-signal span:nth-child(2) { background: var(--wp--preset--color--amber); }
.sitim-signal span:nth-child(3) { background: var(--wp--preset--color--navy); }

/* --------------------------------------------------------------- Site footer */

.sitim-footer {
	border-top: 3px solid var(--wp--preset--color--ink);
}

.sitim-footer a { text-decoration: none; }
.sitim-footer a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ Details */

.sitim-faq details {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding: 1rem 0;
}

.sitim-faq summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--broadcast);
	font-weight: 700;
	font-size: 1.0625rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.sitim-faq summary::-webkit-details-marker { display: none; }

.sitim-faq summary::after {
	content: "+";
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--red);
	flex: 0 0 auto;
}

.sitim-faq details[open] summary::after { content: "\2212"; }

.sitim-faq details > *:not(summary) {
	margin-top: 0.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

/* ------------------------------------------------------------- Form wrapper */

/*
 * The plugin's form ships with its own restrained styling. Here we only align
 * its accent colours with the theme so the two do not argue.
 */
.sitim-form-wrap {
	--sitim-accent: #A8121D;
	--sitim-accent-ink: #FFFDF7;
	--sitim-ink: #15171B;
	--sitim-muted: #4A515C;
	--sitim-line: #DED8C8;
	--sitim-bg: #FFFDF7;
	--sitim-soft: #F5F1E6;
	--sitim-radius: 3px;
}

.sitim-form-wrap .sitim-btn,
.sitim-form-wrap .sitim-input,
.sitim-form-wrap .sitim-legend {
	font-family: var(--wp--preset--font-family--broadcast);
}

.sitim-form-wrap .sitim-btn {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------ Utility */

.sitim-measure { max-width: 34rem; }

.sitim-dim { color: var(--wp--preset--color--ink-soft); }

.sitim-small-caps {
	font-family: var(--wp--preset--font-family--broadcast);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sitim-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
}

@media (prefers-reduced-motion: no-preference) {
	.sitim-card { transition: transform 160ms ease, box-shadow 160ms ease; }
}

@media (max-width: 599px) {
	.sitim-card { padding: 1.35rem; }
	.sitim-lower-third { font-size: 0.9rem; }

	/*
	 * Redefine the spacing presets themselves rather than chasing every
	 * pattern. Each section sets its padding inline as
	 * var(--wp--preset--spacing--60), so changing what that variable means on
	 * a small screen retunes the whole site's vertical rhythm at once -- and
	 * keeps working for any pattern added later.
	 *
	 * 6rem of air above a headline is generous on a desktop and is most of a
	 * phone screen.
	 */
	body {
		--wp--preset--spacing--40: 1.75rem;
		--wp--preset--spacing--50: 2.5rem;
		--wp--preset--spacing--60: 3rem;
	}

	/* Stacked full-width buttons beat two half-width ones a thumb has to aim
	 * between. */
	.wp-block-buttons > .wp-block-button {
		width: 100%;
	}

	.wp-block-buttons > .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
	}
}

.sitim-footer-rule {
	border: 0;
	border-top: 1px solid #2C3B52;
	background: none;
	opacity: 1;
}