/**
 * Capital FM - Dark Theme
 *
 * Strategy: All overrides are scoped to html.dark-mode
 * Your existing CSS files are NOT modified.
 * Toggle button adds/removes .dark-mode on <body>.
 *
 * Color mappings (light → dark):
 *   #fff / #ffffff            → #1a1a1a  (page background)
 *   #f4f4f4 / #f8f9fa / #f0f0f0 → #252525  (card / section backgrounds)
 *   #1a1a1a / #333 / #2c3e50  → #e8e8e8  (primary text)
 *   #666 / #555               → #aaaaaa  (secondary text)
 *   #888 / #999               → #888888  (muted text - unchanged)
 *   #e9ecef / #dee2e6 / #e5e5e5 → #333333 (borders)
 *   Brand red #E91D1B         → unchanged (stays vibrant in dark)
 *
 * @package Capital FM
 * @version 1.0 - Dark Theme
 */

/* ==========================================================================
   FLASH PREVENTION
   The inline <script> in <head> adds .no-dm-transition to <html>
   immediately on page load. This suppresses ALL transitions during the
   initial paint so dark-mode users never see a light flash.
   dark-theme.js removes the class after the page has loaded, re-enabling
   smooth transitions for manual toggle clicks only.
   ========================================================================== */

   html.no-dm-transition,
   html.no-dm-transition * {
       transition: none !important;
   }
   
   /* ==========================================================================
      SMOOTH TRANSITION
      Only active after .no-dm-transition is removed (i.e. after page load).
      Applied to html so it cascades to every element.
      ========================================================================== */
   
   html {
       transition: background-color 0.3s ease, color 0.3s ease;
   }
   
   html * {
       transition: background-color 0.3s ease,
                   color 0.3s ease,
                   border-color 0.3s ease,
                   box-shadow 0.3s ease;
   }
   
   /* Honour prefers-reduced-motion */
   @media (prefers-reduced-motion: reduce) {
       html,
       html * {
           transition: none !important;
       }
   }
   
   /* ==========================================================================
      DARK MODE TOGGLE BUTTON
      Lives in .header-buttons alongside Search / Listen Live
      ========================================================================== */
   
   .dark-mode-toggle {
       background-color: #ffffff;
       color: #FF0000;
       border: none;
       padding: 10px 12px;
       cursor: pointer;
       border-radius: 5px;
       height: 60%;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 6px;
       font-size: 14px;
       font-weight: 600;
       transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
       min-width: 44px; /* Accessibility: minimum tap target */
   }
   
   .dark-mode-toggle:hover {
       background-color: #f0f0f0;
       transform: scale(1.05);
   }
   
   /* The sun / moon SVG icons */
   .dark-mode-toggle .icon-sun,
   .dark-mode-toggle .icon-moon {
       width: 18px;
       height: 18px;
       display: block;
       flex-shrink: 0;
   }
   
   /* Light mode: show moon (click to go dark) */
   .dark-mode-toggle .icon-moon { display: block; }
   .dark-mode-toggle .icon-sun  { display: none;  }
   
   /* Dark mode: show sun (click to go light) */
   html.dark-mode .dark-mode-toggle .icon-moon { display: none;  }
   html.dark-mode .dark-mode-toggle .icon-sun  { display: block; }
   
   /* Button colours invert in dark mode to match the dark header */
   html.dark-mode .dark-mode-toggle {
       background-color: rgba(255, 255, 255, 0.15);
       color: #ffffff;
   }
   
   html.dark-mode .dark-mode-toggle:hover {
       background-color: rgba(255, 255, 255, 0.25);
   }
   
   /* Mobile version of the toggle (mirrors mobile listen-live button) */
   .dark-mode-toggle-mobile {
       background: linear-gradient(262deg, #880000 0%, #220000 100%);
       color: #ffffff;
       border: none;
       padding: 10px 12px;
       margin-left: 6px;
       cursor: pointer;
       border-radius: 20px;
       display: none;
       align-items: center;
       justify-content: center;
       min-width: 44px;
   }
   
   @media (max-width: 767px) {
       .dark-mode-toggle-mobile {
           display: flex;
       }
       .dark-mode-toggle { /* hide desktop toggle on mobile */
           display: none !important;
       }
   }
   
   /* ==========================================================================
      BASE — PAGE & BODY
      ========================================================================== */
   
   html.dark-mode {
       background-color: #121212;
       color: #e8e8e8;
   }
   
   html.dark-mode a {
       color: #e8e8e8;
   }
   
   /* ==========================================================================
      HEADER  (red stays — only search dropdown and buttons need adjusting)
      ========================================================================== */
   
   /* Nav links stay white — already white in light mode, no change needed */
   
   /* Sub-menu */
   html.dark-mode .nav-menu .sub-menu {
       background-color: #2a2a2a;
       border: 1px solid #444;
   }
   
   html.dark-mode .nav-menu .sub-menu > li > a {
       color: #e8e8e8;
   }
   
   html.dark-mode .nav-menu .sub-menu > li:hover > a {
       background-color: #333;
       color: #ffffff;
   }
   
   /* Header buttons */
   html.dark-mode .header-buttons button {
       background-color: rgba(255, 255, 255, 0.15);
       color: #ffffff;
   }
   
   html.dark-mode .header-buttons button:hover {
       background-color: rgba(255, 255, 255, 0.25);
   }
   
   /* Search dropdown */
   html.dark-mode .search-drop-wrapper {
       background-color: #1a1a1a;
       border: 1px solid #333;
   }
   
   html.dark-mode .search-form-input,
   html.dark-mode .search-drop-wrapper input[type="search"] {
       background-color: #2a2a2a;
       color: #e8e8e8;
       border: 1px solid #444;
   }
   
   html.dark-mode .search-form-input::placeholder {
       color: #888;
   }
   
   html.dark-mode .search-drop-wrapper button[type="submit"] {
       background-color: #E91D1B;
       color: #ffffff;
   }
   
   /* Mobile nav */
   html.dark-mode .mobile-nav-wrapper {
       background: #1a1a1a;
       border-bottom: 2px solid #E91D1B;
   }
   
   html.dark-mode .mobile-nav-wrapper .nav-menu > li > a {
       color: #e8e8e8;
   }
   
   html.dark-mode .search-form-mobile input[type="search"] {
       background-color: #2a2a2a;
       color: #e8e8e8;
       border: 1px solid #444;
   }
   
   /* ==========================================================================
      PLAYER DRAWER
      ========================================================================== */
   
   /* The player uses its own gradient — keep it, only adjust text if needed */
   /* No overrides needed — gradient cards look great in dark mode */
   
   /* ==========================================================================
      SITE CONTENT WRAPPER
      ========================================================================== */
   
   html.dark-mode .site-content {
       /* background-color: #121212; */
       background-color: #12121200;


   }
   
   html.dark-mode .container {
       background-color: transparent;
   }
   
   /* ==========================================================================
      HOMEPAGE LAYOUT
      ========================================================================== */
   
   /* Latest / Trending story columns */
   html.dark-mode .latest-stories,
   html.dark-mode .trending-stories {
       background: #121212;
   }
   
   html.dark-mode .latest-stories h2,
   html.dark-mode .latest-stories h3,
   html.dark-mode .trending-stories h2,
   html.dark-mode .trending-stories h3 {
       color: #e8e8e8;
   }
   
   html.dark-mode .latest-stories .news-item .content-container h3 a {
       color: #e8e8e8;
   }
   
   html.dark-mode .latest-stories .news-item .content-container .news-category a {
       color: #aaaaaa;
   }
   
   /* Featured story card */
   html.dark-mode .feature-story .news-item {
       background: #1e1e1e;
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
   }
   
   html.dark-mode .feature-story .content-container {
       background-color: #252525;
   }
   
   html.dark-mode .feature-story .news-category a {
       color: #aaaaaa;
   }
   
   html.dark-mode .feature-story .news-item h3 a {
       color: #e8e8e8;
   }
   
   /* ==========================================================================
      CATEGORY SECTIONS (Homepage + Category Archive)
      ========================================================================== */
   
   html.dark-mode .category-title h2,
   html.dark-mode .category-title h3 {
       color: #e8e8e8;
   }
   
   html.dark-mode .category-title a {
       color: #e0e0e0;
   }
   
   html.dark-mode .category-title h3 a {
       color: #e0e0e0;
   }
   
   html.dark-mode .category-card .category-title {
       background-color: #252525;
   }
   
   html.dark-mode .thick-gray-line,
   html.dark-mode .thick-gray-line-cat {
       background-color: #444;
   }
   
   /* View All link */
   html.dark-mode .view-all-link {
       color: #ff4d4b;
   }
   
   /* ==========================================================================
      SINGLE POST
      ========================================================================== */
   
   html.dark-mode .post-container {
       /* background-color: #121212; */
       background-color: #12121200;
   }
   
   html.dark-mode .article-title {
       color: #f0f0f0;
   }
   
   html.dark-mode .article-meta {
       color: #aaaaaa;
   }
   
   html.dark-mode .meta-separator {
       color: #444;
   }
   
   html.dark-mode .reading-time,
   html.dark-mode .post-author,
   html.dark-mode .post-author a {
       color: #aaaaaa;
   }
   
   html.dark-mode .post-content {
       color: #d8d8d8;
   }
   
   html.dark-mode .post-content a {
       color: #ff6b69;
   }
   
   html.dark-mode .post-content h2,
   html.dark-mode .post-content h3,
   html.dark-mode .post-content h4 {
       color: #f0f0f0;
   }
   
   /* Article toolbar */
   html.dark-mode .article-toolbar {
       background: #252525;
       border-color: #333;
   }
   
   /* Article tags */
   html.dark-mode .article-tags {
       border-top-color: #333;
   }
   
   html.dark-mode .article-tags a {
       background: #2a2a2a;
       border-color: #444;
       color: #cccccc;
   }
   
   html.dark-mode .article-tags a:hover {
       background: #E91D1B;
       color: #ffffff;
       border-color: #E91D1B;
   }
   
   html.dark-mode .tags-label {
       color: #aaaaaa;
   }
   
   /* Author bio */
   html.dark-mode .author-bio {
       background: #252525;
       border-left-color: #E91D1B;
   }
   
   html.dark-mode .author-name a {
       color: #e8e8e8;
   }
   
   html.dark-mode .author-description {
       color: #aaaaaa;
   }
   
   /* Inline related stories */
   html.dark-mode .inline-related-stories {
       background: linear-gradient(135deg, #252525 0%, #1e1e1e 100%);
       border-color: #333;
   }
   
   html.dark-mode .inline-related-title {
       color: #f0f0f0;
   }
   
   html.dark-mode .inline-related-card {
       background: #2a2a2a;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
   
   html.dark-mode .inline-related-content h4 a {
       color: #e8e8e8;
   }
   
   /* Full related stories section */
   html.dark-mode .related-stories-section {
       background: #181818;
   }
   
   html.dark-mode .related-stories-section .section-title {
       color: #f0f0f0;
   }
   
   html.dark-mode .related-story-content h3 a,
   html.dark-mode .related-story-card .category-title a {
       color: #e8e8e8;
   }
   
   /* Sidebar */
   html.dark-mode .latest-stories-container {
       background: transparent;
   }
   
   html.dark-mode .latest-stories-container h2 {
       color: #f0f0f0;
   }
   
   html.dark-mode .sidebar-news-item {
       border-bottom-color: #333;
   }
   
   html.dark-mode .sidebar-content h3 a {
       color: #e8e8e8;
   }
   
   /* ==========================================================================
      SEARCH PAGE
      ========================================================================== */
   
   html.dark-mode .search-page-container {
       background-color: #121212;
   }
   
   html.dark-mode .search-form-section {
       color: #e8e8e8;
   }
   
   html.dark-mode .search-page-title {
       color: #f0f0f0;
   }
   
   html.dark-mode .search-field {
       background-color: #2a2a2a;
       color: #e8e8e8;
       border: 1px solid #444;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   }
   
   html.dark-mode .search-field::placeholder {
       color: #888;
   }
   
   html.dark-mode .search-submit {
       background: #2a2a2a;
       color: #e0e0e0;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   }
   
   html.dark-mode .search-result-item {
       background: #1e1e1e;
       border-color: #333;
   }
   
   html.dark-mode .search-result-item:hover {
       box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
   }
   
   html.dark-mode .result-title a {
       color: #e8e8e8;
   }
   
   html.dark-mode .result-meta {
       color: #aaaaaa;
   }
   
   html.dark-mode .result-excerpt {
       color: #bbbbbb;
   }
   
   html.dark-mode .result-footer {
       border-top-color: #333;
   }
   
   html.dark-mode .result-author {
       color: #aaaaaa;
   }
   
   /* No-results page */
   html.dark-mode .no-results h2,
   html.dark-mode .no-results h3 {
       color: #f0f0f0;
   }
   
   html.dark-mode .no-results p {
       color: #aaaaaa;
   }
   
   html.dark-mode .categories-list ul,
   html.dark-mode .recent-posts-grid {
       color: #e0e0e0;
   }
   
   html.dark-mode .categories-list a,
   html.dark-mode .recent-posts-grid a {
       color: #cccccc;
   }
   
   html.dark-mode .recent-post-card h4 a {
       color: #e0e0e0;
   }
   
   /* ==========================================================================
      AUTHOR PAGE
      ========================================================================== */
   
   html.dark-mode .author-articles-container {
       background: transparent;
   }
   
   html.dark-mode .author-header h1 {
       color: #f0f0f0;
   }
   
   html.dark-mode .author-item {
       background: #1e1e1e;
       border-color: #333;
   }
   
   html.dark-mode .author-item:hover {
       box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
   }
   
   html.dark-mode .author-item-title a {
       color: #e8e8e8;
   }
   
   html.dark-mode .author-item-meta {
       color: #aaaaaa;
   }
   
   html.dark-mode .author-item-excerpt {
       color: #bbbbbb;
   }
   
   /* ==========================================================================
      MULTIMEDIA SECTION (Homepage cards)
      ========================================================================== */
   
   html.dark-mode .multimedia-card {
       background: #1e1e1e;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
   
   html.dark-mode .multimedia-card .card-title {
       color: #e8e8e8;
   }
   
   html.dark-mode .multimedia-card .card-meta {
       color: #aaaaaa;
   }
   
   html.dark-mode .multimedia-subsection .section-title {
       color: #f0f0f0;
   }
   
   /* ==========================================================================
      MULTIMEDIA PAGE (Videos / Podcasts)
      ========================================================================== */
   
   html.dark-mode .media-card {
       background: #1e1e1e;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
   
   html.dark-mode .card-content h3 a {
       color: #e8e8e8;
   }
   
   html.dark-mode .card-meta {
       color: #aaaaaa;
   }
   
   html.dark-mode .tab-btn {
       background: #1e1e1e;
       border-color: #444;
       color: #cccccc;
   }
   
   html.dark-mode .tab-btn:hover {
       border-color: #E91D1B;
       color: #ff4d4b;
   }
   
   html.dark-mode .tab-btn.active {
       background: #E91D1B;
       border-color: #E91D1B;
       color: #ffffff;
   }
   
   /* Video cards */
   html.dark-mode .video-card {
       background: #1e1e1e;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
   }
   
   html.dark-mode .video-title-link {
       color: #e8e8e8;
   }
   
   html.dark-mode .video-card-excerpt {
       color: #aaaaaa;
   }
   
   html.dark-mode .video-card-meta {
       color: #888;
       border-top-color: #333;
   }
   
   /* Lightbox */
   html.dark-mode .lightbox-content {
       background: #1e1e1e;
   }
   
   html.dark-mode .lightbox-info {
       background: #1e1e1e;
   }
   
   html.dark-mode #lightbox-title,
   html.dark-mode .lightbox-video-title {
       color: #f0f0f0;
   }
   
   html.dark-mode .lightbox-video-excerpt {
       color: #aaaaaa;
   }
   
   html.dark-mode .lightbox-article-full::-webkit-scrollbar-track {
       background: #2a2a2a;
   }
   
   html.dark-mode .lightbox-article-full::-webkit-scrollbar-thumb {
       background: #555;
   }
   
   html.dark-mode .article-content {
       color: #d0d0d0;
   }
   
   html.dark-mode .article-content h2,
   html.dark-mode .article-content h3,
   html.dark-mode .article-content h4 {
       color: #f0f0f0;
   }
   
   html.dark-mode .lightbox-social-share {
       border-top-color: #333;
       border-bottom-color: #333;
   }
   
   /* ==========================================================================
      CATEGORY ARCHIVE PAGE
      ========================================================================== */
   
   html.dark-mode .categories-section {
       background: transparent;
   }
   
   /* ==========================================================================
      TERMS / STATIC PAGES
      ========================================================================== */
   
   html.dark-mode .page-title {
       color: #f0f0f0;
   }
   
   html.dark-mode .page-subtitle {
       color: #aaaaaa;
   }
   
   html.dark-mode .terms-section h2 {
       color: #f0f0f0;
       border-bottom-color: #333;
   }
   
   html.dark-mode .terms-section p,
   html.dark-mode .terms-section li {
       color: #cccccc;
   }
   
   html.dark-mode .last-updated {
       background: #252525;
       border-left-color: #E91D1B;
       color: #cccccc;
   }
   
   /* ==========================================================================
      FOOTER  (red background stays, minor text tweaks)
      ========================================================================== */
   
   /* Footer is already dark red — keep as-is.
      Only adjust the yellow footer-bottom strip for legibility. */
   html.dark-mode .footer-bottom {
       background-color: #1a0000;
       border-top-color: #333;
   }
   
   html.dark-mode .footer-bottom p {
       color: #cccccc;
   }
   
   /* ==========================================================================
      ADS  (already has dark-mode rules in ads.css, this reinforces them)
      ========================================================================== */
   
   html.dark-mode .cfm-ad > div {
       /* background: #2a2a2a; */
   }
   
   html.dark-mode .article-top-ad-container {
       /* background: #1e1e1e; */
       background: #1e1e1e00;       ;
       border-bottom-color: #333;
   }
   
   /* ==========================================================================
      PAGINATION
      ========================================================================== */
   
   html.dark-mode .page-numbers {
       color: #e0e0e0;
       background: #252525;
       border-color: #444;
   }
   
   html.dark-mode .page-numbers.current {
       background: #E91D1B;
       color: #ffffff;
       border-color: #E91D1B;
   }
   
   html.dark-mode .page-numbers:hover:not(.current) {
       background: #333;
   }
   
   /* ==========================================================================
      FOCUS / ACCESSIBILITY  (keep red outline visible in dark mode)
      ========================================================================== */
   
   html.dark-mode :focus-visible {
       outline-color: #ff4d4b;
   }
   
   /* ==========================================================================
      PRINT  (force light mode for print regardless of preference)
      ========================================================================== */
   
   @media print {
       html.dark-mode,
       html.dark-mode * {
           background: #fff !important;
           color: #000 !important;
           border-color: #ccc !important;
       }
   }


   /* ==========================================================================
   SINGLE EVENT — GALLERY, VIDEOS & EDITORIAL COVERAGE — DARK MODE
   Append this block to the bottom of dark-theme.css
   ========================================================================== */

/* Section titles */
html.dark-mode .cfm-event-section-title {
    color: #f0f0f0;
    border-bottom-color: #E91D1B;
}

html.dark-mode .cfm-event-gallery-count {
    background: #2a2a2a;
    color: #888;
}

/* Gallery */
html.dark-mode .cfm-gallery-item {
    background: #252525;
}

/* Coverage cards */
html.dark-mode .cfm-coverage-card {
    background: #1e1e1e;
    border-color: #333;
}

html.dark-mode .cfm-coverage-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

html.dark-mode .cfm-coverage-card-thumb {
    background: #2a2a2a;
}

html.dark-mode .cfm-coverage-card-thumb-placeholder {
    color: #444;
}

html.dark-mode .cfm-coverage-card-title {
    color: #e8e8e8;
}

html.dark-mode .cfm-coverage-card-date {
    color: #888;
}

/* Video embeds — no change needed (black bg works in both modes) */

/* Lightbox — already dark, no overrides needed */