/* ═══════════════════════════════════════
   GROUNDTRUTH AFRICA — SHARED STYLES
═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap&font-display=swap');

:root {
  --black: #0a0a0a;
  --ink: #1a1a2e;
  --gray: #4a5568;
  --light-gray: #cbd5e0;
  --cream: #f7f8fc;
  --paper: #fafbff;
  --white: #ffffff;
  --red: #c0392b;
  --red-dark: #96281b;
  --navy: #1a2744;
  --navy-dark: #0f1829;
  --navy-light: #2d4068;
  --gold: #c9a84c;
  --gold-light: #e8c96a;
  --border: #1a2744;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Source Serif 4', Georgia, serif; background: var(--paper); color: var(--ink); min-height: 100vh; }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ── TICKER ── */
.ticker-bar { background: var(--red); color: white; display: flex; align-items: center; overflow: hidden; height: 36px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.ticker-label { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.12em; padding: 0 16px; white-space: nowrap; background: var(--red-dark); height: 100%; display: flex; align-items: center; border-right: 2px solid rgba(255,255,255,0.3); flex-shrink: 0; }
.ticker-track { display: flex; align-items: center; animation: ticker 50s linear infinite; white-space: nowrap; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-item { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 0 40px 0 0; }
.ticker-item::before { content: '◆'; margin-right: 12px; opacity: 0.7; font-size: 8px; }
@keyframes ticker { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } }

/* ── EDITION STRIP ── */
.edition-strip { background: var(--navy-light); border-bottom: 1px solid rgba(255,255,255,0.1); padding: 5px 40px; display: flex; justify-content: space-between; align-items: center; }
.edition-strip span, .edition-strip a { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: rgba(255,255,255,0.5); letter-spacing: 0.05em; text-decoration: none; }
.edition-strip .editions { display: flex; gap: 16px; }
.edition-strip a:hover { color: var(--gold); }

/* ── MASTHEAD ── */
.masthead { border-bottom: 3px double var(--gold); padding: 20px 40px 0; background: var(--navy); color: white; }
.masthead-top { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 12px; border-bottom: 1px solid var(--light-gray); margin-bottom: 16px; }
.masthead-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: rgba(255,255,255,0.5); }
.masthead-title { text-align: center; flex: 1; padding: 0 20px; min-width: 0; }
.masthead-title h1, .masthead-title a { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(20px, 3vw, 44px); line-height: 1; letter-spacing: -0.02em; color: var(--white); text-transform: uppercase; text-decoration: none; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 12px; }
.masthead-title .tagline { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; margin-top: 6px; }
.masthead-actions { display: flex; gap: 10px; align-items: center; }

/* ── BUTTONS ── */
.btn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 7px 14px; cursor: pointer; border: 1.5px solid rgba(255,255,255,0.5); background: transparent; color: white; transition: all 0.15s; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-filled { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-filled:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy-dark); }
.btn-red { background: var(--red); color: white; border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }

/* ── NAV ── */
.nav { background: var(--navy-dark); border-bottom: 3px solid var(--gold); padding: 0; display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,0.6); padding: 12px 18px; display: block; border-right: 1px solid rgba(255,255,255,0.1); white-space: nowrap; transition: all 0.15s; }
.nav a:first-child { border-left: none; }
.nav a:hover, .nav a.active { background: var(--gold); color: var(--navy-dark); }
.nav a.active-ai { background: var(--red); color: var(--white); }

/* ── LAYOUT ── */
.container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.container-narrow { max-width: 860px; margin: 0 auto; padding: 0 40px; }

/* ── LABELS ── */
.label { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 10px; display: inline-block; margin-bottom: 14px; }
.label-ai { background: var(--red); color: white; }
.label-world { background: var(--black); color: white; }
.label-local { background: var(--gold); color: white; }
.label-tech { background: #2c3e50; color: white; }
.label-africa { background: #5d4037; color: white; }
.label-investigation { background: #1a1a1a; color: white; border: 1px solid var(--red); }
.label-breaking { background: var(--red); color: white; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.75;} }

/* ── SECTION HEADS ── */
.section-head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.section-head h2 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 22px; text-transform: uppercase; white-space: nowrap; color: var(--navy); }
.section-head-line { flex: 1; height: 2px; background: var(--navy); }
.section-head a { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); text-decoration: none; white-space: nowrap; }

