/*
Theme Name: IJNN World
Theme URI: https://ijnn.world
Description: Independent Journalist News Network — Custom WordPress Theme
Version: 1.2
Author: IJNN
*/

/* ═══════════════════════════════════════════════════
   IJNN.WORLD — STYLESHEET
   Palette: Blue / Black / White
   Fonts: Cheltenham (headlines), IBM Plex Mono (labels/UI), Inter (body)
   All colours use CSS variables. Swap --accent to change brand blue instantly.
═══════════════════════════════════════════════════ */

/* ── SELF-HOSTED FONT: Cheltenham ── */
@font-face {
  font-family: 'Cheltenham';
  src: url('fonts/cheltenham-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* Core palette */
  --black:        #0a0c10;
  --black-soft:   #141720;
  --black-mid:    #1e2230;
  --gray-dark:    #2c3144;
  --gray-mid:     #4a5168;
  --gray-muted:   #6e7a96;
  --gray-light:   #a8b2c8;
  --gray-pale:    #d4dae8;
  --white-warm:   #f0f3f8;
  --white:        #ffffff;

  /* Brand blue — change --accent here to retheme the whole site */
  --accent:       #1a5fff;
  --accent-deep:  #1248cc;
  --accent-mid:   #2e6bff;
  --accent-pale:  #dce8ff;
  --accent-faint: #f0f5ff;

  /* Typography — Cheltenham (headlines) + Inter (body) + IBM Plex Mono (UI) */
  --serif: 'Cheltenham', 'Georgia', serif;
  --mono:  'IBM Plex Mono', 'Courier New', monospace;
  --sans:  'Inter', 'Helvetica Neue', sans-serif;

  /* Layout */
  --max-width: 1160px;
  --pad-x: 24px;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--black);
  font-size: 15px;
  line-height: 1.6;
}

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

/* ── LAYOUT WRAPPER ── */
.site-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ════════════════════════════════════
   TOP BAR
════════════════════════════════════ */
.topbar {
  background: var(--black);
  color: var(--gray-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px var(--pad-x);
  border-bottom: 1px solid var(--gray-dark);
}

.topbar-date,
.topbar-tagline,
.topbar-social a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--gray-muted);
}

.topbar-tagline {
  color: var(--gray-light);
  text-align: center;
}

.topbar-social {
  display: flex;
  gap: 16px;
  align-items: center;
}

.topbar-social a:hover { color: var(--accent-mid); }

/* ════════════════════════════════════
   MASTHEAD
════════════════════════════════════ */
.masthead {
  background: var(--white);
  padding: 20px var(--pad-x) 14px;
  text-align: center;
  border-bottom: 3px solid var(--black);
  position: relative;
}

.masthead-eyebrow {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-bottom: 5px;
}

.masthead-title {
  font-family: var(--serif);
  font-size: clamp(36px, 6.5vw, 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--black);
}

.masthead-title span { color: var(--accent); }

.masthead-abbr {
  font-family: var(--serif);
  font-size: clamp(10px, 1.1vw, 13px);
  font-style: italic;
  color: var(--gray-muted);
  letter-spacing: .06em;
  margin-top: 5px;
}

.masthead-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.masthead-rule hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--gray-pale);
}

.masthead-rule .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* ════════════════════════════════════
   NAV
════════════════════════════════════ */
nav {
  display: flex;
  align-items: center;
  background: var(--white);
  border-bottom: 2px solid var(--black);
  overflow-x: auto;
}

nav a {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gray-mid);
  padding: 11px 18px;
  border-right: 1px solid var(--gray-pale);
  white-space: nowrap;
  transition: color .15s, background .15s;
  flex-shrink: 0;
}

nav a:first-child { border-left: 1px solid var(--gray-pale); }
nav a:hover { color: var(--black); background: var(--white-warm); }

nav a.nav-active,
nav .current-menu-item a {
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
  margin-bottom: -2px;
}

nav a.nav-cta {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
  margin-left: auto;
}

nav a.nav-cta:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* ════════════════════════════════════
   BREAKING TICKER
════════════════════════════════════ */
.ticker {
  background: var(--black-soft);
  display: flex;
  align-items: center;
  height: 32px;
  overflow: hidden;
}

.ticker-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--white);
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
}

.ticker-scroll { overflow: hidden; flex: 1; }

.ticker-track {
  display: flex;
  animation: tickerScroll 32s linear infinite;
  white-space: nowrap;
}

.ticker-track:hover { animation-play-state: paused; }

.ticker-track span {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gray-light);
  padding: 0 40px 0 0;
  letter-spacing: .04em;
}

.ticker-track span b {
  color: var(--white);
  font-weight: 500;
}

@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ════════════════════════════════════
   CONTENT TYPE PANELS
════════════════════════════════════ */
.content-types {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 2px solid var(--black);
  background: var(--white);
}

.ct-panel {
  padding: 28px 24px;
  border-right: 1px solid var(--gray-pale);
  cursor: pointer;
  transition: background .15s;
  position: relative;
}

