/*
Theme Name: Honest Weather
Description: The Irish weather, told straight. Live conditions for any town in Ireland, with an honest Irish verdict.
Author: Honest Weather
Version: 2.13.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: honest-weather
Tags: one-column, custom-menu, blog, accessibility-ready, translation-ready
*/

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/poppins-500.woff') format('woff'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('assets/fonts/poppins-700.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/inter-400.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/inter-500.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600 700; font-display: swap; src: url('assets/fonts/inter-600.woff') format('woff'); }

/* ------------------------------------------------------------------
   Tokens
------------------------------------------------------------------ */
:root {
	--green: #0B6E4F;
	--green-deep: #08553d;
	--white: #FFFFFF;
	--yellow: #FFCC00;
	--blue: #003366;
	--ink: #22384c;
	--mist: #EEF5F1;
	--line: #d3e2da;
	--font-head: 'Poppins', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Inter', 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--wrap: 1120px;
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--ink);
	background: var(--white);
}

img { max-width: 100%; height: auto; }

a { color: var(--green); text-underline-offset: 0.2em; }
a:hover { color: var(--blue); }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.15;
	color: var(--blue);
}

:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
}
.hw-hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--yellow); }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--yellow);
	color: var(--blue);
	font-weight: 600;
	border-radius: 0 0 12px 12px;
}
.skip-link:focus { top: 0; }

.hw-wrap {
	width: min(100% - 2.5rem, var(--wrap));
	margin-inline: auto;
}

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------ */
.site-header {
	background: var(--white);
	border-bottom: 4px solid var(--yellow);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.75rem;
}

.hw-logo {
	display: block;
	line-height: 0;
	color: inherit;
}
.hw-logo svg,
.hw-logo__img {
	display: block;
	height: 56px;
	width: auto;
	max-width: 100%;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav a {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--blue);
	text-decoration: none;
}
.site-nav a:hover { color: var(--green); text-decoration: underline; }

.site-tagline {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--green);
}

/* ------------------------------------------------------------------
   Hero: the verdict
------------------------------------------------------------------ */
.hw-hero {
	background-color: var(--green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Ccircle cx='30' cy='22' r='7'/%3E%3Ccircle cx='21' cy='33' r='7'/%3E%3Ccircle cx='39' cy='33' r='7'/%3E%3Crect x='29' y='36' width='2.4' height='13' rx='1.2'/%3E%3Ccircle cx='90' cy='82' r='7'/%3E%3Ccircle cx='81' cy='93' r='7'/%3E%3Ccircle cx='99' cy='93' r='7'/%3E%3Crect x='89' y='96' width='2.4' height='13' rx='1.2'/%3E%3C/g%3E%3C/svg%3E");
	color: var(--white);
	padding-block: clamp(1.5rem, 4vw, 2.75rem) clamp(2.5rem, 6vw, 4.5rem);
}

.hw-controls {
	display: grid;
	grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
	gap: 0.75rem;
	margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.hw-city-form,
.hw-town-form {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--white);
	border-radius: 999px;
	padding: 0.3rem;
	min-width: 0;
}

.hw-city-form select,
.hw-town-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 2.9rem;
	padding: 0.5rem 1.1rem;
	border: 0;
	border-radius: 999px;
	background-color: transparent;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
}

.hw-city-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
	font-weight: 600;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5l6 6 6-6' fill='none' stroke='%230B6E4F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.1rem center;
}

.hw-town-form input[type="search"]::placeholder { color: #5b6f80; opacity: 1; }

.hw-city-form:focus-within,
.hw-town-form:focus-within {
	outline: 3px solid var(--yellow);
	outline-offset: 2px;
}
.hw-city-form select:focus-visible,
.hw-town-form input:focus-visible { outline: none; }

.hw-btn {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.8rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--yellow);
	color: var(--on-accent, var(--blue));
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.hw-btn:hover { background: var(--white); color: var(--blue); }
.hw-town-form .hw-btn:hover { background: var(--green); color: var(--white); }

/* Result */
.hw-now {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
	transition: opacity 0.15s ease;
}

.hw-place {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--yellow);
}

.hw-quote {
	margin: 0 0 1.75rem;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(2.1rem, 1.1rem + 4.9vw, 4.6rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--white);
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.hw-quote--error { font-size: clamp(1.9rem, 1rem + 4vw, 3.5rem); }

.hw-note {
	max-width: 36rem;
	margin: -0.75rem 0 1.5rem;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.92);
}

.hw-refresh { margin: 0; }

.hw-now__panel {
	padding: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 28px 28px 28px 6px;
	background: rgba(0, 51, 102, 0.3);
}