/* ── CARDS ── */
.card { border: 1.5px solid var(--border); background: var(--white); cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.card:hover { transform: translateY(-3px); box-shadow: 4px 4px 0 var(--black); }
.card-img { width: 100%; height: 180px; object-fit: cover; display: block; border-bottom: 1.5px solid var(--border); }
.card-img-placeholder { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; border-bottom: 1.5px solid var(--border); position: relative; overflow: hidden; }
.card-img-placeholder .img-bg { position: absolute; inset: 0; }
.card-img-placeholder .img-label { font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.2em; color: rgba(255,255,255,0.35); text-transform: uppercase; z-index: 1; }
.card-body { padding: 18px; }
.card-hed { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--black); margin-bottom: 10px; }
.card-deck { font-size: 13.5px; color: var(--gray); line-height: 1.55; font-weight: 300; margin-bottom: 14px; }
.card-meta { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--light-gray); }
.card-meta strong { color: var(--gray); }

/* ── SIDEBAR WIDGETS ── */
.sidebar-widget { border: 1.5px solid var(--border); background: var(--white); margin-bottom: 24px; }
.widget-head { background: var(--black); color: white; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; padding: 10px 16px; }
.widget-body { padding: 20px; }
.trending-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cream); cursor: pointer; }
.trending-item:last-child { border-bottom: none; padding-bottom: 0; }
.trending-num { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 900; color: var(--light-gray); line-height: 1; flex-shrink: 0; width: 30px; }
.trending-hed { font-family: 'Source Serif 4', serif; font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.trending-item:hover .trending-hed { color: var(--red); }

/* ── NEWSLETTER ── */
.newsletter-input { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 10px 12px; border: 1.5px solid var(--border); background: var(--paper); color: var(--ink); outline: none; transition: border-color 0.15s; width: 100%; }
.newsletter-input:focus { border-color: var(--red); background: white; }
.newsletter-input::placeholder { color: var(--light-gray); }
.newsletter-btn { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px; background: var(--black); color: white; border: none; cursor: pointer; transition: background 0.15s; width: 100%; }
.newsletter-btn:hover { background: var(--red); }

/* ── READ MORE ── */
.read-more { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.15s; font-weight: 600; }
.read-more:hover { gap: 10px; }
.read-more::after { content: '→'; }

/* ── TOAST ── */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--navy); color: white; padding: 14px 24px; border-left: 4px solid var(--gold); font-family: 'IBM Plex Mono', monospace; font-size: 12px; opacity: 0; transition: all 0.3s; z-index: 9000; white-space: nowrap; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── FOOTER ── */
footer { background: var(--navy-dark); color: white; padding: 48px 40px 24px; margin-top: 64px; border-top: 4px solid var(--gold); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer-brand h2 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 30px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: -0.02em; }
.footer-brand p { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.5); }
.footer-col h3 { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; margin-bottom: 8px; transition: color 0.15s; }
.footer-col a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-top: 20px; display: flex; justify-content: space-between; }
.footer-bottom p { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: rgba(255,255,255,0.35); }

