/*
 * Quick Wins bundle — runtime overrides (added 2026-05-22)
 *
 * These rules mirror the SCSS edits in:
 *   - css/components/_image_blocks.scss   (caption casing)
 *   - css/components/_banners.scss        (hero shrink)
 *   - css/components/_header.scss         (alert-bar breaking variant)
 *
 * This file applies the changes immediately without requiring a sass
 * recompile. Next time `style.css` is rebuilt from SCSS the SCSS will
 * carry these same rules — this overrides file can then be deleted and
 * its <link> dequeued from functions.php (clm_quick_wins_styles).
 */

/* ---------- 01. Captions — drop ALL CAPS ---------- */
.image-caption,
.wp-caption-text {
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- 02. Alert bar — Breaking News variant ----------
 * Targets the header scrolling-ticker alert bar driven from
 * WP Admin → Theme Options → Alert Bar → Variant.
 */
.alert-bar.alert-bar--breaking,
.alert-bar--breaking {
  background-color: #B00020 !important;
}

/* ---------- 07. Weather video — inline autoplay (muted) ----------
 * Replaces the Fancybox popup pattern with an inline <video> that
 * autoplays muted, loops, and supports portrait sources (object-fit
 * cover keeps the video centred regardless of orientation).
 * Small toggle button bottom-right lets the reader unmute.
 */
.weather-card .weather-media {
  position: relative;
  background: #000;
  overflow: hidden;
}
.weather-card .weather-video-link {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
  position: relative;
}
.weather-card .weather-video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 6 / 4;  /* match neighbouring news-card images; portrait files crop to fit */
  background: #000;
}
.weather-video-expand {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.weather-card .weather-video-link:hover .weather-video-expand {
  background: rgba(0, 0, 0, 0.78);
  transform: scale(1.05);
}
.weather-video-expand svg { display: block; }

/* Fancybox modal — lighten the default near-black backdrop so the video pops */
:root {
  --fancybox-bg: rgba(15, 23, 42, 0.82);
}
.fancybox__backdrop {
  background-color: var(--fancybox-bg) !important;
}
.weather-video-sound {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 2;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
  padding: 0;
}
.weather-video-sound:hover,
.weather-video-sound:focus { background: rgba(0, 0, 0, 0.75); outline: 0; }
.weather-video-sound svg { display: block; }
.weather-video-sound .icon-unmuted { display: none; }
.weather-video-sound.is-muted .icon-muted { display: block; }
.weather-video-sound.is-muted .icon-unmuted { display: none; }
.weather-video-sound:not(.is-muted) .icon-muted { display: none; }
.weather-video-sound:not(.is-muted) .icon-unmuted { display: block; }

/* Portrait-friendly utility — opt-in via .aspect-9-16 on any element */
.aspect-9-16 { aspect-ratio: 9 / 16; }

/* ---------- 06. News topic tabs — vertical → horizontal ----------
 * Moves the .featured-news-new category list out of the left sidebar
 * into a horizontal chip row above the news cards.
 * Uses !important + tight selectors to beat .list-unstyled.cat-grid li > a
 * which otherwise strips the chip styling (padding/border/text-decoration).
 */
.featured-news-new__nav-row {
  margin-top: 1rem !important;
  margin-bottom: 3.2rem !important;
}
.featured-news-new__nav-row > [class*="col-"] { padding-top: 0; padding-bottom: 0; }
.featured-news-new__nav-row .text-blue {
  font-size: 3rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
}

.featured-news-new ul.cat-grid--horizontal,
.featured-news-new .list-unstyled.cat-grid--horizontal {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 1.2rem 1rem !important;  /* 12px row gap (extra breathing between rows) · 10px column gap */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}
.featured-news-new .cat-grid--horizontal > li {
  margin: 0 !important;
  padding: 0 !important;
}
/* Chip — restore button styling that .list-unstyled.cat-grid li>a strips */
.featured-news-new .cat-grid--horizontal > li > a,
.featured-news-new .cat-grid--horizontal .pale-blue-outline-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 0 !important;
  border: 2px solid #94A8C2 !important;
  background-color: transparent !important;
  color: #94A8C2 !important;
  border-radius: 2px !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.featured-news-new .cat-grid--horizontal > li > a:hover,
.featured-news-new .cat-grid--horizontal .pale-blue-outline-btn:hover,
.featured-news-new .cat-grid--horizontal > li > a:focus {
  color: #fff !important;
  background-color: #94A8C2 !important;
  text-decoration: none !important;
}
@media (max-width: 1199.98px) {
  .featured-news-new .cat-grid--horizontal > li > a,
  .featured-news-new .cat-grid--horizontal .pale-blue-outline-btn {
    padding: 0.5rem 1.1rem !important;
    font-size: 1.1rem !important;
  }
}

/* ---------- 05. More Headlines (text-only row between news + videos) ----------
 * 3 text-only cards in a row on desktop, stacked on mobile.
 * Meta (kicker + date) styled to match existing news-card meta
 * (#6e6e70, uppercase, light weight).
 * NOTE: theme uses font-size: 62.5% rem reset → 1rem = 10px.
 */
.more-headlines {
  padding-top: 1rem;
  padding-bottom: 4rem;
}
.more-headlines__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.more-headlines__card {
  padding: 0.4rem 2rem 0.8rem;
  border-left: 1px solid #d9dde3;
}
.more-headlines__card:first-child {
  padding-left: 0;
  border-left: 0;
}
.more-headlines__kicker {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0;
  color: #6e6e70;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.more-headlines__headline {
  /* No font-size here — the element carries Bootstrap's `fs-4` class so it
     always matches the picture-card titles, which `fs-4 !important` governs. */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.more-headlines__headline a {
  color: #0b1c3d;
  text-decoration: none;
}
.more-headlines__meta {
  font-size: 1.25rem;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #6e6e70;
}
@media (max-width: 991.98px) {
  .more-headlines__cards {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .more-headlines__card {
    padding: 1.4rem 0;
    border-left: 0;
    border-top: 1px solid #d9dde3;
  }
  .more-headlines__card:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* ---------- 04. News-tip CTA (in-article shortcode banner) ----------
 * Full-bleed blue banner — matches Olivia's reference design.
 * Single centered line: lead text + bold link with last word underlined.
 * !important used because this file is an explicit overrides layer that
 * must beat the more-specific article-content rules.
 */
.news-tip-cta,
aside.news-tip-cta {
  display: block !important;
  background-color: #1F50B0 !important;
  color: #fff !important;
  padding: 7rem 2rem !important;     /* ~70px — theme uses 62.5% rem reset */
  margin: 4rem calc(50% - 50vw) !important;  /* break out full-bleed */
  text-align: center !important;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 2.4rem !important;      /* ~24px */
  line-height: 1.4 !important;
  letter-spacing: 0.005em !important;
  border: 0 !important;
}
.news-tip-cta__text {
  font-weight: 400 !important;
  margin-right: 0.4em !important;
  color: #fff !important;
}
.news-tip-cta__link,
.news-tip-cta__link:visited,
a.news-tip-cta__link {
  color: #fff !important;
  text-decoration: none !important;
}
.news-tip-cta__link strong { font-weight: 700 !important; }
.news-tip-cta__link-here {
  text-decoration: underline !important;
  text-underline-offset: 5px !important;
  text-decoration-thickness: 2px !important;
}
.news-tip-cta__link:hover,
.news-tip-cta__link:focus,
a.news-tip-cta__link:hover {
  color: #fff !important;
  opacity: 0.92;
  text-decoration: none !important;
}
.news-tip-cta__link:hover .news-tip-cta__link-here {
  text-decoration: underline !important;
}
@media (max-width: 600px) {
  .news-tip-cta,
  aside.news-tip-cta {
    padding: 3.5rem 1.5rem !important;  /* ~35px */
    font-size: 1.7rem !important;       /* ~17px */
    line-height: 1.5 !important;
  }
}

/* ---------- 03. Hero — reduce vertical footprint ---------- */
.hero-banner {
  padding-top: 10rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 992px) {
  .hero-banner {
    min-height: 340px;
  }
}
@media (max-width: 767.98px) {
  .hero-banner {
    padding-top: 14rem;
    padding-bottom: 0;
  }
}