/* —————— Flexible Content Marquee —————— */
.flexible-marquee {
  margin: 2em 0;
}

.marquee-container {
  overflow: hidden;
  position: relative;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.5em 0;
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  /* start off to the right */
  transform: translateX(100%);
  animation: slide-left 20s linear infinite;
  min-height: 32px; /* So page does not jump before JSON loads: adjust line-height, if necessary */
}

.marquee a {
  display: inline-block;
  margin: 0 0.5em;
  padding: 0.5em 1em;
  background: #eeeeee;
  border-radius: 4px;
  text-decoration: none;
  color: #003975;
  font-weight: bold;
  transition: background-color 0.3s, color 0.3s;
}
.marquee a:hover,
.marquee a:focus {
  background: #f56505;
  color: #fff;
}
/* SLIDER SCRIPT START ---------------------------------------------*/
/* Default: slower loop (e.g., 45s) */
:root {
  --marquee-duration: 500s;
}

/* Force the marquee to use our variable for its loop time */
.marquee {
  animation-duration: var(--marquee-duration) !important;
}

/* Optional: nicer slider styling */
.marquee-speed {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .5rem 0 0;
  font: inherit;
}
.marquee-speed input[type="range"] {
  width: min(320px, 60vw);
}

/* Grid container: makes nice fluid columns */
#newsLinkGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18ch, 1fr));
  gap: 0.5rem;
  align-items: start;
}

/* Individual list items: wrap long names cleanly */
#newsLinkGrid .news-link-item {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;  /* or: break-word */
  word-break: break-word;   /* fallback for older browsers */
  hyphens: auto;
  line-height: 1.3;
}

/* If your popup body ever clips the grid, ensure it can scroll: */
#newsPopup .popup-body {
  max-height: min(80vh, 900px);
  overflow: auto;
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none !important;
  }
}

/* SLIDER SCRIPT END ---------------------------------------------*/

/* keyframes */
@keyframes slide-left {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}

/* small-screen tweak */
@media screen and (max-width: 35.5em) {
  .marquee a {
    padding: 0.4em 0.8em;
    margin: 0 0.3em;
    font-size: 0.9em;
  }
}