.ct-panel:last-child { border-right: none; }
.ct-panel:hover { background: var(--white-warm); }

.ct-panel::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 14px;
}

.ct-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 8px;
  color: var(--black);
}

.ct-desc {
  font-size: 13px;
  color: var(--gray-mid);
  line-height: 1.55;
  margin-bottom: 14px;
}

.ct-count {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-muted);
  border-top: 1px solid var(--gray-pale);
  padding-top: 10px;
}

.ct-count b { color: var(--accent); font-weight: 500; }

/* ════════════════════════════════════
   SECTION LABEL
════════════════════════════════════ */
.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--pad-x) 10px;
}

.section-label-text {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--black);
  font-weight: 500;
  white-space: nowrap;
}

.section-label hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--gray-pale);
}

.section-label-tag {
  font-family: var(--mono);
  font-size: 9px;
  padding: 2px 9px;
  border: 1px solid var(--gray-pale);
  letter-spacing: .1em;
  color: var(--gray-mid);
  white-space: nowrap;
}

.section-label-tag.live {
  border-color: var(--accent);
  color: var(--accent);
}

/* ════════════════════════════════════
   FRONT PAGE GRID
════════════════════════════════════ */
.front-page {
  display: grid;
  grid-template-columns: 1fr 1fr 300px;
  border-bottom: 2px solid var(--black);
  min-height: 600px;
}

/* ── HERO COLUMN ── */
.fp-main {
  padding: 24px var(--pad-x);
  border-right: 1px solid var(--gray-pale);
}

.hero-tag {
  display: inline-block;
  background: var(--accent);
  color: var(--white);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 9px;
  margin-bottom: 12px;
}

.hero-headline {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 900;
  line-height: 1.12;
  margin-bottom: 12px;
  cursor: pointer;
  transition: color .15s;
}

.hero-headline:hover { color: var(--accent); }

.hero-deck {
  font-size: 15px;
  color: var(--gray-mid);
  line-height: 1.65;
  margin-bottom: 14px;
  font-style: italic;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}

.hero-byline {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--gray-muted);
  letter-spacing: .06em;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.hero-byline b { color: var(--gray-dark); font-weight: 500; }

.hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--black-soft);
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

.hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-body {
  font-size: 14px;
  color: var(--gray-mid);
  line-height: 1.75;
  margin-bottom: 14px;
}

.read-more {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}

.read-more:hover { color: var(--accent-deep); border-color: var(--accent-deep); }

/* ── SECONDARY COLUMN ── */
.fp-secondary {
  border-right: 1px solid var(--gray-pale);
  display: flex;
  flex-direction: column;
}

.secondary-story {
  padding: 18px 20px;
  border-bottom: 1px solid var(--gray-pale);
  cursor: pointer;
  transition: background .12s;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.secondary-story:hover { background: var(--white-warm); }
.secondary-story:last-child { border-bottom: none; }

.ss-content { flex: 1; min-width: 0; }

.ss-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}

.ss-headline {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 6px;
  color: var(--black);
}

.ss-headline:hover { color: var(--accent); }

.ss-deck {
  font-size: 13px;
  color: var(--gray-mid);
  line-height: 1.5;
  margin-bottom: 8px;
}

.ss-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--gray-muted);
  letter-spacing: .04em;
}

.ss-thumb {
  width: 82px;
  height: 72px;
  flex-shrink: 0;
  background: var(--black-soft);
  overflow: hidden;
}

.ss-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── SIDEBAR ── */
.sidebar-section {
  border-bottom: 1px solid var(--gray-pale);
}

.sidebar-section-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 11px 16px 9px;
  background: var(--white-warm);
  border-bottom: 1px solid var(--gray-pale);
  color: var(--gray-muted);
}

.sidebar-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gray-pale);
  cursor: pointer;
  transition: background .12s;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sidebar-item:hover { background: var(--white-warm); }
.sidebar-item:last-child { border-bottom: none; }

.sidebar-num {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-pale);
  line-height: 1;
  flex-shrink: 0;
  width: 22px;
  margin-top: 1px;
}

.sidebar-hed {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--black);
}

.sidebar-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--gray-muted);
  letter-spacing: .04em;
}

/* ── SIDEBAR PODCAST PLAYER ── */
.podcast-player {
  padding: 16px;
}

.player-card {
  background: var(--black);
  padding: 16px;
  margin-bottom: 12px;
}

.player-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-bottom: 6px;
}

.player-show {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 4px;
}

.player-episode {
  font-size: 11px;
  color: var(--gray-muted);
  margin-bottom: 12px;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.play-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  background: transparent;
  transition: background .15s;
}

.play-btn:hover { background: var(--accent); }

.play-btn::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 9px;
  border-color: transparent transparent transparent var(--accent);
  margin-left: 3px;
  transition: border-color .15s;
}

.play-btn:hover::after { border-left-color: var(--white); }

.progress-bar {
  flex: 1;
  height: 2px;
  background: var(--gray-dark);
  position: relative;
  cursor: pointer;
}

