/* N24India — self-hosted dark-mode CSS fallback.
   Loaded by includes/header.php AFTER the Tailwind play CDN.

   Why this exists: the Tailwind play CDN generates `dark:` rules at runtime
   (darkMode:'class' → `&:is(.dark *)`). If that CDN is unreachable (blocked
   DNS/ISP, offline caching proxies, corporate filters), dark mode visually
   breaks even though the JS class toggle still works. These static rules
   mirror the handful of dark: utilities actually used on the site, so the
   theme switch works even without the CDN.

   Colors follow Tailwind's default palette + this site's config:
     gray-700 #374151 | gray-800 #1f2937 | gray-900 #111827
     gray-950 #030712 | secondary == #1f2937 (site config)
   Selectors use `.dark *`-style descendant matching, identical to the CDN's
   `&:is(.dark *)`, and are pinned with !important so they win over any
   partially generated CDN stylesheet. */

html.dark body,
html.dark .n24-dk-body {
  background-color: #111827 !important; /* bg-gray-900 */
  color: #f3f4f6 !important;            /* text-gray-100 */
}

/* Core surfaces ------------------------------------------------------- */
html.dark .n24-dk-surface,
html.dark header,
html.dark nav,
html.dark main > .container,
html.dark article,
html.dark aside,
html.dark section {
  background-color: #1f2937 !important; /* bg-secondary / bg-gray-800 */
  color: #e5e7eb !important;             /* text-gray-200 */
  border-color: #374151 !important;     /* border-gray-700 */
}
html.dark header,
html.dark nav { background-color: #1f2937 !important; }

/* Cards / panels that are bg-white in light mode ------------------------ */
html.dark .bg-white,
html.dark [class*="bg-white"] {
  background-color: #1f2937 !important;
}

/* Text colours ---------------------------------------------------------- */
html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700 { color: #f9fafb !important; }
html.dark .text-gray-600, html.dark .text-gray-500 { color: #d1d5db !important; }
html.dark .text-gray-400, html.dark .text-gray-300, html.dark .text-gray-200 { color: #9ca3af !important; }
html.dark .text-white { color: #ffffff !important; }

/* Borders --------------------------------------------------------------- */
html.dark .border-gray-200, html.dark .border-gray-300, html.dark .border-gray-400,
html.dark [class*="border-gray"] { border-color: #374151 !important; }

/* Form controls ----------------------------------------------------------- */
html.dark input, html.dark textarea, html.dark select {
  background-color: #374151 !important; /* bg-gray-700 */
  color: #f9fafb !important;
  border-color: #4b5563 !important;
}
html.dark input::placeholder, html.dark textarea::placeholder { color: #9ca3af !important; }

/* Footer is already dark; keep it dark in both modes ------------------------ */
html.dark footer { background-color: #111827 !important; color: #e5e7eb !important; }

/* Sticky footer ad bar ------------------------------------------------------ */
html.dark #sticky-footer-ad { background-color: #1f2937 !important; border-color: #374151 !important; }

/* Search overlay + mobile menu ---------------------------------------------- */
html.dark #search-overlay,
html.dark #mobile-menu { background-color: #1f2937 !important; }

/* Keep images and embeds untouched ------------------------------------------ */
html.dark img, html.dark iframe, html.dark svg { background: transparent !important; }