/*
 * NowInAfrica — France24-Inspired Design System
 * CSS Custom Properties + Global Styles
 */

/* ─── Custom Properties ─── */
:root {
  /* Brand Colors */
  --nia-red: #E5232A;
  --nia-red-dark: #B81B22;
  --nia-black: #151515;
  --nia-dark: #1A1A1A;
  --nia-text: #333333;
  --nia-text-light: #555555;
  --nia-gray-light: #F0F0F0;
  --nia-gray-mid: #DDDDDD;
  --nia-white: #FFFFFF;
  --nia-offwhite: #F5F5F5;

  /* Typography */
  --nia-font-heading: 'Playfair Display', Georgia, serif;
  --nia-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --nia-space-xs: 8px;
  --nia-space-sm: 16px;
  --nia-space-md: 24px;
  --nia-space-lg: 40px;
  --nia-space-xl: 60px;

  /* Layout */
  --nia-max-width: 1280px;
  --nia-content-width: 960px;
}

/* ─── Global Resets ─── */
body, .site-content {
  font-family: var(--nia-font-body) !important;
  color: var(--nia-text) !important;
  background: var(--nia-white) !important;
}

h1, h2, h3, h4, h5, h6,
.entry-title, .post-title {
  font-family: var(--nia-font-heading) !important;
  color: var(--nia-dark) !important;
  line-height: 1.15 !important;
}

/* ─── Section Labels ─── */
.nia-section-label {
  font-family: var(--nia-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--nia-red) !important;
  border-bottom: 2px solid var(--nia-red) !important;
  padding-bottom: 6px !important;
  margin-bottom: var(--nia-space-sm) !important;
}

/* ─── Dividers ─── */
.nia-section-divider {
  border: none !important;
  border-top: 1px solid var(--nia-gray-mid) !important;
  margin: var(--nia-space-md) 0 !important;
}

.nia-thick-divider {
  border: none !important;
  border-top: 3px solid var(--nia-red) !important;
  margin: var(--nia-space-sm) 0 !important;
}

/* ─── Hero Section ─── */
.nia-hero {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--nia-black) !important;
  color: var(--nia-white) !important;
}

.nia-hero .wp-block-cover {
  min-height: 520px !important;
}

.nia-hero .wp-block-cover__inner-container {
  padding: var(--nia-space-lg) !important;
  max-width: var(--nia-max-width) !important;
  margin: 0 auto !important;
}

.nia-hero-headline {
  color: var(--nia-white) !important;
  font-family: var(--nia-font-heading) !important;
  font-size: clamp(24px, 4vw, 48px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  margin: 0 0 var(--nia-space-sm) 0 !important;
}

.nia-hero-subtext {
  color: rgba(255,255,255,0.85) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  max-width: 600px !important;
}

/* ─── Breaking / Latest News ─── */
.nia-breaking {
  padding: var(--nia-space-md) 0 !important;
}

.nia-breaking .wp-block-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-left: 3px solid var(--nia-red) !important;
  padding-left: var(--nia-space-sm) !important;
}

.nia-breaking .wp-block-list li {
  font-size: 15px !important;
  padding: var(--nia-space-xs) 0 !important;
  border-bottom: 1px solid var(--nia-gray-light) !important;
  color: var(--nia-dark) !important;
  font-weight: 500 !important;
}

.nia-breaking .wp-block-list li:last-child {
  border-bottom: none !important;
}

.nia-breaking .wp-block-list li::before {
  content: "" !important;
}

/* ─── Live Tag ─── */
.nia-live-tag {
  display: inline-block;
  background: var(--nia-red) !important;
  color: var(--nia-white) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 2.5px 7px !important;
  border-radius: 0 !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* ─── Category Tag ─── */
.nia-category-tag {
  display: inline-block;
  background: transparent !important;
  color: var(--nia-red) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin-bottom: 6px !important;
}

.nia-category-tag:hover {
  color: var(--nia-red-dark) !important;
}

/* ─── Story Grid ─── */
.nia-stories-columns {
  gap: var(--nia-space-md) !important;
}

.nia-stories-columns .wp-block-column {
  background: var(--nia-white) !important;
  border: 1px solid var(--nia-gray-light) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

// Article thumbnail
.nia-thumb {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  display: block !important;
}

.nia-thumb img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
}

.nia-article-excerpt {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--nia-text) !important;
  margin: 0 !important;
  padding: var(--nia-space-sm) !important;
}

.nia-article-title {
  font-family: var(--nia-font-heading) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--nia-dark) !important;
  margin: 0 0 6px 0 !important;
  padding: var(--nia-space-sm) !important;
  padding-bottom: 0 !important;
}

