/* Papa Dudut Official | Official-site layer
   Loaded on every page after playful.css. Story cards are buttons that open the
   private-screening dialog (no public player), the header carries the legal links,
   and /copyright and /contact use the legal layout below. */

/* ------------------------------------------------------------------ Story buttons */
/* Thumbnails and titles keep the look of the links they replaced. */
button.story-media {
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

button.story-media:hover .play-badge,
button.story-media:focus-visible .play-badge {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

button.story-media:hover img {
  transform: scale(1.035);
}

button.story-media:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}

.story-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.story-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--crimson-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.story-link:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ Header legal links */
/* 720-899px: five nav items do not fit beside the wordmark and the menu button is hidden at these
   widths, so Copyright and Contact are reached from the footer (every page) until 900px. */
@media (min-width: 720px) and (max-width: 899px) {
  .site-nav .nav-legal {
    display: none;
  }
}

@media (min-width: 900px) {
  .site-nav .nav-legal:first-of-type {
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--hairline-strong);
  }

  .site-nav .nav-legal a {
    font-size: 0.85rem;
  }
}

/* ------------------------------------------------------------------ Private-screening dialog */
.story-dialog-title {
  font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem);
  line-height: 1.15;
}

.story-dialog-meta {
  color: var(--text-3);
  font-size: 0.92rem;
}

@media (min-width: 720px) {
  .story-dialog-media {
    align-self: center;
    margin-left: clamp(16px, 2vw, 24px);
    border-radius: var(--radius-sm);
  }
}

/* ------------------------------------------------------------------ Citations (no outbound links) */
.source-cite {
  color: var(--text-2);
}

.timeline-body .source-link,
.person-actions .source-link {
  margin: 0;
  color: var(--text-3);
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------ Footer */
@media (min-width: 768px) {
  .footer-grid--official {
    grid-template-columns: 2fr 1fr 1fr 1.3fr;
  }
}

.footer-grid--official {
  padding-top: clamp(48px, 6vw, 72px);
}

.footer-mail a {
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ Legal pages */
.legal-hero .lede {
  max-width: 62ch;
}

.legal-updated {
  margin-top: 14px;
  color: var(--text-3);
  font-size: 0.88rem;
}

.legal-page {
  padding-top: clamp(24px, 3vw, 40px);
}

.legal-layout {
  display: grid;
  gap: 32px;
}

@media (min-width: 960px) {
  .legal-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
    gap: 56px;
  }

  .legal-toc {
    position: sticky;
    top: 24px;
  }
}

.legal-toc {
  padding: 20px 22px;
  border: 2px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}

.legal-toc-title {
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.legal-toc ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 1.2em;
  font-size: 0.92rem;
}

.legal-toc a {
  color: var(--text-2);
  text-decoration: none;
}

.legal-toc a:hover {
  color: var(--text);
  text-decoration: underline;
}

.legal-body {
  display: grid;
  gap: 36px;
  max-width: 72ch;
}

.legal-section {
  scroll-margin-top: 24px;
}

.legal-section h2 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.75rem);
  line-height: 1.15;
}

.legal-section p + p,
.legal-section p + ul,
.legal-section ul + p {
  margin-top: 12px;
}

.legal-section a,
.legal-card a {
  color: var(--sky-deep);
  overflow-wrap: anywhere;
}

.legal-list {
  display: grid;
  gap: 8px;
  padding-left: 1.3em;
}

.legal-facts {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 2px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.legal-facts > div {
  display: grid;
  gap: 2px;
}

@media (min-width: 600px) {
  .legal-facts > div {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
  }
}

.legal-facts dt {
  color: var(--text-3);
  font-size: 0.85rem;
  font-weight: 700;
}

.legal-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.legal-role {
  display: block;
  color: var(--text-3);
  font-size: 0.88rem;
}

.legal-disclaimer {
  color: var(--text-3);
  font-size: 0.85rem;
}

.legal-section-title {
  margin-bottom: 20px;
}

.legal-contact-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 720px) {
  .legal-contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.legal-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 2px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--card-shadow);
}

.legal-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
}

.legal-card-mail {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 700;
}

.legal-tips {
  margin-top: 40px;
  max-width: 72ch;
}

/* ------------------------------------------------------------------ Audit fixes (2026-10-25) */
/* Mobile menu sits above the section bar: its icons (mask = own stacking context) used to
   paint over the first menu item and take its taps. */
