/* [hub_pogoda] — weather pages. Colours come from the theme (currentColor, the
   plugin's accent variables); only spacing and structure are set here. */
.hub-cs-weather { max-width: 1200px; margin: 0 auto; }
.hub-cs-wx-crumbs { font-size: .875em; opacity: .75; margin-bottom: .75em; }
.hub-cs-wx-crumbs a { color: inherit; }
.hub-cs-wx-title { margin: 0 0 .5em; }
.hub-cs-wx-lead { font-size: 1.1em; line-height: 1.6; margin: 0 0 1.25em; }
.hub-cs-wx-note { font-size: .9em; opacity: .75; }

.hub-cs-wx-table-wrap { overflow-x: auto; margin: 0 0 1em; -webkit-overflow-scrolling: touch; }
.hub-cs-wx-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hub-cs-wx-table caption { text-align: left; font-weight: 600; padding: 0 0 .5em; }
.hub-cs-wx-table th, .hub-cs-wx-table td { padding: .3em .75em; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); text-align: right; white-space: nowrap; }
.hub-cs-wx-table thead th { font-size: .85em; text-transform: uppercase; letter-spacing: .03em; opacity: .75; }
.hub-cs-wx-table th:first-child, .hub-cs-wx-table td:first-child { text-align: left; white-space: normal; }
.hub-cs-wx-table tbody th { font-weight: 600; }
.hub-cs-wx-table tbody th a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.hub-cs-wx-country { display: block; font-weight: 400; font-size: .85em; opacity: .7; }

.hub-cs-wx-method { margin: 0 0 1.5em; font-size: .925em; }
.hub-cs-wx-method summary { cursor: pointer; font-weight: 600; padding: .25em 0; }
.hub-cs-wx-method p { margin: .5em 0; line-height: 1.55; }

.hub-cs-wx-description { margin: 1.5em 0; line-height: 1.65; }
.hub-cs-wx-offers-heading { margin: 1.5em 0 .75em; }
.hub-cs-wx-all { text-align: center; margin: 1.25em 0; }
.hub-cs-wx-more { margin-top: 2.5em; }
.hub-cs-wx-more h2 { font-size: 1.15em; margin: 1.25em 0 .5em; }

.hub-cs-wx-month-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4em .9em; }
.hub-cs-wx-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25em; }
.hub-cs-wx-region-card { padding: 1em 1.1em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; }
.hub-cs-wx-region-card h2 { font-size: 1.15em; margin: 0 0 .5em; }

.hub-cs-wx-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75em; }
.hub-cs-wx-month a { display: flex; flex-direction: column; gap: .2em; padding: .85em 1em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; text-decoration: none; color: inherit; }
.hub-cs-wx-month a:hover, .hub-cs-wx-month a:focus-visible { border-color: var(--hub-cs-accent, currentColor); }
.hub-cs-wx-month-name { font-weight: 600; }
.hub-cs-wx-month-count { font-size: .875em; opacity: .75; }
.hub-cs-wx-month.is-empty a { opacity: .55; }

/* Temperature tint: --hub-cs-wx-h is a hue set inline from the value
   (Hub_CS_Weather::temp_hue(), blue = cold, orange-red = hot). */
