/*
 * 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--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;
}

/* ------------------------------------------------------ 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;
	}
}

/* -------------------------------------------------------- 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 {
	font-family: var(--w72-data);
	font-size: 0.8125rem;
	font-weight: 700;
}

.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-brandstrip .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-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-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-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-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-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%;
	}
}

/* ================================================================ 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. Eight secondary tiles at four across make two full rows. */
@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;
}

/* ========================================================================== */
/* Partnership review, October 2026                                           */
/* -------------------------------------------------------------------------- */
/* Three changes asked for in the review: the logo now pairs "Wimmera" with    */
/* the 72 hour clock, the incident map runs the full width of the window       */
/* directly under the brand strip, and every panel shares one card style.      */
/* ========================================================================== */

/* -------------------------------------------------------------------- logo */

.w72-logo {
	--w72-brand-red: #ef1923;
	--w72-ink: #10161f;
	--w72-data: "W72 Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ffffff;
	text-decoration: none;
	white-space: nowrap;
}

.w72-logo:hover,
.w72-logo:focus-visible {
	color: #ffffff;
}

.w72-logo__word {
	color: #ffffff;
	font-family: "AvenirNext-Bold", "AvenirNext-DemiBold", system-ui, sans-serif;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.01em;
}

/* The clock was a div; it is now a span so it can sit inside a link. */
.w72-clock {
	display: block;
}

.w72-logo .w72-clock {
	width: 44px;
}

/* Without "HOURS" underneath, the 72 fills more of the face. */
.w72-clock--bare .w72-clock__72 {
	font-size: 46px;
	letter-spacing: -0.04em;
}

.w72-header .header-logo {
	max-width: none;
}

@media only screen and (min-width: 768px) and (max-width: 1100px) {
	.w72-header .header-logo { max-width: none; }
	.w72-logo__word { font-size: 1.3125rem; }
	.w72-logo .w72-clock { width: 40px; }
}

@media only screen and (max-width: 767px) {
	.w72-header .header-logo { max-width: none; }
	.w72-logo__word { font-size: 1.25rem; }
	.w72-logo .w72-clock { width: 38px; }
}

.w72-footer__logo {
	width: auto;
	max-width: none;
}

.w72-footer__logo .w72-logo__word { font-size: 1.875rem; }
.w72-footer__logo .w72-clock { width: 54px; }

/* ---------------------------------------------------------- full width map */

/* The map breaks out of the page measure and runs edge to edge, growing with
   the window as the Bendigo dashboard's does. Its height follows the screen,
   within limits, so it is never a sliver on a laptop or a wall on a phone.
   The heading and the warning list stay on the page measure. */
.w72-map .w72-map__layout {
	display: block;
	max-width: none;
}

.w72-map__canvas-wrap {
	margin: 0 -18px;
}

.w72-map .w72-map__canvas {
	height: clamp(340px, 60vh, 680px);
	min-height: 0;
	border-width: 1px 0;
	border-radius: 0;
	box-shadow: none;
}

.w72-map__canvas .leaflet-container {
	min-height: 0;
}

.w72-map__list {
	max-width: var(--w72-measure, 1120px);
	margin: var(--w72-gap) auto 0;
}

