/*
 * Wimmera 72 dashboard.
 *
 * Light theme, to sit with the rest of the site.
 *
 * Live panels sit as white cards on a tinted ground, with a freshness dot, so
 * "this updates itself" still reads at a glance without needing a dark field.
 *
 * The AFDRS rating colours are mandated and several of them are unreadable as
 * text on white. So each rating has two tokens: the true colour, used for the
 * dial and the severity edges where it is a graphic, and a darkened variant
 * used wherever the rating appears as text. The rating still reads as itself,
 * and the words stay legible.
 */

/* The theme ships Inter but only declares it for the block editor, so the
   dashboard declares it for the front end. One file covers every weight. */
@font-face {
	font-family: "W72 Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/Inter-upright-var.woff2) format("woff2");
}

.w72-panel {
	/* Ground. A cool off white rather than a cream, so the AFDRS colours stay
	   the warmest thing on the page. */
	--w72-paper: #eaeef3;
	--w72-surface: #ffffff;
	--w72-line: #ccd5df;
	--w72-line-strong: #aab6c4;

	/* Text */
	--w72-ink: #10161f;
	--w72-ink-soft: #59646f;

	/* Brand, measured from the printed fridge magnet. True values, used for
	   graphics: the clock, the stripes, decorative rules. Never for text. */
	--w72-brand-yellow: #fed41e;
	--w72-brand-yellow-lit: #ffe030;
	--w72-brand-red: #ef1923;
	--w72-brand-cyan: #00b0f0;
	--w72-brand-steel: #4888ae;

	/* The same brand colours, adjusted until they pass contrast as text.
	   Same principle as the AFDRS split above. */
	--w72-brand-red-ink: #d40e17;
	--w72-brand-steel-ink: #356a86;
	--w72-brand-cyan-ink: #075673;

	/* Accent. The brand cyan, taken down far enough to read as text. */
	--w72-accent: #096285;
	--w72-accent-hover: #075673;
	--w72-accent-wash: #e6f3f9;
	--w72-horizon: #2c6a8f;

	/* AFDRS rating colours, true values. Graphics only: dial fills, edges. */
	--w72-moderate: #79bc43;
	--w72-high: #fdd400;
	--w72-extreme: #f58220;
	--w72-catastrophic: #d31820;
	--w72-norating: #c9d1db;

	/* The same ratings, darkened for use as text on a white card. */
	--w72-moderate-ink: #3d7a1f;
	--w72-high-ink: #806100;
	--w72-extreme-ink: #ac4e00;
	--w72-catastrophic-ink: #b00d14;
	--w72-norating-ink: #59646f;

	/* Type. Avenir Next is already self hosted by the theme and carries the
	   headings. Inter carries anything that is a reading off an instrument. */
	--w72-display: "AvenirNext-DemiBold", "AvenirNext-Regular", system-ui, sans-serif;
	--w72-display-bold: "AvenirNext-Bold", "AvenirNext-DemiBold", system-ui, sans-serif;
	--w72-data: "W72 Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	--w72-radius: 10px;
	--w72-gap: 20px;
	--w72-shadow: 0 1px 2px rgba(16, 22, 31, 0.05), 0 2px 8px rgba(16, 22, 31, 0.04);

	box-sizing: border-box;
	margin: 0;
	padding: 28px 18px 24px;
	background: var(--w72-paper);
	color: var(--w72-ink);
	font-family: var(--w72-data);
	font-size: 16px;
	line-height: 1.5;
}

.w72-panel *,
.w72-panel *::before,
.w72-panel *::after {
	box-sizing: inherit;
}

/* ---------------------------------------------------------------- headings */

.w72-panel__head {
	margin: 0 auto 20px;
	max-width: 1120px;
}