.hub-cs-wx-month.has-climate a { background: hsl(var(--hub-cs-wx-h) 85% 95%); border-color: hsl(var(--hub-cs-wx-h) 60% 80%); }
.hub-cs-wx-month-weather { display: flex; align-items: center; gap: .4em; margin: .2em 0; }
.hub-cs-wx-month-day { font-size: 1.2em; white-space: nowrap; font-variant-numeric: tabular-nums; color: hsl(var(--hub-cs-wx-h) 70% 32%); }
.hub-cs-wx-month-night { font-size: .875em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hub-cs-wx-sky { flex: none; }
.hub-cs-weather .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hub-cs-wx-chart { margin: 0 0 1.5em; padding: 1em 1em .5em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; }
.hub-cs-wx-chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.hub-cs-wx-chart .grid { stroke: currentColor; stroke-opacity: .12; }
.hub-cs-wx-chart .axis { font-size: 12px; fill: currentColor; fill-opacity: .6; }
.hub-cs-wx-chart .month { font-size: 13px; fill: currentColor; font-weight: 600; }
.hub-cs-wx-chart a:hover .month, .hub-cs-wx-chart a:focus .month { fill: var(--hub-cs-accent, currentColor); text-decoration: underline; }
.hub-cs-wx-chart .band { stroke-width: 1.5; stroke-linejoin: round; }
.hub-cs-wx-chart .band.day { fill: #fb923c; fill-opacity: .35; stroke: #ea580c; }
.hub-cs-wx-chart .band.night { fill: #60a5fa; fill-opacity: .3; stroke: #2563eb; }
.hub-cs-wx-chart .range { stroke-width: 6; stroke-linecap: round; stroke-opacity: 0; }
.hub-cs-wx-chart .range:hover { stroke-opacity: .5; }
.hub-cs-wx-chart .range.day { stroke: #ea580c; }
.hub-cs-wx-chart .range.night { stroke: #2563eb; }
.hub-cs-wx-chart rect.rain { fill: #7cb6ec; fill-opacity: .55; }
.hub-cs-wx-chart figcaption { display: flex; flex-wrap: wrap; gap: .4em 1.25em; font-size: .85em; opacity: .85; padding-top: .25em; }
.hub-cs-wx-chart .key::before { content: ""; display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: .4em; vertical-align: middle; }
.hub-cs-wx-chart .key.day::before { background: #fb923c; height: 10px; }
.hub-cs-wx-chart .key.night::before { background: #60a5fa; height: 10px; }
.hub-cs-wx-chart .key.rain::before { background: #7cb6ec; height: 10px; }

.hub-cs-wx-temp { display: inline-block; min-width: 2.8em; padding: .1em .55em; border-radius: 6px; text-align: center; background: hsl(var(--hub-cs-wx-h) 85% 93%); color: hsl(var(--hub-cs-wx-h) 70% 28%); font-weight: 600; }
.hub-cs-wx-rain-cell { white-space: nowrap; }
.hub-cs-wx-rain-bar { display: inline-block; width: 70px; height: 8px; margin-right: .6em; border-radius: 4px; vertical-align: middle; background: color-mix(in srgb, #7cb6ec 20%, transparent); overflow: hidden; }
.hub-cs-wx-rain-bar span { display: block; height: 100%; border-radius: 4px; background: #5aa2e6; }

.hub-cs-wx-map-wrap { margin: 0 0 1.5em; }
.hub-cs-wx-map { height: 420px; border-radius: 10px; overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); z-index: 0; }
.hub-cs-wx-map-wrap figcaption { font-size: .85em; opacity: .75; margin-top: .4em; }
.hub-cs-wx-pin { background: none; border: 0; }
.hub-cs-wx-pin span { display: inline-block; padding: 2px 8px; border-radius: 999px; font: 600 13px/1.4 system-ui, sans-serif; white-space: nowrap; background: hsl(var(--hub-cs-wx-h) 85% 92%); color: hsl(var(--hub-cs-wx-h) 75% 25%); border: 2px solid hsl(var(--hub-cs-wx-h) 70% 55%); box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }

@media (max-width: 600px) {
    .hub-cs-wx-map { height: 320px; }
    .hub-cs-wx-rain-bar { width: 40px; }
    .hub-cs-wx-chart { padding: .5em .25em .25em; }
    .hub-cs-wx-table th, .hub-cs-wx-table td { padding: .25em .4em; font-size: .9em; }
}

/* Main region with subregions: one card per subregion, a strip of 12 months with the day range. */
.hub-cs-wx-subnav { font-size: .95em; margin: 0 0 1em; }
.hub-cs-wx-subregions { display: grid; gap: 1em; margin: 1.25em 0; }
.hub-cs-wx-subregion { padding: .9em 1em; border: 1px solid color-mix(in srgb, currentColor 15%, transparent); border-radius: 10px; }
.hub-cs-wx-subregion h2 { font-size: 1.1em; margin: 0 0 .6em; }
.hub-cs-wx-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.hub-cs-wx-strip li { margin: 0; border-radius: 6px; text-align: center; line-height: 1.25; background: color-mix(in srgb, currentColor 5%, transparent); }
.hub-cs-wx-strip li.has-climate { background: hsl(var(--hub-cs-wx-h) 85% 50% / .22); }
.hub-cs-wx-strip li > a, .hub-cs-wx-strip li > span:first-child { display: block; }
.hub-cs-wx-strip a, .hub-cs-wx-strip li { color: inherit; text-decoration: none; padding: .35em .1em; }
.hub-cs-wx-strip li:has(> a) { padding: 0; }
.hub-cs-wx-strip a:hover, .hub-cs-wx-strip a:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; border-radius: 6px; }
.hub-cs-wx-strip-month { display: block; font-size: .75em; opacity: .75; }
.hub-cs-wx-strip-temp { display: block; font-size: .85em; font-weight: 600; white-space: nowrap; }
.hub-cs-wx-strip li.is-empty .hub-cs-wx-strip-temp { font-weight: 400; opacity: .5; }
@media (max-width: 760px) { .hub-cs-wx-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 420px) { .hub-cs-wx-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Month page: "Sprawdź oferty" under the description jumps to the offers. */
.hub-cs-wx-to-offers { margin: 1em 0 1.5em; }
.hub-cs-weather .hub-cs-wx-to-offers .hub-cs-btn { display: inline-block; padding: .7em 1.6em; font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: 8px; }
.hub-cs-wx-offers-anchor { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: no-preference) { html:has(.hub-cs-weather-month) { scroll-behavior: smooth; } }

/* Phone: port, day, night, water and rain must fit without scrolling sideways. */
@media (max-width: 480px) {
    .hub-cs-wx-table .hub-cs-wx-col-cruises, .hub-cs-wx-rain-bar, .hub-cs-wx-table .hub-cs-wx-wide { display: none; }
    .hub-cs-wx-table .hub-cs-wx-temp { min-width: 0; padding: .1em .35em; }
    .hub-cs-wx-table th, .hub-cs-wx-table td { padding: .25em .25em; }
    .hub-cs-wx-table thead th { font-size: .7em; letter-spacing: 0; white-space: normal; }
}