/* Clock: keep width stable */
#liveClock {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block;
  min-width: 19ch;
}

/* Mobile station-toggle marquee */
.ap-st-toggle {
  display: inline-block;
  width: 7.5ch;
  max-width: 7.5ch;
}
.ap-st-toggle__static,
.ap-st-toggle__marquee {
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.ap-st-toggle__static {
  text-overflow: ellipsis;
}
.ap-st-toggle__marquee {
  display: none;
}
.ap-st-toggle__track {
  display: inline-block;
  padding-left: 100%;
  padding-right: 2.5ch;
  transform: translateX(0);
}
.ap-st-toggle--run .ap-st-toggle__static {
  display: none;
}
.ap-st-toggle--run .ap-st-toggle__marquee {
  display: block;
}
@keyframes apStationMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ap-st-toggle__track {
    animation: none !important;
  }
}

/* Header mobile policy: */
.apLogo {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  height: auto;
  display: block;
}

@media (max-width: 639px) {
  .apHdrPills,
  .apHdrActions {
    display: none !important;
  }
}

/* Mobile page switcher (2-up) */
[data-ap-switcher="mobile2"] svg {
  display: block;
}

/* Mobile page switcher: make prev/next tap-zones overlay */
@media (max-width: 639px) {
  [data-ap-switcher="mobile2"] {
    position: relative;
  }

  [data-ap-switcher="mobile2"] .apMobNav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22px; /* edge tap zone */
    opacity: 0;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
  }
  [data-ap-switcher="mobile2"] .apMobNav--prev {
    left: 0;
  }
  [data-ap-switcher="mobile2"] .apMobNav--next {
    right: 0;
  }
}

/* Mobile pill-toggle icons: musta aktiivisena */
.pill6 a.is-active svg {
  fill: var(--ap-black) !important; /* Aktiivinen icon = musta */
}

/* Muiden ikonien väri (ei-aktiivinen) */
.pill6 a svg {
  fill: var(--ap-white) !important; /* Ikoni väri normaalisti valkoinen */
}

/* Mobiililinkit aktiivisena */
.sm\:hidden .ap-st-toggle__static {
  color: black; /* Musta väri valitulle linkille */
}

/* Mobiililinkit inaktiivisena */
.sm\:hidden .ap-st-toggle__marquee {
  color: yellow; /* Keltainen väri epäaktiiviselle linkille */
}

/* SVG-ikoni väri */
.sm\:hidden .ap-st-toggle__static svg {
  fill: currentColor; /* Varmista että ikoni perii värit */
}

.thick-icon{
  filter: drop-shadow(0 0 0.6px #facc15);
}

/* === AP_HEADER_PILLS_V1 (page+station pills) ============================== */
.apHdrPill {
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

/* Hover only on devices that actually hover */
@media (hover: hover) and (pointer: fine) {
  .apHdrPill:hover {
    border-color: #333333;
  }
  .apHdrPill--page:hover {
    border-color: #3a3a3a;
  }
}

/* === AP_HEADER_PILLS_INLINE_OFFSET ======================================= */
/* Move ONLY the page + station pills slightly right; keep clock aligned */
.apHdrPills > .inline-flex {
  margin-left: 5px;
}
/* ======================================================================== */

/* Index / Monitor: Trends-ikoni keltaiseksi */
.ap-ico--trends {
  color: #f5c400;      /* keltainen */
}

.ap-ico--trends:hover { color: #ffd84d; }