:root{
      --accent:#D6336C; /* radio warm accent */
      --dark:#ced4d4;
      --muted:#edebf3;
    }
    body{ background:#005900; color:#cccfdf; padding-top:72px; }
    .navbar{ background: linear-gradient(90deg,#071427 0%, #071427 100%); }
    .nav-link{ color: lab(86.5% 17.4 -20.26) !important; }
 .hero{
    position:relative;
    /* responsive hero height: scales with viewport but stays within sensible bounds */
    min-height: clamp(240px, 35vh, 420px);
    border-radius:10px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding: clamp(1rem, 2.5vw, 2rem);
    background:linear-gradient(180deg, rgba(3,7,18,0.0), rgba(3,7,18,0.3));
  }

/* Make images respond fluidly site-wide (covers read covers, news covers, ads, about images) */
img, .read-cover, .news-cover, .ads-canvas img, #aboutGrid img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure cards and grids don't overflow on small screens */
.card, .about-card, #newsGrid .card, #aboutGrid .card {
  width: 100%;
 box-sizing: border-box;
}

/* navbar logo responsive */
.navbar-brand img { height: auto; max-height: 44px; max-width: 100%; }

/* Tweak hero content spacing on very small screens */
@media (max-width: 420px) {
  .hero { padding: 1rem; min-height: 220px; }
 .daily-msg { left: 12px; top: 12px; }
}
  .hero-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
    filter:brightness(0.48) contrast(1.05);
    transition: transform .6s ease;
  }
  .hero:hover .hero-img{ transform: scale(1.03); }
  .hero-content{
    position:relative;
    z-index:2;
    max-width:720px;
    color:var(--accent-text, #eaf6ff);
  }
  .listen-live-btn{
    position:absolute;
    right:20px;
    top:20px;
    z-index:3;
    display:none;
    background:var(--accent);
    color:white;
    border-radius:999px;
    padding:.6rem 1rem;
    cursor:pointer;
    box-shadow: 0 6px 18px rgba(214,51,108,0.25);
    font-weight:600;
  }
.small-thumb {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 12px auto 8px;
}

/* NEWS: ensure card stacks image above text and centers content */
#newsGrid .card {
  display: flex;
  flex-direction: column;
 align-items: center;
  text-align: center;
  gap: 0.35rem;
  background: transparent;
}
#newsGrid .card-body { width: 100%; padding-left: .5rem; padding-right: .5rem; }
#newsGrid .card-title, #newsGrid .card-body .muted { text-align: center; margin: 0; }

/* HOME: stack image above text for list entries that previously used horizontal layout */
#homeNewsGrid .d-flex {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .5rem;
}
#homeNewsGrid .d-flex img,
#homeNewsGrid img { margin: 0 0 .5rem 0; }
#homeNewsGrid .news-title { margin-bottom: .25rem; }
#homeNewsGrid .col-12 { padding-left: 0; padding-right: 0; }

/* Responsive: smaller thumbs on narrow screens */
@media (max-width: 576px) {
  .small-thumb { width: 96px; height: 96px; margin: 8px auto 6px; }
  #newsGrid .card { gap: .25rem; }
  #homeNewsGrid .d-flex { gap: .35rem; }
}

/* End thumbnail / stacking patch */

#aboutGrid {
  display: flex !important;       /* use flex to form LCC-style responsive rows */
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
}

/* Stronger, larger titles for entries inside the About Us tab */
#tab-about .about-title,
#tab-about .card-title,
#tab-about h3,
#tab-about h4,
#tab-about h5 {
 font-size: 1.5rem;     /* larger for emphasis */
 font-weight: 800;      /* very strong */
  color: #111;           /* high contrast for readability */
  letter-spacing: 0.2px;
  margin-bottom: 0.5rem;
  line-height: 1.15;
}