.hw-now__headline {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.hw-icon { flex: 0 0 auto; line-height: 0; }
.hw-icon svg { width: 92px; height: 92px; }

.hw-temp {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
	line-height: 1;
	color: var(--yellow);
}
.hw-temp small {
	font-size: 0.4em;
	font-weight: 700;
	margin-left: 0.1em;
	vertical-align: 0.9em;
}

.hw-cond {
	margin: 1rem 0 0;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.35rem;
	line-height: 1.2;
}
.hw-cond span {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.9);
}

.hw-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem 1rem;
	margin: 1.25rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.hw-stats dt { font-size: 0.85rem; color: rgba(255, 255, 255, 0.88); }
.hw-stats dd { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; }

.hw-checked {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.88);
}

.hw-stage.is-loading .hw-now { opacity: 0.55; }

/* ------------------------------------------------------------------
   Tomorrow
------------------------------------------------------------------ */
.hw-tomorrow { padding-block: clamp(2rem, 5vw, 3.5rem); }

.hw-tomorrow__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.25rem 1.75rem;
	align-items: center;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--line);
	border-left: 8px solid var(--yellow);
	border-radius: 8px 28px 28px 8px;
	background: var(--white);
}

.hw-tomorrow__icon {
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: var(--green);
	line-height: 0;
}
.hw-tomorrow__icon svg { width: 76px; height: 76px; }

.hw-tomorrow h2 {
	margin: 0 0 0.35rem;
	font-size: 1.35rem;
}

.hw-tomorrow__quote {
	margin: 0 0 0.6rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem);
	line-height: 1.2;
	color: var(--green);
	text-wrap: balance;
}

.hw-tomorrow__facts {
	margin: 0;
	font-size: 0.98rem;
}

/* ------------------------------------------------------------------
   Pages, posts, 404
------------------------------------------------------------------ */
.hw-page { padding-block: clamp(2rem, 6vw, 4rem); }

.hw-prose { max-width: 44rem; }
.hw-prose .entry { margin-bottom: 3rem; }
.hw-prose .entry-title { margin: 0 0 0.5rem; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); }
.hw-prose .entry-title a { color: inherit; text-decoration: none; }
.hw-prose .entry-title a:hover { color: var(--green); text-decoration: underline; }
.hw-prose .entry-meta { margin-bottom: 1rem; font-size: 0.9rem; color: #4d6275; }
.hw-prose .entry-content > * { max-width: 100%; }
.hw-prose blockquote {
	margin-inline: 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 6px solid var(--yellow);
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--blue);
}
.hw-prose .nav-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.hw-404 .hw-quote { color: var(--blue); }

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.site-footer {
	background: var(--blue);
	color: var(--white);
	padding-block: clamp(2rem, 5vw, 3rem);
}
.site-footer a { color: var(--yellow); }
.site-footer a:hover { color: var(--white); }

.site-footer__joke {
	margin: 0 0 1.25rem;
	max-width: 40rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
	line-height: 1.25;
	text-wrap: balance;
}

.site-footer__small {
	margin: 0;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------------
   Motion: one moment, answering the person's action
------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.hw-quote { animation: hw-in 0.45s ease-out both; }
	@keyframes hw-in {
		from { opacity: 0; transform: translateY(10px); }
		to { opacity: 1; transform: none; }
	}
}

/* ------------------------------------------------------------------
   Small screens
------------------------------------------------------------------ */
@media (max-width: 800px) {
	.hw-controls { grid-template-columns: minmax(0, 1fr); }
	.hw-now { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.site-header__inner { flex-wrap: wrap; }
}

@media (max-width: 520px) {
	.hw-logo svg,
.hw-logo__img { height: 48px; }
	.hw-town-form .hw-btn { padding-inline: 1.1rem; }
	.hw-icon svg { width: 76px; height: 76px; }
	.hw-tomorrow__card { grid-template-columns: minmax(0, 1fr); }
	.hw-tomorrow__icon { width: 88px; height: 88px; }
	.hw-tomorrow__icon svg { width: 64px; height: 64px; }
}


/* ------------------------------------------------------------------
   v2: quick bar, chips, geolocation, favourites
------------------------------------------------------------------ */
.hw-controls--single { grid-template-columns: minmax(0, 24rem); }

.hw-quick {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: -1.75rem 0 0.5rem;
}
.hw-geo-msg {
	min-height: 1.4em;
	margin: 0 0 1.25rem;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.92);
}
.hw-geo[hidden], .hw-chips[hidden] { display: none; }