/* ── CAT GRADIENTS ── */
.cat-bg-africa{background:linear-gradient(135deg,#5d4037,#8d6e63);}
.cat-bg-world{background:linear-gradient(135deg,#1a237e,#283593);}
.cat-bg-politics{background:linear-gradient(135deg,#37474f,#546e7a);}
.cat-bg-ai{background:linear-gradient(135deg,#b71c1c,#c62828);}
.cat-bg-investigations{background:linear-gradient(135deg,#212121,#424242);}
.cat-bg-business{background:linear-gradient(135deg,#e65100,#ef6c00);}
.cat-bg-society{background:linear-gradient(135deg,#4a148c,#6a1b9a);}
.cat-bg-opinion{background:linear-gradient(135deg,#880e4f,#ad1457);}
.cat-bg-culture{background:linear-gradient(135deg,#004d40,#00695c);}
.cat-bg-climate{background:linear-gradient(135deg,#01579b,#0277bd);}
.cat-bg-health{background:linear-gradient(135deg,#33691e,#558b2f);}

/* ── RESPONSIVE ── */
@media(max-width:1024px){ .footer-top{grid-template-columns:1fr 1fr;} }
@media(max-width:768px){
  .container,.container-narrow,.masthead,.edition-strip,footer{padding-left:16px;padding-right:16px;}
  .nav{padding:0 8px;}
  .masthead-top{flex-direction:column;align-items:center;gap:10px;}
  .masthead-title{padding:0;}
  .footer-top{grid-template-columns:1fr;}
}

.cat-bg-sport{background:linear-gradient(135deg,#1a6b1a,#2d8a2d);}
.cat-bg-arts{background:linear-gradient(135deg,#6b1a6b,#8a2d8a);}

.cat-bg-mining{background:linear-gradient(135deg,#4e342e,#6d4c41);}
.cat-bg-law{background:linear-gradient(135deg,#1a237e,#283593);}

/* ── SOCIAL ICONS IN HEADER ── */
.social-icons { display:flex;gap:6px;align-items:center; }
.social-icon { font-family:'Font Awesome 5 Free',sans-serif;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);color:var(--ink);text-decoration:none;font-size:13px;transition:all 0.15s;border-radius:2px; }
.social-icon:hover { background:var(--black);color:white;border-color:var(--black); }

/* Use emoji/text fallback for social icons */
.social-icons a { font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:0.05em;width:auto;padding:4px 7px;border:1.5px solid rgba(255,255,255,0.4);color:rgba(255,255,255,0.7);text-decoration:none;transition:all 0.15s;white-space:nowrap; }
.social-icons a:hover { background:var(--gold);color:var(--navy);border-color:var(--gold); }

/* ── SHARE BUTTONS ── */
.share-btn.share-fb { border-color:#1877f2;color:#1877f2; }
.share-btn.share-fb:hover { background:#1877f2;color:white; }
.share-btn.share-tw { border-color:#000;color:#000; }
.share-btn.share-tw:hover { background:#000;color:white; }
.share-btn.share-wa { border-color:#25d366;color:#25d366; }
.share-btn.share-wa:hover { background:#25d366;color:white; }
.share-btn.share-li { border-color:#0077b5;color:#0077b5; }
.share-btn.share-li:hover { background:#0077b5;color:white; }
.share-btn.share-tk { border-color:#000;color:#000; }
.share-btn.share-tk:hover { background:#000;color:white; }

@media(max-width:768px){ .social-icons{display:none;} }
#ada-float { display:block !important; }

/* ── ARTICLE BODY PARAGRAPH SPACING ── */
.article-content p { margin-bottom: 24px; line-height: 1.85; font-size: 18px; }
.article-content h2 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 26px; margin: 40px 0 16px; color: var(--black); border-bottom: 2px solid var(--black); padding-bottom: 8px; }
.article-content h3 { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 20px; margin: 32px 0 12px; color: var(--black); }
.article-content ul { margin: 0 0 24px 24px; }
.article-content ul li { margin-bottom: 10px; line-height: 1.7; font-size: 17px; }
.article-content blockquote { border-left: 4px solid var(--red); margin: 32px 0; padding: 16px 24px; font-style: italic; font-size: 20px; line-height: 1.7; color: var(--gray); background: var(--cream); }
.article-content strong { font-weight: 700; color: var(--black); }

/* Also target generic p tags inside story content divs */
#story-content p, #article-body p, .story-body p { margin-bottom: 24px; line-height: 1.85; font-size: 18px; }
#story-content h2, #article-body h2, .story-body h2 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 26px; margin: 40px 0 16px; border-bottom: 2px solid var(--black); padding-bottom: 8px; }
#story-content ul, #article-body ul, .story-body ul { margin: 0 0 24px 24px; }
#story-content ul li, #article-body ul li, .story-body ul li { margin-bottom: 10px; line-height: 1.7; }
#story-content blockquote, #article-body blockquote, .story-body blockquote { border-left: 4px solid var(--red); margin: 32px 0; padding: 16px 24px; font-style: italic; font-size: 20px; color: var(--gray); background: var(--cream); }


/* ── ARTICLE FEEDBACK ── */
.article-feedback { display:flex;align-items:center;gap:12px;padding:16px 0;border-top:1px solid var(--light-gray);margin-top:32px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gray);letter-spacing:0.05em; }
.feedback-btn { background:none;border:1.5px solid var(--border);padding:6px 14px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:13px;transition:all 0.15s;border-radius:2px; }
.feedback-btn:hover { background:var(--navy);color:white;border-color:var(--navy); }
.feedback-btn.active-up { background:#27ae60;color:white;border-color:#27ae60; }
.feedback-btn.active-down { background:var(--red);color:white;border-color:var(--red); }
.feedback-thanks { font-family:'IBM Plex Mono',monospace;font-size:11px;color:#27ae60;font-weight:600;display:none; }

/* Translate button */
.translate-btn { font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;background:transparent;color:rgba(255,255,255,0.6);border:none;padding:12px 18px;cursor:pointer;white-space:nowrap;transition:all 0.15s;border-left:1px solid rgba(255,255,255,0.1);margin-left:auto; }
.translate-btn:hover { background:var(--gold);color:var(--navy-dark); }
#translate-bar { display:none;background:var(--navy-dark);border-bottom:1px solid var(--gold);padding:8px 40px;align-items:center;gap:12px; }
#translate-bar.open { display:flex; }
#translate-bar span { font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.5); }
#translate-close { margin-left:auto;background:none;border:none;color:rgba(255,255,255,0.4);cursor:pointer;font-size:16px; }
.goog-te-banner-frame { display:none !important; }
body { top:0 !important; }
.goog-te-gadget { font-size:0 !important; }
.goog-te-gadget .goog-te-combo { font-family:'IBM Plex Mono',monospace;font-size:11px;padding:6px 10px;background:var(--navy);color:white;border:1px solid var(--gold);border-radius:2px;cursor:pointer; }

/* ── MOBILE HAMBURGER & DRAWER ── */
.mob-menu-btn{display:none;background:none;border:1.5px solid rgba(255,255,255,0.3);color:white;font-size:18px;padding:6px 12px;cursor:pointer;line-height:1;}
.mob-drawer{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.6);}
.mob-drawer.hidden{display:none!important;}
.mob-drawer-inner{position:absolute;top:0;left:0;width:280px;height:100%;background:var(--navy);overflow-y:auto;animation:slideIn 0.25s ease;}
@keyframes slideIn{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.mob-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,0.1);}
.mob-drawer-links{padding:12px 0;}
.mob-drawer-links a{display:block;padding:12px 20px;font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:rgba(255,255,255,0.75);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.05);transition:all 0.15s;}
.mob-drawer-links a:hover{background:rgba(255,255,255,0.08);color:white;}
.mob-quiz-link{background:var(--red)!important;color:white!important;margin:8px 16px 4px;border-radius:2px;}
.mob-ada-link{background:var(--black)!important;color:var(--gold)!important;margin:4px 16px 8px;border-radius:2px;}
.mob-divider{padding:10px 20px 6px;font-family:'IBM Plex Mono',monospace;font-size:9px;font-weight:600;letter-spacing:0.25em;text-transform:uppercase;color:rgba(255,255,255,0.3);}
@media(max-width:768px){
  .mob-menu-btn{display:block;}
  .nav{display:none;}
  .masthead-actions .btn{display:none;}

  /* MOBILE HOMEPAGE */
  .hero-grid{grid-template-columns:1fr!important;}
  .hero-sidebar{display:none!important;}
  .hero-main{padding:20px!important;border-right:none!important;}
  .hero-img{height:200px!important;}
  .hero-headline{font-size:22px!important;}
  .hero-deck{font-size:14px!important;}

  .content-area{grid-template-columns:1fr!important;gap:20px!important;}
  .cards-grid{grid-template-columns:1fr!important;gap:16px!important;}

  .ai-spotlight-inner{grid-template-columns:1fr!important;padding:20px!important;gap:20px!important;}
  .ai-spotlight-main{grid-column:1!important;}
  .ai-headline{font-size:20px!important;}

  /* MASTHEAD MOBILE */
  .masthead-top{flex-wrap:wrap;gap:8px;padding:12px 16px!important;}
  .masthead-meta{display:none;}
  .masthead-title a{font-size:18px!important;}
  .masthead-title .tagline{font-size:9px!important;}

  /* EDITION STRIP MOBILE */
  .edition-strip{display:none;}

  /* SIDEBAR MOBILE */
  aside{display:none!important;}

  /* FOOTER MOBILE */
  .footer-top{grid-template-columns:1fr!important;}
  .footer-brand p{font-size:13px!important;}

  /* SECTION HEAD */
  .section-head h2{font-size:18px!important;}

  /* CARD MOBILE */
  .card-img{height:180px!important;}
  .card-hed{font-size:16px!important;}

  /* AI SPOTLIGHT MOBILE */
  .ai-sidebar-stories{display:none!important;}

  /* TICKER */
  .ticker-bar{font-size:11px!important;}
}

.nav-filler { flex: 1; border-right: none; }

/* ── SKELETON LOADING — prevents layout shift ─────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 2px;
}
@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-hero { min-height: 400px; margin-bottom: 36px; }
.skeleton-card { height: 280px; margin-bottom: 24px; }
.skeleton-text { height: 16px; margin-bottom: 8px; width: 100%; }
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

/* ── IMAGE OPTIMISATION — prevent CLS from images ─────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.hero-img, .card-img {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
}

/* Live nav button animation */
@keyframes livepulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,0.6); }
  50% { box-shadow: 0 0 0 8px rgba(192,57,43,0); }
}
@keyframes dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}