/* Slightly smaller on very small screens to avoid wrapping too much */
@media (max-width: 576px) {
  #tab-about .about-title,
  #tab-about .card-title,
  #tab-about h3,
  #tab-about h4,
  #tab-about h5 {
    font-size: 1.25rem;
  }
}


#aboutGrid > .col {
  flex: 1 1 260px;                /* allow cards to wrap responsively */
  max-width: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5rem;
}

/* Image shape — target both your existing .about-card-img and a safer generic img fallback */
#aboutGrid .about-card-img,
#aboutGrid img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin: 0 auto 0.6rem;
  border: 4px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}
/* Text-only About entries: span full width and remove reserved image space */
#aboutGrid .about-noimg {
  flex-basis: 100% !important;
  max-width: 100% !important;
  align-items: stretch !important;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
#aboutGrid .about-noimg .card-body { text-align: left; }
#aboutGrid .card-body { text-align: left; }
@media (max-width: 576px) {
  #aboutGrid .about-noimg { padding-left: 0.5rem; padding-right: 0.5rem; }
}

#aboutGrid h6, 
#aboutGrid .card-title, 
#aboutGrid .card-body > h6 {
  text-align: left;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

#aboutGrid .muted,
#aboutGrid .card-text,
#aboutGrid p {
  text-align: left;
 margin-bottom: 0;
  color: var(--muted);
}

#tab-about .section-title {
  font-size: 2.2rem;   /* larger */
  font-weight: 800;    /* extra-strong */
 letter-spacing: 0.2px;
  margin-bottom: 0.75rem;

/* clickable news cover images — visually indicate interactivity */
.news-cover {
  cursor: pointer;
 transition: transform 120ms ease, box-shadow 120ms ease;
  display: inline-block;
}
.news-cover:focus {
  outline: 3px solid rgba(0,123,255,0.25);
  outline-offset: 3px;
}
.news-cover:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* keep the link small text style used previously */
#openLiveProgramsLink {
 text-decoration: underline;
  cursor: pointer;
 color: inherit;
  opacity: 0.95;
}
#openLiveProgramsLink:hover { opacity: 1; text-decoration: none; }}

/* Smaller screens — stack and reduce portrait size */
@media (max-width: 576px) {
  #aboutGrid .about-card-img,
  #aboutGrid img {
    width: 110px;
    height: 110px;
  }
  #aboutGrid > .col {
    flex-basis: 48%;
    max-width: 48%;
  }
}