.nia-article-title a {
  color: var(--nia-dark) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.nia-article-title a:hover {
  color: var(--nia-red) !important;
  text-decoration: none !important;
}

/* ─── Horizontal Scroll List ─── */
.nia-horizontal-list {
  display: flex !important;
  gap: var(--nia-space-md) !important;
  overflow-x: auto !important;
  padding-bottom: var(--nia-space-sm) !important;
}

.nia-horizontal-list .wp-block-column {
  flex: 0 0 280px !important;
  min-width: 280px !important;
}

/* ─── Editors Pick ─── */
.nia-editors-pick {
  border-top: 3px solid var(--nia-red) !important;
  padding-top: var(--nia-space-sm) !important;
}

.nia-editors-pick .wp-block-column {
  padding: var(--nia-space-sm) !important;
}

/* ─── Subscribe Banner ─── */
.nia-subscribe-banner {
  background: var(--nia-red) !important;
  padding: var(--nia-space-lg) !important;
  text-align: center !important;
  margin: var(--nia-space-lg) auto !important;
  max-width: var(--nia-content-width) !important;
  border-radius: 0 !important;
}

.nia-subscribe-banner h2 {
  color: var(--nia-white) !important;
  font-family: var(--nia-font-heading) !important;
  font-size: 28px !important;
  margin: 0 0 10px 0 !important;
}

.nia-subscribe-banner p {
  color: rgba(255,255,255,0.9) !important;
  font-size: 16px !important;
  margin: 0 0 var(--nia-space-md) 0 !important;
}

.nia-subscribe-banner .wp-block-buttons {
  justify-content: center !important;
}

/* ─── Buttons ─── */
.wp-block-button__link.nia-btn,
.nia-btn-subscribe {
  background: var(--nia-white) !important;
  color: var(--nia-red) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 3px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  text-decoration: none !important;
}

.wp-block-button__link.nia-btn:hover,
.nia-btn-subscribe:hover {
  background: var(--nia-gray-light) !important;
  color: var(--nia-red-dark) !important;
  text-decoration: none !important;
}

.wp-block-button__link.nia-btn-outline {
  background: transparent !important;
  color: var(--nia-white) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 3px !important;
  border: 2px solid var(--nia-white) !important;
}

/* ─── Topics Bar ─── */
.nia-topics-bar {
  background: var(--nia-offwhite) !important;
  border-bottom: 1px solid var(--nia-gray-mid) !important;
  padding: var(--nia-space-xs) 0 !important;
  font-size: 12px !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
}

.nia-topics-bar a {
  color: var(--nia-text-light) !important;
  text-decoration: none !important;
  padding: 0 12px !important;
  border-right: 1px solid var(--nia-gray-mid) !important;
  transition: color 0.2s ease !important;
}

.nia-topics-bar a:hover {
  color: var(--nia-red) !important;
  text-decoration: none !important;
}

/* ─── Single Post Article ─── */
.single-post .entry-header {
  max-width: var(--nia-content-width) !important;
  margin: 0 auto var(--nia-space-md) auto !important;
  padding: 0 var(--nia-space-sm) !important;
}

.single-post .entry-title {
  font-family: var(--nia-font-heading) !important;
  font-size: clamp(28px, 4vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--nia-dark) !important;
  margin: 0 0 var(--nia-space-sm) 0 !important;
}

.single-post .entry-content {
  max-width: var(--nia-content-width) !important;
  margin: 0 auto !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: var(--nia-text) !important;
}

.single-post .entry-content p {
  margin-bottom: var(--nia-space-md) !important;
}

/* ─── Featured Image ─── */
.nia-featured-image {
  width: 100% !important;
  max-height: 500px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ─── Sidebar Widgets ─── */
.nia-widget-title {
  font-family: var(--nia-font-body) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--nia-red) !important;
  border-bottom: 2px solid var(--nia-red) !important;
  padding-bottom: 6px !important;
  margin-bottom: var(--nia-space-sm) !important;
}

/* ─── Footer ─── */
.site-footer {
  background: var(--nia-black) !important;
  color: var(--nia-white) !important;
  border-top: 3px solid var(--nia-red) !important;
  padding: var(--nia-space-lg) 0 var(--nia-space-md) 0 !important;
}

.site-footer a {
  color: rgba(255,255,255,0.7) !important;
  transition: color 0.2s ease !important;
}

.site-footer a:hover {
  color: var(--nia-white) !important;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .nia-hero .wp-block-cover {
    min-height: 300px !important;
  }

  .nia-hero .wp-block-cover__inner-container {
    padding: var(--nia-space-md) !important;
  }

  .nia-stories-columns {
    flex-direction: column !important;
  }

  .nia-article-title {
    font-size: 15px !important;
  }

  .nia-subscribe-banner h2 {
    font-size: 22px !important;
  }
}

@media (max-width: 480px) {
  .nia-hero-headline {
    font-size: 22px !important;
  }

  .single-post .entry-title {
    font-size: 24px !important;
  }

  .single-post .entry-content {
    font-size: 16px !important;
  }
}