/* ============================================================
   MzansiNewsLive - public site
   Destination: public_html/v2/assets/site.css

   Direction carries over from the admin: TIME is the organising
   fact. The homepage river runs against a continuous vertical
   spine with mono timestamps as markers, so the page reads as a
   feed of the day rather than a grid of cards.

   Red appears ONLY on breaking. If it's everywhere it means
   nothing.

   Built light on purpose - most readers are on mobile data.
   ============================================================ */

:root {
  --ink:        #14181f;
  --ink-2:      #1d232d;
  --paper:      #faf9f7;
  --surface:    #ffffff;
  --line:       #e4e2dd;
  --line-soft:  #efedE8;
  --text:       #14181f;
  --muted:      #6b7280;
  --muted-2:    #9aa1ab;

  --accent:     #0f6b3f;

  /* Body-copy links. Deliberately a different hue from the brand
     green: the green is used for section markers and chrome, so
     reusing it inline would make links read as decoration. */
  --link:           #1155cc;
  --link-hover:     #0b3d91;
  --link-underline: #8ab0f0;
  --link-wash:      #eaf1fd;
  --accent-dk:  #0a5230;
  --accent-bg:  #e8f2ec;

  --breaking:   #c1272d;
  --breaking-bg:#fbeaea;

  --wrap:       1120px;
  --radius:     6px;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* The hidden ATTRIBUTE loses to any class that sets display. The
   WhatsApp bar relies on it, so this keeps it dismissible even if a
   display rule is added to .wa-bar later. Cost nothing; prevents the
   element becoming permanently stuck on screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 12px 18px; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------
   Masthead
   ------------------------------------------------------------ */

.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }

.masthead-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 0 16px;
}

.brand { display: flex; align-items: baseline; gap: 10px; }

.brand-name {
  font-family: var(--serif);
  font-size: 30px; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); line-height: 1;
}
.brand-name span { color: var(--accent); }

.brand-tag {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2);
}

.masthead-clock {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .06em; color: var(--muted);
  text-transform: uppercase; white-space: nowrap;
}
.masthead-clock b { color: var(--accent); font-weight: 600; }

/* Nav ------------------------------------------------------- */

.nav { border-top: 1px solid var(--line-soft); }

.nav-inner {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }

.nav-link {
  flex: 0 0 auto;
  padding: 13px 14px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.nav-link:hover      { color: var(--accent); }
.nav-link.is-active  { color: var(--accent); border-bottom-color: var(--accent); }

.masthead-right {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
}

/* Search sits in the masthead. It used to live at the end of the nav
   strip, which scrolls sideways once there are more than a handful of
   sections - so with 24 categories it was parked off-screen where no
   reader would ever find it. */
.search-form { display: flex; align-items: center; flex: 0 0 auto; }

.search-form input {
  width: 190px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--sans);
  font-size: 13.5px;
  background: var(--paper);
}
.search-form input:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

.search-form button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 13px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 0 var(--radius) var(--radius) 0;
  cursor: pointer;
  font-family: var(--sans);
}
.search-form button:hover { background: var(--accent-dk); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   Breaking bar
   ------------------------------------------------------------ */

.breaking {
  background: var(--breaking); color: #fff;
  display: flex; align-items: stretch; overflow: hidden;
}
.breaking-label {
  flex: 0 0 auto; padding: 9px 14px;
  background: rgba(0,0,0,.22);
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
}
.breaking-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.breaking-items {
  flex: 1 1 auto; display: flex; gap: 26px;
  padding: 9px 14px; overflow-x: auto; scrollbar-width: none;
  font-size: 13.5px; font-weight: 500;
}
.breaking-items::-webkit-scrollbar { display: none; }
.breaking-items a { white-space: nowrap; }
.breaking-items a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Lead story
   ------------------------------------------------------------ */

.lead { padding: 30px 0 8px; }

.lead-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 34px; }

.lead-media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--line-soft); }
.lead-media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }

.lead-title {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px); font-weight: 700;
  line-height: 1.13; letter-spacing: -.022em;
  margin: 16px 0 12px; color: var(--ink);
}
.lead-title a:hover { color: var(--accent); }