@media (max-width: 719px) {
  .site-nav {
    z-index: 2;
  }
}

/* Grids never grow wider than the viewport: long nowrap buttons used to set the min-content
   width of 1fr tracks (/about at 320 and 768-1010px, the home hero at 320px). */
.hero-grid,
.people-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .people-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

.feature-card,
.feature-body {
  min-width: 0;
}

.feature-vu {
  flex-wrap: wrap;
}

.person-actions .btn {
  max-width: 100%;
  white-space: normal;
  text-align: left;
}

.readout-head {
  grid-template-columns: auto minmax(0, 1fr);
}

@media (min-width: 640px) {
  .readout-head {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 200px);
  }
}

/* The equalizer only animates while the tuner is on screen (tuner.js toggles is-visible). */
.tuner:not(.is-visible) .equalizer rect {
  animation-play-state: paused;
}

/* Contrast (WCAG 1.4.3): white text sits on darker fills; the brand tones stay for accents. */
.btn--primary {
  background: #c8321c;
}

.btn--primary:hover {
  background: #b02a17;
}

.section-bar,
.brand-freq,
.pill-btn[aria-pressed='true'],
.page-num[aria-current='page'] {
  background: var(--sky-deep);
}

.pill-btn[aria-pressed='true'] {
  border-color: var(--sky-deep);
}

.station-freq,
.station:nth-child(1) .station-freq,
.station:nth-child(2) .station-freq,
.station:nth-child(4) .station-freq,
.station[aria-pressed='true'] .station-freq {
  color: #1b1f24;
}

.station:nth-child(3) .station-freq,
.station:nth-child(5) .station-freq {
  color: #fff;
}

.impact-strip > div:nth-child(3) dd {
  color: #1f7a2b;
}

.site-footer {
  --band-top: #0a6fbf;
  background: linear-gradient(180deg, #0a6fbf 0%, #085a9c 100%);
}

.footer-brand p,
.footer-col a,
.footer-mail a,
.footer-base {
  color: #fff;
}

/* Forced colors (Windows High Contrast): mask icons need an explicit system colour. */
@media (forced-colors: active) {
  .icon {
    forced-color-adjust: none;
    background-color: CanvasText;
  }

  button .icon,
  .player-poster .icon {
    background-color: ButtonText;
  }

  a .icon {
    background-color: LinkText;
  }

  .play-badge--xl,
  .pw-lamp {
    border: 2px solid CanvasText;
  }
}

/* Responsive art: <picture> wraps the <img> without changing the media box layout. */
.media picture,
.player-poster picture {
  display: contents;
}

/* The legal table of contents stays below the sticky site header. */
@media (min-width: 960px) {
  .legal-toc {
    top: calc(var(--header-h) + 24px);
  }

  .legal-section {
    scroll-margin-top: calc(var(--header-h) + 24px);
  }
}

/* Decorative motion runs a few cycles and then rests (WCAG 2.2.2): the on-air lamp, the VU meter and
   the equalizer (tuner.js replays it after each station change). Loading shimmer is unchanged. */
.onair-lamp,
.vu-led {
  animation-iteration-count: 3;
}

.vu-meter::after {
  animation-iteration-count: 2;
}

.equalizer rect {
  animation-iteration-count: 8;
}

/* The needle transition lives on the dial window (tuner.js sets --needle there), not the whole tuner. */
.tuner {
  transition: none;
}

.dial-window {
  transition: --needle 0.9s cubic-bezier(0.22, 1.28, 0.36, 1);
}

/* Vertical swipes on the dial scroll the page; sideways drags tune (tuner.js). */
.dial {
  touch-action: pan-y;
}

/* Footer column titles are h2 (page outline); keep their small caption look. */
.footer-col-title {
  margin: 0 0 12px;
  line-height: 1.3;
}

/* Story cards show a lock, not a play triangle: nothing plays publicly. */
.play-badge--private .icon {
  margin-left: 0;
}

/* Safety net: if common.js never runs, thumbnails still appear after 2.5 s instead of staying hidden. */
.js .media img {
  animation: media-reveal 0s 2.5s forwards;
}

.js .media.is-loaded img {
  animation: none;
}

@keyframes media-reveal {
  to {
    opacity: 1;
  }
}