/*
 * WEATHER-TEMPLATE visual adaptation only.
 * Original reference: WEATHER-TEMPLATE/css/style.css from the user-supplied ZIP.
 * Scoped to app/editorial components: never load the template's global
 * resets, Bootstrap, jQuery or other plugins over the Leaflet map.
 *
 * The Renner WOFF2 is intentionally NOT stored in Git. If the font's website
 * embedding rights are confirmed, a locally installed, licensed copy at
 * wwwroot/fonts/Renner_400Book.woff2 activates the original heading face.
 * Encode Sans Condensed remains the self-contained fallback.
 */
@font-face {
  font-family: 'Radar Renner';
  src: url('/fonts/Renner_400Book.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --template-heading: 'Radar Renner', 'Encode Sans Condensed', sans-serif;
  --template-body: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
  --template-sky: #00aef5;
  --template-violet: #5846d1;
  --template-navy: #071a47;
  --template-ink: #181818;
}

body { font-family: var(--template-body); }

/* Editorial headlines follow the template's Renner hierarchy while retaining
   the existing semantic headings and accessible page structure. */
.public-home-intro h1,
.public-home-details h2,
.editorial-article h1,
.editorial-section h2,
.editorial-explore h2,
.editorial-brand,
.panel-heading strong,
.live-card strong,
.nowcast-card__heading strong,
.traffic-card__heading strong,
.nowcast-popup__heading strong,
.traffic-popup__heading strong,
.station-popup__heading strong,
.timeline-copy strong,
.brand-copy strong {
  font-family: var(--template-heading);
  letter-spacing: -.015em;
}

.public-home-intro h1 {
  color: var(--template-ink);
  font-size: clamp(31px, 3.55vw, 44px);
  font-weight: 600;
  line-height: 1.18;
}

.public-home-intro p,
.public-home-details p,
.editorial-article p { color: #333; }

.public-home-intro nav a,
.editorial-header nav a,
.product-nav__item {
  font-family: var(--template-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
.public-home-intro nav a {
  border-color: rgba(0, 174, 245, .21);
  box-shadow: 0 3px 12px rgba(7, 26, 71, .035);
  transition: background-color .18s ease, border-color .18s ease;
}
.public-home-intro nav a:hover,
.public-home-intro nav a:focus-visible {
  background: #e9f8ff;
  border-color: var(--template-sky);
}
.product-nav__item:hover,
.editorial-header nav a:hover { color: var(--template-violet); }

/* Match the template's blue, gently rounded CTAs, but do not alter map
   markers, overlays, timeline geometry or the alert colour scale. */
.editorial-cta {
  background: var(--template-sky);
  border-radius: 6px;
  font-family: var(--template-heading);
  font-size: 16px;
  font-weight: 600;
  transition: background-color .18s ease, box-shadow .18s ease;
}
.editorial-cta:hover,
.editorial-cta:focus-visible {
  background: var(--template-navy);
  color: #fff;
}
.public-home-details > div,
.editorial-article,
.editorial-explore {
  border: 1px solid rgba(7, 26, 71, .065);
  box-shadow: 0 10px 28px rgba(7, 26, 71, .06);
}
.public-home-details h2,
.editorial-section h2 { font-weight: 600; }
.editorial-article h1 {
  font-weight: 600;
  line-height: 1.18;
}
.editorial-header {
  background: #fff;
  border-radius: 0 0 9px 9px;
  padding-left: 13px;
  padding-right: 13px;
}
.editorial-brand { font-size: 21px; font-weight: 600; }
.editorial-header nav a { font-size: 16px; }

.topbar {
  background: rgba(255,255,255,.97);
  border-color: rgba(7,26,71,.09);
}
.brand-copy strong { font-size: 20px; font-weight: 600; }
.product-nav__item { font-size: 15px; }
.product-nav__item.is-active { color: var(--template-violet); }
.icon-button:hover,
.seo-guide-toggle:hover {
  background: #e9f8ff;
  color: var(--template-navy);
}
.map-stage .map-expand-button {
  border-radius: 8px;
  background: var(--template-sky);
  color: #fff;
}
.map-stage .map-expand-button:hover,
.map-stage .map-expand-button:focus-visible {
  background: var(--template-navy);
  color: #fff;
}
.latest-button {
  background: var(--template-sky);
  font-family: var(--template-heading);
  font-size: 12px;
  font-weight: 600;
}
.latest-button:hover { background: var(--template-navy); }
.panel-heading strong,
.nowcast-card__heading strong,
.traffic-card__heading strong { font-weight: 600; }
@media (max-width: 880px) {
  .public-home-intro nav a { font-size: 14px; }
}
@media (max-width: 720px) {
  .public-home-intro h1 { font-size: clamp(27px, 7vw, 35px); }
  .public-home-intro nav a { font-size: 12px; }
  .brand-copy strong { font-size: 16px; }
  .editorial-brand { font-size: 19px; }
  .editorial-header nav a { font-size: 14px; }
}