/* ================================================================
   ASP Africa — Dark Mode Stylesheet
   Activated when <body class="dark-mode"> is set.
   Only overrides currently-light sections (page bg, cards, forms).
   Already-dark sections (masthead, hero, footer) stay as they are.
   ================================================================ */

body.dark-mode{background:#0F0E0C;color:#D6D3D1}

/* Top-level page bg */
body.dark-mode .feed-section,
body.dark-mode .jobs-section,
body.dark-mode .subscribe-section,
body.dark-mode .article-wrap{background:#0F0E0C}

/* Intelligence feed cards */
body.dark-mode .card{background:#1C1917;border-color:#292524}
body.dark-mode .card:hover{background:#1F1C1A;border-color:#F59E0B}
body.dark-mode .card-title{color:#FAFAF9}
body.dark-mode .card-summary{color:#A8A29E}
body.dark-mode .card-author{color:#78716C}
body.dark-mode .card-footer{border-top-color:#292524}
body.dark-mode .card-arrow{background:#292524;color:#F59E0B}
body.dark-mode .card:hover .card-arrow{background:#F59E0B;color:#0C0A09}
body.dark-mode .card-date{color:#78716C}
body.dark-mode .card-img-placeholder{background:#1C1917}

/* Section headers */
body.dark-mode .section-title{color:#FAFAF9}
body.dark-mode .section-sub{color:#A8A29E}
body.dark-mode .section-eyebrow-line{background:#F59E0B}
body.dark-mode .section-eyebrow-text{color:#FBBF24}

/* Language pills (filter row) */
body.dark-mode .lang-pill{background:#1C1917;border-color:#292524;color:#A8A29E}
body.dark-mode .lang-pill:hover,
body.dark-mode .lang-pill.active{background:#F59E0B;color:#0C0A09;border-color:#F59E0B}

/* Pagination */
body.dark-mode .pag-btn{background:#1C1917;border-color:#292524;color:#A8A29E}
body.dark-mode .pag-btn:hover,
body.dark-mode .pag-btn.cur{background:#F59E0B;color:#0C0A09;border-color:#F59E0B}

/* Empty state */
body.dark-mode .empty-state{background:#1C1917;border-color:#292524;color:#A8A29E}
body.dark-mode .empty-state h3{color:#FAFAF9}
body.dark-mode .empty-state i{color:#44403C}

/* Featured section is already dark — leave alone */
/* Hero is already dark — leave alone */

/* Jobs section */
body.dark-mode .jobs-section{background:linear-gradient(180deg,#0F0E0C 0%,#1A1614 100%)}
body.dark-mode .job-card{background:#1C1917;border-color:#292524}
body.dark-mode .job-card:hover{border-color:#059669;background:#1F1C1A}
body.dark-mode .job-card.trilingual{background:linear-gradient(180deg,#1C1917 0%,#2A1F0A 100%);border-color:rgba(245,158,11,.4)}
body.dark-mode .job-title{color:#FAFAF9}
body.dark-mode .job-desc{color:#A8A29E}
body.dark-mode .job-org{color:#78716C}
body.dark-mode .job-tag{background:#292524;border-color:#3F3633;color:#D6D3D1}
body.dark-mode .job-footer{border-top-color:#292524}
body.dark-mode .job-salary{color:#34D399}
body.dark-mode .btn-browse-all{color:#34D399;border-color:#34D399}
body.dark-mode .btn-browse-all:hover{background:#34D399;color:#0C0A09}

/* Jobs empty state */
body.dark-mode .jobs-empty{background:#1C1917;border-color:#292524}
body.dark-mode .jobs-empty-title{color:#FAFAF9}
body.dark-mode .jobs-empty-text{color:#A8A29E}
body.dark-mode .jobs-empty-icon{background:rgba(5,150,105,.2);color:#34D399}

/* Subscribe section: keep amber gradient but darken card */
body.dark-mode .subscribe-form{background:#1C1917;box-shadow:0 24px 70px rgba(0,0,0,.5)}
body.dark-mode .subscribe-form-title{color:#FAFAF9}
body.dark-mode .subscribe-form-sub{color:#A8A29E}
body.dark-mode .subscribe-label{color:#D6D3D1}
body.dark-mode .subscribe-input{background:#0F0E0C;border-color:#292524;color:#FAFAF9}
body.dark-mode .subscribe-input:focus{background:#1C1917;border-color:#F59E0B}
body.dark-mode .subscribe-input::placeholder{color:#57534E}
body.dark-mode .subscribe-radio label{background:#0F0E0C;border-color:#292524;color:#A8A29E}
body.dark-mode .subscribe-radio label:hover{border-color:#F59E0B;color:#F59E0B}
body.dark-mode .tier-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
body.dark-mode .tier-card-name{color:rgba(12,10,9,.55)}

/* Pagination + filter buttons */
body.dark-mode .feed-header h2,
body.dark-mode .jobs-header h2{color:#FAFAF9}

/* Article page */
body.dark-mode .article-wrap{background:#0F0E0C;color:#D6D3D1}
body.dark-mode .article-title{color:#FAFAF9}
body.dark-mode .article-meta{color:#78716C;border-bottom-color:#292524}
body.dark-mode .article-content{color:#D6D3D1}
body.dark-mode .article-content h2,
body.dark-mode .article-content h3{color:#FAFAF9}
body.dark-mode .article-content blockquote{background:rgba(245,158,11,.08);color:#A8A29E;border-left-color:#F59E0B}
body.dark-mode .article-content a{color:#FBBF24}
body.dark-mode .article-share{border-top-color:#292524}
body.dark-mode .article-share span{color:#78716C}
body.dark-mode .share-btn{background:#1C1917;border-color:#292524;color:#A8A29E}
body.dark-mode .share-btn:hover{background:#F59E0B;color:#0C0A09;border-color:#F59E0B}

/* Article hero placeholder */
body.dark-mode .article-hero{background:linear-gradient(135deg,#1C1917,#0F0E0C)}

/* Reactions widget */
body.dark-mode .asp-reactions{background:linear-gradient(135deg,#1F1C1A 0%,#1C1917 100%);border-color:#292524}
body.dark-mode .asp-react-prompt{color:#FAFAF9}
body.dark-mode .asp-react-btn{background:#0F0E0C;border-color:#292524;color:#D6D3D1}
body.dark-mode .asp-react-btn:hover{background:#1C1917;border-color:#F59E0B}
body.dark-mode .asp-react-count{background:#292524;color:#A8A29E}
body.dark-mode .asp-react-total{color:#A8A29E}
body.dark-mode .asp-react-total strong{color:#FAFAF9}

/* Live event banner — keep its custom color, just adjust borders */
body.dark-mode .live-event-banner{border-bottom-color:rgba(255,255,255,.12)}

/* The toggle button itself */
.dark-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:8px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);font-size:14px;
  cursor:pointer;transition:all 200ms ease;flex-shrink:0
}
.dark-toggle:hover{color:#F59E0B;border-color:#F59E0B;background:rgba(245,158,11,.1)}
.dark-toggle .icon-sun{display:none}
.dark-toggle .icon-moon{display:block}
body.dark-mode .dark-toggle .icon-sun{display:block}
body.dark-mode .dark-toggle .icon-moon{display:none}
body.dark-mode .dark-toggle{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#FBBF24}

/* Breaking ticker / FX strip — already dark, leave alone */
/* Footer — already dark, leave alone */
/* Topbar — already dark, leave alone */

/* Smooth transition between modes */
body{transition:background-color 200ms ease,color 200ms ease}
.card,.job-card,.subscribe-form,.subscribe-input,.subscribe-radio label,
.asp-reactions,.asp-react-btn,.share-btn,.lang-pill,.pag-btn,.empty-state,.jobs-empty,
.article-wrap,.article-meta,.article-content blockquote,.article-share,.share-btn{
  transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease
}

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  body,.card,.job-card,.subscribe-form,.subscribe-input,.subscribe-radio label,
  .asp-reactions,.asp-react-btn,.share-btn,.lang-pill,.pag-btn,.empty-state,.jobs-empty,
  .article-wrap,.article-meta,.article-content blockquote,.article-share,.share-btn{
    transition:none !important
  }
}