.lead-standfirst { font-size: 17px; color: #3d4653; line-height: 1.55; margin: 0 0 14px; }

/* Secondary stories beside the lead */
.lead-side { display: flex; flex-direction: column; }
.lead-side-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.lead-side-item:first-child { padding-top: 0; }
.lead-side-item:last-child  { border-bottom: 0; }

.lead-side-title {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  line-height: 1.28; letter-spacing: -.01em; margin: 5px 0 6px;
}
.lead-side-title a:hover { color: var(--accent); }

/* ------------------------------------------------------------
   Meta line (category + time + read time)
   ------------------------------------------------------------ */

.meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.meta-cat { color: var(--accent); font-weight: 600; }
.meta-cat:hover { text-decoration: underline; }
.meta-sep { color: var(--muted-2); }

/* ------------------------------------------------------------
   The river - signature element
   A continuous spine runs down the left; each story hangs off it
   at its publication time.
   ------------------------------------------------------------ */

.river-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 42px 0 4px; padding-bottom: 11px;
  border-bottom: 2px solid var(--ink);
}
.river-head h2 {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin: 0;
}
.river-head .river-head-note {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted-2);
  letter-spacing: .06em; text-transform: uppercase; margin-left: auto;
}

.river { position: relative; padding-left: 92px; }

/* the spine itself */
.river::before {
  content: ''; position: absolute;
  left: 71px; top: 12px; bottom: 12px;
  width: 1px; background: var(--line);
}

.river-item { position: relative; padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.river-item:last-child { border-bottom: 0; }

/* time marker sitting on the spine */
.river-time {
  position: absolute; left: -92px; top: 24px;
  width: 66px; text-align: right;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  letter-spacing: .02em;
}
.river-item::before {
  content: ''; position: absolute;
  left: -22px; top: 29px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--muted-2);
}
.river-item.is-breaking::before { background: var(--breaking); border-color: var(--breaking); }

.river-body { display: grid; grid-template-columns: 1fr 148px; gap: 20px; align-items: start; }

.river-title {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  line-height: 1.26; letter-spacing: -.012em; margin: 0 0 7px;
}
.river-title a:hover { color: var(--accent); }

.river-excerpt { font-size: 14.5px; color: var(--muted); line-height: 1.55; margin: 0 0 9px; }

.river-thumb { border-radius: var(--radius); overflow: hidden; background: var(--line-soft); }
.river-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ------------------------------------------------------------
   Generic card grid (category pages, search, related)
   ------------------------------------------------------------ */

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card-media { border-radius: var(--radius); overflow: hidden; background: var(--line-soft); margin-bottom: 11px; }
.card-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .35s ease; }
.card:hover .card-media img { transform: scale(1.03); }

.card-title {
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  line-height: 1.27; letter-spacing: -.01em; margin: 6px 0 6px;
}
.card-title a:hover { color: var(--accent); }
.card-excerpt { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0; }

/* Placeholder when a story has no image */
.no-img {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #eceae5, #e2e6e3);
  color: var(--muted-2);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
}
.card-media   .no-img { aspect-ratio: 16/10; }
.river-thumb  .no-img { aspect-ratio: 4/3; }
.lead-media   .no-img { aspect-ratio: 16/9; }

/* ------------------------------------------------------------
   Section headers
   ------------------------------------------------------------ */

.section { margin: 46px 0 0; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 20px; padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.section-head h2 {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin: 0;
}
.section-more {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  letter-spacing: .05em; text-transform: uppercase; font-weight: 500;
}
.section-more:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Article page
   ------------------------------------------------------------ */

.article-wrap { max-width: 760px; margin: 0 auto; padding: 34px 20px 0; }

.crumbs {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 16px;
}
.crumbs a:hover { color: var(--accent); }

.article-title {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 46px); font-weight: 700;
  line-height: 1.12; letter-spacing: -.024em;
  margin: 0 0 16px; color: var(--ink);
}

.article-standfirst {
  font-size: 19px; line-height: 1.55; color: #3d4653;
  margin: 0 0 22px; font-weight: 400;
}

.byline {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.byline-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent-bg); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex: 0 0 auto;
}
.byline-name { font-weight: 600; font-size: 14.5px; }
.byline-name a:hover { color: var(--accent); }
.byline-meta {
  font-family: var(--mono); font-size: 10.5px; color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}

.article-hero { margin: 0 0 8px; border-radius: var(--radius); overflow: hidden; background: var(--line-soft); }
.article-hero img { width: 100%; }
.article-caption {
  font-size: 12.5px; color: var(--muted); font-style: italic;
  padding: 9px 2px 0; margin-bottom: 26px; line-height: 1.45;
}

