/*
Theme Name: Channel 8 News
Description: Newsroom demo theme for StoryDesk web publishing. Classic PHP theme — every template lives in git, not in the database.
Version: 1.0.0
*/

:root {
  /* The masthead navy is now the whole page, so the palette is dark-first:
     one ground colour, one raised surface for cards, and the two accents
     (gold, live red) carried over from the light theme. */
  --c8-navy: #0b1f3a;
  --c8-bg: #0b1f3a;
  --c8-surface: #12294a;
  --c8-surface-2: #17325a;
  --c8-gold: #d9a441;
  --c8-live: #e4344f;
  --c8-ink: #eaf0f8;
  --c8-muted: #93a4bd;
  --c8-rule: rgba(255, 255, 255, 0.12);
  --c8-measure: 680px;
  --c8-masthead-h: 62px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--c8-bg);
  color: var(--c8-ink);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
img { max-width: 100%; }

/* Masthead — sticky, so the identity never leaves the viewport while a reader
   scrolls a long liveblog. The only stacking context in the theme. */
.c8-masthead {
  position: sticky; top: 0; z-index: 10;
  background: var(--c8-bg);
  border-bottom: 1px solid var(--c8-rule);
  padding: 12px 20px;
  min-height: var(--c8-masthead-h);
  display: flex; align-items: center;
}
.c8-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 800;
  font-size: 22px; letter-spacing: -0.02em; text-decoration: none; }
.c8-brand img { width: 34px; height: 34px; display: block; }
.c8-brand span { font-weight: 400; color: var(--c8-muted); }

/* Shell: fixed-width section rail on the left, content on the right. */
.c8-shell {
  max-width: 1240px; margin: 0 auto;
  display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 32px;
  padding: 0 20px;
}
.c8-nav { padding: 24px 0; }
.c8-nav-title { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--c8-muted); margin: 0 0 10px; }
.c8-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.c8-nav a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--c8-ink);
  font-size: 14px; font-weight: 600; text-decoration: none; }
.c8-nav a:hover { background: var(--c8-surface); color: var(--c8-gold); }

/* Shared page shell */
.c8-main { min-width: 0; padding: 24px 0 64px; }

/* Kicker — gold rule + navy caps, the section label from StoryDesk taxonomy */
.c8-kicker { font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--c8-gold); margin-bottom: 8px; }
.c8-kicker span { border-left: 3px solid var(--c8-gold); padding-left: 8px; }

/* Homepage lead */
.c8-lead { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--c8-rule); }
.c8-lead img { width: 100%; height: auto; display: block; border-radius: 10px; }
.c8-lead h2 { font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 8px; }
.c8-lead h2 a { text-decoration: none; }
.c8-lead-flags { display: flex; align-items: center; gap: 8px; margin: 12px 0 8px; }
.c8-lead-flags:empty { display: none; }
/* `.c8-live` carries `margin-bottom: 12px` for the liveblog header, where it sits
   alone above a headline. `align-items: center` centres the MARGIN box, so that
   12px pushed LIVE up while JUST IN stayed put. The card grid already reset it
   (`.c8-card-media .c8-live--badge`); this row was missed. */
.c8-lead-flags .c8-live { margin: 0; }
/* The two pills read as a matched pair, so they share one set of metrics. The
   explicit line-height is what makes them the same HEIGHT: `.c8-live` is
   inline-flex and `.c8-flash` inline-block, so each resolved body's 1.6 against a
   different font-size (10px vs 11px) and JUST IN came out ~2px taller. */
.c8-lead-flags .c8-live,
.c8-flash { font-size: 10px; line-height: 1.4; letter-spacing: 0.1em; padding: 3px 8px; }
.c8-flash { display: inline-block; background: var(--c8-gold); color: var(--c8-navy);
  font-weight: 900; border-radius: 3px; }

/* Two-up card grid — everything below the lead, and every section archive. */
.c8-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.c8-card { display: flex; flex-direction: column; }
.c8-card-media { position: relative; display: block; border-radius: 10px; overflow: hidden;
  background: var(--c8-surface); aspect-ratio: 16 / 9; }
.c8-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A publication with no hero still needs a card-shaped slot, or the grid goes ragged. */
.c8-card-placeholder { position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--c8-surface), var(--c8-surface-2)); }
.c8-card-media .c8-live--badge { position: absolute; left: 10px; top: 10px; margin: 0; }
.c8-card-body { padding-top: 10px; }
.c8-card h2 { font-size: 19px; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 6px; }
.c8-card h2 a { text-decoration: none; }
.c8-card h2 a:hover { color: var(--c8-gold); }

