/* Stationpagina "Actueel weer [plaats]" (hwapages.class.php::getHwaActueel)
   + de sidebar-widget (widgets.class.php::hwa_station_widget). Zelfde
   kleur-tokens (--chrome-*, al site-breed via hwa-chrome.css) en kaart-stijl
   als de rest van de restyle. */

.lastupdate {
	font-size: .85rem;
	color: #5b6b7c;
	margin: 4px 0 14px;
}

/* ---------- De twee "actueeltabel"-tabellen ---------- */
.hwa-actueel-tables {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.hwa-actueel-tables table.actueeltabel {
	flex: 1 1 0;
	min-width: 260px;
	background: #ffffff;
	border: 1px solid #e1e8f0;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(20,40,60,.06), 0 6px 16px -10px rgba(20,40,60,.18);
	border-collapse: collapse;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: .92rem;
}
table.actueeltabel tr { border-bottom: 1px solid #eef1f4; }
table.actueeltabel tr:last-child { border-bottom: none; }
table.actueeltabel td {
	padding: 9px 14px;
	color: var(--chrome-ink, #182430);
}
table.actueeltabel td:first-child {
	color: #5b6b7c;
	white-space: nowrap;
}
table.actueeltabel td:last-child {
	text-align: right;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* min/max-spans bestonden al in de markup maar hadden nooit een kleur */
table.actueeltabel .min { color: var(--chrome-accent, #2569c9); font-weight: 700; }
table.actueeltabel .max { color: #cf4638; font-weight: 700; }

/* ---------- Grafieken + advertentie ---------- */
/* De grafiekplaatjes komen uit verschillende generatoren (jpgraph vs. de
   neerslagverwachting) met elk hun eigen pixelverhouding -- een grid met
   gelijke rijhoogte (eerdere versie) dwong elke rij op de hoogte van het
   hoogste plaatje, waardoor een korter/breder plaatje met veel lege ruimte
   in zijn eigen cel kwam te staan (leek daardoor "veel kleiner"). Een
   masonry-achtige multi-column-layout laat elke kolom onafhankelijk vullen
   op zijn eigen hoogte, zonder die geforceerde rij-afstemming. */
.hwa-actueel-graphs {
	column-count: 2;
	column-gap: 10px;
	margin-bottom: 14px;
}
.hwa-actueel-graphs img {
	border: 1px solid #e1e8f0;
	border-radius: 8px;
	width: 100%;
	height: auto;
	display: block;
	break-inside: avoid;
	margin: 0 0 10px;
}
@media (max-width: 560px) {
	.hwa-actueel-graphs { column-count: 1; }
}

/* Windrichting/windsnelheid -- bredere, informatiedichtere grafieken die te
   veel verloren bij het naast elkaar zetten op halve breedte. Elk krijgt nu
   zijn eigen volle rij (binnen de contentkolom, geen kolom-doorbraak) i.p.v.
   naast elkaar. */
.hwa-actueel-graphs--wide { column-count: 1; }
.hwa-actueel-graphs--wide img { max-width: 100%; }
.hwa-actueel-ad {
	margin: 4px 0 18px;
	padding: 10px;
	background: #f3f5f7;
	border: 1px dashed #b9c2cb;
	border-radius: 8px;
	text-align: center;
}

/* ---------- Sidebar-widget (hwa_station_widget) ---------- */
/* Deze zat qua opmaak te dicht op de content-kaarten in de hoofdkolom --
   hierdoor las de sidebar als "nog een contentblok" i.p.v. als navigatie.
   Onderscheid nu bewust gemaakt: een getinte paneel-achtergrond i.p.v. wit,
   en losse blokvormige menu-items met hover-vulling + pijltje i.p.v. de
   dunne onderlijntjes die de datarijen elders gebruiken. */
.hwa-sidebar-nav,
.hwa-sidebar-nearby {
	background: var(--chrome-accent-soft, #e5edf9);
	border-radius: 8px;
	padding: 6px;
	margin-bottom: 14px;
}
.hwa-sidebar-nav .station-menu,
.hwa-sidebar-nearby .station-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hwa-sidebar-nav .station-menu li,
.hwa-sidebar-nearby .station-menu li {
	border-bottom: none;
}
.hwa-sidebar-nav .station-menu a,
.hwa-sidebar-nearby .station-menu a {
	display: block;
	position: relative;
	color: var(--chrome-ink, #182430);
	text-decoration: none;
	font-weight: 600;
	font-size: .88rem;
	padding: 8px 22px 8px 10px;
	border-radius: 6px;
	transition: background .15s ease, color .15s ease;
}
.hwa-sidebar-nav .station-menu a::after,
.hwa-sidebar-nearby .station-menu a::after {
	content: "\203A"; /* › */
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--chrome-accent, #2569c9);
	font-weight: 700;
	opacity: .6;
}
.hwa-sidebar-nav .station-menu a:hover,
.hwa-sidebar-nearby .station-menu a:hover {
	background: #ffffff;
	color: var(--chrome-accent, #2569c9);
}

img.locationimage {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	border: 1px solid #e1e8f0;
	display: block;
	margin: 4px 0 16px;
}

h4.widgettitle.indebuurt {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #5b6b7c;
	margin: 0 0 8px;
	padding: 0 4px;
}