.progress-fill {
  width: 38%;
  height: 100%;
  background: var(--accent);
}

.player-time {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--gray-muted);
}

.browse-link {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray-muted);
  border-bottom: 1px solid var(--gray-pale);
  padding-bottom: 1px;
  transition: color .15s;
}

.browse-link:hover { color: var(--accent); }

/* ════════════════════════════════════
   FEATURED VOICES
════════════════════════════════════ */
.voices-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 2px solid var(--black);
}

.voice-card {
  padding: 22px 18px;
  border-right: 1px solid var(--gray-pale);
  cursor: pointer;
  transition: background .12s;
}

.voice-card:hover { background: var(--white-warm); }
.voice-card:last-child { border-right: none; }

.voice-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-pale);
  margin-bottom: 14px;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  overflow: hidden;
}

.voice-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-name {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
  line-height: 1.2;
  color: var(--black);
}

.voice-beat {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--accent);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.voice-platform {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--gray-muted);
  letter-spacing: .06em;
}

.voice-desc {
  font-size: 12px;
  color: var(--gray-mid);
  margin-top: 10px;
  line-height: 1.55;
}

/* ════════════════════════════════════
   MEDIA STRIP
════════════════════════════════════ */
.media-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--black);
}

.media-panel {
  padding: 28px var(--pad-x);
  border-right: 1px solid var(--gray-pale);
  cursor: pointer;
  transition: background .12s;
}

.media-panel:hover { background: var(--white-warm); }
.media-panel:last-child { border-right: none; }

.media-type {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.media-type-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
}

.media-hed {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 10px;
  color: var(--black);
}

.media-desc {
  font-size: 13px;
  color: var(--gray-mid);
  margin-bottom: 14px;
  line-height: 1.6;
}

.media-platforms {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--gray-muted);
  letter-spacing: .06em;
  margin-bottom: 16px;
}

.btn-outline {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--black);
  padding: 8px 16px;
  color: var(--black);
  cursor: pointer;
  transition: all .15s;
  background: transparent;
}

.btn-outline:hover {
  background: var(--black);
  color: var(--white);
}

/* ════════════════════════════════════
   SUBMIT CTA
════════════════════════════════════ */
.submit-cta {
  background: var(--black);
  color: var(--white);
  padding: 48px var(--pad-x);
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  border-bottom: 3px solid var(--accent);
}

.submit-cta-hed {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  line-height: 1.08;
}

.submit-cta-hed em {
  color: var(--accent);
  font-style: normal;
}

.submit-cta-sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-bottom: 8px;
}

.submit-cta-body {
  font-size: 14px;
  color: var(--gray-light);
  line-height: 1.65;
  margin-bottom: 22px;
}

.submit-btns {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.btn-primary {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--white);
  padding: 11px 22px;
  border: none;
  cursor: pointer;
  transition: background .15s;
}

.btn-primary:hover { background: var(--accent-deep); }

.btn-ghost {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--gray-light);
  padding: 11px 22px;
  border: 1px solid var(--gray-dark);
  cursor: pointer;
  transition: all .15s;
}

.btn-ghost:hover { border-color: var(--gray-light); color: var(--white); }

.pillars {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.pillar {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.pillar-num {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
  width: 30px;
}

.pillar-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: var(--white);
  display: block;
  margin-bottom: 2px;
}

.pillar-body {
  font-size: 12px;
  color: var(--gray-muted);
  line-height: 1.55;
}

/* ════════════════════════════════════
   FOOTER
════════════════════════════════════ */
footer {
  background: var(--white-warm);
  border-top: 2px solid var(--black);
  padding: 36px var(--pad-x) 18px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 24px;
}

.footer-brand-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 900;
  color: var(--black);
  margin-bottom: 3px;
}

.footer-brand-tag {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--gray-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.footer-brand-desc {
  font-size: 12px;
  color: var(--gray-mid);
  line-height: 1.65;
}

.footer-col-title {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray-muted);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--gray-pale);
}

.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--gray-mid);
  padding: 4px 0;
  transition: color .12s;
}

.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  border-top: 1px solid var(--gray-pale);
  padding-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-bottom p {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--gray-muted);
  letter-spacing: .06em;
}

/* ════════════════════════════════════
   RESPONSIVE
   Breakpoints: 900px tablet, 600px mobile
════════════════════════════════════ */
@media (max-width: 900px) {
  .front-page {
    grid-template-columns: 1fr 1fr;
  }

  .fp-sidebar {
    display: none;
  }

  .voices-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .submit-cta {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 600px) {
  :root { --pad-x: 16px; }

  .topbar-tagline { display: none; }
  .topbar-social  { display: none; }

  .content-types {
    grid-template-columns: 1fr;
  }

  .ct-panel { border-right: none; border-bottom: 1px solid var(--gray-pale); }

  .front-page {
    grid-template-columns: 1fr;
  }

  .fp-secondary { border-right: none; }

  .voices-grid {
    grid-template-columns: 1fr 1fr;
  }

  .media-strip {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  nav a { padding: 10px 12px; font-size: 9px; }
}