.w72-eyebrow {
	margin: 0 0 4px;
	color: var(--w72-accent);
	font-family: var(--w72-data);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.w72-panel__title {
	margin: 0;
	color: var(--w72-ink);
	font-family: var(--w72-display-bold);
	font-size: clamp(1.5rem, 5vw, 2rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------- district instrument */

.w72-fire__districts {
	display: grid;
	gap: var(--w72-gap);
	margin: 0 auto;
	max-width: 1120px;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.w72-fire__districts {
		grid-template-columns: 1fr 1fr;
	}
}

.w72-district {
	position: relative;
	padding: 22px 20px 20px;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
	text-align: center;
}

/* The rating colour enters as a top edge, not a flood, so text contrast on the
   card never depends on which rating is showing. */
.w72-district::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	border-radius: var(--w72-radius) var(--w72-radius) 0 0;
	background: var(--w72-rating, var(--w72-norating));
}

.w72-district--moderate { --w72-rating: var(--w72-moderate); --w72-rating-ink: var(--w72-moderate-ink); }
.w72-district--high { --w72-rating: var(--w72-high); --w72-rating-ink: var(--w72-high-ink); }
.w72-district--extreme { --w72-rating: var(--w72-extreme); --w72-rating-ink: var(--w72-extreme-ink); }
.w72-district--catastrophic { --w72-rating: var(--w72-catastrophic); --w72-rating-ink: var(--w72-catastrophic-ink); }
.w72-district--no-rating { --w72-rating: var(--w72-norating); --w72-rating-ink: var(--w72-norating-ink); }

.w72-district__name {
	margin: 0 0 12px;
	color: var(--w72-ink-soft);
	font-family: var(--w72-data);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* The rating word is the loudest thing on the card: huge and tightly tracked,
   set against the small wide labels around it. That contrast is the page's
   whole type personality. It uses the darkened rating token, never the raw
   AFDRS colour, so High does not become yellow text on white. */
.w72-district__rating {
	margin: 6px 0 10px;
	color: var(--w72-rating-ink, var(--w72-norating-ink));
	font-family: var(--w72-data);
	font-size: clamp(2.25rem, 9vw, 3.25rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.035em;
}

.w72-district__headline {
	margin: 0 0 8px;
	color: var(--w72-ink);
	font-family: var(--w72-display-bold);
	font-size: 1.0625rem;
	line-height: 1.3;
}

.w72-district__advice {
	margin: 0;
	color: var(--w72-ink-soft);
	font-size: 0.9375rem;
	line-height: 1.45;
}

.w72-district__tomorrow {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--w72-line);
	color: var(--w72-ink-soft);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.w72-district__unavailable {
	margin: 8px 0 0;
	color: var(--w72-ink-soft);
	font-size: 0.9375rem;
}

/* ------------------------------------------------------------------- dial */

.w72-dial {
	margin: 0 auto;
	max-width: 220px;
}

.w72-dial svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Inactive segments are washed out rather than darkened, so the active one is
   still obviously the one that is lit. */
.w72-dial__seg {
	opacity: 0.16;
	transition: opacity 240ms ease;
}

.w72-dial__seg.is-active {
	opacity: 1;
}

.w72-dial__seg--moderate { fill: var(--w72-moderate); }
.w72-dial__seg--high { fill: var(--w72-high); }
.w72-dial__seg--extreme { fill: var(--w72-extreme); }
.w72-dial__seg--catastrophic { fill: var(--w72-catastrophic); }

.w72-dial__needle {
	stroke: var(--w72-ink);
	stroke-width: 5;
	stroke-linecap: round;
}

.w72-dial__hub {
	fill: var(--w72-ink);
}

/* --------------------------------------------------------- total fire ban */

.w72-tfb {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: var(--w72-gap) auto 0;
	max-width: 1120px;
	padding: 16px 20px;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
}

.w72-tfb--declared {
	border-color: var(--w72-catastrophic);
	border-left-width: 4px;
	background: #fdf2f2;
}

.w72-tfb__label {
	margin: 0;
	color: var(--w72-ink-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.w72-tfb__state {
	margin: 0;
	font-family: var(--w72-data);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.w72-tfb--declared .w72-tfb__state {
	color: var(--w72-catastrophic-ink);
}

.w72-tfb__split {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w72-tfb__district {
	color: var(--w72-ink-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.w72-tfb__value {
	font-weight: 700;
}

/* ---------------------------------------------------------------- weather */

.w72-weather__card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	margin: 0 auto;
	max-width: 1120px;
	padding: 22px 20px;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
}

.w72-weather__now {
	display: flex;
	align-items: center;
	gap: 14px;
}

.w72-weather__icon {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	color: var(--w72-horizon);
}

.w72-weather__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.w72-icon--clear-day svg > circle,
.w72-icon--clear-night svg > path,
.w72-icon--partly-day svg > circle {
	fill: #e0a52c;
	stroke: #b8801f;
}

.w72-icon__bolt {
	fill: #e0a52c;
	stroke: #b8801f;
}

.w72-icon__cloud {
	fill: rgba(44, 106, 143, 0.1);
}

/* The temperature is a reading off an instrument: large and tightly tracked,
   matching the fire danger rating word. */
.w72-weather__temp {
	margin: 0;
	color: var(--w72-ink);
	font-family: var(--w72-data);
	font-size: clamp(2.5rem, 10vw, 3.5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.w72-weather__unit {
	margin-left: 2px;
	color: var(--w72-ink-soft);
	font-size: 0.4em;
	font-weight: 600;
	letter-spacing: 0;
	vertical-align: super;
}

.w72-weather__detail {
	flex: 1 1 220px;
}

.w72-weather__place {
	margin: 0 0 2px;
	color: var(--w72-ink-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.w72-weather__condition {
	margin: 0 0 12px;
	color: var(--w72-ink);
	font-family: var(--w72-display-bold);
	font-size: 1.125rem;
	line-height: 1.3;
}

.w72-weather__readings {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w72-weather__readings li {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.w72-weather__key {
	color: var(--w72-ink-soft);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.w72-weather__value {
	font-family: var(--w72-data);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* ----------------------------------------------------- warnings and incidents */

.w72-map__layout {
	display: grid;
	gap: var(--w72-gap);
	margin: 0 auto;
	max-width: 1120px;
	grid-template-columns: 1fr;
}

/* The warning list comes first on a narrow screen. The words matter more than
   the picture when someone is holding a phone and deciding what to do. */
.w72-map__canvas-wrap { order: 2; }
.w72-map__list { order: 1; }

@media (min-width: 860px) {
	.w72-map__layout {
		grid-template-columns: 1.6fr 1fr;
	}

	.w72-map__canvas-wrap { order: 1; }
	.w72-map__list { order: 2; }
}

.w72-map__canvas {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 320px;
	height: 100%;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
}

.w72-map__placeholder {
	margin: 0;
	padding: 20px;
	color: var(--w72-ink-soft);
	font-size: 0.875rem;
	text-align: center;
}

.w72-incidents {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w72-incident {
	position: relative;
	padding: 12px 14px 12px 16px;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
}

/* Severity as a left edge, the same device the fire danger cards use. */
.w72-incident::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	border-radius: var(--w72-radius) 0 0 var(--w72-radius);
	background: var(--w72-severity, var(--w72-horizon));
}

.w72-incident--emergency { --w72-severity: var(--w72-catastrophic); --w72-severity-ink: var(--w72-catastrophic-ink); }
.w72-incident--watch { --w72-severity: var(--w72-extreme); --w72-severity-ink: var(--w72-extreme-ink); }
.w72-incident--advice { --w72-severity: var(--w72-high); --w72-severity-ink: var(--w72-high-ink); }
.w72-incident--incident { --w72-severity: var(--w72-horizon); --w72-severity-ink: var(--w72-horizon); }

.w72-incident__badge {
	margin: 0 0 4px;
	color: var(--w72-severity-ink, var(--w72-horizon));
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.w72-incident__location {
	margin: 0 0 3px;
	color: var(--w72-ink);
	font-family: var(--w72-display-bold);
	font-size: 0.9375rem;
	line-height: 1.35;
}

.w72-incident__detail {
	margin: 0;
	color: var(--w72-ink-soft);
	font-size: 0.8125rem;
}

.w72-map__clear {
	padding: 20px 18px;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
}

.w72-map__clear-head {
	margin: 0 0 4px;
	color: var(--w72-ink);
	font-family: var(--w72-display-bold);
	font-size: 1.0625rem;
}

.w72-map__clear-body {
	margin: 0;
	color: var(--w72-ink-soft);
	font-size: 0.875rem;
}

.w72-map__canvas .leaflet-container {
	width: 100%;
	height: 100%;
	min-height: 320px;
	background: #e8edf1;
	font-family: var(--w72-data);
}

.w72-map__canvas .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.88);
	color: var(--w72-ink-soft);
	font-size: 10px;
}

.w72-map__canvas .leaflet-control-attribution a {
	color: var(--w72-horizon);
}

.w72-popup__detail {
	color: var(--w72-ink-soft);
	font-size: 0.8125rem;
}

/* ------------------------------------------------------------------ tiles */

.w72-tiles__grid {
	display: grid;
	gap: 12px;
	margin: 0 auto;
	max-width: 1120px;
	padding: 0;
	list-style: none;
}

.w72-tiles__grid--primary { grid-template-columns: 1fr; }

.w72-tiles__grid--secondary {
	margin-top: 12px;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 560px) {
	.w72-tiles__grid--primary { grid-template-columns: repeat(2, 1fr); }
	.w72-tiles__grid--secondary { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.w72-tiles__grid--primary { grid-template-columns: repeat(4, 1fr); }
	.w72-tiles__grid--secondary { grid-template-columns: repeat(5, 1fr); }
}

/* Tiles are thumb targets first and decoration second. */
.w72-tile {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	min-height: 64px;
	padding: 14px 16px;
	border: 1px solid var(--w72-line);
	border-left: 4px solid var(--w72-accent-tile, var(--w72-horizon));
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
	color: var(--w72-ink);
	text-decoration: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.w72-tile:hover,
.w72-tile:focus-visible {
	border-color: var(--w72-accent-tile, var(--w72-horizon));
	box-shadow: 0 2px 4px rgba(16, 22, 31, 0.08), 0 6px 16px rgba(16, 22, 31, 0.08);
	color: var(--w72-ink);
	transform: translateY(-1px);
}

.w72-tile--primary {
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	min-height: 128px;
	padding: 18px;
}

.w72-tile__icon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	color: var(--w72-accent-tile, var(--w72-horizon));
}

.w72-tile--primary .w72-tile__icon {
	width: 32px;
	height: 32px;
}

.w72-tile__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.w72-tile__label {
	display: block;
	font-family: var(--w72-display-bold);
	font-size: 0.9375rem;
	line-height: 1.25;
}

.w72-tile--primary .w72-tile__label { font-size: 1.0625rem; }

.w72-tile__hint {
	display: block;
	margin-top: 3px;
	color: var(--w72-ink-soft);
	font-family: var(--w72-data);
	font-size: 0.8125rem;
	line-height: 1.35;
}

/* Agency accents, darkened for a white ground. Used on the edge and the icon
   only, never as a flood, so label contrast never depends on them. */
.w72-tile--vicemergency { --w72-accent-tile: #c47d0a; }
.w72-tile--cfa { --w72-accent-tile: #c1141b; }
.w72-tile--vicses { --w72-accent-tile: #cf6a0e; }
.w72-tile--emv { --w72-accent-tile: #5162c4; }
.w72-tile--power { --w72-accent-tile: #8a6a00; }
.w72-tile--water { --w72-accent-tile: #2c7fa8; }
.w72-tile--roads { --w72-accent-tile: #7a51ba; }
.w72-tile--wildlife { --w72-accent-tile: #4a8a25; }

/* ------------------------------------------------------------------ radio */

.w72-stations {
	display: grid;
	gap: 10px;
	margin: 0 auto;
	max-width: 1120px;
	padding: 0;
	list-style: none;
}

.w72-station {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding: 14px 16px;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
}

.w72-station__name {
	flex: 1 1 160px;
	font-family: var(--w72-display-bold);
	font-size: 1rem;
}

/* The frequency is the thing that matters when the power is out, so it is set
   like a readout rather than as body text. */
.w72-station__frequency {
	flex: 0 0 auto;
	color: var(--w72-accent);
	font-family: var(--w72-data);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.w72-station__listen {
	flex: 0 0 auto;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--w72-accent);
	color: #ffffff;
	font-family: var(--w72-display-bold);
	font-size: 0.875rem;
	text-decoration: none;
}

.w72-station__listen:hover,
.w72-station__listen:focus-visible {
	background: var(--w72-accent-hover);
	color: #ffffff;
}

.w72-station__nolink {
	flex: 0 0 auto;
	color: var(--w72-ink-soft);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------- resources */

.w72-resources__groups {
	display: grid;
	gap: var(--w72-gap);
	margin: 0 auto;
	max-width: 1120px;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.w72-resources__groups { grid-template-columns: 1fr 1.4fr; }
}

.w72-resources__group-title {
	margin: 0 0 10px;
	color: var(--w72-ink-soft);
	font-family: var(--w72-data);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.w72-resources__list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.w72-resources__list--types { grid-template-columns: 1fr 1fr; }
}

.w72-resource {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
	color: var(--w72-ink);
	text-decoration: none;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.w72-resource:hover,
.w72-resource:focus-visible {
	border-color: var(--w72-accent);
	box-shadow: 0 2px 4px rgba(16, 22, 31, 0.08), 0 6px 16px rgba(16, 22, 31, 0.08);
	color: var(--w72-ink);
}

/* The three steps are genuinely a sequence, so they are numbered. The
   emergency type list is not, so it is not. */
.w72-resource__step {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--w72-accent);
	color: #ffffff;
	font-family: var(--w72-data);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 26px;
	text-align: center;
}

.w72-resource__label {
	font-family: var(--w72-display-bold);
	font-size: 0.9375rem;
	line-height: 1.3;
}

/* ----------------------------------------------------------------- social */

.w72-social__inner {
	margin: 0 auto;
	max-width: 1120px;
}

.w72-tablist {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	overflow-x: auto;
	margin-bottom: 14px;
	padding-bottom: 4px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.w72-tab {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 10px 16px;
	border: 1px solid var(--w72-line-strong);
	border-radius: 999px;
	background: var(--w72-surface);
	color: var(--w72-ink-soft);
	font-family: var(--w72-display-bold);
	font-size: 0.875rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.w72-tab:hover {
	border-color: var(--w72-accent);
	color: var(--w72-ink);
}

.w72-tab.is-selected {
	border-color: var(--w72-accent);
	background: var(--w72-accent);
	color: #ffffff;
}

.w72-tabpanel {
	padding: 16px;
	border: 1px solid var(--w72-line);
	border-radius: var(--w72-radius);
	background: var(--w72-surface);
	box-shadow: var(--w72-shadow);
}

.w72-feed {
	overflow: hidden;
	max-width: 100%;
}

.w72-feed:empty { display: none; }

/* The agency link is present before any script runs and stays visible after
   the embed loads, so there is always a way through to the real page. */
.w72-feed__fallback {
	margin: 0;
	padding-top: 12px;
}

.w72-feed:empty + .w72-feed__fallback { padding-top: 0; }

.w72-feed__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--w72-accent);
	font-family: var(--w72-display-bold);
	font-size: 0.9375rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.w72-feed__link:hover,
.w72-feed__link:focus-visible {
	color: var(--w72-accent-hover);
}

.w72-social__note {
	margin: 12px 0 0;
	color: var(--w72-ink-soft);
	font-size: 0.75rem;
	line-height: 1.45;
}

/* ------------------------------------------------------ freshness and source */

.w72-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 20px;
	margin: 16px auto 0;
	max-width: 1120px;
	color: var(--w72-ink-soft);
	font-size: 12px;
}

.w72-meta p { margin: 0; }

/* Stale data never masquerades as current: the dot is solid when the reading
   just arrived and hollow amber when it is being served from cache. With the
   dark field gone, this dot is what marks a panel as live. */
.w72-fresh {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	vertical-align: baseline;
}

.w72-fresh--live {
	background: var(--w72-moderate-ink);
}

.w72-fresh--stale {
	border: 2px solid var(--w72-accent);
	background: transparent;
}

.w72-link {
	margin-left: 10px;
	color: var(--w72-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.w72-link:hover,
.w72-link:focus {
	color: var(--w72-accent-hover);
}

.w72-panel :focus-visible {
	outline: 3px solid var(--w72-accent);
	outline-offset: 3px;
}

.w72-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.w72-panel *,
	.w72-panel *::before,
	.w72-panel *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

@media print {
	.w72-panel {
		background: #fff;
	}

	.w72-district,
	.w72-tfb,
	.w72-tile,
	.w72-station,
	.w72-resource,
	.w72-incident {
		box-shadow: none;
	}
}

/* ==========================================================================
   Brand furniture
   --------------------------------------------------------------------------
   The parts of the page that carry the Wimmera 72 identity, following the
   printed fridge magnet: red emergency band, yellow ground with diagonal
   stripes, the 72 hour clock.

   These blocks sit outside .w72-panel, so they carry their own tokens.
   ========================================================================== */

.w72-banner,
.w72-brandstrip {
	--w72-brand-yellow: #fed41e;
	--w72-brand-yellow-lit: #ffe030;
	--w72-brand-red: #ef1923;
	--w72-brand-red-ink: #d40e17;
	--w72-brand-cyan-ink: #075673;
	--w72-ink: #10161f;
	--w72-display-bold: "AvenirNext-Bold", "AvenirNext-DemiBold", system-ui, sans-serif;
	--w72-data: "W72 Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	box-sizing: border-box;
}

.w72-banner *,
.w72-brandstrip *,
.w72-banner *::before,
.w72-brandstrip *::before {
	box-sizing: inherit;
}

/* ------------------------------------------------------- emergency banner */

/* The single most important thing on the page. Plain markup, no dependencies,
   and it stays put while the page scrolls. */
.w72-banner {
	position: sticky;
	top: 0;
	z-index: 900;
	padding: 10px 16px;
	background: var(--w72-brand-red-ink);
	text-align: center;
}

.w72-banner__text {
	margin: 0;
	color: #ffffff;
	font-family: var(--w72-display-bold);
	font-size: clamp(0.9375rem, 3.4vw, 1.125rem);
	line-height: 1.3;
}

.w72-banner__number {
	color: #ffffff;
	font-family: var(--w72-data);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.w72-banner__number:hover,
.w72-banner__number:focus-visible {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.16);
}

.w72-banner :focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* --------------------------------------------------------- three steps strip */

/* Yellow ground with the magnet's diagonal stripes. The stripes are a
   gradient rather than an image, so they cost nothing and scale cleanly. */
.w72-brandstrip {
	padding: 26px 18px 28px;
	background-color: var(--w72-brand-yellow);
	background-image: repeating-linear-gradient(
		135deg,
		var(--w72-brand-yellow-lit) 0 18px,
		var(--w72-brand-yellow) 18px 44px
	);
	color: var(--w72-ink);
}

.w72-brandstrip__inner {
	margin: 0 auto;
	max-width: 1120px;
}

.w72-brandstrip__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px 22px;
	text-align: center;
}

.w72-brandstrip__title {
	margin: 0;
	font-family: var(--w72-display-bold);
	line-height: 1.02;
	letter-spacing: -0.015em;
}

.w72-brandstrip__title-a,
.w72-brandstrip__title-b {
	display: block;
}

.w72-brandstrip__title-a {
	color: var(--w72-ink);
	font-size: clamp(1.25rem, 4.6vw, 1.75rem);
}

/* The magnet sets this line in cyan with a white keyline. A keyline does not
   count towards contrast, so the web version uses a deepened cyan that passes
   on the yellow ground on its own. */
.w72-brandstrip__title-b {
	color: var(--w72-brand-cyan-ink);
	font-size: clamp(1.75rem, 7vw, 2.75rem);
}

.w72-clock {
	flex: 0 0 auto;
	width: clamp(64px, 16vw, 92px);
}

.w72-clock svg {
	display: block;
	width: 100%;
	height: auto;
}

.w72-clock__case {
	fill: none;
	stroke: var(--w72-brand-red);
	stroke-width: 9;
}

.w72-clock__face {
	fill: #ffffff;
}

.w72-clock__bells,
.w72-clock__button {
	fill: var(--w72-brand-red);
}

.w72-clock__ticks,
.w72-clock__feet {
	stroke: var(--w72-brand-red);
	stroke-width: 7;
	stroke-linecap: round;
	fill: none;
}

.w72-clock__72 {
	fill: #00b0f0;
	font-family: var(--w72-data);
	font-size: 42px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.w72-clock__hours {
	fill: var(--w72-ink);
	font-family: var(--w72-data);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* The three steps. White cards with the magnet's black keyline. */
.w72-steps {
	display: grid;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
	counter-reset: none;
}

@media (min-width: 620px) {
	.w72-steps { grid-template-columns: repeat(3, 1fr); }
}

.w72-step {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	min-height: 60px;
	padding: 14px 16px;
	border: 2px solid var(--w72-ink);
	border-radius: 8px;
	background: #ffffff;
	color: var(--w72-ink);
	text-decoration: none;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.w72-step:hover,
.w72-step:focus-visible {
	color: var(--w72-ink);
	transform: translateY(-2px);
	box-shadow: 0 4px 0 var(--w72-ink);
}

.w72-step__number {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--w72-brand-red-ink);
	color: #ffffff;
	font-family: var(--w72-data);
	font-size: 0.9375rem;
	font-weight: 800;
	line-height: 30px;
	text-align: center;
}

.w72-step__label {
	font-family: var(--w72-display-bold);
	font-size: 1rem;
	line-height: 1.25;
}

.w72-brandstrip__message {
	margin: 20px auto 0;
	max-width: 62ch;
	color: var(--w72-ink);
	font-size: 0.9375rem;
	line-height: 1.5;
	text-align: center;
}

.w72-brandstrip :focus-visible {
	outline: 3px solid var(--w72-ink);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.w72-step {
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------------------- who to call */

/* Kept from the previous homepage and styled after the magnet's red band.
   These numbers are not covered anywhere else on the dashboard. */
.w72-contacts {
	padding: 26px 18px 28px;
	background: #d40e17;
	color: #ffffff;
}

.w72-contacts__inner {
	margin: 0 auto;
	max-width: 1120px;
	text-align: center;
}

.w72-contacts__title {
	margin: 0 0 18px;
	color: #ffffff;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: clamp(1.25rem, 4.4vw, 1.625rem);
	letter-spacing: -0.01em;
}

.w72-contacts__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 620px) {
	.w72-contacts__list { grid-template-columns: repeat(4, 1fr); }
}

.w72-contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 14px 12px;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-radius: 8px;
}

.w72-contact--emergency {
	border-color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
}

.w72-contact__label {
	color: #ffffff;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

/* The number is the point of the block, so it is set like a readout. */
.w72-contact__number {
	color: #ffffff;
	font-family: "W72 Inter", system-ui, sans-serif;
	font-size: clamp(1.75rem, 6vw, 2.125rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-decoration: none;
}

.w72-contact__number:hover,
.w72-contact__number:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.w72-contact__note {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.w72-contacts :focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* -------------------------------------------------------- WEMRSP lockup */

/* Rebuilt from the magnet: a steel blue title bar above a white panel of
   council logos. Each logo links to that council's own emergency page. */
.w72-councils {
	padding: 0;
	background: #ffffff;
}

.w72-councils__inner {
	margin: 0 auto;
	max-width: 1120px;
	padding: 0 18px 28px;
}

.w72-councils__title {
	margin: 0;
	padding: 14px 18px;
	background: #356a86;
	border-radius: 10px 10px 0 0;
	color: #ffffff;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: clamp(0.9375rem, 3vw, 1.1875rem);
	line-height: 1.3;
	text-align: center;
}

.w72-councils__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid #ccd5df;
	border-top: 0;
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 720px) {
	.w72-councils__list { grid-template-columns: repeat(4, 1fr); }
}

.w72-council {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	height: 100%;
	min-height: 132px;
	padding: 18px 14px;
	background: #ffffff;
	color: #10161f;
	text-align: center;
	text-decoration: none;
	transition: background-color 160ms ease;
}

.w72-council:hover,
.w72-council:focus-visible {
	background: #f2f5f8;
	color: #10161f;
}

.w72-council__logo {
	width: auto;
	max-width: 100%;
	height: 56px;
	object-fit: contain;
}

.w72-council__name {
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: 0.8125rem;
	line-height: 1.3;
}

.w72-council__hint {
	color: #59646f;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.w72-councils :focus-visible {
	outline: 3px solid #096285;
	outline-offset: -3px;
}

/* ------------------------------------------------------------- disclaimer */

.w72-disclaimer {
	padding: 24px 18px 28px;
	background: #eaeef3;
}

.w72-disclaimer__inner {
	margin: 0 auto;
	max-width: 78ch;
}

/* The support-not-replacement message is the important half, so it is set
   larger than the legal wording beneath it. */
.w72-disclaimer__lead {
	margin: 0 0 10px;
	color: #10161f;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.45;
}

.w72-disclaimer__body {
	margin: 0;
	color: #59646f;
	font-size: 0.8125rem;
	line-height: 1.55;
}

/* ========================================================================== */
/* Theme header and footer adjustments                                        */
/* -------------------------------------------------------------------------- */
/* The theme header is absolutely positioned so it can sit over a hero image.  */
/* The homepage no longer has one, so on the front page the header is returned */
/* to the normal flow and given a solid ground. Inner pages keep the overlay.  */
/* ========================================================================== */

body.home .header-container {
	position: relative;
	padding: 20px 0;
	background: #10161f;
}

/* The banner is printed before the header, so it needs to outrank it when
   both are on screen. */
.w72-banner {
	position: sticky;
	top: 0;
	z-index: 1000;
}

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

.footer-container {
	padding: 0;
	background: #10161f;
}

.w72-footer {
	display: grid;
	gap: 20px;
	margin: 0 auto;
	max-width: 1120px;
	padding: 40px 18px 44px;
	text-align: center;
	font-family: "W72 Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.w72-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.w72-footer__logo {
	display: block;
	width: 100%;
	max-width: 200px;
}

.w72-footer__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.w72-footer__tagline {
	margin: 0;
	max-width: 44ch;
	color: #c3ccd6;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.w72-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.w72-footer__nav a {
	display: inline-block;
	padding: 6px 2px;
	color: #ffffff;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: 0.9375rem;
	text-decoration: none;
}

.w72-footer__nav a:hover,
.w72-footer__nav a:focus-visible {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The 000 reminder is the one piece of the footer that could matter urgently,
   so it is set apart rather than buried in the small print. */
.w72-footer__emergency {
	margin: 0;
	padding: 12px 16px;
	border: 2px solid #d40e17;
	border-radius: 8px;
	color: #ffffff;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: 1rem;
	justify-self: center;
}

.w72-footer__emergency a {
	color: #ffffff;
	font-family: "W72 Inter", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.w72-footer__legal {
	margin: 0;
	color: #97a3b0;
	font-size: 0.8125rem;
	line-height: 1.5;
}

.footer-container :focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* The council lockup sits directly above the footer, so it loses its own
   bottom gap to avoid a double band of white. */
.w72-councils + .footer-container {
	margin-top: 0;
}

/* --------------------------------------------------- inner page title band */

/* The header comes out of overlay mode on every page now, not just the front
   page: the white logo needs a dark ground, and it can no longer rely on a
   dark photograph being behind it. */
.header-container {
	position: relative;
	padding: 20px 0;
	background: #10161f;
}

.w72-pagehead {
	padding: 30px 18px 34px;
	background-color: #fed41e;
	background-image: repeating-linear-gradient(
		135deg,
		#ffe030 0 18px,
		#fed41e 18px 44px
	);
}

.w72-pagehead__inner {
	margin: 0 auto;
	max-width: 1120px;
}

.w72-pagehead__title {
	margin: 0;
	color: #10161f;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: clamp(1.75rem, 6vw, 2.75rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

/* ------------------------------------------------- site wide type refresh */

/* Type, spacing and controls only. No layout or content changes. */

.entry-content,
.page-content,
.container p,
.container li {
	font-family: "W72 Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #232c37;
}

.container p {
	max-width: 72ch;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.container h2,
.container h3,
.container h4 {
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	color: #10161f;
	letter-spacing: -0.015em;
	line-height: 1.2;
	text-wrap: balance;
}

.container h2 { font-size: clamp(1.375rem, 4vw, 1.875rem); }
.container h3 { font-size: clamp(1.125rem, 3.2vw, 1.375rem); }

/* Links inside body copy pick up the brand cyan, deepened to stay readable. */
.container p a,
.container li a {
	color: #096285;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.container p a:hover,
.container li a:hover,
.container p a:focus-visible,
.container li a:focus-visible {
	color: #075673;
}

/* Buttons across the site, brought onto the dashboard palette and given a
   touch target that works on a phone. */
.wpb_button,
.vc_btn3,
input[type="submit"],
button.wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: #096285;
	color: #ffffff;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease;
}

.wpb_button:hover,
.vc_btn3:hover,
input[type="submit"]:hover,
button.wpcf7-submit:hover,
.wpb_button:focus-visible,
.vc_btn3:focus-visible,
input[type="submit"]:focus-visible,
button.wpcf7-submit:focus-visible {
	background: #075673;
	color: #ffffff;
}

/* A visible focus ring everywhere, not just inside the dashboard panels. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid #096285;
	outline-offset: 2px;
}

/* The WordPress admin bar is fixed to the top for logged in users, so the
   sticky banner has to start below it rather than underneath it. */
body.admin-bar .w72-banner {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .w72-banner {
		top: 46px;
	}
}

/* Below 600px WordPress un-fixes the admin bar, so the offset is not needed. */
@media screen and (max-width: 600px) {
	body.admin-bar .w72-banner {
		top: 0;
	}
}

/* ------------------------------------------------------------ header layout */

/* Logo left, navigation centred, Dashboard button right. */
.w72-header {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 auto;
	max-width: 1400px;
	padding: 0 24px;
}

.w72-header .header-logo {
	flex: 0 0 auto;
	width: auto;
	max-width: 210px;
}

.w72-header .header-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.w72-header .header-menu {
	flex: 1 1 auto;
	width: auto;
}

.w72-header .header-menu ul {
	justify-content: center;
	width: auto;
}

.w72-header__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
}

/* Brand yellow rather than red: red is reserved for the emergency band, and a
   second red control in the header would compete with it. */
.w72-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 999px;
	background: #fed41e;
	color: #10161f;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: 0.9375rem;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 160ms ease, transform 160ms ease;
}

.w72-header__cta:hover,
.w72-header__cta:focus-visible {
	background: #ffe030;
	color: #10161f;
	transform: translateY(-1px);
}

.w72-header__cta-icon {
	display: block;
	width: 18px;
	height: 18px;
}

.w72-header__cta-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media only screen and (max-width: 767px) {
	.w72-header {
		gap: 12px;
		padding: 0 16px;
	}

	.w72-header .header-logo {
		max-width: 150px;
	}

	/* The mobile menu is a fullscreen overlay, so it must not participate in
	   the header's flex row. */
	.w72-header .header-menu {
		flex: 0 0 auto;
	}

	.w72-header__actions {
		margin-left: auto;
	}

	.w72-header__cta {
		min-height: 40px;
		padding: 8px 14px;
		font-size: 0.8125rem;
	}

	.w72-header__cta-icon {
		display: none;
	}
}

@media only screen and (max-width: 479px) {
	.w72-header__cta {
		padding: 8px 12px;
	}
}

/* ------------------------------------------------- header sizing and CTA */

/* A slimmer bar. The header is navigation furniture, not content, so it should
   not be taking a fifth of the first screen on a laptop. */
.header-container {
	padding: 10px 0;
}

.w72-header .header-logo {
	max-width: 160px;
}

/* 18px at 2px tracking was the main reason the bar was so tall and wide. */
.w72-header .header-menu li a {
	font-size: 1rem;
	letter-spacing: 0.04em;
}

.w72-header .header-menu li {
	margin-left: 26px;
}

/* Shown on every page, homepage included. It was hidden there on the reasoning
   that it would only point at the current page, but it is a useful, constant
   way back to the live information and its absence reads as a bug. */
body.home .w72-header__cta {
	display: inline-flex;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
	.w72-header .header-menu li a {
		font-size: 0.9375rem;
		letter-spacing: 0.02em;
	}

	.w72-header .header-menu li {
		margin-left: 18px;
	}

	.w72-header .header-logo {
		max-width: 140px;
	}
}

@media only screen and (max-width: 767px) {
	.header-container {
		padding: 8px 0;
	}
}

/* ========================================================================== */
/* Type scale                                                                 */
/* -------------------------------------------------------------------------- */
/* One rule, applied consistently:                                            */
/*                                                                            */
/*   Avenir Next  section headings, and the brand furniture (banner, three     */
/*                steps strip, page title band, footer, council lockup)        */
/*   Inter        everything inside a dashboard panel                          */
/*                                                                            */
/* The two faces were alternating within a single card, which is what made     */
/* the dashboard feel inconsistent. Sizes are also stepped down: the readouts   */
/* were competing with each other rather than with the page around them.       */
/* ========================================================================== */

.w72-panel__title {
	font-size: clamp(1.25rem, 3.6vw, 1.625rem);
}

/* --- fire danger --- */

.w72-district__name {
	font-size: 11px;
}

.w72-district__rating {
	font-size: clamp(1.75rem, 6vw, 2.5rem);
	letter-spacing: -0.03em;
}

.w72-district__headline {
	font-family: var(--w72-data);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.005em;
}

.w72-district__advice {
	font-size: 0.875rem;
}

.w72-district__tomorrow {
	font-size: 11px;
}

.w72-tfb__state {
	font-size: 1.0625rem;
}

/* --- weather --- */

.w72-weather__temp {
	font-size: clamp(2rem, 7vw, 2.75rem);
}

.w72-weather__condition {
	font-family: var(--w72-data);
	font-size: 1rem;
	font-weight: 700;
}

.w72-weather__value {
	font-size: 0.9375rem;
}

/* --- warnings --- */

.w72-incident__location {
	font-family: var(--w72-data);
	font-size: 0.875rem;
	font-weight: 700;
}

.w72-map__clear-head {
	font-family: var(--w72-data);
	font-size: 1rem;
	font-weight: 700;
}

/* --- tiles --- */

.w72-tile__label {
	font-family: var(--w72-data);
	font-size: 0.875rem;
	font-weight: 700;
}

.w72-tile--primary .w72-tile__label {
	font-size: 0.9375rem;
}

.w72-tile__hint {
	font-size: 0.75rem;
}

/* --- radio, resources, social --- */

.w72-station__name {
	font-family: var(--w72-data);
	font-size: 0.9375rem;
	font-weight: 700;
}

.w72-station__frequency {
	font-size: 1.0625rem;
}

.w72-station__listen,
.w72-feed__link,
.w72-tab {
	font-family: var(--w72-data);
	font-weight: 700;
}

.w72-station__listen,
.w72-tab {
	font-size: 0.8125rem;
}

.w72-feed__link {
	font-size: 0.875rem;
}

.w72-resource__label {
	font-family: var(--w72-data);
	font-size: 0.875rem;
	font-weight: 700;
}

/* Small caps labels settle on one size so they read as a single tier rather
   than four slightly different ones. */
.w72-eyebrow,
.w72-tfb__label,
.w72-tfb__district,
.w72-weather__place,
.w72-weather__key,
.w72-resources__group-title,
.w72-incident__badge {
	font-size: 10px;
	letter-spacing: 0.15em;
}

.w72-meta {
	font-size: 11px;
}

/* The three steps strip now sits at the top of the homepage, above the live
   data, so it is tightened further: every pixel here pushes the fire danger
   rating down the screen. The brief asks for it to be compact anyway. */
body.home .w72-brandstrip {
	padding: 20px 18px 22px;
}

body.home .w72-brandstrip__head {
	gap: 8px 18px;
}

body.home .w72-clock {
	width: clamp(52px, 12vw, 72px);
}

body.home .w72-brandstrip__title-a {
	font-size: clamp(1rem, 3.4vw, 1.25rem);
}

body.home .w72-brandstrip__title-b {
	font-size: clamp(1.375rem, 5.4vw, 2rem);
}

body.home .w72-steps {
	margin-top: 16px;
}

body.home .w72-step {
	min-height: 52px;
	padding: 11px 14px;
}

body.home .w72-step__number {
	width: 26px;
	height: 26px;
	font-size: 0.875rem;
	line-height: 26px;
}

body.home .w72-step__label {
	font-size: 0.9375rem;
}

body.home .w72-brandstrip__message {
	margin-top: 14px;
	font-size: 0.875rem;
}

/* ========================================================================== */
/* Shared measure                                                             */
/* -------------------------------------------------------------------------- */
/* Every section previously declared its own max-width, which meant any one of  */
/* them could drift out of line with the rest. They now share a single rule and */
/* a single token, so the left edge is guaranteed to match down the whole page. */
/* ========================================================================== */

.w72-panel,
.w72-contacts,
.w72-disclaimer,
.w72-councils,
.w72-brandstrip,
.w72-pagehead,
.footer-container {
	--w72-measure: 1120px;
}

.w72-panel__head,
.w72-fire__districts,
.w72-tfb,
.w72-meta,
.w72-weather__card,
.w72-map__layout,
.w72-tiles__grid,
.w72-stations,
.w72-resources__groups,
.w72-social__inner,
.w72-contacts__inner,
.w72-councils__inner,
.w72-disclaimer__inner,
.w72-brandstrip__inner,
.w72-pagehead__inner,
.w72-footer {
	max-width: var(--w72-measure, 1120px);
	margin-left: auto;
	margin-right: auto;
}

/* 1fr has an automatic minimum, so a long label can push a track wider than its
   share and overflow the whole grid past its max-width. minmax(0, 1fr) lets the
   tracks shrink instead. */
.w72-tiles__grid,
.w72-fire__districts,
.w72-contacts__list,
.w72-councils__list,
.w72-steps,
.w72-resources__list--types {
	grid-template-columns: repeat(var(--w72-cols, 1), minmax(0, 1fr));
}

.w72-fire__districts { --w72-cols: 1; }
.w72-tiles__grid--primary { --w72-cols: 1; }
.w72-tiles__grid--secondary { --w72-cols: 2; }
.w72-contacts__list { --w72-cols: 1; }
.w72-councils__list { --w72-cols: 2; }
.w72-steps { --w72-cols: 1; }
.w72-resources__list--types { --w72-cols: 1; }

@media (min-width: 560px) {
	.w72-tiles__grid--primary { --w72-cols: 2; }
	.w72-tiles__grid--secondary { --w72-cols: 3; }
	.w72-resources__list--types { --w72-cols: 2; }
}

@media (min-width: 620px) {
	.w72-contacts__list { --w72-cols: 4; }
	.w72-steps { --w72-cols: 3; }
}

@media (min-width: 720px) {
	.w72-fire__districts { --w72-cols: 2; }
	.w72-councils__list { --w72-cols: 4; }
}

@media (min-width: 900px) {
	.w72-tiles__grid--primary { --w72-cols: 4; }
	.w72-tiles__grid--secondary { --w72-cols: 5; }
}

/* ------------------------------------------------------------ footnote text */

/* The theme sets a bare p { font-size: 18px }. A rule that matches an element
   directly always beats a value inherited from an ancestor, whatever the
   specificity, so setting the size on .w72-meta alone did nothing to the
   paragraphs inside it. These are footnotes and need to read as such. */
.w72-meta,
.w72-meta p,
.w72-meta a {
	font-size: 11px;
	line-height: 1.5;
}

.w72-meta p {
	margin: 0;
}

.w72-link {
	margin-left: 8px;
}

/* --------------------------------------------------------- total fire ban */

/* Baseline alignment put the small uppercase label and the large value on the
   same baseline, which reads as crooked when the two sizes differ this much.
   Centring them optically lines them up. */
.w72-tfb {
	align-items: center;
}

.w72-tfb__label {
	line-height: 1.2;
}

.w72-tfb__state {
	line-height: 1.2;
}

/* ------------------------------------------------------------------ weather */

/* The readings now sit hard right rather than leaving a gap there. */
.w72-weather__card {
	justify-content: flex-start;
}

.w72-weather__detail {
	flex: 1 1 180px;
}

.w72-weather__readings {
	flex: 0 0 auto;
	margin-left: auto;
}

@media (max-width: 620px) {
	.w72-weather__readings {
		margin-left: 0;
		width: 100%;
	}
}

/* ------------------------------------------------------------------- tabs */

/* The theme styles every <button> as a big orange uppercase call to action.
   These are tabs, so every one of those properties is reset explicitly rather
   than partially overridden. */
.w72-social .w72-tab {
	display: inline-flex;
	align-items: center;
	height: auto;
	min-height: 40px;
	padding: 9px 16px;
	border: 1px solid var(--w72-line-strong);
	border-radius: 999px;
	background: var(--w72-surface);
	color: var(--w72-ink-soft);
	font-family: var(--w72-data);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: 0;
}

.w72-social .w72-tab:hover {
	border-color: var(--w72-accent);
	background: var(--w72-surface);
	color: var(--w72-ink);
}

.w72-social .w72-tab.is-selected {
	border-color: var(--w72-accent);
	background: var(--w72-accent);
	color: #ffffff;
}

/* --------------------------------------------------------------- feed box */

/* The Facebook page plugin renders at a fixed maximum of 500px, so a full width
   panel leaves a large dead area beside it. The panel is capped instead, which
   reads as deliberate rather than broken. */
.w72-tabpanel {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.w72-feed {
	display: flex;
	justify-content: center;
}

.w72-social__note {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.w72-tablist {
	justify-content: center;
}

/* ================================================================ layout fixes */

/* The tiles grids are now wrapped in a plain div which carries the measure. A
   list element inherits rules from the theme and Bootstrap that were beating
   the centring; a div does not. */
.w72-tiles__inner {
	max-width: var(--w72-measure, 1120px);
	margin-left: auto;
	margin-right: auto;
}

.w72-tiles__grid {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* --- resources in three columns, radio included --- */

.w72-resources__groups {
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.w72-resources__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.w72-resources__groups {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* One column per group now that there are three of them, so nothing is left
   orphaned on a row of its own. */
.w72-resources__list--types {
	--w72-cols: 1;
	grid-template-columns: minmax(0, 1fr);
}

.w72-resource--station {
	justify-content: space-between;
	gap: 10px;
}

.w72-station__stack {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.w72-resources__group .w72-station__frequency {
	color: var(--w72-accent);
	font-family: var(--w72-data);
	font-size: 0.8125rem;
	font-weight: 700;
}

.w72-station__go {
	flex: 0 0 auto;
	color: var(--w72-accent);
	font-family: var(--w72-data);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.w72-resource--nolink {
	cursor: default;
}

.w72-resource--nolink:hover {
	border-color: var(--w72-line);
	box-shadow: var(--w72-shadow);
}

/* --- partnership lockup, bottom spacing --- */

/* The lockup sat on white between a grey band and the dark footer, which read
   as a stray third band. It now shares the ground above it and closes up on
   the footer below. */
.w72-councils {
	background: #eaeef3;
}

.w72-councils__inner {
	padding: 0 18px 20px;
}

.w72-council {
	min-height: 118px;
	padding: 16px 12px;
}

/* Both tile rows use the same column count so every tile is exactly the same
   width. Ten secondary tiles at four across leaves two on the last row, which
   reads better than two rows of tiles that are visibly narrower than the four
   above them. */
@media (min-width: 560px) {
	.w72-tiles__grid--secondary { --w72-cols: 2; }
}

@media (min-width: 900px) {
	.w72-tiles__grid--secondary { --w72-cols: 4; }
}

/* ==================================================== inner page content width */

/* The paragraph was capped at 72 characters inside a container nearly twice
   that wide, which left a large empty column to the right and read as broken.
   The container now carries the measure and the text fills it. */
.content-area .container {
	max-width: 860px;
}

.container p {
	max-width: none;
}

.content-area {
	padding-bottom: 8px;
}

/* ============================================== partnership lockup, simplified */

/* Previously a bordered card floating on a grey band, with "Emergency
   information" repeated under all four logos. It is now a plain band: one
   instruction, four logos, no repetition and no card edges. */
.w72-councils {
	background: #eaeef3;
	border-top: 1px solid #d5dde5;
}

.w72-councils__inner {
	padding: 26px 18px 28px;
}

.w72-councils__title {
	margin: 0 0 2px;
	padding: 0;
	border-radius: 0;
	background: none;
	color: #10161f;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: clamp(0.9375rem, 2.6vw, 1.125rem);
	line-height: 1.3;
	text-align: center;
}

.w72-councils__intro {
	margin: 0 0 18px;
	color: #59646f;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
}

.w72-councils__list {
	overflow: visible;
	border: 0;
	border-radius: 0;
	gap: 12px;
}

.w72-council {
	gap: 12px;
	min-height: 0;
	padding: 18px 14px;
	border: 1px solid #d5dde5;
	border-radius: 10px;
	background: #ffffff;
}

.w72-council:hover,
.w72-council:focus-visible {
	border-color: #356a86;
	background: #ffffff;
}

.w72-council__logo {
	height: 64px;
}

.w72-council__name {
	color: #10161f;
	font-family: "AvenirNext-Bold", system-ui, sans-serif;
	font-size: 0.8125rem;
	line-height: 1.3;
}