.w72-incidents {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* ------------------------------------------------------ one card style */

/* Every panel on the page is now the same object: a white card, one hairline
   border, the same corner radius and the same soft shadow. Previously some
   cards had coloured top edges, some coloured left edges, some shadows and
   some none, which read as several different systems on one page.

   Colour is now carried inside the card only where it means something: the
   fire danger dial and rating, the warning level badge, and each agency's
   icon. Never as a decorative edge. */
.w72-district,
.w72-tfb,
.w72-weather__card,
.w72-map__clear,
.w72-incident,
.w72-tile,
.w72-resource,
.w72-station,
.w72-council {
	border: 1px solid #ccd5df;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(16, 22, 31, 0.05), 0 2px 8px rgba(16, 22, 31, 0.04);
}

.w72-district::before,
.w72-incident::before {
	content: none;
}

/* Every card that is a link responds the same way. */
.w72-tile:hover,
.w72-tile:focus-visible,
.w72-resource:hover,
.w72-resource:focus-visible,
.w72-council:hover,
.w72-council:focus-visible {
	border-color: #096285;
	background: #ffffff;
	box-shadow: 0 2px 4px rgba(16, 22, 31, 0.08), 0 6px 16px rgba(16, 22, 31, 0.08);
	color: #10161f;
	transform: translateY(-1px);
}

.w72-tile,
.w72-resource,
.w72-council {
	transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.w72-resource--nolink:hover {
	border-color: #ccd5df;
	box-shadow: 0 1px 2px rgba(16, 22, 31, 0.05), 0 2px 8px rgba(16, 22, 31, 0.04);
	transform: none;
}

/* Agency colour moves from the card edge into a tinted chip behind the icon. */
.w72-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 8px;
	border-radius: 8px;
	background: #e6f3f9;
	background: color-mix(in srgb, var(--w72-accent-tile, #2c6a8f) 12%, #ffffff);
}

.w72-tile--primary .w72-tile__icon {
	width: 46px;
	height: 46px;
	padding: 9px;
}

/* A total fire ban is an alert, so it keeps its red tint, but on the same
   hairline as everything else rather than a heavy edge. */
.w72-tfb--declared {
	border-color: #d31820;
	border-left-width: 1px;
	background: #fdf2f2;
}

/* The warning level is now a badge in the VicEmergency colours rather than a
   coloured edge. Text colour is picked per level for contrast. */
.w72-incident {
	padding: 14px 16px;
}

.w72-incident__badge {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--w72-severity, #2c6a8f);
	color: #ffffff;
	line-height: 1.4;
}

.w72-incident--watch .w72-incident__badge,
.w72-incident--advice .w72-incident__badge {
	color: #10161f;
}

@media print {
	.w72-council {
		box-shadow: none;
	}
}

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

	.w72-tile:hover,
	.w72-resource:hover,
	.w72-council:hover {
		transform: none;
	}
}

/* ========================================================================== */
/* List alignment                                                             */
/* -------------------------------------------------------------------------- */
/* The theme sets ul { margin-left: 50px !important } site wide, for bullet    */
/* lists in page content. Inside the dashboard it pushed every list based     */
/* section (tiles, resources, radio, agency links) 50px in from its heading,   */
/* so those sections no longer lined up with the cards above them. It is       */
/* cancelled here, inside dashboard markup only, so content pages keep their   */
/* bullet indent. !important is the only way to beat !important.              */
/* ========================================================================== */

.w72-panel ul,
.w72-panel ol,
.w72-brandstrip ul,
.w72-brandstrip ol,
.w72-councils ul,
.w72-footer ul {
	margin-left: 0 !important;
}

/* The weather readings sit hard right by way of an auto margin, which the
   reset above would otherwise flatten. */
.w72-panel .w72-weather__readings {
	margin-left: auto !important;
}

@media (max-width: 620px) {
	.w72-panel .w72-weather__readings {
		margin-left: 0 !important;
	}
}

/* ========================================================================== */
/* Agency links                                                               */
/* -------------------------------------------------------------------------- */
/* Replaces the embedded Facebook timelines. One card per source, in the same  */
/* card style as every other panel, with round icon links to each channel.    */
/* ========================================================================== */

.w72-follow__grid {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: minmax(0, 1fr);
}

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

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

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

.w72-follow {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 14px 18px;
	border: 1px solid #ccd5df;
	border-radius: 10px;
	background: #ffffff;
	box-shadow: 0 1px 2px rgba(16, 22, 31, 0.05), 0 2px 8px rgba(16, 22, 31, 0.04);
	text-align: center;
}

.w72-follow__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	margin-bottom: 12px;
}

.w72-follow__logo {
	width: auto;
	max-width: 140px;
	height: 56px;
	object-fit: contain;
}

/* VicEmergency has no logo file, so it gets an icon chip in the warning amber
   used by its tile. */
.w72-follow__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 12px;
	border-radius: 12px;
	background: #f9ecd6;
	color: #c47d0a;
}

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

.w72-follow__name {
	margin: 0 0 2px;
	color: #10161f;
	font-family: var(--w72-data);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.005em;
}

.w72-panel .w72-follow__note {
	margin: 0 0 14px;
	color: #59646f;
	font-size: 0.75rem;
	line-height: 1.4;
}