/* Body copy */
.article-body { font-size: 18px; line-height: 1.72; color: #22282f; }
.article-body p { margin: 0 0 22px; }
.article-body h2 {
  font-family: var(--serif); font-size: 26px; font-weight: 700;
  line-height: 1.25; letter-spacing: -.015em; margin: 38px 0 14px;
}
.article-body h3 {
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  margin: 30px 0 11px;
}
/* Links in body copy.
   Colour alone is not enough - the accent green against near-black
   text is a small hue shift at reading size, and it is invisible to a
   colour-blind reader. The underline does the work; the colour just
   confirms it.
   The [style] rule defeats inline colours that came across from the
   old WordPress theme, which otherwise beat any stylesheet rule. */
.article-body a,
.article-body a:link,
.article-body a:visited,
.job-body a,
.job-body a:link,
.job-body a:visited {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2.5px;
  text-decoration-color: var(--link-underline);
  font-weight: 500;
}

.article-body a[style],
.job-body a[style] {
  color: var(--link) !important;
  text-decoration: underline !important;
}

.article-body a:hover,
.job-body a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
  background: var(--link-wash);
}
.article-body ul, .article-body ol { margin: 0 0 22px; padding-left: 24px; }
.article-body li { margin-bottom: 9px; }
.article-body img { border-radius: var(--radius); margin: 26px 0; }
.article-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-family: var(--serif); font-size: 21px; line-height: 1.45;
  color: var(--ink-2); font-style: italic;
}
.article-body figure { margin: 26px 0; }
.article-body figcaption { font-size: 12.5px; color: var(--muted); font-style: italic; padding-top: 8px; }

/* Tags + share */
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; }
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 5px 11px; border: 1px solid var(--line);
  border-radius: 100px; color: var(--muted); background: var(--surface);
}
.tag:hover { border-color: var(--accent); color: var(--accent); }

.share { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 30px 0 0;
         padding-top: 22px; border-top: 1px solid var(--line); }
.share-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2); margin-right: 3px;
}
.share-btn {
  padding: 8px 15px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 13px; font-weight: 600; background: var(--surface); color: var(--ink-2);
  cursor: pointer; font-family: var(--sans);
}
.share-btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* Brand colours on hover only. Six coloured buttons in a row shout
   over the article they are attached to; the colour is useful at the
   moment of choosing, not before. */