.c8-standfirst { font-size: 18px; line-height: 1.5; font-weight: 600; color: #c3cfe0; margin: 0 0 12px; }
.c8-meta, .c8-time { font-size: 12px; color: var(--c8-muted); text-transform: uppercase;
  letter-spacing: 0.06em; }

/* Article body */
.c8-article { max-width: var(--c8-measure); margin: 0 auto; }
.c8-article h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 12px; }
.c8-article .c8-meta { padding-bottom: 14px; border-bottom: 1px solid var(--c8-rule); margin-bottom: 18px; }
.c8-figure { margin: 0 0 18px; }
.c8-figure img { width: 100%; height: auto; display: block; border-radius: 10px; }
/* Item 23 — the alignment the plugin has ALWAYS emitted.
   storydesk_render_figure() (plugin/includes/media.php) writes
   c8-figure--full/--left/--right off the block's `align`, allowlisted with a
   `full` fallback, and has done since the media renderer existed. Nothing here
   ever read it, so `.c8-figure img { width: 100% }` above forced every figure
   full-bleed whatever the editor picked. The bug was never in media.php.
   `width` on the FIGURE, not the img: the img rule above is width:100% of its
   container, so constraining the arm is what makes the picture narrow — and it
   keeps the figcaption the same width as the picture it captions. */
.c8-figure--left,
.c8-figure--right { width: 44%; }
.c8-figure--left { float: left; margin: 4px 20px 14px 0; }
.c8-figure--right { float: right; margin: 4px 0 14px 20px; }
/* A float is out of flow, so a tall one escapes the bottom of the article and
   lands on the tag footer (or on the next liveblog entry, which draws its own
   timeline dot and rule). Each container closes its own floats rather than
   asking every caller to add a spacer. */
.c8-article::after,
.c8-entry::after { content: ""; display: block; clear: both; }
.c8-video { width: 100%; height: auto; display: block; border-radius: 10px; background: #000; }
.c8-figure figcaption { font-size: 13px; color: var(--c8-muted); margin-top: 6px; }
.c8-credit { font-style: italic; }
.c8-quote { border-left: 4px solid var(--c8-gold); margin: 0 0 18px; padding-left: 16px;
  font-size: 22px; font-weight: 700; font-style: italic; }
.c8-quote cite { display: block; font-size: 14px; font-weight: 600; font-style: normal;
  color: var(--c8-muted); margin-top: 6px; }
.c8-callout { background: var(--c8-surface); border-left: 4px solid var(--c8-gold); padding: 12px 16px;
  margin: 0 0 18px; border-radius: 0 6px 6px 0; }
.c8-callout--warning { border-left-color: var(--c8-live); }
.c8-related a { font-weight: 700; }
.c8-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }

/* Tag footer — prints term NAMES, never the record-id slugs */
.c8-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px;
  border-top: 1px solid var(--c8-rule); margin-top: 24px; }
.c8-tags a { background: var(--c8-surface-2); color: var(--c8-ink); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 9px; text-decoration: none; }

/* Liveblog */
.c8-liveblog { max-width: var(--c8-measure); margin: 0 auto; }
.c8-live { display: inline-flex; align-items: center; gap: 7px; background: var(--c8-live);
  color: #fff; font-size: 12px; font-weight: 900; letter-spacing: 0.12em; padding: 4px 10px;
  margin-bottom: 12px; border-radius: 3px; }
/* Same badge, shrunk for the overview grid. */
.c8-live--badge { font-size: 10px; letter-spacing: 0.1em; padding: 3px 7px; }
.c8-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.c8-feed { border-left: 2px solid var(--c8-rule); padding-left: 20px; margin-top: 20px; }
.c8-entry { position: relative; padding-bottom: 26px; }
.c8-entry::before { content: ""; position: absolute; left: -27px; top: 8px; width: 10px;
  height: 10px; border-radius: 50%; background: var(--c8-gold); border: 3px solid var(--c8-bg); }
.c8-entry--pinned::before { background: var(--c8-live); }
.c8-entry-time { font-size: 12px; font-weight: 800; color: var(--c8-gold); letter-spacing: 0.06em; }
.c8-pin { background: var(--c8-gold); color: var(--c8-navy); font-size: 10px; font-weight: 900;
  letter-spacing: 0.1em; padding: 2px 7px; margin-left: 8px; }
.c8-entry-headline { font-size: 20px; line-height: 1.25; margin: 6px 0 6px; }
.c8-entry-byline { font-size: 12px; color: var(--c8-muted); font-style: italic; }

.c8-section-title { font-size: 30px; margin: 0 0 18px; }

@media (max-width: 900px) {
  .c8-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .c8-nav { padding: 14px 0 0; border-bottom: 1px solid var(--c8-rule); }
  .c8-nav-title { display: none; }
  .c8-nav ul { flex-direction: row; flex-wrap: wrap; gap: 4px; }
}

@media (max-width: 640px) {
  .c8-cards { grid-template-columns: minmax(0, 1fr); }
  .c8-lead h2 { font-size: 26px; }
  .c8-article h1 { font-size: 30px; }
  .c8-gallery { grid-template-columns: 1fr; }
  /* A 44% arm beside a phone-width measure leaves a column two or three words
     wide. Alignment is an editorial nicety; legibility is not. */
  .c8-figure--left,
  .c8-figure--right { float: none; width: 100%; margin: 0 0 18px; }
}