@media (max-width: 420px) {
  #aboutGrid > .col {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* END LCC-inspired patch */
  .hero:hover .listen-live-btn{ display:block; }
  .hero-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background: linear-gradient(180deg, rgba(2,6,23,0.15), rgba(2,6,23,0.45));
    pointer-events:none;
  }
  /* Schedule styles (hero) */
  .schedule ul { padding: 0; margin: 0; list-style: none; }
  .schedule li { margin: 6px 0; padding: 6px 8px; border-radius: 6px; display: flex; align-items: center; gap: 8px; }
  .schedule li strong { min-width: 120px; display:inline-block; font-weight:700; color: var(--accent); }
  .schedule li em { font-style:normal; color: var(--muted); font-size:0.9rem; margin-left:6px; }
  .schedule li.current { background: rgba(214,51,108,0.08); box-shadow: inset 0 0 0 1px rgba(214,51,108,0.06); }
  .schedule li.hidden-by-day { display: none !important; }

   .daily-msg{
    position:absolute;
    left:20px;
    top:18px;                 /* place at top-left of hero */
    z-index:3;
    display:inline-flex;      /* shrink to fit content */
    align-items:center;
    gap:.5rem;
    background:rgba(0,0,0,0.45);
    padding:.38rem .7rem;     /* tighter padding so it wraps only content */
    border-radius:999px;      /* pill shape */
    color:#fff;
    box-shadow:0 6px 14px rgba(0,0,0,0.35);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.95rem;
  }
  /* make any link or text injected by the quote script fit nicely */
  .daily-msg a, .daily-msg span { color: #fff; text-decoration: none; display: inline-block; vertical-align: middle; }

    .card-img-standard{ width:100%; height:160px; object-fit:cover; border-radius:6px; background:#0b1220; }
    .grid-gap { gap:1rem; }
    .footer{
      background:#071427; color:#cfe7ff; padding:1.25rem 0;
      border-top:1px solid rgba(255,255,255,0.03);
    }
    .section-title{ color:#cfe7ff; margin-bottom:0.5rem; font-weight:700; }
    /* ad carousel slides — 6 per slide: use responsive grid */
    .ads-slide{ display:grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap:10px; align-items:center; }
    .ad-img{ width:100%; height:100px; object-fit:cover; border-radius:6px; background:#081226; }
    /* read overlay */
    #readOverlay{ position:fixed; inset:0; z-index:2000; background:rgba(2,6,23,0.96); display:none; padding:2rem; overflow:auto; }
    .read-cover{ max-height:380px; width:100%; object-fit:cover; border-radius:8px; }
    /* static header spacing */
    .sticky-footer{ position:relative; }
    /* default thumbnail */
    .thumb-default{ background:linear-gradient(135deg,#0b1630,#0f2440); color:#9fb8d9; display:flex; align-items:center; justify-content:center; min-height:160px; border-radius:6px; }
    /* play button */
    .play-btn{ cursor:pointer; }
    /* small helper for muted text */
    .muted{ color:var(--muted); }
    /* about shapes */
    .about-card-img{ width:100%; height:140px; object-fit:cover; border-radius:14px 14px 6px 6px; }
      .news-ads-row { display:flex; gap:1rem; align-items:flex-start; margin-top:1rem; }
  .news-ads-row .news-col { flex: 3 1 0%; min-width:0; }
  .news-ads-row .ads-col  { flex: 2 1 0%; min-width:0; }
  /* stack on smaller screens */
  @media (max-width: 991px) {
    .news-ads-row { flex-direction:column; }
  }

  /* Force carousel to be landscape (16:9) and ensure images cover */
  .ads-canvas { aspect-ratio: 16/9; width:100%; height:auto; max-width:1100px; border-radius:10px; overflow:hidden; background:#111; }
  .ads-canvas img { width:100%; height:100%; object-fit:cover; display:block; }
  /* Hide the thumbnails row that shows images below each carousel */
  .ads-multi-wrap [id$="-thumbs"] { display:none !important; }

/* Vertical small live badge: dot above label */
.listen-live-btn {
  display:flex;
  flex-direction:column;        /* stack dot over label */
  align-items:center;
  justify-content:center;
  margin-top: 100px;
  gap:114px;
  width:100px;                  /* compact square-ish badge */
  height:45px;
  padding:6px 4px;
  font-size:0.72rem;
  font-weight:700;
  border-radius:12px;          /* rounded rectangle */
  background: linear-gradient(180deg,#ff5d64 0%,#ff3860 100%);
  color: #fff;
  border: none;
  box-shadow: 0 8px 18px rgba(255,56,86,0.16);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.listen-live-btn:active { transform: translateY(1px) scale(.995); }
.listen-live-btn:focus { outline: 2px solid rgba(255,255,255,0.12); outline-offset: 2px; }
.live-dot {
  width:12px;
  height:12px;
  border-radius:50%;
  background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,0.18), 0 0 10px rgba(255,75,85,0.12) inset;
  display:block;
  animation: livePulse 1.6s infinite;
  transform-origin: center;
}
@keyframes livePulse {
  0% { transform: scale(1); opacity:1; }
  50% { transform: scale(1.45); opacity:.72; }
  100% { transform: scale(1); opacity:1; }
}
.listen-live-btn .live-label {
  display:block;
  font-size:.68rem;
  line-height:1;
  text-transform:lowercase;
  letter-spacing:.2px;
  user-select:none;
  transform: translateY(1px); /* tiny visual balance under the dot */
}