.share-whatsapp:hover { background: #25d366; border-color: #25d366; color: #06382f; }
.share-facebook:hover { background: #1877f2; border-color: #1877f2; }
.share-x:hover        { background: #000;    border-color: #000; }
.share-linkedin:hover { background: #0a66c2; border-color: #0a66c2; }

/* The job board offers six options, which wraps on a phone. Give the
   row room to breathe rather than cramming it onto one line. */
.share { row-gap: 9px; }

@media (max-width: 620px) {
  .share-btn { padding: 9px 14px; font-size: 13.5px; }
  /* Comfortable thumb targets - most job sharing happens on a phone,
     usually one-handed, often while doing something else. */
  .share-label { width: 100%; margin-bottom: 2px; }
}

/* ------------------------------------------------------------
   Page header (category / search / author)
   ------------------------------------------------------------ */

.page-head { padding: 38px 0 26px; border-bottom: 2px solid var(--ink); margin-bottom: 30px; }
.page-eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 9px;
}
.page-title {
  font-family: var(--serif); font-size: clamp(30px, 4.5vw, 42px);
  font-weight: 700; letter-spacing: -.022em; line-height: 1.1; margin: 0;
}
.page-sub { color: var(--muted); font-size: 15px; margin: 10px 0 0; }

/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */

.pager { display: flex; justify-content: center; align-items: center; gap: 7px;
         margin: 48px 0 0; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 38px; padding: 9px 13px; text-align: center;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--mono); font-size: 13px; background: var(--surface); color: var(--ink-2);
}
.pager a:hover { border-color: var(--ink); }
.pager .is-current { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 600; }
.pager .is-gap { border: 0; background: none; color: var(--muted-2); min-width: 20px; padding: 9px 2px; }

/* ------------------------------------------------------------
   Empty state
   ------------------------------------------------------------ */

.empty { text-align: center; padding: 70px 20px; }
.empty h3 { font-family: var(--serif); font-size: 24px; margin: 0 0 9px; font-weight: 600; }
.empty p  { color: var(--muted); margin: 0 0 20px; }
.btn {
  display: inline-block; padding: 11px 22px; background: var(--ink); color: #fff;
  border-radius: var(--radius); font-size: 14px; font-weight: 600;
}
.btn:hover { background: var(--accent); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.footer { background: var(--ink); color: #b9c0cb; margin-top: 76px; padding: 46px 0 26px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer h4 {
  font-family: var(--sans); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin: 0 0 14px; font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; font-size: 14px; }
.footer a:hover { color: #fff; }
.footer-brand .brand-name { color: #fff; font-size: 25px; }
.footer-brand p { font-size: 14px; line-height: 1.6; margin: 12px 0 0; max-width: 40ch; }
.footer-bottom {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: #7d8694;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 900px) {
  .lead-grid { grid-template-columns: 1fr; gap: 26px; }
  .grid, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 15.5px; }

  .masthead-clock { display: none; }
  .brand-name { font-size: 25px; }

  /* Search wraps onto its own full-width row rather than being
     hidden. On a phone it is the fastest way into 196 articles. */
  .masthead-top { flex-wrap: wrap; gap: 12px; padding-bottom: 14px; }
  .masthead-right { width: 100%; }
  .search-form { width: 100%; }
  .search-form input { width: auto; flex: 1 1 auto; font-size: 16px; }
  .search-form button { padding: 10px 16px; }

  /* Spine collapses: the timestamp moves inline above the headline */
  .river { padding-left: 0; }
  .river::before { display: none; }
  .river-item::before { display: none; }
  .river-time {
    position: static; width: auto; text-align: left;
    display: block; margin-bottom: 6px;
    color: var(--accent); font-size: 10.5px;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .river-body { grid-template-columns: 1fr 96px; gap: 14px; }
  .river-title { font-size: 17.5px; }
  .river-excerpt { display: none; }

  .grid, .grid.cols-4 { grid-template-columns: 1fr; gap: 26px; }

  .article-wrap { padding-top: 24px; }
  .article-body { font-size: 17px; }
  .article-body blockquote { font-size: 19px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------
   Ad slots

   Labelled and visually separated on purpose. Unmarked ads that
   look like editorial erode trust on a news site faster than
   they earn - and Google's own policy requires the distinction.
   ------------------------------------------------------------ */

.ad-slot {
  margin: 30px 0;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}

/* Google does not fill every impression. When it does not, it sets
   data-ad-status="unfilled" - and without this the reader gets a
   bordered "Advertisement" band with nothing inside it, dropped into
   the middle of the story. Collapse the whole slot instead.
   (ad_slot.php carries a JS fallback for browsers without :has().) */
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }

/* No min-height either - reserving 90px for an ad that may never
   arrive just moves the empty gap somewhere else. */

.ad-label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 8px;
}

.ad-slot ins { margin: 0 auto; }

.ad-article_top    { margin-top: 22px; }
.ad-article_bottom { margin-bottom: 8px; }

@media (max-width: 620px) {
  .ad-slot { margin: 24px 0; }
}

/* ------------------------------------------------------------
   Jobs nav item

   Sits second, right after Home, deliberately. The nav strip scrolls
   sideways with 24 categories in it, and anything appended at the end
   is effectively invisible. Given a quiet accent so it reads as a
   different KIND of thing from the news sections beside it.
   ------------------------------------------------------------ */

.nav-link.nav-jobs {
  color: var(--accent);
  font-weight: 700;
}
.nav-link.nav-jobs::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 2px;
}
.nav-link.nav-jobs:hover { color: var(--accent-dk); }
.nav-link.nav-jobs.is-active { border-bottom-color: var(--accent); }

/* ------------------------------------------------------------
   WhatsApp Channel

   Uses WhatsApp's own green rather than the site accent. This is one
   of the few places borrowing another brand's colour is right - the
   colour IS the recognition, and a reader scanning the page should
   know what it is before reading a word.
   ------------------------------------------------------------ */

:root { --wa: #25d366; --wa-dk: #128c7e; --wa-ink: #075e54; }

/* Card - sits at the end of an article */
.wa-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 34px 0 0;
  padding: 20px 22px;
  background: #f0fbf4;
  border: 1px solid #c6ecd5;
  border-radius: var(--radius);
}

.wa-card-icon {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--wa);
  color: #fff;
  border-radius: 50%;
}

.wa-card-body { flex: 1 1 220px; }
.wa-card-body h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 3px;
  color: var(--wa-ink);
}
.wa-card-body p { margin: 0; font-size: 14px; color: #3d5a4d; line-height: 1.5; }

.wa-card-btn {
  flex: 0 0 auto;
  padding: 11px 22px;
  background: var(--wa-dk);
  color: #fff;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
}
.wa-card-btn:hover { background: var(--wa-ink); }

/* Inline - a plain link for the footer */
.wa-inline {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}
.wa-inline svg { color: var(--wa); flex: 0 0 auto; }
.wa-inline:hover { color: var(--wa); }

/* Bar - one-time prompt under the masthead */
.wa-bar { background: var(--wa-ink); color: #fff; }

.wa-bar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px;
}
.wa-bar-icon { display: flex; flex: 0 0 auto; color: var(--wa); }
.wa-bar-text { flex: 1 1 auto; font-size: 13.5px; }

.wa-bar-btn {
  flex: 0 0 auto;
  padding: 6px 16px;
  background: var(--wa);
  color: #06382f;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
}
.wa-bar-btn:hover { background: #fff; }

.wa-bar-close {
  flex: 0 0 auto;
  background: none;
  border: 0;
  color: rgba(255,255,255,.65);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.wa-bar-close:hover { color: #fff; }

@media (max-width: 620px) {
  .wa-card { padding: 16px; gap: 12px; }
  .wa-card-btn { width: 100%; text-align: center; }
  .wa-bar-text { font-size: 12.5px; }
  .wa-bar-inner { padding: 8px 14px; gap: 9px; }
}

/* ------------------------------------------------------------
   Lottery numbers

   Balls are large and monospaced on purpose. Someone is holding a
   ticket and comparing digit by digit, often on a phone, often in a
   hurry. Legibility beats elegance here.
   ------------------------------------------------------------ */

.lotto-balls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 22px 0;
}

.lotto-ball {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

/* The bonus and PowerBall are different in kind, not just position -
   they come from a separate machine and count differently. */
.lotto-ball-bonus { background: #d4a017; color: #3d2c05; }
.lotto-ball-power { background: var(--breaking); }

.lotto-key {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: -8px 0 20px;
}

.lotto-waiting {
  padding: 16px 18px;
  background: var(--accent-bg);
  border: 1px solid #bfe3d0;
  border-radius: var(--radius);
  font-size: 16px;
}

.lotto-disclaimer {
  margin-top: 28px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 620px) {
  .lotto-balls { gap: 7px; }
  .lotto-ball { width: 46px; height: 46px; font-size: 18px; }
}

/* ------------------------------------------------------------
   Social profile links

   Monochrome on purpose. Six brand colours in a footer turns it into
   a sticker album and pulls attention away from the sections and
   policy links that actually matter. They colour on hover, which is
   where recognition is useful.
   ------------------------------------------------------------ */

.social-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #b9c0cb;
  transition: background .15s ease, color .15s ease;
}

.social-icon:hover { color: #fff; }

.social-facebook:hover  { background: #1877f2; }
.social-x:hover         { background: #000; }
.social-instagram:hover { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
.social-tiktok:hover    { background: #010101; }
.social-youtube:hover   { background: #ff0000; }
.social-linkedin:hover  { background: #0a66c2; }

.social-list { list-style: none; margin: 0; padding: 0; }
.social-list li { margin-bottom: 9px; font-size: 14px; }

@media (max-width: 620px) {
  .social-icons { gap: 10px; }
  .social-icon { width: 40px; height: 40px; }   /* comfortable tap target */
}

/* ------------------------------------------------------------
   Monthly figures: SASSA dates and fuel prices

   Both are scanned, not read - someone wants one date or one number
   and wants it in under two seconds. Tabular figures, generous rows,
   and the number carrying the visual weight.
   ------------------------------------------------------------ */

.date-list { margin: 20px 0 26px; border-top: 1px solid var(--line); }

.date-row {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.date-day {
  flex: 0 0 108px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--accent-dk);
  font-variant-numeric: tabular-nums;
}

.date-what { flex: 1 1 auto; font-size: 15.5px; line-height: 1.4; }
.date-sub  { font-size: 13px; color: var(--muted); }

/* Fuel table.
   Now a real <table> - see the note in FuelPrice::render_body(). The
   old .fuel-row grid rules are kept below only so any article body
   still holding the old markup does not fall apart. */
.fuel-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 8px;
  border-top: 2px solid var(--ink);
  font-size: 15px;
}

.fuel-table th,
.fuel-table td {
  padding: 12px 10px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: baseline;
}

.fuel-table thead th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 9px 10px 9px 0;
}

.fuel-table tbody th { font-weight: 600; }

/* Legacy grid markup - only for bodies written before the change. */
.fuel-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  align-items: baseline;
}

.fuel-head {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 9px 0;
}

.fuel-price {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fuel-change {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fuel-change.up   { color: var(--breaking); font-weight: 600; }
.fuel-change.down { color: var(--accent); font-weight: 600; }

@media (max-width: 620px) {
  .date-row { flex-direction: column; gap: 4px; }
  .date-day { flex: none; font-size: 13px; }

  /* Tighter, but every column stays - a hidden column on a page about
     prices is a column somebody came for. */
  .fuel-table { font-size: 13.5px; }
  .fuel-table th,
  .fuel-table td { padding: 10px 7px 10px 0; }
  .fuel-table thead th { font-size: 9.5px; letter-spacing: .05em; }

  /* Legacy grid markup */
  .fuel-row { grid-template-columns: 1fr auto auto; gap: 8px; font-size: 14px; }
  .fuel-row > span:nth-child(2) { display: none; }
  .fuel-head > span:nth-child(2) { display: none; }
}

/* Pre-draw jackpot. The one number that IS known before a draw, so it
   carries weight - but visually distinct from the ball row so nobody
   reads it as a result. */
.lotto-jackpot {
  font-size: 19px;
  line-height: 1.5;
  padding: 14px 18px;
  background: var(--accent-bg);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 18px 0 22px;
}
.lotto-jackpot strong {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent-dk);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Lottery results hub

   Scanned, not read. Someone arrives holding a ticket wanting one
   row of numbers, usually on a phone, usually within seconds of the
   draw. Everything here is in service of finding the right game fast.
   ------------------------------------------------------------ */

.hub {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-bottom: 34px;
}

.hub-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
}

.hub-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 2px solid var(--ink);
}

.hub-head h2 {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
}

.hub-when {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.hub-game { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.hub-game:last-of-type { border-bottom: 0; }

.hub-game-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 9px;
}

/* Smaller than on an article page - a hub card holds up to three
   rows of balls and full-size ones would push the next game below
   the fold on a phone. */
.hub-balls { margin: 0 0 8px; gap: 7px; }
.hub-balls .lotto-ball { width: 42px; height: 42px; font-size: 16px; }

.hub-jackpot { font-size: 13px; color: var(--muted); }
.hub-jackpot strong { color: var(--ink); font-family: var(--mono); }

.hub-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hub-link { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.hub-link:hover { text-decoration: underline; }

.hub-next {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.hub-next strong { color: var(--ink-2); }

.hub-info { max-width: 760px; }
.hub-info h2 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 700;
  margin: 34px 0 12px;
}
.hub-info h3 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 22px 0 6px;
}
.hub-info p { font-size: 16px; line-height: 1.65; margin: 0 0 16px; color: #22282f; }

/* Lotto nav item - same treatment as Jobs so both read as
   destinations rather than news sections. */
.nav-link.nav-lotto { color: var(--accent); font-weight: 700; }
.nav-link.nav-lotto::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 2px;
}
.nav-link.nav-lotto:hover { color: var(--accent-dk); }
.nav-link.nav-lotto.is-active { border-bottom-color: var(--accent); }

@media (max-width: 620px) {
  .hub { grid-template-columns: 1fr; gap: 14px; }
  .hub-card { padding: 16px 17px; }
  .hub-balls .lotto-ball { width: 38px; height: 38px; font-size: 15px; }
}

/* ------------------------------------------------------------
   Correction notes

   Visible, dated, and clearly not part of the story. A correction
   that blends into the article is a correction nobody registers -
   which defeats the point of publishing one.
   ------------------------------------------------------------ */

.correction {
  margin: 30px 0;
  padding: 16px 18px;
  background: #fdf6ec;
  border: 1px solid #eddcc0;
  border-left: 4px solid #b8791a;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* A correction serious enough to sit at the top gets the stronger
   treatment - it is a warning, not a footnote. */
.correction-top {
  margin: 0 0 26px;
  background: var(--breaking-bg);
  border-color: #f0c2c2;
  border-left-color: var(--breaking);
}

.correction-label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a5a08;
  margin-bottom: 8px;
}
.correction-top .correction-label { color: var(--breaking); }

.correction-body { font-size: 15.5px; line-height: 1.6; color: #3d3a33; }
.correction-body p { margin: 0 0 10px; }
.correction-body p:last-child { margin-bottom: 0; }
.correction-top .correction-body { color: #5c2020; }

@media (max-width: 620px) {
  .correction { padding: 14px 15px; margin: 24px 0; }
  .correction-body { font-size: 15px; }
}

/* ------------------------------------------------------------
   Live blog

   The stream sits on the same time spine as the homepage river -
   timestamps down the left, entries hanging off it. A live blog is
   the purest case of the idea the whole design is built on: what
   matters is when each thing happened.
   ------------------------------------------------------------ */

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.live-badge.is-on  { background: var(--breaking); color: #fff; }
.live-badge.is-off { background: var(--line-soft); color: var(--muted); }

.live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.live-count { opacity: .75; letter-spacing: .06em; }

/* Stream ------------------------------------------------------ */

.live-stream { margin: 36px 0 0; }

.live-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 4px;
}
.live-head h2 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}
.live-auto {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.live-list { position: relative; padding-left: 78px; }

/* The spine */
.live-list::before {
  content: '';
  position: absolute;
  left: 57px; top: 18px; bottom: 18px;
  width: 1px;
  background: var(--line);
}

.lu { position: relative; padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.lu:last-child { border-bottom: 0; }

.lu-time {
  position: absolute;
  left: -78px;
  top: 22px;
  width: 52px;
  text-align: right;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.3;
}
.lu-date {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--muted-2);
  letter-spacing: .04em;
}

/* Marker on the spine */
.lu::before {
  content: '';
  position: absolute;
  left: -24px; top: 27px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--muted-2);
}
.lu-key::before { background: var(--accent); border-color: var(--accent); width: 9px; height: 9px; left: -25px; }

.lu-flag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-dk);
  background: var(--accent-bg);
  padding: 3px 9px;
  border-radius: 100px;
  margin-bottom: 8px;
}

.lu-head {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.012em;
  margin: 0 0 8px;
}

.lu-text { font-size: 16.5px; line-height: 1.65; color: #22282f; }
.lu-text p { margin: 0 0 12px; }
.lu-text p:last-child { margin-bottom: 0; }

.lu-img { width: 100%; height: auto; border-radius: var(--radius); margin: 14px 0 0; }

.lu-foot {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.lu-link { color: var(--muted); }
.lu-link:hover { color: var(--accent); }

/* An entry that arrived while you were reading. The highlight fades
   so it draws the eye once and then stops shouting. */
.lu-new { animation: lu-arrive 2.6s ease-out; }
@keyframes lu-arrive {
  0%   { background: #fff6e0; }
  100% { background: transparent; }
}

.live-empty { color: var(--muted); font-size: 15px; padding: 24px 0; }

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .lu-new   { animation: none; }
}

@media (max-width: 620px) {
  /* Spine collapses; the time moves above the entry, same as the
     homepage river does. */
  .live-list { padding-left: 0; }
  .live-list::before { display: none; }
  .lu::before { display: none; }

  .lu-time {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 6px;
    color: var(--breaking);
    font-size: 12px;
    letter-spacing: .06em;
  }
  .lu-date { display: inline; margin-left: 7px; color: var(--muted); }
  .lu-head { font-size: 18px; }
  .lu-text { font-size: 16px; }
}

/* An outlook that a later one has replaced. Amber, at the very top,
   above the figures - a reader arriving from a search weeks later
   must see this before they read a stale number as current. */
.fuel-superseded {
  padding: 14px 17px;
  margin: 0 0 22px;
  background: #fdf3e7;
  border: 1px solid #f0d9b5;
  border-left: 4px solid #b8791a;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: #6b4a12;
}
.fuel-superseded a { font-weight: 600; }

/* Biographies tab.
   Deliberately NOT given the accent colour and dot that Jobs and
   Lotto Results carry. Three loud items at the front of the strip
   would compete with each other and none would stand out - and those
   two are time-sensitive destinations in a way a biography archive
   is not. Weight alone separates it from the category names. */
.nav-link.nav-bios { font-weight: 700; }
.nav-link.nav-bios:hover { color: var(--accent); }
.nav-link.nav-bios.is-active { border-bottom-color: var(--ink); }