.w72-follow__links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin: auto 0 0;
	padding: 0;
	list-style: none;
}

/* 44px, so each is a proper thumb target on a phone. */
.w72-follow__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #ccd5df;
	border-radius: 50%;
	background: #ffffff;
	color: #096285;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.w72-follow__link svg {
	display: block;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.w72-follow__link svg.is-filled {
	fill: currentColor;
	stroke: none;
}

.w72-follow__link:hover,
.w72-follow__link:focus-visible {
	border-color: #096285;
	background: #096285;
	color: #ffffff;
}

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

/* The partnership lockup carried its side padding inside the measure, so its
   cards sat 18px in from every section above. The padding now sits outside,
   as it does on the panels, and the edges line up down the whole page. */
.w72-councils {
	padding-left: 18px;
	padding-right: 18px;
}

.w72-councils__inner {
	padding-left: 0;
	padding-right: 0;
}

/* --------------------------------------------------------- agency logos */

/* The four agency tiles show the agency's own logo in place of the drawn
   icon. A fixed height keeps the square marks (CFA, VicEmergency), the tall
   one (VICSES) and the wide lockup (EMV) visually even. */
.w72-tile__logo {
	display: flex;
	align-items: center;
	height: 52px;
}

.w72-tile__logo img {
	display: block;
	width: auto;
	max-width: 120px;
	height: 100%;
	object-fit: contain;
}

/* ========================================================================== */
/* Header dropdown menus (partnership feedback, 28 October 2026)              */
/* -------------------------------------------------------------------------- */
/* The theme's dropdown styles target .primary-menu, which this header does    */
/* not use, and its .header-menu ul rules would otherwise turn each sub-menu   */
/* into a flex row. Desktop: the sub-menu opens below its parent on hover or   */
/* keyboard focus (:focus-within), so it works without JavaScript. Phone: the   */
/* sub-items sit under their parent in the fullscreen menu, always visible.    */
/* ========================================================================== */

.w72-header .header-menu .menu-item-has-children {
	position: relative;
}

/* A small chevron marks the items that open a dropdown. */
.w72-header .header-menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-3px) rotate(45deg);
}

@media only screen and (min-width: 768px) {
	/* An invisible bridge across the gap, so the pointer can travel from the
	   parent to the dropdown without it closing. */
	.w72-header .header-menu .menu-item-has-children::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 16px;
	}

	.w72-header .header-menu .sub-menu {
		position: absolute;
		top: calc(100% + 14px);
		left: 50%;
		z-index: 60;
		display: block;
		width: max-content;
		min-width: 220px;
		max-width: 300px;
		margin: 0 !important;
		padding: 8px;
		border: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 10px;
		background: #10161f;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
		text-align: left;
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, -4px);
		transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
	}

	.w72-header .header-menu .menu-item-has-children:hover > .sub-menu,
	.w72-header .header-menu .menu-item-has-children:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition-delay: 0s;
	}

	.w72-header .header-menu .sub-menu li {
		margin: 0;
	}

	.w72-header .header-menu .sub-menu a {
		display: block;
		padding: 10px 12px;
		border-radius: 6px;
		color: #ffffff;
		font-size: 0.9375rem;
		line-height: 1.3;
		letter-spacing: 0.02em;
	}

	.w72-header .header-menu .sub-menu a:hover,
	.w72-header .header-menu .sub-menu a:focus-visible {
		background: rgba(255, 255, 255, 0.08);
		color: #fed41e;
	}
}

@media only screen and (max-width: 767px) {
	.w72-header .header-menu .sub-menu {
		display: block;
		margin: 14px 0 0 !important;
		padding: 0;
	}

	.w72-header .header-menu .sub-menu li {
		margin: 0 0 12px;
	}

	.w72-header .header-menu .sub-menu a {
		color: #c3ccd6;
		font-size: 1.125rem;
		letter-spacing: 0.02em;
	}

	/* The chevron only means something where the dropdown opens on hover. */
	.w72-header .header-menu .menu-item-has-children > a::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.w72-header .header-menu .sub-menu {
		transition: none;
	}
}

