/* Europe weather map page (/weather/). Builds on the city weather pages' wxp.css (cards, layer buttons, timeline, pins, legend). */

/* The map: own vector basemap (countries of Natural Earth) on a sea background, the forecast field over it.
   Its height grows with the screen width (Europe fills the width, see home() in wxhub.js); isolation keeps
   Leaflet's z-indexes inside, under the theme's fixed header. */
.dotm-wxh-map { position: relative; z-index: 0; isolation: isolate; height: clamp(460px, 46vw, 80vh); border-radius: 14px; overflow: hidden; background: #e9e9e9; }
.dotm-wxh-map__canvas { position: absolute; inset: 0; background: #e9e9e9; font: inherit; }
/* OpenStreetMap in quiet grey, so the forecast colours carry the map. */
.dotm-wxh-map .leaflet-tile-pane { filter: grayscale(1) brightness(1.06) contrast(.86); }
/* Small print: the theme sets every link to its body size (p, a { font-size }), hence the size on the link too. */
.dotm-wxh-map .leaflet-container .leaflet-control-attribution { padding: 1px 6px; font-size: 10px; line-height: 1.4; background: rgba(255, 255, 255, .75); border-radius: 6px 0 0 0; color: #6b6f80; }
.dotm-wxh-map .leaflet-container .leaflet-control-attribution a { font-size: 10px; line-height: inherit; color: #6b6f80; }
.dotm-wxh-map__canvas[hidden] { display: none; }
/* The theme limits canvas and svg to 100% of their parent; Leaflet's panes have no width. */
.dotm-wxh-map canvas, .dotm-wxh-map svg { max-width: none !important; max-height: none !important; }
.dotm-wxh-map .leaflet-dotmWxhField-pane { pointer-events: none; }
.dotm-wxh-map .leaflet-dotmWxhField-pane img { filter: blur(var(--blur, 6px)); }
.dotm-wxh-map .leaflet-dotmWxhField-pane svg { filter: blur(5px); max-width: none !important; max-height: none !important; }
.dotm-wxh-map .leaflet-control-zoom { border: 0; box-shadow: 0 4px 14px rgba(33, 41, 74, .15); }
.dotm-wxh-map .leaflet-control-zoom a { color: var(--va-accent); }
.dotm-wxh-map .dotm-wxp-map__tag { position: absolute; top: 12px; left: 12px; z-index: 800; }
.dotm-wxh-map .dotm-wxp-map__legend { position: absolute; left: 12px; bottom: 12px; z-index: 800; min-width: 190px; }
.dotm-wxh .dotm-wxh-map__msg { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 16px; color: #4b5068; }
.dotm-wxh .dotm-wxh-map__msg[hidden] { display: none; }

/* Pins of the sea and snow layers: the value in a circle ringed in the layer's colour (--c); the
   name is a tooltip on hover. The city pins are those of the city maps. */
.dotm-wxh-dot { position: absolute; transform: translate(-50%, -50%); box-sizing: border-box; width: 38px; height: 38px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--va-white); border: 3px solid var(--c, #c3c9d6); box-shadow: 0 3px 10px rgba(33, 41, 74, .2); font-size: 13px; font-weight: 700; line-height: 1; color: var(--va-accent); cursor: pointer; white-space: nowrap; }
.dotm-wxh-dot small { font-size: 9px; font-weight: 500; color: #6b6f80; margin-top: 1px; }
.dotm-wxh-dot.is-none { color: #9aa0ae; font-weight: 500; }
.dotm-wxm:focus-visible .dotm-wxh-dot, .dotm-wxh-dot:hover { box-shadow: 0 0 0 2px var(--va-accent), 0 3px 10px rgba(33, 41, 74, .2); }
.leaflet-tooltip.dotm-wxh-tip { padding: 4px 9px; border: 0; border-radius: 8px; background: var(--va-accent); color: var(--va-white); font: inherit; font-size: 13px; font-weight: 500; box-shadow: 0 4px 14px rgba(33, 41, 74, .2); }
.leaflet-tooltip-top.dotm-wxh-tip::before { border-top-color: var(--va-accent); }
.dotm-wxm-pop .dotm-wxh-pop__when { margin-top: -3px; font-size: 12px; color: #6b6f80; }
.dotm-wxm-pop .dotm-wxh-pop__st { font-size: 12px; color: #6b6f80; }

/* Under the map card: what the page shows, when it was updated, the data sources. */
.dotm-wxh .dotm-wxh-foot { display: flex; flex-direction: column; gap: 4px; margin-top: -4px; }
.dotm-wxh .dotm-wxh-foot p { margin: 0; font-size: 12px; line-height: 1.5; color: #8a8fa0; }
.dotm-wxh .dotm-wxh-foot a { color: inherit; font-size: inherit; }

/* Timeline and region buttons under the map. */
.dotm-wxh-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.dotm-wxh-bar .dotm-wxp-timeline { min-width: 0; }
.dotm-wxh-bar .dotm-wxp-timeline button { flex: 0 0 auto; }
.dotm-wxh-bar .dotm-wxp-timeline[hidden], .dotm-wxh-regions[hidden] { display: none; }
.dotm-wxh-regions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: #6b6f80; }
.dotm-wxh-regions button { border: 0; background: var(--va-back); color: var(--va-accent); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.dotm-wxh-regions button:hover { background: #eceff5; }

/* Stage 3: "This week at a glance". */
.dotm-wxh-wk { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.dotm-wxh-wk__card { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border-radius: 16px; background: var(--va-back); min-width: 0; }
.dotm-wxh .dotm-wxh-wk__card h3 { margin: 0; font-size: 16px; line-height: 1.3; font-weight: 700; color: var(--va-accent); }
.dotm-wxh .dotm-wxh-wk__card p { margin: -4px 0 0; font-size: 12px; color: #6b6f80; }
.dotm-wxh-rank { list-style: none; margin: 0; padding: 0; counter-reset: wk; }
.dotm-wxh-rank li { counter-increment: wk; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid #ececf4; }
.dotm-wxh-rank li:first-child { border-top: 0; }
.dotm-wxh-rank li::before { content: counter(wk); font-size: 12px; font-weight: 700; color: #9aa0ae; }
.dotm-wxh-rank__n { min-width: 0; }
.dotm-wxh-rank__n a, .dotm-wxh-rank__n > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; color: var(--va-accent); text-decoration: none; }
.dotm-wxh-rank__n a:hover { color: var(--va-hover); }
.dotm-wxh-rank small { display: block; font-size: 12px; color: #6b6f80; }
.dotm-wxh-rank__v { text-align: right; white-space: nowrap; }
.dotm-wxh-rank__v b { font-size: 15px; font-weight: 700; color: var(--va-accent); }
.dotm-wxh-rank__v b.is-rain { color: #2a76d2; }
.dotm-wxh-rank__v b.is-sea { color: #1d5fae; }

/* "Where to go in <month>". */
.dotm-wxh-mt-wrap { overflow-x: auto; }
.dotm-wxh-mt { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.dotm-wxh-mt th, .dotm-wxh-mt td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #ececf4; }
.dotm-wxh-mt th { font-size: 12px; font-weight: 500; color: #6b6f80; text-transform: uppercase; letter-spacing: .04em; }
.dotm-wxh-mt .n { text-align: right; white-space: nowrap; }
.dotm-wxh-mt tr:last-child td { border-bottom: 0; }
.dotm-wxh-mt td a { color: var(--va-accent); font-weight: 500; text-decoration: none; }
.dotm-wxh-mt td a:hover { color: var(--va-hover); }
.dotm-wxh-drybar { display: inline-block; vertical-align: middle; position: relative; width: 60px; height: 6px; margin-left: 8px; border-radius: 3px; background: #edf0f6; overflow: hidden; }
.dotm-wxh-drybar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: #f2b544; }

/* Catalog of the city and region weather pages. */
.dotm-wxh-cat__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.dotm-wxh .dotm-wxh-cat__q { flex: 0 1 300px; min-width: 0; height: 42px; box-sizing: border-box; padding: 0 12px; border: 2px solid #ededed; border-radius: 10px; background: var(--va-back); font: inherit; font-size: 15px; color: var(--va-accent); }
.dotm-wxh-cat__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dotm-wxh-cat__chips button { border: 1px solid #ececf4; background: var(--va-white); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; color: #6b6f80; cursor: pointer; }
.dotm-wxh-cat__chips button[aria-pressed="true"] { background: var(--va-accent); border-color: var(--va-accent); color: var(--va-white); }
.dotm-wxh-cat__grid { columns: 3 280px; column-gap: 16px; }
.dotm-wxh-cc { break-inside: avoid; margin: 0 0 16px; padding: 14px 16px 6px; border-radius: 16px; background: var(--va-back); }
.dotm-wxh-cc[hidden], .dotm-wxh-cc li[hidden], .dotm-wxh-cat__none[hidden] { display: none; }
.dotm-wxh .dotm-wxh-cc h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--va-accent); }
.dotm-wxh .dotm-wxh-cc__c { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.dotm-wxh .dotm-wxh-flag { flex: none; width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(33, 41, 74, .12); }
.dotm-wxh .dotm-wxh-cc__n { flex: none; font-size: 12px; font-weight: 400; color: #6b6f80; }
.dotm-wxh-cc ul { list-style: none; margin: 6px 0 0; padding: 0; }
.dotm-wxh-crow { display: grid; grid-template-columns: minmax(0, 1fr) 26px 70px 12px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #ececf4; color: var(--va-accent); text-decoration: none; }
.dotm-wxh-cc li:first-child .dotm-wxh-crow { border-top: 0; }
.dotm-wxh-crow__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; }
.dotm-wxh-crow:hover .dotm-wxh-crow__n { color: var(--va-hover); }
.dotm-wxh-crow__i { display: flex; }
.dotm-wxh-crow__t { text-align: right; white-space: nowrap; font-size: 14px; font-weight: 700; }
.dotm-wxh-crow__t span { font-weight: 400; color: #6b6f80; }
.dotm-wxh-crow__go { color: #b3b8c6; font-size: 18px; line-height: 1; }
.dotm-wxh .dotm-wxh-cat__none { margin: 0; font-size: 15px; color: #6b6f80; }

@media (max-width: 560px) {
	.dotm-wxh-map { height: 440px; margin: 0 -6px; border-radius: 12px; }
	.dotm-wxh-map .dotm-wxp-map__legend { min-width: 0; max-width: calc(100% - 24px); font-size: 11px; }
	.dotm-wxh .dotm-wxp-seg { width: 100%; overflow-x: auto; }
	.dotm-wxh .dotm-wxp-seg button { flex: 1 0 auto; padding: 6px 10px; }
	.dotm-wxh-regions span { display: none; }
	.dotm-wxh .dotm-wxh-cat__q { flex: 1 1 100%; }
}