/*
Theme Name: Kéranos Média
Theme URI: https://keranosmedia.com
Author: Kéranos Média Dev Team
Author URI: https://keranosmedia.com
Description: Thème WordPress officiel et professionnel pour Kéranos Média, le portail d'information de référence de Sédhiou, du Pakao, de la Casamance et du Sénégal. Intègre 19 sections personnalisables, zéro répétition d'article, et une architecture haute performance.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keranos-media
Tags: news, magazine, responsive-layout, grid-layout, custom-menu, featured-images, translation-ready, theme-options
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=JetBrains+Mono:wght@400;500&display=swap&font-display=swap');

:root {
  --color-primary: #F91000;
  --color-pakao-green: #16A34A;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, Cambria, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --container-width: min(95vw, 1280px);
}

/* STRICT BASE RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  min-height: 100%;
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background-color: #ffffff;
  color: #18181b;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 0 auto;
}

#main-content {
  flex: 1 0 auto;
  width: 100%;
}

/* Category Badge on Photos Overlay (Exact React Layout Parity) */
.card-thumbnail-container {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.category-badge-overlay {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  background-color: #F91000 !important;
  color: #ffffff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 2.5px 8px !important;
  line-height: 1.1 !important;
  border-radius: 0px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  transition: background-color 0.2s ease !important;
}

@media (min-width: 640px) {
  .category-badge-overlay {
    top: 10px !important;
    left: 10px !important;
    font-size: 9px !important;
    padding: 3px 9px !important;
  }
}

.category-badge-overlay:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

.category-badge-overlay-lg {
  top: 10px !important;
  left: 10px !important;
  font-size: 9px !important;
  padding: 4px 10px !important;
  letter-spacing: 0.1em !important;
}

@media (min-width: 640px) {
  .category-badge-overlay-lg {
    top: 12px !important;
    left: 12px !important;
    font-size: 10px !important;
    padding: 4px 12px !important;
  }
}

.category-badge-overlay-sm {
  top: 4px !important;
  left: 4px !important;
  font-size: 7px !important;
  padding: 2px 6px !important;
}

@media (min-width: 640px) {
  .category-badge-overlay-sm {
    top: 6px !important;
    left: 6px !important;
    font-size: 7.5px !important;
    padding: 2px 6px !important;
  }
}

.dark body,
body.dark,
body.dark-theme,
html.dark body {
  background-color: #09090b;
  color: #f4f4f5;
}

/* STRICT REQUIREMENT: ZERO ROUNDED CORNERS ON ALL IMAGES ACROSS THE SITE */
img, svg, picture, video, canvas, figure, .safe-image {
  border-radius: 0px !important;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container Custom */
.container-custom {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-custom {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .container-custom {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Section Header Skew - Signature Kéranos Red Badge */
.section-header-skew {
  background-color: #F91000 !important;
  color: #ffffff !important;
  padding: 0.375rem 0.875rem !important;
  border-radius: 0px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: colors 0.2s ease !important;
}

.section-header-skew h2,
.section-header-skew h3 {
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin: 0 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

@media (min-width: 640px) {
  .section-header-skew h2,
  .section-header-skew h3 {
    font-size: 0.875rem !important;
  }
}

/* ==========================================================================
   Continuous Scrolling Ticker ("POPULAIRE" Marquee Effect)
   ========================================================================== */
.ticker-marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  width: 100%;
}

.ticker-marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: keranos-marquee 40s linear infinite;
}

.ticker-marquee-wrapper:hover .ticker-marquee-track,
.group-ticker:hover .ticker-marquee-track {
  animation-play-state: paused;
}

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

/* Category Ticker */
.ticker-wrap {
  display: inline-block;
  white-space: nowrap;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: #f4f4f5;
}
.dark ::-webkit-scrollbar-track {
  background: #18181b;
}
::-webkit-scrollbar-thumb {
  background: #d4d4d8;
  transition: background 0.2s ease;
}
.dark ::-webkit-scrollbar-thumb {
  background: #3f3f46;
}
::-webkit-scrollbar-thumb:hover {
  background: #a1a1aa;
}

/* WordPress Pagination Styling */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.5rem;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid #e4e4e7;
  background-color: #ffffff;
  color: #18181b;
  transition: all 0.2s ease;
}

.dark .page-numbers {
  border-color: #27272a;
  background-color: #18181b;
  color: #f4f4f5;
}

.page-numbers.current,
.page-numbers:hover {
  background-color: #F91000 !important;
  border-color: #F91000 !important;
  color: #ffffff !important;
}

.page-numbers.dots {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #71717a !important;
}

/* ==========================================================================
   MARKDOWN & EDITORIAL ARTICLE BODY TYPOGRAPHY (.markdown-body)
   Authentic WordPress & Kéranos Média Editorial Hierarchy & Fluid Spacing
   ========================================================================== */

.markdown-body,
.article-body {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.8;
  letter-spacing: -0.011em;
  color: #27272a;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dark .markdown-body,
.dark .article-body {
  color: #e4e4e7;
}

/* Headings Hierarchy */
.markdown-body h1,
.article-body h1 {
  font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #09090b;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.dark .markdown-body h1,
.dark .article-body h1 {
  color: #ffffff;
}

.markdown-body h2,
.article-body h2 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: #09090b;
  margin-top: 2rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e4e4e7;
}

.dark .markdown-body h2,
.dark .article-body h2 {
  color: #ffffff;
  border-bottom-color: #27272a;
}

.markdown-body h3,
.article-body h3 {
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: #18181b;
  margin-top: 1.5rem;
  margin-bottom: 0.625rem;
}

.dark .markdown-body h3,
.dark .article-body h3 {
  color: #f4f4f5;
}

.markdown-body h4,
.article-body h4 {
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.125rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: #18181b;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
}

.dark .markdown-body h4,
.dark .article-body h4 {
  color: #f4f4f5;
}

.markdown-body h5,
.markdown-body h6,
.article-body h5,
.article-body h6 {
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3f3f46;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.dark .markdown-body h5,
.dark .markdown-body h6,
.dark .article-body h5,
.dark .article-body h6 {
  color: #a1a1aa;
}

/* Paragraphs & Text */
.markdown-body p,
.article-body p {
  margin-bottom: 1.25rem;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Lead Paragraph (First Paragraph in Article) */
.markdown-body > p:first-of-type,
.article-body > p:first-of-type,
.markdown-body .lead,
.article-body .lead {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  font-weight: 600;
  line-height: 1.75;
  color: #09090b;
}

.dark .markdown-body > p:first-of-type,
.dark .article-body > p:first-of-type,
.dark .markdown-body .lead,
.dark .article-body .lead {
  color: #f4f4f5;
}

/* Links */
.markdown-body a,
.article-body a {
  color: #F91000;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(249, 16, 0, 0.4);
  transition: all 0.2s ease;
}

.markdown-body a:hover,
.article-body a:hover {
  color: #b91c1c;
  text-decoration-color: #F91000;
}

/* Bold & Strong */
.markdown-body strong,
.markdown-body b,
.article-body strong,
.article-body b {
  font-weight: 800;
  color: #09090b;
}

.dark .markdown-body strong,
.dark .markdown-body b,
.dark .article-body strong,
.dark .article-body b {
  color: #ffffff;
}

/* Emphasis & Italic */
.markdown-body em,
.markdown-body i,
.article-body em,
.article-body i {
  font-style: italic;
}

/* Journalistic Editorial Blockquote */
.markdown-body blockquote,
.article-body blockquote,
.wp-block-quote {
  position: relative;
  border-left: 4px solid #F91000 !important;
  background-color: #f9fafb;
  border-top: 1px solid #f4f4f5;
  border-right: 1px solid #f4f4f5;
  border-bottom: 1px solid #f4f4f5;
  padding: 1rem 1.25rem 1rem 1.25rem;
  margin: 1.75rem 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.65;
  color: #18181b;
  border-radius: 0px !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}

.dark .markdown-body blockquote,
.dark .article-body blockquote,
.dark .wp-block-quote {
  background-color: #121215;
  border-color: #1f1f23;
  color: #f4f4f5;
}

.markdown-body blockquote p,
.article-body blockquote p {
  margin-bottom: 0.5rem;
  text-align: left;
}

.markdown-body blockquote p:last-child,
.article-body blockquote p:last-child {
  margin-bottom: 0;
}

.markdown-body blockquote cite,
.article-body blockquote cite,
.wp-block-quote cite {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #F91000;
  margin-top: 0.625rem;
}

/* Lists */
.markdown-body ul,
.article-body ul {
  list-style-type: disc;
  margin: 1.25rem 0;
  padding-left: 1.5rem;
}

.markdown-body ul li,
.article-body ul li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.markdown-body ul li::marker,
.article-body ul li::marker {
  color: #F91000;
}

.markdown-body ol,
.article-body ol {
  list-style-type: decimal;
  margin: 1.25rem 0;
  padding-left: 1.5rem;
}

.markdown-body ol li,
.article-body ol li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

.markdown-body ol li::marker,
.article-body ol li::marker {
  color: #F91000;
  font-weight: 800;
}

/* Figures, Images & Captions */
.markdown-body figure,
.article-body figure,
.wp-block-image,
.wp-caption {
  margin: 1.75rem 0;
  width: 100%;
}

.markdown-body img,
.article-body img,
.wp-block-image img,
.wp-caption img {
  width: 100%;
  height: auto;
  border: 1px solid #e4e4e7;
  border-radius: 0px !important;
}

.dark .markdown-body img,
.dark .article-body img,
.dark .wp-block-image img,
.dark .wp-caption img {
  border-color: #27272a;
}

.markdown-body figcaption,
.article-body figcaption,
.wp-block-image figcaption,
.wp-caption-text {
  margin-top: 0.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: #71717a;
  font-style: italic;
}

.dark .markdown-body figcaption,
.dark .article-body figcaption,
.dark .wp-block-image figcaption,
.dark .wp-caption-text {
  color: #a1a1aa;
}

/* Tables */
.markdown-body table,
.article-body table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.875rem;
  border: 1px solid #e4e4e7;
}

.dark .markdown-body table,
.dark .article-body table,
.dark .wp-block-table table {
  border-color: #27272a;
}

.markdown-body th,
.article-body th,
.wp-block-table th {
  background-color: #f4f4f5;
  color: #09090b;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e4e4e7;
  text-align: left;
}

.dark .markdown-body th,
.dark .article-body th,
.dark .wp-block-table th {
  background-color: #18181b;
  color: #ffffff;
  border-color: #27272a;
}

.markdown-body td,
.article-body td,
.wp-block-table td {
  padding: 0.625rem 1rem;
  border: 1px solid #e4e4e7;
  color: #3f3f46;
}

.dark .markdown-body td,
.dark .article-body td,
.dark .wp-block-table td {
  border-color: #27272a;
  color: #d4d4d8;
}

.markdown-body tbody tr:nth-child(even),
.article-body tbody tr:nth-child(even) {
  background-color: #fafafa;
}

.dark .markdown-body tbody tr:nth-child(even),
.dark .article-body tbody tr:nth-child(even) {
  background-color: #121215;
}

/* Horizontal Rule / Separator */
.markdown-body hr,
.article-body hr,
.wp-block-separator {
  margin: 2rem 0;
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, #e4e4e7 20%, #e4e4e7 80%, transparent);
}

.dark .markdown-body hr,
.dark .article-body hr,
.dark .wp-block-separator {
  background: linear-gradient(to right, transparent, #27272a 20%, #27272a 80%, transparent);
}

/* Code & Preformatted */
.markdown-body code,
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 700;
  background-color: #f4f4f5;
  color: #F91000;
  padding: 0.15em 0.4em;
  border: 1px solid #e4e4e7;
  border-radius: 0px !important;
}

.dark .markdown-body code,
.dark .article-body code {
  background-color: #18181b;
  border-color: #27272a;
  color: #F91000;
}

.markdown-body pre,
.article-body pre {
  background-color: #09090b;
  color: #f4f4f5;
  padding: 1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid #27272a;
  border-radius: 0px !important;
}

.markdown-body pre code,
.article-body pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  border: none;
}

/* Print Styles */
@media print {
  header, nav, footer, aside, .no-print, #floating-share-bar, #comments, .ticker-wrap {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
}

/* Category Badge Overlay Styles (Exact site parity: vibrant red tag top-left of image) */
.card-thumbnail-container {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}

.category-badge-overlay {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 20 !important;
  display: inline-flex !important;
  align-items: center !important;
  background-color: #F91000 !important;
  color: #ffffff !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 3px 8px !important;
  line-height: 1.1 !important;
  border-radius: 0px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  transition: background-color 0.2s ease !important;
}

@media (min-width: 640px) {
  .category-badge-overlay {
    font-size: 9px !important;
    padding: 3px 9px !important;
  }
}

.category-badge-overlay:hover {
  background-color: #b91c1c !important;
  color: #ffffff !important;
}

.category-badge-overlay-lg {
  top: 12px !important;
  left: 12px !important;
  font-size: 9px !important;
  padding: 4px 12px !important;
  letter-spacing: 0.1em !important;
}

@media (min-width: 640px) {
  .category-badge-overlay-lg {
    font-size: 10px !important;
    padding: 4px 14px !important;
  }
}

.category-badge-overlay-sm {
  top: 6px !important;
  left: 6px !important;
  font-size: 7px !important;
  padding: 2px 6px !important;
}