.hv4001-weather-widget,
.hv4001-weather-widget * { box-sizing: border-box; }
.hv4001-weather-widget {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  container-name: hv4001-weather;
  container-type: inline-size;
  margin: 0 0 1.25rem;
  color: #202124;
  font: inherit;
  line-height: 1.55;
}
.hv4001-weather-status {
  --hv4001-ink: #202124;
  --hv4001-border: #64748b;
  --hv4001-background: #f3f5f7;
  --hv4001-icon-bg: #ffffff;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--hv4001-border);
  border-left-width: 6px;
  border-radius: 10px;
  background: var(--hv4001-background);
  color: var(--hv4001-ink);
  padding: 18px 20px;
  overflow-wrap: anywhere;
}
.hv4001-weather-status--green {
  --hv4001-border: #16804a;
  --hv4001-background: #eef8f1;
  --hv4001-icon-bg: #d8f1df;
}
.hv4001-weather-status--yellow {
  --hv4001-border: #c28b00;
  --hv4001-background: #fff8d9;
  --hv4001-icon-bg: #ffed9c;
}
.hv4001-weather-status--orange {
  --hv4001-border: #c65b00;
  --hv4001-background: #fff0e2;
  --hv4001-icon-bg: #ffdab8;
}
.hv4001-weather-status--red {
  --hv4001-border: #b4232f;
  --hv4001-background: #fff0f0;
  --hv4001-icon-bg: #ffd6d8;
}
.hv4001-weather-status--unavailable {
  --hv4001-border: #727a84;
  --hv4001-background: #f2f3f5;
  --hv4001-icon-bg: #e0e3e7;
}
.hv4001-weather-status-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 12px;
}
.hv4001-weather-status-icon {
  display: inline-flex;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  min-width: 0;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--hv4001-icon-bg);
  color: var(--hv4001-border);
  font-size: 24px;
  font-weight: 800;
}
.hv4001-weather-status-title { grid-column: 2; grid-row: 1; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.hv4001-weather-kicker {
  margin: 0 0 2px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.3;
  opacity: .78;
}
.hv4001-weather-status h2 {
  margin: 0;
  font-size: clamp(1.08rem, 2.2vw, 1.35rem);
  font-weight: 750;
  line-height: 1.25;
}
.hv4001-weather-subtitle { margin: 4px 0 0; font-size: .9rem; opacity: .85; }
.hv4001-weather-level-pill {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  min-width: 0;
  max-width: 100%;
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid var(--hv4001-border);
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.hv4001-weather-level-pill--none { font-weight: 700; }
.hv4001-weather-status p { margin: 7px 0 0; }
.hv4001-weather-none-copy { font-size: .98rem; }
.hv4001-weather-alert-summary {
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 12px;
  overflow: visible;
}
.hv4001-weather-events {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 0;
}
/* Each alert repeats the complete status card, including heading, detail and KNMI footer. */
.hv4001-weather-alert-card { margin: 0; }
.hv4001-weather-alert-copy { min-width: 0; }
.hv4001-weather-alert-copy h3 { margin: 0 0 4px; font-size: 1.04rem; line-height: 1.35; }
.hv4001-weather-alert-copy > p { margin-top: 7px; }
.hv4001-weather-alert-copy > .hv4001-weather-event-level { margin: 0 0 3px !important; }
/* Every warning is its own full card; there is no shared coloured panel around them. */
.hv4001-weather-event {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--hv4001-event-border);
  border-left-width: 6px;
  border-radius: 10px;
  background: var(--hv4001-event-background) !important;
  background-color: var(--hv4001-event-background) !important;
  color: #202124;
  box-shadow: none;
  overflow-wrap: anywhere;
}
.hv4001-weather-event--yellow { --hv4001-event-border: #c28b00; --hv4001-event-background: #fff8d9; }
.hv4001-weather-event--orange { --hv4001-event-border: #c65b00; --hv4001-event-background: #fff0e2; }
.hv4001-weather-event--red { --hv4001-event-border: #b4232f; --hv4001-event-background: #fff0f0; }
/* Keep the entire warning (heading, time and text) on the warning's colour, not on theme-injected white panels. */
.hv4001-weather-widget .hv4001-weather-alert-card :not(.hv4001-weather-status-icon):not(.hv4001-weather-level-pill) { background-color: transparent !important; }
.hv4001-weather-event h3 { margin: 0 0 4px; font-size: 1.04rem; line-height: 1.35; }
.hv4001-weather-event-level { margin: 0 0 3px !important; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.hv4001-weather-time { font-size: .88rem; font-weight: 650; }
.hv4001-weather-area { font-size: .9rem; }
.hv4001-weather-advice { padding-top: 7px; border-top: 1px solid rgba(32,33,36,.13); }
.hv4001-weather-more { font-size: .87rem; }
.hv4001-weather-stale { border-left: 3px solid #9b5b00; background: rgba(255,255,255,.65); padding: 8px 10px; font-size: .88rem; }
.hv4001-weather-footer {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 14px;
  padding-top: 9px;
  border-top: 1px solid rgba(32,33,36,.15);
  font-size: .78rem;
}
.hv4001-weather-footer > *,
.hv4001-weather-footer a { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.hv4001-weather-footer a { color: #174f91; text-decoration: underline; }
.hv4001-weather-updated { flex-basis: 100%; opacity: .8; }
/* Container queries respond to Elementor columns, not only to the browser viewport. */
@container hv4001-weather (max-width: 600px) {
  .hv4001-weather-status { padding: 14px; border-left-width: 5px; }
  .hv4001-weather-event { padding: 13px 14px; }
  .hv4001-weather-status-head {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 9px 10px;
  }
  .hv4001-weather-status-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 21px;
  }
  .hv4001-weather-status-title { grid-column: 2; grid-row: 1; }
  .hv4001-weather-status h2 { font-size: 1.12rem; line-height: 1.28; }
  .hv4001-weather-subtitle { font-size: .84rem; }
  .hv4001-weather-level-pill {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    margin: 0;
    max-width: 100%;
    font-size: .68rem;
  }
}
@container hv4001-weather (max-width: 420px) {
  .hv4001-weather-status { padding: 12px; }
  .hv4001-weather-none-copy { font-size: .92rem; }
  .hv4001-weather-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: .76rem;
  }
  .hv4001-weather-updated { flex-basis: auto; }
  .hv4001-weather-history { padding: 8px; }
}
@media (max-width: 600px) {
  .hv4001-weather-status { padding: 14px; }
  .hv4001-weather-event { padding: 13px 14px; }
}


/* Compact, expandable local history of previous versions of the same active warning. */
.hv4001-weather-history {
  margin: 12px 0 2px;
  padding: 8px 11px;
  border: 1px solid rgba(32,33,36,.18);
  border-radius: 7px;
  background: rgba(255,255,255,.28);
  color: inherit;
  font-size: .86rem;
}
.hv4001-weather-history > summary {
  cursor: pointer;
  font-weight: 750;
  line-height: 1.45;
}
.hv4001-weather-history > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hv4001-weather-history-list { margin: 7px 0 0; padding-left: 1.25rem; }
.hv4001-weather-history-item { padding: 7px 0; }
.hv4001-weather-history-item + .hv4001-weather-history-item { border-top: 1px solid rgba(32,33,36,.14); }
.hv4001-weather-history-item > strong,
.hv4001-weather-history-time,
.hv4001-weather-history-description { display: block; }
.hv4001-weather-history-time { margin-top: 2px; font-weight: 650; }
.hv4001-weather-history-description { margin-top: 3px; white-space: normal; }
.hv4001-weather-history-item > small { display: block; margin-top: 4px; opacity: .78; font-size: .77rem; }

.hv4001-weather-history-empty { margin: 7px 0 1px !important; font-size: .82rem; opacity: .82; }


/* Compact header summary. The whole card is a link to the full warning page. */
.hv4001-weather-compact-wrap,
.hv4001-weather-compact,
.hv4001-weather-compact * { box-sizing: border-box; }
.hv4001-weather-compact-wrap { width: 100%; min-width: 0; max-width: 100%; margin: 0; container-name: hv4001-compact; container-type: inline-size; }
.hv4001-weather-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--hv4001-compact-border, #727a84);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--hv4001-compact-background, #f2f3f5) !important;
  color: #202124 !important;
  font: inherit;
  line-height: 1.3;
  text-decoration: none !important;
  box-shadow: none;
  overflow: hidden;
  transition: filter .15s ease, box-shadow .15s ease;
}
.hv4001-weather-compact:hover,
.hv4001-weather-compact:focus-visible {
  color: #202124 !important;
  filter: brightness(.985);
  text-decoration: none !important;
  box-shadow: 0 0 0 2px rgba(32,33,36,.12);
}
.hv4001-weather-compact:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.hv4001-weather-compact--yellow { --hv4001-compact-border: #c28b00; --hv4001-compact-background: #fff8d9; }
.hv4001-weather-compact--orange { --hv4001-compact-border: #c65b00; --hv4001-compact-background: #fff0e2; }
.hv4001-weather-compact--red { --hv4001-compact-border: #b4232f; --hv4001-compact-background: #fff0f0; }
.hv4001-weather-compact--green { --hv4001-compact-border: #16804a; --hv4001-compact-background: #eef8f1; }
.hv4001-weather-compact--unavailable { --hv4001-compact-border: #727a84; --hv4001-compact-background: #f2f3f5; }
.hv4001-weather-compact-icon {
  display: inline-flex;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.72) !important;
  color: var(--hv4001-compact-border);
  font-size: 18px;
  font-weight: 800;
}
.hv4001-weather-compact-copy { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 2px; background: transparent !important; }
.hv4001-weather-compact-kicker { font-size: .62rem; font-weight: 800; letter-spacing: .08em; opacity: .78; }
.hv4001-weather-compact-heading { display: block; font-size: .91rem; font-weight: 800; line-height: 1.25; }
.hv4001-weather-compact-summary { display: block; min-width: 0; font-size: .78rem; line-height: 1.3; overflow-wrap: anywhere; }
.hv4001-weather-compact-extra { display: block; font-size: .7rem; opacity: .78; }
.hv4001-weather-compact-cta { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; font-size: .72rem; font-weight: 750; white-space: nowrap; }
@media (max-width: 600px) {
  .hv4001-weather-compact { gap: 8px; padding: 8px 9px; }
  .hv4001-weather-compact-icon { flex-basis: 26px; width: 26px; height: 26px; font-size: 16px; }
  .hv4001-weather-compact-cta { font-size: .68rem; white-space: normal; text-align: right; max-width: 84px; }
  .hv4001-weather-compact-summary { font-size: .74rem; }
}


@container hv4001-compact (max-width: 420px) {
  .hv4001-weather-compact { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
  .hv4001-weather-compact-copy { flex: 1 1 calc(100% - 40px); }
  .hv4001-weather-compact-cta { margin-left: 34px; white-space: normal; text-align: left; max-width: calc(100% - 34px); }
}


/* Local weather and daily forecast widget (v1.8.7). */
.hv4001-local-weather,
.hv4001-local-weather * { box-sizing: border-box; }
.hv4001-local-weather {
  --hv4001-local-ink: #172b4d;
  --hv4001-local-muted: #60708a;
  --hv4001-local-line: #e1e8f1;
  --hv4001-local-blue: #285ca8;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 0 1.5rem;
  container-name: hv4001-local-weather;
  container-type: inline-size;
  overflow-wrap: anywhere;
  color: var(--hv4001-local-ink);
  font: inherit;
  line-height: 1.5;
  letter-spacing: normal;
}
.hv4001-local-weather__header {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 10px 20px;
  margin: 0 0 10px;
}
.hv4001-local-weather__updated {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 6px;
  color: var(--hv4001-local-muted);
  font-size: .78rem;
  line-height: 1.4;
}
.hv4001-local-weather__updated::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: #24a26a;
  box-shadow: 0 0 0 3px #e3f6ec;
}
.hv4001-local-weather__current {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(18px, 3.5vw, 28px);
  border: 1px solid #1e477d;
  border-radius: 20px;
  background: linear-gradient(120deg, #102b50 0%, #194477 58%, #2867a2 100%);
  color: #fff;
  box-shadow: 0 12px 28px rgba(26, 61, 105, .14);
  transition: background 1.1s ease, border-color 1.1s ease, box-shadow 1.1s ease;
}
/* Daypart palettes stay dark enough for clear white text and adapt automatically to Dutch local time. */
.hv4001-local-weather--morning .hv4001-local-weather__current {
  border-color: #854d0e;
  background: linear-gradient(120deg, #713f12 0%, #92400e 58%, #a84b12 100%);
  box-shadow: 0 12px 28px rgba(146, 64, 14, .17);
}
.hv4001-local-weather--day .hv4001-local-weather__current {
  border-color: #075985;
  background: linear-gradient(120deg, #0c4a6e 0%, #075985 58%, #0369a1 100%);
  box-shadow: 0 12px 28px rgba(3, 105, 161, .16);
}
.hv4001-local-weather--evening .hv4001-local-weather__current {
  border-color: #581c87;
  background: linear-gradient(120deg, #3b0764 0%, #581c87 58%, #6b21a8 100%);
  box-shadow: 0 12px 28px rgba(88, 28, 135, .18);
}
.hv4001-local-weather--night .hv4001-local-weather__current {
  border-color: #1e293b;
  background: linear-gradient(120deg, #0b1226 0%, #172554 58%, #263b68 100%);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .2);
}
.hv4001-local-weather__current::before,
.hv4001-local-weather__current::after {
  position: absolute;
  z-index: -1;
  display: block;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.hv4001-local-weather__current::before { top: -110px; right: -60px; width: 280px; height: 280px; }
.hv4001-local-weather__current::after { top: -65px; right: -15px; width: 190px; height: 190px; }
.hv4001-local-weather__datetime {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  font-size: .84rem;
  font-weight: 650;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.hv4001-local-weather__main { display: flex; align-items: center; gap: 16px; min-width: 0; max-width: 100%; }
.hv4001-local-weather__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 86px;
  height: 86px;
  flex: 0 0 86px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 23px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  font-size: 53px;
  line-height: 1;
}
.hv4001-local-weather__main > div { min-width: 0; }
.hv4001-local-weather__temp {
  color: #fff;
  font-size: clamp(3.3rem, 7vw, 4.65rem);
  font-weight: 800;
  letter-spacing: -.075em;
  line-height: .98;
  font-variant-numeric: tabular-nums;
}
.hv4001-local-weather__condition { margin-top: 8px; color: rgba(255,255,255,.92); font-size: 1.02rem; font-weight: 650; }
.hv4001-local-weather__feels { margin: 16px 0 19px; color: rgba(255,255,255,.82); font-size: .88rem; }
.hv4001-local-weather__feels strong { color: #fff; font-weight: 750; }
.hv4001-local-weather__metrics {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.hv4001-local-weather__metrics > div {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.075);
}
.hv4001-local-weather__metrics span { display: block; min-width: 0; max-width: 100%; color: rgba(255,255,255,.78); font-size: .72rem; line-height: 1.35; white-space: normal !important; overflow-wrap: anywhere; }
.hv4001-local-weather__metrics strong { color: #fff; font-size: .88rem; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hv4001-local-weather__forecast-heading {
  display: flex;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  align-items: center;
  gap: 10px;
  margin: 27px 0 12px;
  color: var(--hv4001-local-ink);
  font-size: clamp(1.08rem, 2vw, 1.3rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.hv4001-local-weather__forecast-heading::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--hv4001-local-line); }
.hv4001-local-weather__days { display: grid; width: 100%; min-width: 0; max-width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.hv4001-local-weather__day {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 16px 12px 14px;
  border: 1px solid var(--hv4001-local-line);
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 3px 10px rgba(27, 54, 87, .035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hv4001-local-weather__day:hover { transform: translateY(-2px); border-color: #b8cde7; box-shadow: 0 9px 20px rgba(27, 54, 87, .075); }
.hv4001-local-weather__day h4 { margin: 0 0 9px; color: var(--hv4001-local-ink); font-size: .85rem; font-weight: 800; line-height: 1.3; }
.hv4001-local-weather__day-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 7px;
  border-radius: 17px;
  background: #f0f6fd;
  font-size: 31px;
  line-height: 1;
}
.hv4001-local-weather__day-condition { min-height: 2.5em; margin: 0 0 10px; color: var(--hv4001-local-muted); font-size: .76rem; line-height: 1.35; }
.hv4001-local-weather__day-temps { display: flex; min-width: 0; max-width: 100%; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 10px 0; border-top: 1px solid #edf1f6; border-bottom: 1px solid #edf1f6; font-size: 1.06rem; font-variant-numeric: tabular-nums; }
.hv4001-local-weather__day-temps strong { color: var(--hv4001-local-ink); font-weight: 800; }
.hv4001-local-weather__day-temps span { color: #8090a6; font-weight: 600; }
.hv4001-local-weather__day-detail { margin: 10px 0 0; color: #33455f; font-size: .72rem; line-height: 1.45; }
.hv4001-local-weather__day-detail strong { color: var(--hv4001-local-ink); font-weight: 750; }
.hv4001-local-weather__day-detail span { color: var(--hv4001-local-muted); }
.hv4001-local-weather__footer { margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--hv4001-local-line); color: var(--hv4001-local-muted); font-size: .74rem; line-height: 1.55; }
.hv4001-local-weather a { color: #205ca6; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.hv4001-local-weather a:hover { color: #123c70; }
.hv4001-local-weather a:focus-visible { outline: 2px solid #3678c5; outline-offset: 3px; border-radius: 2px; }
.hv4001-local-weather__stale { margin: 0 0 12px; padding: 11px 14px; border: 1px solid #f0d48a; border-left: 4px solid #b7791f; border-radius: 10px; background: #fff9e9; color: #71480a; font-size: .85rem; line-height: 1.5; }
.hv4001-local-weather--unavailable { padding: 20px; border: 1px solid #e0e7ef; border-radius: 16px; background: linear-gradient(135deg, #f8fafc, #eef4fa); color: var(--hv4001-local-ink); }
.hv4001-local-weather--unavailable p { margin: 6px 0 0; }
@media (max-width: 1000px) {
  .hv4001-local-weather__days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hv4001-local-weather__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hv4001-local-weather__header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hv4001-local-weather__current { padding: 17px; border-radius: 16px; }
  .hv4001-local-weather__main { gap: 13px; }
  .hv4001-local-weather__icon { width: 62px; height: 62px; flex-basis: 62px; border-radius: 17px; font-size: 39px; }
  .hv4001-local-weather__temp { font-size: clamp(2.9rem, 13vw, 3.7rem); }
  .hv4001-local-weather__condition { font-size: .93rem; }
  .hv4001-local-weather__feels { margin: 15px 0; font-size: .83rem; }
  .hv4001-local-weather__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 13px; }
  .hv4001-local-weather__metrics > div { padding: 10px; }
  .hv4001-local-weather__days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .hv4001-local-weather__day { padding: 13px 10px 12px; border-radius: 14px; }
  .hv4001-local-weather__day-condition { font-size: .75rem; }
}
@media (max-width: 360px) {
  .hv4001-local-weather__days { grid-template-columns: minmax(0, 1fr); }
  .hv4001-local-weather__day { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; text-align: left; }
  .hv4001-local-weather__day h4 { grid-column: 2 / 4; margin: 0; }
  .hv4001-local-weather__day-icon { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; border-radius: 13px; font-size: 26px; }
  .hv4001-local-weather__day-condition { grid-column: 2 / 4; min-height: 0; margin: 0; }
  .hv4001-local-weather__day-temps { grid-column: 1 / 4; justify-content: flex-start; margin-top: 6px; }
  .hv4001-local-weather__day-detail { grid-column: 1 / 4; margin-top: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv4001-local-weather__current,
  .hv4001-local-weather__day { transition: none; }
  .hv4001-local-weather__day:hover { transform: none; }
}


/* Responsive layout is based on the widget's own width, not the browser viewport.
   This keeps the cards inside Elementor / WordPress two-column layouts. */
@container hv4001-local-weather (max-width: 820px) {
  .hv4001-local-weather__current { padding: 22px; border-radius: 18px; }
  .hv4001-local-weather__metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hv4001-local-weather__metrics > div { padding: 10px; }
  .hv4001-local-weather__days { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .hv4001-local-weather__day { padding: 14px 10px 12px; }
  .hv4001-local-weather__day-temps { gap: 5px 8px; font-size: 1rem; }
}
@container hv4001-local-weather (max-width: 560px) {
  .hv4001-local-weather__current { padding: 17px; border-radius: 16px; }
  .hv4001-local-weather__main { gap: 12px; }
  .hv4001-local-weather__icon { width: 62px; height: 62px; flex-basis: 62px; border-radius: 17px; font-size: 39px; }
  .hv4001-local-weather__temp { font-size: clamp(2.75rem, 10cqi, 3.6rem); }
  .hv4001-local-weather__condition { font-size: .93rem; }
  .hv4001-local-weather__feels { margin: 14px 0; font-size: .83rem; }
  .hv4001-local-weather__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 13px; }
  .hv4001-local-weather__metrics > div { padding: 10px; }
  .hv4001-local-weather__metrics span { font-size: .72rem; }
  .hv4001-local-weather__metrics strong { font-size: .84rem; }
  .hv4001-local-weather__days { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .hv4001-local-weather__day { padding: 13px 10px 12px; border-radius: 14px; }
  .hv4001-local-weather__day-condition { font-size: .75rem; }
  .hv4001-local-weather__day-detail { overflow-wrap: anywhere; }
}
@container hv4001-local-weather (max-width: 360px) {
  .hv4001-local-weather__current { padding: 14px; }
  .hv4001-local-weather__datetime { font-size: .79rem; }
  .hv4001-local-weather__icon { width: 54px; height: 54px; flex-basis: 54px; font-size: 34px; }
  .hv4001-local-weather__temp { font-size: 2.8rem; }
  .hv4001-local-weather__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .hv4001-local-weather__metrics > div { padding: 9px 8px; }
  .hv4001-local-weather__metrics span { font-size: .68rem; }
  .hv4001-local-weather__metrics strong { font-size: .8rem; }
  .hv4001-local-weather__days { grid-template-columns: minmax(0, 1fr); }
  .hv4001-local-weather__day { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 3px 10px; text-align: left; }
  .hv4001-local-weather__day h4 { grid-column: 2 / 4; margin: 0; }
  .hv4001-local-weather__day-icon { grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; margin: 0; border-radius: 13px; font-size: 26px; }
  .hv4001-local-weather__day-condition { grid-column: 2 / 4; min-height: 0; margin: 0; }
  .hv4001-local-weather__day-temps { grid-column: 1 / 4; justify-content: flex-start; margin-top: 6px; }
  .hv4001-local-weather__day-detail { grid-column: 1 / 4; margin-top: 5px; }
}


/* Fallback for older browsers without container-query support. */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .hv4001-weather-status-head {
      grid-template-columns: 38px minmax(0, 1fr);
      align-items: start;
      gap: 9px 10px;
    }
    .hv4001-weather-status-icon {
      grid-column: 1;
      grid-row: 1;
      align-self: start;
      width: 38px;
      height: 38px;
      font-size: 21px;
    }
    .hv4001-weather-status-title { grid-column: 2; grid-row: 1; }
    .hv4001-weather-status h2 { font-size: 1.12rem; line-height: 1.28; }
    .hv4001-weather-subtitle { font-size: .84rem; }
    .hv4001-weather-level-pill {
      grid-column: 2;
      grid-row: 2;
      justify-self: start;
      align-self: start;
      margin: 0;
      max-width: 100%;
      font-size: .68rem;
    }
    .hv4001-weather-footer { flex-direction: column; align-items: flex-start; gap: 5px; }
    .hv4001-weather-updated { flex-basis: auto; }
  }
  @media (max-width: 420px) {
    .hv4001-weather-status { padding: 12px; }
    .hv4001-weather-footer { font-size: .76rem; }
    .hv4001-weather-history { padding: 8px; }
    .hv4001-weather-compact { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
    .hv4001-weather-compact-copy { flex: 1 1 calc(100% - 40px); }
    .hv4001-weather-compact-cta { margin-left: 34px; white-space: normal; text-align: left; max-width: calc(100% - 34px); }
  }
}