.hw-geo,
.hw-chip,
.hw-fav {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	background: transparent;
	color: var(--white);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.hw-geo:hover,
.hw-chip:hover,
.hw-fav:hover { background: var(--white); color: var(--green); }
.hw-chip--fav { border-color: var(--yellow); color: var(--yellow); }

.hw-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.hw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.hw-near { margin: -0.4rem 0 0.9rem; font-size: 0.95rem; color: rgba(255, 255, 255, 0.9); }

.hw-now { min-height: 22rem; }

/* ------------------------------------------------------------------
   v2: tomorrow date, sponsored message
------------------------------------------------------------------ */
.hw-tomorrow__date { margin: -0.2rem 0 0.5rem; font-size: 0.9rem; color: #4d6275; }

.hw-sponsor {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.6rem;
	margin-top: 1rem;
	padding: 0.65rem 0.9rem;
	border-radius: 4px 14px 14px 4px;
	border-left: 3px solid var(--yellow);
	background: var(--mist);
	font-size: 0.95rem;
}
.hw-sponsor__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: #4d6275;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.hw-sponsor__text { color: var(--ink); font-weight: 500; }
a.hw-sponsor__text { color: var(--green); }
.hw-sponsor__by { font-size: 0.85rem; color: #4d6275; }

/* ------------------------------------------------------------------
   v2: ads (subtle, labelled, space reserved)
------------------------------------------------------------------ */
.hw-ad-row { padding-block: 1rem 0; }
.hw-ad-row--after { padding-bottom: 2rem; }
.hw-ad-row--footer { padding-block: 2rem 0; }
.hw-ad-zone { margin: 0 auto; max-width: 100%; }

.hw-ad {
	position: relative;
	max-width: 100%;
	padding: 1.4rem 0.75rem 0.5rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--white);
	overflow: hidden;
	text-align: center;
}
.hw-ad + .hw-ad { margin-top: 0.75rem; }
.hw-ad__label {
	position: absolute;
	top: 0.3rem;
	left: 0.75rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6a7d8d;
}
.hw-ad__body { max-width: 100%; }
.hw-ad__body img, .hw-ad__body iframe, .hw-ad__body ins { max-width: 100%; }
.hw-ad__link { font-weight: 600; }

/* ------------------------------------------------------------------
   v2: layout with optional sidebar
------------------------------------------------------------------ */
.hw-layout.has-sidebar {
	display: grid;
	grid-template-columns: minmax(0, 44rem) minmax(0, 18.75rem);
	gap: 3rem;
	align-items: start;
	justify-content: center;
}
.hw-sidebar { position: sticky; top: 1.5rem; }
.hw-prose .post-navigation { margin-top: 2rem; }

/* ------------------------------------------------------------------
   v2: performance. Skip rendering work for below-the-fold sections.
------------------------------------------------------------------ */
.hw-tomorrow {
	content-visibility: auto;
	contain-intrinsic-size: auto 320px;
}

@media (max-width: 900px) {
	.hw-layout.has-sidebar { grid-template-columns: minmax(0, 1fr); }
	.hw-sidebar { position: static; }
}

@media (max-width: 800px) {
	.hw-now { min-height: 0; }
	.hw-quick { margin-top: -1.5rem; }
}


/* ------------------------------------------------------------------
   v2.1: announcement banner
------------------------------------------------------------------ */
.hw-announce {
	background: var(--blue);
	color: var(--white);
	font-size: 0.95rem;
}
.hw-announce__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 0.9rem;
	padding-block: 0.6rem;
	text-align: center;
}
.hw-announce__link {
	color: var(--yellow);
	font-weight: 600;
}
.hw-announce__link:hover { color: var(--white); }

/* ------------------------------------------------------------------
   v2.1: Met Éireann warnings (text is shown exactly as issued)
------------------------------------------------------------------ */
.hw-warnings {
	background: var(--mist);
	border-bottom: 1px solid var(--line);
	padding-block: 1rem;
}
.hw-warnings--note p { margin: 0; font-size: 0.95rem; }

.hw-warning {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.5rem 1rem;
	margin-bottom: 0.75rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	border-left-width: 10px;
	border-radius: 6px 18px 18px 6px;
	background: var(--white);
}
.hw-warning--yellow { border-left-color: #FFCC00; }
.hw-warning--orange { border-left-color: #F28C28; }
.hw-warning--red { border-left-color: #C62828; }
.hw-warning--other { border-left-color: #6a7d8d; }

.hw-warning__level {
	align-self: start;
	margin: 0;
	padding: 0.2rem 0.7rem;
	border-radius: 999px;
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: #FFCC00;
	color: #003366;
}
.hw-warning--orange .hw-warning__level { background: #F28C28; color: #1d1d1d; }
.hw-warning--red .hw-warning__level { background: #C62828; color: #fff; }
.hw-warning--other .hw-warning__level { background: #dde5ea; color: #22384c; }

.hw-warning__headline { margin: 0 0 0.15rem; font-size: 1.05rem; line-height: 1.3; }
.hw-warning__when { margin: 0 0 0.4rem; font-size: 0.9rem; color: #4d6275; }
.hw-warning__text { font-size: 0.95rem; }
.hw-warning__text p { margin: 0 0 0.4rem; }
.hw-warning__text ul { margin: 0 0 0.4rem; padding-left: 1.2rem; }
.hw-warnings__source { margin: 0.25rem 0 0; font-size: 0.85rem; color: #4d6275; }

.hw-quote--serious { font-size: clamp(1.6rem, 1rem + 3vw, 2.8rem); }

@media (max-width: 520px) {
	.hw-warning { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------
   v2.2: share buttons
------------------------------------------------------------------ */
.hw-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.7rem;
}
.hw-share__label {
	margin-right: 0.15rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.7);
}
.hw-share__btn {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	font: inherit;
	font-size: 0.7rem;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.hw-share__btn:hover { background: var(--white); color: var(--green); }
.hw-share__btn[hidden] { display: none; }
.hw-share__status { font-size: 0.7rem; color: var(--yellow); }

/* ------------------------------------------------------------------
   v2.2: next 24 hours and days ahead
------------------------------------------------------------------ */
.hw-outlook { padding-block: 0 clamp(2rem, 5vw, 3.5rem); }
.hw-outlook[hidden] { display: none; }

.hw-outlook__card {
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--line);
	border-radius: 28px 8px 28px 8px;
	background: var(--white);
}
.hw-outlook__card h2 { margin: 0 0 0.25rem; font-size: 1.25rem; }
.hw-outlook__card h2:not(:first-child) { margin-top: 1.75rem; }
.hw-outlook__hint { margin: 0 0 0.75rem; font-size: 0.9rem; color: #4d6275; }

.hw-hours {
	display: flex;
	gap: 0.6rem;
	margin: 0;
	padding: 0 0 0.5rem;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}
.hw-hour {
	flex: 0 0 5.2rem;
	display: grid;
	justify-items: center;
	gap: 0.15rem;
	padding: 0.7rem 0.4rem;
	border-radius: 16px;
	background: var(--green);
	color: var(--white);
	text-align: center;
	scroll-snap-align: start;
}
.hw-hour__time { font-size: 0.9rem; font-weight: 600; }
.hw-hour__icon { line-height: 0; }
.hw-hour__icon svg { width: 44px; height: 44px; }
.hw-hour__temp { font-family: var(--font-head); font-size: 1.25rem; font-weight: 700; color: var(--yellow); }
.hw-hour__rain { font-size: 0.85rem; }

.hw-days { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.hw-day {
	display: grid;
	grid-template-columns: 5.5rem 44px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.6rem 0;
	border-top: 1px solid var(--line);
}
.hw-day:first-child { border-top: 0; }
.hw-day__name { font-family: var(--font-head); font-weight: 600; color: var(--blue); }
.hw-day__icon { line-height: 0; background: var(--green); border-radius: 50%; display: grid; place-items: center; width: 44px; height: 44px; }
.hw-day__icon svg { width: 32px; height: 32px; }
.hw-day__temps { white-space: nowrap; }
.hw-day__rain { font-size: 0.9rem; color: #4d6275; white-space: nowrap; }
.hw-outlook__foot { margin: 1.25rem 0 0; font-weight: 600; }

/* ------------------------------------------------------------------
   v2.2: place pages
------------------------------------------------------------------ */
.hw-crumbs { margin: 0 0 1rem; font-size: 0.9rem; }
.hw-crumbs--hero { margin-bottom: 1.5rem; color: rgba(255, 255, 255, 0.9); }
.hw-crumbs--hero a { color: var(--yellow); }
.hw-index-title { margin: 0 0 0.75rem; font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); }
.hw-index-intro { max-width: 40rem; margin: 0 0 1.5rem; }

.hw-places { margin: 0 0 1.5rem; }
.hw-places__title { margin: 0 0 0.6rem; font-size: 1.05rem; }
.hw-places__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hw-places__list a {
	display: inline-block;
	padding: 0.35rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--white);
	color: var(--green);
	font-weight: 600;
	text-decoration: none;
}
.hw-places__list a:hover { background: var(--green); color: var(--white); }
.hw-places-wrap { padding-block: 0 2.5rem; }
.hw-places__more { margin: 0; font-weight: 600; }

.site-footer .hw-places { margin-bottom: 1.75rem; }
.site-footer .hw-places__title { color: var(--white); }
.site-footer .hw-places__list a {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--white);
}
.site-footer .hw-places__list a:hover { background: var(--yellow); color: var(--blue); }

@media (max-width: 700px) {
	.hw-day { grid-template-columns: 4.5rem 44px minmax(0, 1fr) auto; }
	.hw-day__rain { grid-column: 2 / -1; }
}


/* ------------------------------------------------------------------
   v2.2.1: warnings sit under the weather panel; quotes in the outlook
------------------------------------------------------------------ */
.hw-warnings { border-top: 1px solid var(--line); }

.hw-outlook__quote {
	margin: 0 0 0.35rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.2rem, 1rem + 1.2vw, 1.7rem);
	line-height: 1.2;
	color: var(--green);
	text-wrap: balance;
}
.hw-day__quote {
	grid-column: 1 / -1;
	margin: -0.15rem 0 0;
	font-size: 0.95rem;
	font-style: italic;
	color: var(--green);
}

/* v2.2.2: search bar on every page except the home page */
.hw-sitesearch { padding: 0.75rem 0; background: var(--white); border-bottom: 1px solid var(--line); }
.hw-sitesearch .hw-town-form { max-width: 34rem; margin-inline: auto; }

/* v2.2.3: two day cards side by side, warning line */
.hw-tomorrow__grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) {
	.hw-tomorrow__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hw-tomorrow__grid--two .hw-tomorrow__card { height: 100%; }
.hw-warnings__line {
	margin: 0 0 0.75rem;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: clamp(1.05rem, 1rem + 0.6vw, 1.35rem);
	line-height: 1.25;
	color: var(--blue);
}
.hw-warnings__line--yellow { border-left: 6px solid var(--yellow); padding-left: 0.75rem; }
.hw-warnings__line--orange { border-left: 6px solid #e8730c; padding-left: 0.75rem; }
.hw-warnings__line--red { border-left: 6px solid #c0262d; padding-left: 0.75rem; }
.hw-tomorrow__card .hw-ad-zone { margin-top: 0.75rem; }

/* v2.2.5: wind badge on breezy days */
.hw-icon, .hw-tomorrow__icon { position: relative; }
.hw-wind-badge { position: absolute; right: -4px; bottom: -4px; line-height: 0; }
.hw-wind-badge svg { width: 26px; height: 26px; }
.hw-icon svg.hw-icon-svg { display: block; }

/* v2.3.0: consent banner, notes, footer menu */
.hw-consent {
	position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 9999;
	max-width: 44rem; margin-inline: auto; padding: 0.85rem 1rem;
	background: var(--blue); color: var(--white); border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
	display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between;
	font-size: 0.9rem; line-height: 1.4;
}
.hw-consent[hidden] { display: none; }
.hw-consent__text { margin: 0; flex: 1 1 18rem; }
.hw-consent__text a { color: var(--yellow); }
.hw-consent__buttons { display: flex; gap: 0.5rem; }
.hw-consent__btn {
	padding: 0.4rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.6);
	background: transparent; color: var(--white); font: inherit; font-weight: 600; cursor: pointer;
}
.hw-consent__btn--yes { background: var(--yellow); border-color: var(--yellow); color: var(--blue); }
.hw-consent-open {
	margin-left: 0.5rem; padding: 0; border: 0; background: none; color: inherit;
	font: inherit; text-decoration: underline; cursor: pointer;
}
.hw-geo-note { margin: 0.1rem 0 0; font-size: 0.75rem; color: rgba(255,255,255,0.75); }
.hw-stale { margin: 0.6rem 0 0; padding: 0.45rem 0.7rem; border-radius: 8px; background: rgba(255,204,0,0.16); border-left: 4px solid var(--yellow); font-size: 0.9rem; }
.site-footer__nav ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0.75rem 0 0; padding: 0; list-style: none; }
.site-footer__nav a { color: inherit; }

/* v2.3.1: share row sits low in the green, just above the white line */
.hw-hero .hw-share { margin-top: 0.9rem; }
@media (min-width: 801px) {
	/* Side by side: the share row is the last thing in the left column, so nudge it down into the hero's bottom padding without moving the text above it. */
	.hw-hero .hw-share { position: relative; top: calc(clamp(2.5rem, 6vw, 4.5rem) - 0.55rem); }
}

/* v2.3.2: sidebar weather card, warnings and ad spot */
.hw-side-card {
	padding: 1.1rem 1.2rem 1.2rem;
	border-radius: 16px;
	background: var(--green);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23fff' fill-opacity='.07'%3E%3Ccircle cx='30' cy='22' r='7'/%3E%3Ccircle cx='21' cy='33' r='7'/%3E%3Ccircle cx='39' cy='33' r='7'/%3E%3Crect x='29' y='36' width='2.4' height='13' rx='1.2'/%3E%3C/g%3E%3C/svg%3E");
	color: var(--white);
	border-bottom: 5px solid var(--yellow);
}
.hw-side-card__place { margin: 0 0 0.4rem; font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.hw-side-card__main { display: flex; align-items: center; gap: 0.75rem; }
.hw-side-card__icon { position: relative; line-height: 0; flex: 0 0 auto; }
.hw-side-card__icon svg.hw-icon-svg { width: 76px; height: 76px; display: block; }
.hw-side-card__icon .hw-wind-badge { right: -2px; bottom: -2px; }
.hw-side-card__icon .hw-wind-badge svg { width: 18px; height: 18px; }
.hw-side-card__temp { margin: 0; font-family: var(--font-head); font-weight: 800; font-size: 3rem; line-height: 1; }
.hw-side-card__temp small { font-size: 1.1rem; font-weight: 700; margin-left: 0.1rem; }
.hw-side-card__cond { margin: 0.4rem 0 0; font-weight: 600; color: var(--yellow); }
.hw-side-card__quote { margin: 0.5rem 0 0; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.25; }
.hw-side-card__facts { margin: 0.6rem 0 0; font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); }
.hw-side-card__link { display: inline-block; margin-top: 0.7rem; color: var(--white); font-weight: 600; font-size: 0.9rem; }
.hw-side-card__link:hover { color: var(--yellow); }
.hw-side-card--error { background: var(--blue); }

.hw-side-warnings .hw-warnings { margin-top: 0.9rem; padding: 0; border: 0; background: none; }
.hw-side-warnings .hw-wrap { padding: 0; max-width: none; }
.hw-side-warnings .hw-warning { font-size: 0.9rem; }
.hw-side-warnings .hw-warnings__line { font-size: 0.95rem; }

.hw-side-ad { margin-top: 0.9rem; }
.hw-side-ad .hw-ad {
	border: 1px solid var(--line);
	border-top: 4px solid var(--green);
	border-radius: 14px;
	background: var(--white);
	padding: 1.5rem 0.6rem 0.6rem;
	box-shadow: 0 1px 0 rgba(0, 51, 102, 0.04);
}
.hw-ad__img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* v2.3.3: footer menu, warnings page */
.site-footer__nav { margin: 1rem 0 0.9rem; }
.site-footer__nav ul {
	display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.35rem 0;
	margin: 0; padding: 0; list-style: none;
}
.site-footer__nav li:first-child a { padding-left: 0; }
.site-footer__nav li + li { border-left: 1px solid rgba(255, 255, 255, 0.28); }
.site-footer__nav a {
	display: inline-block; padding: 0.2rem 1rem;
	color: var(--white); font-weight: 600; font-size: 0.95rem; text-decoration: none;
}
.site-footer__nav a:hover, .site-footer__nav a:focus-visible { color: var(--yellow); text-decoration: underline; }
.site-footer__nav .current-menu-item > a { color: var(--yellow); }
.hw-warnings-all .hw-warnings { margin-top: 0; }
.hw-warnings-none {
	margin: 0 0 1.5rem; padding: 1rem 1.2rem; border-radius: 12px;
	background: var(--mist); border-left: 5px solid var(--green);
	font-family: var(--font-head); font-weight: 600; color: var(--blue);
}

/* 2.3.6: location privacy note sits right under the location button. */
.hw-quick { margin-bottom: 0.2rem; }
.hw-geo-msg { min-height: 0; margin: 0.4rem 0 1.25rem; }
.hw-geo-msg:empty { margin: 0 0 1.25rem; }

/* 2.3.7: consent banner lines up with the page content width. */
.hw-consent { left: 0; right: 0; width: min(100% - 2.5rem, var(--wrap)); max-width: none; bottom: 1rem; padding: 1rem 1.25rem; }
.hw-consent__text { flex: 1 1 24rem; }
.hw-consent__buttons { flex-shrink: 0; }
@media (max-width: 600px) { .hw-consent { width: calc(100% - 1.5rem); bottom: 0.75rem; } .hw-consent__buttons { width: 100%; } .hw-consent__btn { flex: 1; } }

/* 2.3.9: sunrise/sunset line and warnings county filter. */
.hw-sun { display: flex; gap: 1.25rem; margin: 0.6rem 0 0; font-size: 0.9rem; color: rgba(255,255,255,.88); }
.hw-sun strong { font-family: var(--font-head); color: var(--yellow); margin-left: .25rem; }
.hw-county-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 1rem 0 0; }
.hw-county-filter label { font-weight: 600; }
.hw-county-filter select { padding: .55rem .8rem; border-radius: 10px; border: 1px solid rgba(0,0,0,.25); font: inherit; background: #fff; color: var(--blue); min-width: 11rem; }
.hw-county-filter__all { font-weight: 600; }

/* 2.3.10: search form on the places index. */
.hw-index-search { max-width: 34rem; margin: 1rem 0 1.5rem; }

/* 2.4.0: floating location button, cookie button on pages, print view, 404. */
.hw-geo-float {
	position: fixed; left: 0.75rem; bottom: 0.75rem; z-index: 900;
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem;
	border: 0; border-radius: 999px; background: var(--yellow); color: var(--blue);
	font: inherit; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); cursor: pointer;
}
.hw-geo-float[hidden] { display: none; }
@media (min-width: 701px) { .hw-geo-float { display: none; } }
.hw-consent-open--page {
	display: inline-block; margin: 0.25rem 0; padding: 0.5rem 1rem; border-radius: 999px;
	border: 1px solid var(--green); background: transparent; color: var(--green); font: inherit; font-weight: 600; cursor: pointer;
}
.hw-404 .hw-btn { display: inline-block; }
@media (max-width: 700px) {
	.hw-btn, .hw-consent__btn { min-height: 44px; }
}

@media print {
	.site-header, .hw-sitesearch, .hw-quick, .hw-controls, .hw-share, .hw-consent, .hw-consent-open,
	.hw-geo-float, .hw-ad-zone, .hw-ad, .site-footer__nav, .hw-geo-note, .hw-geo-msg, .hw-town-form,
	.hw-places, .hw-sidebar, .hw-hero__pattern, .hw-announce, .hw-outlook__foot { display: none !important; }
	body, .hw-hero, .hw-now, .hw-hero *, .hw-now *, .hw-tomorrow, .hw-tomorrow * {
		background: #fff !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important;
	}
	.hw-hero, .hw-now { padding: 0 !important; }
	.hw-tomorrow, .hw-warning, .hw-day, .hw-hour { break-inside: avoid; border: 1px solid #999 !important; }
	a { color: #000 !important; text-decoration: none !important; }
}

/* 2.4.5: smaller location and place buttons (the 2.4.0 phone tap-target rule had made them taller). */
.hw-geo, .hw-chip, .hw-fav { padding: 0.3rem 0.8rem; font-size: 0.8rem; gap: 0.3rem; min-height: 0; line-height: 1.3; }
.hw-geo svg { width: 14px; height: 14px; }
.hw-quick { gap: 0.4rem 0.5rem; }

/* 2.4.6: side by side, the weather panel starts level with "Use my location", and the verdict text sits just under the privacy note. */
@media (min-width: 801px) {
	.hw-now { margin-top: -4.4rem; min-height: 0; align-items: start; }
	.hw-now__main { padding-top: 3.7rem; }
	.hw-geo-msg:empty { margin-bottom: 1.25rem; }
}

/* 2.5.0: air quality line and embedded weather card. */
.hw-air span::before { content: ""; display: inline-block; width: .65rem; height: .65rem; margin-right: .4rem; border-radius: 50%; background: #7be3a6; vertical-align: -1px; }
.hw-air--fair span::before { background: #d9e86b; }
.hw-air--moderate span::before { background: #ffcc00; }
.hw-air--poor span::before { background: #ff9a3c; }
.hw-air--verypoor span::before { background: #ff5a4f; }
.hw-air strong { font-family: var(--font-head); color: var(--yellow); margin-left: .25rem; }
.hw-embed { max-width: 22rem; margin: 1.5rem 0; }
.hw-embed .hw-side-card { margin: 0; }

/* 2.6.0: local text, tabs, county lists. */
.hw-when { margin: 0; padding: 1rem 0 0; }
.hw-when ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 auto; padding: 0 1rem; max-width: 72rem; }
.hw-when a, .hw-when span { display: inline-block; padding: .4rem 1rem; border-radius: 999px; border: 2px solid var(--green); font-weight: 600; text-decoration: none; }
.hw-when a { color: var(--green); background: #fff; }
.hw-when a:hover, .hw-when a:focus-visible { background: var(--green); color: #fff; }
.hw-when span { background: var(--green); color: #fff; }
.hw-local { padding: 2rem 0 2.5rem; }
.hw-local h2 { margin: 1.75rem 0 .5rem; font-size: 1.35rem; }
.hw-local h2:first-child { margin-top: 0; }
.hw-local p { max-width: 44rem; }
.hw-faq { max-width: 44rem; margin: 0; }
.hw-faq dt { font-weight: 700; margin-top: 1rem; }
.hw-faq dd { margin: .2rem 0 0; }
.hw-local__more { margin-top: 1.5rem; font-weight: 600; }
.hw-local__note { margin: 1rem 0; font-weight: 600; }
.hw-places__list--big { margin-bottom: 2rem; }
.hw-places__list--big a { font-size: 1.1rem; }

/* 2.6.2: the share row is pinned to the bottom of the green, so it stays put whatever the verdict length. */
.hw-hero .hw-wrap { position: relative; }
.hw-hero .hw-share { position: absolute; top: auto; left: 0; right: 0; margin: 0; bottom: calc(0.8rem - clamp(2.5rem, 6vw, 4.5rem)); }
@media (min-width: 801px) {
	.hw-now { min-height: 29rem; }
}
@media (max-width: 800px) {
	.hw-hero .hw-wrap { padding-bottom: 2.75rem; }
	.hw-hero .hw-quote:not(.hw-quote--error) { min-height: 3.12em; }
}

/* 2.7.0: accessibility. Small text on green now reaches 4.5:1; buttons reach 24px; focus is visible on every background. */
:root { --yellow-text: #FFE066; }
.hw-place,
.hw-chip--fav,
.hw-share__status,
.hw-hour__temp,
.hw-crumbs--hero a { color: var(--yellow-text); }
.hw-chip--fav { border-color: var(--yellow); }
.hw-share__label { color: rgba(255, 255, 255, 0.9); }
.hw-geo-note { color: rgba(255, 255, 255, 0.9); }
.hw-share__btn { padding: 0.2rem 0.6rem; font-size: 0.75rem; color: var(--white); border-color: rgba(255, 255, 255, 0.6); }
.hw-share__label { font-size: 0.75rem; }
.hw-share__status { font-size: 0.75rem; }
.hw-consent :focus-visible,
.hw-announce :focus-visible { outline-color: var(--yellow); }
.hw-page .hw-town-form:focus-within { outline-color: var(--blue); }
.hw-when a:focus-visible { outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
	.hw-hero .hw-share__btn, .hw-geo, .hw-chip, .hw-fav { border: 1px solid ButtonText; }
}

/* 2.7.4: no sideways scrolling on phones. The hidden screen-reader text inside each hour sat outside the scrolling strip and stretched the page. */
.hw-hours, .hw-hour, .hw-days, .hw-day { position: relative; }
html, body { overflow-x: clip; }

/* 2.8.1: on phones the floating location button no longer sits on top of the last footer line (which also tripped the contrast check). */
@media (max-width: 700px) {
	.site-footer { padding-bottom: calc(44px + 2.5rem); }
}

/* 2.8.2: while the cookie banner is open there is room under the footer for it, so it never covers the last footer line. */
.hw-consent-on .site-footer { padding-bottom: max(calc(var(--hw-consent-h, 0px) + 1.5rem), calc(44px + 2.5rem)); }
@media (min-width: 701px) { .hw-consent-on .site-footer { padding-bottom: calc(var(--hw-consent-h, 0px) + 1.5rem); } }

/* 2.8.3: footer is always painted (no content-visibility skipping) so contrast checkers see its blue background. */
.site-footer { content-visibility: visible; }

/* 2.9.0: Contact form. */
.hw-contact { max-width: 34rem; }
.hw-contact__form p { margin: 0 0 1rem; }
.hw-contact label { display: block; margin-bottom: 0.3rem; font-weight: 600; }
.hw-contact input[type="text"], .hw-contact input[type="email"], .hw-contact textarea {
	width: 100%; box-sizing: border-box; padding: 0.7rem 0.8rem; font: inherit; color: var(--blue);
	background: #fff; border: 2px solid var(--blue); border-radius: 8px;
}
.hw-contact input:focus-visible, .hw-contact textarea:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.hw-contact__btn {
	min-height: 44px; padding: 0.7rem 1.6rem; font: inherit; font-weight: 700; cursor: pointer;
	color: var(--blue); background: var(--yellow); border: 2px solid var(--blue); border-radius: 999px;
}
.hw-contact__btn:hover, .hw-contact__btn:focus-visible { background: var(--blue); color: #fff; }
.hw-contact__small { font-size: 0.85rem; color: #4d6275; }
.hw-contact__note { padding: 0.8rem 1rem; border-radius: 8px; font-weight: 600; }
.hw-contact__note--ok { background: #e6f4ee; color: #064d37; border: 2px solid var(--green); }
.hw-contact__note--bad { background: #fff4e5; color: #7a2e00; border: 2px solid #b85c00; }
.hw-contact__trap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* 2.9.3: one-line forecast disclaimer under the footer small print. */
.site-footer__note { display: block; margin-top: 0.45rem; }

/* 2.10.0: Install app link (only shown when the browser offers installing). */
.hw-install { margin-left: 0.5rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.hw-install[hidden] { display: none; }
@media print { .hw-install { display: none; } }

/* 2.10.1: install bar (fixed to the top so it never shifts the page). */
.hw-installbar {
	position: fixed; z-index: 9990; top: 0.75rem; left: 0.75rem; right: 0.75rem; max-width: 30rem; margin-inline: auto;
	padding: 0.8rem 1rem; border-radius: 12px; background: var(--blue); color: #fff;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3); border: 2px solid var(--yellow);
}
.hw-installbar p { margin: 0 0 0.6rem; font-size: 0.95rem; line-height: 1.4; }
.hw-installbar__row { display: flex; gap: 0.6rem; justify-content: flex-end; }
.hw-installbar button { min-height: 44px; padding: 0.5rem 1.2rem; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.hw-installbar__yes { background: var(--yellow); color: var(--blue); border: 2px solid var(--yellow); }
.hw-installbar__no { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.6); }
@media print { .hw-installbar { display: none; } }