/* ============================================================
   ARTICLE PAGE — light look (NNA-21, 4 Oct 2026)

   single-post.php in the same lively light look as the news page:
   a dark newsroom band at the top, the category chips, then the
   story on a white sheet over the light paper. Nothing was taken
   off the page; this file only re-colours and re-spaces what
   post-modern.css and style.css draw. Television stays dark, as
   on the front pages: the live channel card and the Ultra Stream
   card in the rail keep their dark shells.

   Every selector starts .single-post.fp-article so it outranks the
   nested rules in style.css and the .single-post rules in
   post-modern.css without !important.
   ============================================================ */

.single-post.fp-article,
.single-post.fp-article main { background: var(--fp-paper); }

/* ── Newsroom band: the breadcrumb, on the news page's banner ── */
.single-post.fp-article .breadcrumb {
  position: relative;
  margin-top: 0;
  padding: 92px 2.5% 26px !important;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  background:
    linear-gradient(90deg, rgba(8, 11, 18, 0.97) 0%, rgba(8, 11, 18, 0.86) 50%, rgba(8, 11, 18, 0.55) 100%),
    var(--fp-art-bg, none) center 30% / cover no-repeat,
    var(--fp-ink);
}
.single-post.fp-article .breadcrumb .fp-art-kicker {
  flex-basis: 100%;
  margin-bottom: 2px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.single-post.fp-article .breadcrumb .fp-art-kicker b { color: var(--fp-gold-2); font-weight: 800; }
.single-post.fp-article .breadcrumb a { color: var(--fp-gold-2); }
.single-post.fp-article .breadcrumb a:hover { color: #fff; }
.single-post.fp-article .breadcrumb span:not(:last-child):not(.fp-art-kicker) { color: rgba(255, 255, 255, 0.45); }
.single-post.fp-article .breadcrumb span:last-child { color: rgba(255, 255, 255, 0.85); }

.single-post.fp-article .fp-art-cats { padding: 16px 0; }

/* ── The story on a white sheet ── */
.single-post.fp-article .sec1 {
  padding: 30px 2.5% 50px;
  column-gap: 30px;
  color: var(--fp-ink-txt);
}
.single-post.fp-article .sec1 .article {
  padding: 34px 40px 30px;
  border: 1px solid var(--fp-card-line);
  border-radius: 12px;
  background: var(--fp-card);
  box-shadow: 0 20px 40px -32px rgba(16, 20, 28, 0.35);
}
.single-post.fp-article .sec1 .article > h2.title { color: var(--fp-ink-txt); margin-top: 0; }
.single-post.fp-article .sec1 .article > p { color: var(--fp-ink-muted); }

.single-post.fp-article .sec1 .article .author-info {
  border-top-color: var(--fp-card-line);
  border-bottom-color: var(--fp-card-line);
}
.single-post.fp-article .sec1 .article .author-info .author-label { color: var(--fp-gold-ink); }
.single-post.fp-article .sec1 .article .author-info .author-name { color: var(--fp-ink-txt); }
.single-post.fp-article .sec1 .article .author-info .author-meta { color: var(--fp-ink-muted); }
.single-post.fp-article .sec1 .article .author-info .author-title + .author-location::before { color: var(--fp-gold); }

.single-post.fp-article .sec1 .article .left img,
.single-post.fp-article .sec1 .article .gallery img,
.single-post.fp-article .sec1 .article .gallery video,
.single-post.fp-article .sec1 .article .yt-embed { border-color: var(--fp-card-line); }

/* Reading column */
.single-post.fp-article .sec1 .article .right .description,
.single-post.fp-article .sec1 .article .right .description p,
.single-post.fp-article .sec1 .article .right .description li { color: #262b35; font-weight: 400; }
.single-post.fp-article .sec1 .article .right .description h1,
.single-post.fp-article .sec1 .article .right .description h2,
.single-post.fp-article .sec1 .article .right .description h3,
.single-post.fp-article .sec1 .article .right .description h4,
.single-post.fp-article .sec1 .article .right .description strong,
.single-post.fp-article .sec1 .article .right .description b { color: var(--fp-ink-txt); }
.single-post.fp-article .sec1 .article .right .description a { color: var(--fp-gold-ink); }
.single-post.fp-article .sec1 .article .right .description hr { border-color: var(--fp-card-line); }
.single-post.fp-article .sec1 .article .right .description blockquote {
  border-left-color: var(--fp-gold);
  color: var(--fp-ink-txt);
}
/* Text pasted in while the site was dark sometimes carries an inline white
   colour; on the white sheet it would vanish. */
.single-post.fp-article .sec1 .article .right .description [style*="color: #fff"],
.single-post.fp-article .sec1 .article .right .description [style*="color:#fff"],
.single-post.fp-article .sec1 .article .right .description [style*="color: white"],
.single-post.fp-article .sec1 .article .right .description [style*="color: rgb(255, 255, 255)"] { color: inherit !important; }

/* The lead paragraph's "NNA News" byline and the photo caption */
.single-post.fp-article .sec1 .article .left,
.single-post.fp-article .sec1 .article .left p,
.single-post.fp-article .sec1 .article .left figcaption { color: #262b35; font-weight: 400; }

/* Topics */
.single-post.fp-article .sec1 .article .right .info { border-top-color: var(--fp-card-line); }
.single-post.fp-article .sec1 .article .right .info > div { color: var(--fp-ink-muted); }
.single-post.fp-article .sec1 .article .right .info b { color: var(--fp-gold-ink); }

/* Follow / share rows */
.single-post.fp-article .share-bar { border-bottom-color: var(--fp-card-line); }
.single-post.fp-article .share-bar.at-foot { border-top-color: var(--fp-card-line); }
.single-post.fp-article .share-bar .share-label { color: var(--fp-gold-ink); }
.single-post.fp-article .share-bar .share-btn {
  border-color: #cdd3db;
  color: var(--fp-ink-txt);
}
.single-post.fp-article .share-bar .share-btn:hover {
  background: var(--fp-gold);
  border-color: var(--fp-gold);
  color: #111;
}
.single-post.fp-article .share-bar .app-btn {
  border-color: rgba(143, 104, 8, 0.45);
  background: #fbf6e8;
}
.single-post.fp-article .share-bar .app-btn:hover { background: #f5ead0; border-color: var(--fp-gold); }
.single-post.fp-article .share-bar .app-btn svg { fill: var(--fp-gold-ink); }
.single-post.fp-article .share-bar .app-btn:hover svg { fill: #6f5006; }
.single-post.fp-article .share-bar .app-btn .app-btn-text { color: var(--fp-ink-txt); }
.single-post.fp-article .share-bar .app-btn .app-btn-text small { color: var(--fp-gold-ink); }

/* Adverts inside and around the story */
.single-post.fp-article .in-article-ad { border-top-color: var(--fp-card-line); border-bottom-color: var(--fp-card-line); }
.single-post.fp-article .ad-label { color: #8a919c; }
.single-post.fp-article .ad-video-title { color: var(--fp-ink-muted); }
.single-post.fp-article .grid-ad { padding-left: 2.5%; padding-right: 2.5%; }

/* ── Side rail ── */
.single-post.fp-article .sec1 .side-rail { max-width: 360px; }
/* All three modules are white cards with the gold top rule, like the news
   page's sidebar; only the pictures (the live frame, the Ultra Stream art)
   stay dark. Mixing dark and white cards on the light paper read as a
   patchwork, and the dark card's grey controls were too faint. */
.single-post.fp-article .side-module {
  background: var(--fp-card);
  border: 1px solid var(--fp-card-line);
  border-top: 3px solid var(--fp-gold);
  box-shadow: 0 18px 36px -30px rgba(16, 20, 28, 0.45);
}
.single-post.fp-article .side-module-title { color: var(--fp-ink-txt); }

/* Live on NNA */
.single-post.fp-article .side-live-badge { background: var(--fp-red); color: #fff; }
.single-post.fp-article .side-live-badge::before { background: #fff; }
.single-post.fp-article .side-live-tab {
  border-color: var(--fp-card-line);
  background: var(--fp-paper);
  color: var(--fp-ink-txt);
}
.single-post.fp-article .side-live-tab:hover { border-color: var(--fp-gold); color: var(--fp-ink-txt); background: #fff; }
.single-post.fp-article .side-live-tab.active {
  border-color: #0d1320;
  background: #0d1320;
  color: #fff;
}
.single-post.fp-article .side-live-player { border-color: var(--fp-card-line); }
.single-post.fp-article .side-live-sound {
  border-color: var(--fp-gold);
  background: #fbf6e8;
  color: var(--fp-gold-ink);
}
.single-post.fp-article .side-live-sound:hover { background: var(--fp-gold); color: #111; }
.single-post.fp-article .side-live-note { color: var(--fp-ink-muted); }
.single-post.fp-article .side-live-btn {
  border-color: #0d1320;
  background: #0d1320;
  color: #fff;
}
.single-post.fp-article .side-live-btn:hover { background: var(--fp-gold); border-color: var(--fp-gold); color: #111; }
.single-post.fp-article .side-live-sched-toggle {
  border-color: var(--fp-card-line);
  background: var(--fp-paper);
  color: var(--fp-gold-ink);
}
.single-post.fp-article .side-live-sched-toggle:hover { border-color: var(--fp-gold); background: #fbf6e8; color: #6f5006; }
.single-post.fp-article .side-live-sched-row { border-bottom-color: var(--fp-card-line); }
.single-post.fp-article .side-live-sched-time { color: var(--fp-ink-muted); }
.single-post.fp-article .side-live-sched-show { color: var(--fp-ink-txt); }
.single-post.fp-article .side-live-sched-row.on-now .side-live-sched-time { color: var(--fp-gold-ink); }
.single-post.fp-article .side-live-sched-row.on-now .side-live-sched-show { color: var(--fp-ink-txt); }
.single-post.fp-article .side-live-sched-now { background: var(--fp-red); border-color: var(--fp-red); color: #fff; }
.single-post.fp-article .side-live-sched-empty { color: var(--fp-ink-muted); }

/* Latest on NNA */
.single-post.fp-article .side-latest .side-story { border-top-color: var(--fp-card-line); }
.single-post.fp-article .side-latest .side-story-thumb { border-color: var(--fp-card-line); background-color: #dfe3e8; }
.single-post.fp-article .side-latest .side-story-title { color: var(--fp-ink-txt); }
.single-post.fp-article .side-latest .side-story:hover .side-story-title { color: var(--fp-gold-ink); }
.single-post.fp-article .side-latest .side-story-ago { color: var(--fp-ink-muted); }

/* Ultra Stream */
.single-post.fp-article .side-app-art { border-color: var(--fp-card-line); }
.single-post.fp-article .side-app-note { color: var(--fp-ink-txt); }
.single-post.fp-article .side-app-btn {
  border-color: var(--fp-gold);
  background: linear-gradient(180deg, #e0b23a, #c19114);
  color: #111;
}
.single-post.fp-article .side-app-btn:hover { background: #0d1320; border-color: #0d1320; color: #fff; }

/* ── Related articles: the news grid's white tiles ── */
.single-post.fp-article .related {
  padding: 10px 2.5% 56px;
  color: var(--fp-ink-txt);
  background: var(--fp-paper);
}
.single-post.fp-article .related h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 0;
  color: var(--fp-ink-txt);
  font-size: 19px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.single-post.fp-article .related h3::after { display: none; }
.single-post.fp-article .related h3::before {
  content: "";
  width: 4px;
  height: 22px;
  border-radius: 2px;
  background: var(--fp-gold);
}
.single-post.fp-article .related .grid5 { gap: 18px; }
.single-post.fp-article .related .grid5 .product {
  background: var(--fp-card);
  border-color: var(--fp-card-line);
  border-radius: var(--fp-radius);
}
.single-post.fp-article .related .grid5 .product:hover {
  border-color: var(--fp-card-line);
  box-shadow: 0 16px 34px -20px rgba(16, 20, 28, 0.5);
}
.single-post.fp-article .related .grid5 .product .title { color: var(--fp-ink-txt); }
.single-post.fp-article .related .grid5 .product:hover .title { color: var(--fp-gold-ink); }
.single-post.fp-article .related .grid5 .product .date { color: var(--fp-ink-muted); }

/* ── Phones ── */
@media screen and (max-width: 768px) {
  .single-post.fp-article .breadcrumb { padding: 22px 16px 18px !important; font-size: 11px; }
  .single-post.fp-article .breadcrumb .fp-art-kicker { font-size: 16px; }
  .single-post.fp-article .fp-art-cats { padding: 12px 0; }
  .single-post.fp-article .sec1 { padding: 16px 0 30px; row-gap: 26px; }
  .single-post.fp-article .sec1 .article {
    padding: 22px 0 20px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
  .single-post.fp-article .sec1 .side-rail { max-width: none; }
  .single-post.fp-article .related { padding: 6px 16px 36px; }
  .single-post.fp-article .related h3 { font-size: 16px; letter-spacing: 0.12em; }
}