/* Shared spacing and navigation refinements. */
:root{--page-top:24px;--card-space:24px}
.main-nav a{gap:6px;padding-inline:10px}
.main-nav .mdi{font-size:20px;line-height:1;flex:none}
.menu-trigger{position:relative;gap:5px}
.menu-trigger span{transition:transform .2s,opacity .2s}
.menu-open .menu-trigger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-open .menu-trigger span:nth-child(2){opacity:0}
.menu-open .menu-trigger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu-backdrop{position:fixed;inset:0;z-index:54;border:0;background:rgba(5,28,46,.25);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.menu-backdrop[hidden]{display:none}
.drawer-close{align-self:flex-end;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(185,219,232,.25);border-radius:11px;background:rgba(255,255,255,.08);font-size:23px;color:#edf8fc}
.mobile-menu .mdi{flex:none;font-size:22px;line-height:1}
.mobile-menu{visibility:hidden;overflow-y:auto;overscroll-behavior:contain}
.mobile-menu.is-open{visibility:visible}
.search-sheet:not(.is-open){visibility:hidden}
.current-map-value text{font-size:25px!important}
.current-map-wind text.map-wind-bft{font-size:24px!important;stroke-width:0!important;fill:#173b50!important;letter-spacing:0!important}
.current-map-wind text.map-wind-unit{font-size:10px!important;stroke-width:0!important;fill:#607b8a!important;letter-spacing:0!important}
.current-map-wind>rect{fill:transparent;stroke:transparent}
.map-point-content,.map-wind-content{transform-box:view-box;transform-origin:0 0}
@media(max-width:1100px){
 .mobile-menu{width:min(300px,76vw);padding:16px;gap:6px;border-left:1px solid rgba(165,207,226,.2)}
 .mobile-menu a{padding:11px 12px;border-radius:12px}
 .menu-open .site-header{z-index:60}
}
@media(max-width:850px){:root{--page-top:14px;--card-space:20px}}
@media(max-width:600px){:root{--page-top:12px;--card-space:16px}.current-map-value text{font-size:23px!important}}
@media(prefers-reduced-motion:reduce){.menu-trigger span,.mobile-menu{transition:none}}
body.page-home .weather-stage{margin-top:var(--page-top)}
.map-province:focus{outline:none}
.map-province:focus-visible{stroke:#174c70;stroke-width:2}

/* Centre SVG figures geometrically, including mobile WebView rendering. */
.map-temp-badge text,.map-wind-bft,.current-map-wind text.map-wind-bft{dominant-baseline:central!important;alignment-baseline:central!important;text-anchor:middle}
.page-verwachting .forecast-hour-card.is-night .forecast-hour-temperature{color:#37759d}
.page-verwachting .forecast-daypart-temp .temp-min{color:#37759d}
.page-verwachting .forecast-daypart-temp .temp-max{color:#b85936}

.map-temp-badge.is-cool text{fill:#37759d}

/* Shared station links for KNMI and PWS. */
.current-station-list a.current-station-row{text-decoration:none;cursor:pointer}
.current-station-list a.current-station-row:hover,.current-station-list a.current-station-row:focus-visible{background:#e5f3f7!important;border-color:#82bbd0!important;outline:none}
.current-station-list a.current-station-row:focus-visible{box-shadow:0 0 0 2px #4599bc}
.current-map-value-link{cursor:pointer}
.current-map-value-link:focus-visible rect{stroke:#fff;stroke-width:2}
/* Shared ranked observation cards and clickable map values. */
.extreme-grid a.extreme-card{display:block;text-decoration:none;cursor:pointer}
.extreme-grid a.extreme-card:focus-visible{outline:3px solid #72c5ec;outline-offset:2px}
.extreme-category-stack{display:flex;flex-direction:column;gap:9px;min-width:0}
.extreme-category-stack>.extreme-card{width:100%}
.current-map-value-link{pointer-events:all}
.current-map-value-link rect{fill:transparent;stroke:transparent;stroke-width:2}
.current-map-value-link:hover rect,.current-map-value-link:focus-visible rect{fill:rgba(255,255,255,.24);stroke:rgba(14,82,119,.7)}
@media(max-width:850px){.extreme-category-stack{gap:8px}}

.news-page>.news-page-grid{margin-top:24px}
.news-pagination{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:24px 0}

/* Mobiele bediening: swipen blijft beschikbaar, alleen de scrollbalk verdwijnt. */
*{-webkit-tap-highlight-color:transparent}
*::-webkit-scrollbar:horizontal{display:none;height:0}
.meetpunt-chart-tabs,.gfs-time-strip,.live-day-row,.forecast-daypart-grid,.day-row,.article-content table{scrollbar-width:none!important}
.meetpunt-chart-tabs::-webkit-scrollbar,.gfs-time-strip::-webkit-scrollbar,.live-day-row::-webkit-scrollbar,.forecast-daypart-grid::-webkit-scrollbar,.day-row::-webkit-scrollbar,.article-content table::-webkit-scrollbar{display:none!important}
.hourly-chart-scroll{scrollbar-width:thin!important}
.hourly-chart-scroll::-webkit-scrollbar,.hourly-chart-scroll::-webkit-scrollbar:horizontal{display:block!important;height:4px!important}
.current-map-legend-labels{display:flex;justify-content:space-between;gap:0}
.current-map-legend-labels span{flex:0 0 0;min-width:0;width:0;white-space:nowrap;overflow:visible;text-align:center}
.current-map-legend-labels span:first-child{text-align:left}
.current-map-legend-labels span:last-child{text-align:right}

@media(min-width:1001px){.news-page .news-page-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.news-page .blue-card-description{margin-top:17px}

.extreme-label-desktop{display:none}
@media(min-width:1001px){.extreme-label-mobile{display:none}.extreme-label-desktop{display:inline;white-space:nowrap}}

/* De korte labels mogen geen oude span-inspringing uit de extreme-grid erven. */
.extreme-card-top .extreme-label-desktop,.extreme-card-top .extreme-label-mobile{padding:0!important;margin:0!important;border:0!important;float:none!important;text-align:left!important}
.station-list-controls{display:none!important}
@media(min-width:1001px){
 .actueel-page-grid>.current-stations-panel{contain:size;min-height:0!important;height:100%!important;overflow:hidden!important}
 .current-stations-panel .current-station-list{flex:1 1 auto;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none!important;padding-right:0}
 .current-stations-panel .current-station-list::-webkit-scrollbar{display:none!important}
 .station-list-controls{position:static!important;display:flex!important;flex:0 0 auto;align-self:flex-end;margin:12px 0 0}
}
@media(min-width:1101px){
 .page-home .weather-stage{align-items:stretch}
 .page-home .stage-copy{display:flex;flex-direction:column;contain:size;height:100%;min-height:0;padding:0;justify-content:flex-start}
 .page-home .stage-report{flex:1 1 auto;min-height:0;max-height:none!important;overflow:hidden!important;padding:0}
 .page-home .stage-summary-full{max-height:100%!important;overflow:hidden;margin:0}
 .page-home .stage-report-link{flex:0 0 auto;margin-top:20px}
}

/* Alleen twee kleine chevrons, zonder donkere pil of knopachtergrond. */
.forecast-report-controls{position:static;align-self:flex-end;flex:0 0 auto;margin-top:12px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;gap:6px}
.forecast-report-controls button{width:24px;height:24px;padding:4px;border:0;border-radius:4px;background:transparent;color:var(--ink);font:inherit;box-shadow:none;cursor:pointer}
.forecast-report-controls button svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.forecast-report-controls button:not(:disabled):hover{background:rgba(73,126,148,.08)}
.forecast-report-controls button:focus-visible{outline:2px solid #74adc4;outline-offset:2px}
.forecast-report-controls button:disabled{opacity:.28;cursor:default}