/* Anchor targets clear the sticky Triple Zero banner when jumped to. */
#wemrsp,
#useful-resources,
#fire-ready,
#where-to-get-help,
#resources {
	scroll-margin-top: 72px;
}

/* The theme capitalises every menu link ("Where To Get Help"). Sub-menu
   labels show exactly as written in the menu. */
.w72-header .header-menu .sub-menu a {
	text-transform: none;
}

/* ========================================================================== */
/* Area selector (partnership feedback, 28 October 2026)                      */
/* -------------------------------------------------------------------------- */
/* Sits beside the map heading on wide screens and under it on a phone. It     */
/* starts hidden and is revealed by map.js, since without script it could not  */
/* do anything.                                                               */
/* ========================================================================== */

.w72-map__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
}

.w72-area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
}

.w72-area[hidden],
.w72-area [hidden] {
	display: none !important;
}

.w72-area__label {
	margin: 0;
	color: #59646f;
	font-family: var(--w72-data);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.w72-area__select {
	min-height: 44px;
	min-width: 170px;
	margin: 0;
	padding: 8px 36px 8px 12px;
	border: 1px solid #aab6c4;
	border-radius: 8px;
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310161f' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center / 12px 8px;
	color: #10161f;
	font-family: var(--w72-data);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.w72-area__select:hover {
	border-color: #096285;
}

/* Every property is set, because the theme styles bare buttons as large
   orange uppercase calls to action. */
.w72-panel .w72-area__locate {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: auto;
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid #096285;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: none;
	color: #096285;
	font-family: var(--w72-data);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.w72-panel .w72-area__locate:hover,
.w72-panel .w72-area__locate:focus-visible {
	background: #096285;
	color: #ffffff;
}

.w72-area__locate svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}

.w72-panel .w72-area__status {
	flex: 1 0 100%;
	margin: 0;
	min-height: 0;
	color: #3d4652;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.w72-panel .w72-area__status:empty {
	display: none;
}

@media (max-width: 620px) {
	.w72-area {
		width: 100%;
	}

	.w72-area__select {
		flex: 1 1 auto;
	}
}

/* The weather card dims briefly while it switches to another town. */
.w72-weather.is-updating .w72-weather__card {
	opacity: 0.55;
	transition: opacity 150ms ease;
}

/* Leaflet's layer list, on the dashboard's type and a touch target size. */
.w72-map__canvas .leaflet-control-layers {
	border: 1px solid #ccd5df;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(16, 22, 31, 0.12);
	color: #10161f;
	font-size: 0.8125rem;
}

.w72-map__canvas .leaflet-control-layers-expanded {
	padding: 8px 12px;
}

.w72-map__canvas .leaflet-control-layers label {
	margin: 0;
	padding: 3px 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.w72-map__canvas .leaflet-control-layers-selector {
	margin-right: 6px;
	accent-color: #096285;
}

/* Keep the selector hard right on wide screens when the status line appears
   beneath it, rather than letting the group drift towards the centre. */
@media (min-width: 621px) {
	.w72-area {
		justify-content: flex-end;
	}

	.w72-panel .w72-area__status {
		text-align: right;
	}
}

/* Leaflet draws the collapsed layers button from images/layers.png, which is
   not bundled. The same stacked layers icon is drawn inline instead. */
.w72-map__canvas .leaflet-control-layers-toggle,
.w72-map__canvas .leaflet-retina .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310161f' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 8l10 5 10-5z'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3Cpath d='m2 16 10 5 10-5'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
}

/* ========================================================================== */
/* Partnership badge in the header (partnership feedback, October 2026)       */
/* -------------------------------------------------------------------------- */
/* Beside the Wimmera 72 logo where the bar is wide enough to hold logo,       */
/* badge, menu and Dashboard button in one row. Narrower, it drops to its own  */
/* centred row under them, so nothing has to shrink to an unreadable size.    */
/* ========================================================================== */

.w72-header {
	flex-wrap: wrap;
	row-gap: 10px;
}

.w72-header__partner {
	flex: 0 0 auto;
}

.w72-partner {
	display: block;
	border-radius: 8px;
	transition: transform 160ms ease;
}

.w72-partner:hover {
	transform: translateY(-1px);
}

.w72-partner:focus-visible {
	outline: 3px solid #fed41e;
	outline-offset: 3px;
}

.w72-header .w72-partner__img {
	display: block;
	width: auto;
	max-width: none;
	height: 64px;
}

@media only screen and (max-width: 1199px) {
	.w72-header__partner {
		display: flex;
		justify-content: center;
		order: 10;
		flex-basis: 100%;
		padding-bottom: 4px;
	}

	.w72-header .w72-partner__img {
		height: 56px;
	}
}

@media only screen and (max-width: 767px) {
	.w72-header .w72-partner__img {
		height: 50px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.w72-partner {
		transition: none;
	}
}

/* Sizing, after review at four widths. The badge is now larger than the old
   site's 250px wide version, as the partnership asked, and when it drops to
   its own row it sits left, under the logo, as it did on the old site. */
.w72-header .w72-partner__img {
	height: 96px;
}

@media only screen and (max-width: 1199px) {
	.w72-header__partner {
		justify-content: flex-start;
	}

	.w72-header .w72-partner__img {
		height: 80px;
	}
}

@media only screen and (max-width: 767px) {
	.w72-header .w72-partner__img {
		height: 64px;
	}
}

/* Tablet widths: with dropdown chevrons the menu no longer fitted beside the
   logo and the Dashboard button, which wrapped onto a second line. The menu
   is tightened and the button shows its clock icon only, keeping its label
   for screen readers. */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.w72-header {
		gap: 14px;
	}

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

	.w72-header .header-menu li a {
		font-size: 0.875rem;
		letter-spacing: 0.01em;
	}

	.w72-header .header-menu .menu-item-has-children > a::after {
		margin-left: 5px;
	}

	.w72-header__cta {
		padding: 10px 12px;
	}

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

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

/* ========================================================================== */
/* Full width header (October 2026)                                           */
/* -------------------------------------------------------------------------- */
/* The bar runs the full width of the window: logos on the left, the main     */
/* menu centred on the page, the Dashboard button on the right. A three        */
/* column grid with equal outer columns keeps the menu truly centred rather   */
/* than centred in whatever space the logos leave. The outer columns never    */
/* shrink below their content, so a tight fit nudges the menu rather than     */
/* overlapping anything.                                                       */
/*                                                                            */
/* From 1440px the badge sits beside the logo. Narrower, there is not room    */
/* for it beside a centred menu, so it takes its own row under the logo.      */
/* Phones keep the existing stacked layout and fullscreen menu.               */
/* ========================================================================== */

/* The theme indents every list 50px with !important, and spaces each menu
   item from the left. Both would push the menu off centre. */
.w72-header .header-menu ul.menu {
	margin-left: 0 !important;
}

.w72-header .header-menu ul.menu > li:first-child {
	margin-left: 0;
}

@media only screen and (min-width: 768px) {
	.w72-header {
		display: grid;
		grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
		align-items: center;
		column-gap: 24px;
		row-gap: 8px;
		max-width: none;
		padding: 0 32px;
	}

	.w72-header__brand {
		display: flex;
		align-items: center;
		gap: 18px;
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.w72-header .header-menu {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
		flex: none;
		width: auto;
	}

	.w72-header__actions {
		grid-column: 3;
		grid-row: 1;
		justify-self: end;
		margin-left: 0;
	}

	.w72-header__partner {
		display: block;
		flex-basis: auto;
		order: 0;
		padding-bottom: 0;
	}

	.w72-header .w72-partner__img {
		height: 80px;
	}
}

/* Large screens: room for a bigger badge beside the logo. */
@media only screen and (min-width: 1600px) {
	.w72-header .w72-partner__img {
		height: 96px;
	}
}

/* Below 1440px the badge moves to its own row, left aligned under the logo.
   The wrapper steps aside (display: contents) so the logo and badge can be
   placed in the header grid individually. */
@media only screen and (min-width: 768px) and (max-width: 1439px) {
	.w72-header__brand {
		display: contents;
	}

	.w72-header .header-logo {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
	}

	.w72-header__partner {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
		padding-bottom: 6px;
	}
}

/* Phones: the wrapper steps aside so the existing stacked layout applies. */
@media only screen and (max-width: 767px) {
	.w72-header__brand {
		display: contents;
	}
}