/* ============================================================
   AboutDigitalCameras.com — Dark Mode Overrides (Version C)
   /css/dark.css
   ============================================================ */

/*
  Dark mode is toggled by adding `class="dark"` to <body>.
  CSS custom properties in variables.css already handle most
  color switches. This file handles structural overrides that
  cannot be covered by variable swaps alone.
*/

/* ── Body & Document ─────────────────────────────────────── */
body.dark {
  background-color: var(--clr-bg);
  color:            var(--clr-text);
}

/* Prevent flash of unstyled content on page load */
html.dark-preload body {
  background-color: #0d0d0d;
  color:            #e5e5e5;
}

/* ── Navigation ──────────────────────────────────────────── */
body.dark .main-nav {
  background:   var(--clr-nav-bg) !important;
  border-color: var(--clr-nav-border) !important;
}

body.dark .nav-links__item a {
  color: var(--clr-nav-text) !important;
}

body.dark .nav-links__item a:hover {
  color: var(--clr-nav-text-hover) !important;
}

body.dark .nav-links__item--active a {
  color: var(--clr-link) !important;
}

body.dark .nav-toggle {
  background:   #333 !important;
  color:        var(--clr-text);
}

body.dark .nav-toggle__bar {
  background: var(--clr-text);
}

body.dark .dark-toggle {
  background: #333 !important;
  color:      var(--clr-text) !important;
}

/* Mobile dropdown */
body.dark .nav-links {
  background:  var(--clr-nav-bg);
  border-color: var(--clr-nav-border);
}

body.dark .nav-links__item a:hover {
  background: #1a1a1a;
}

body.dark .nav-links__item--active a {
  background: #1a2744;
}

/* ── Logo ────────────────────────────────────────────────── */
body.dark .nav-logo img {
  filter: brightness(0.9) invert(0);
}

/* ── Breadcrumbs ─────────────────────────────────────────── */
body.dark .breadcrumbs {
  color: var(--clr-text-muted);
}

body.dark .breadcrumbs__item a {
  color: var(--clr-link);
}

body.dark .breadcrumbs__item a:hover {
  color: var(--clr-link-hover);
}

body.dark .breadcrumbs__sep {
  color: var(--clr-text-light);
}

/* ── Cards & Boxes ───────────────────────────────────────── */
body.dark .box,
body.dark .card {
  background: var(--clr-bg-card);
  color:      var(--clr-text);
}

body.dark .card:hover {
  box-shadow: var(--shadow-md);
}

body.dark .card__excerpt {
  color: var(--clr-text-muted);
}

body.dark .card__meta {
  color: var(--clr-text-light);
}

/* ── Tables ──────────────────────────────────────────────── */
body.dark table th {
  background: var(--clr-bg-muted);
  color:      var(--clr-text);
}

body.dark table td,
body.dark table th {
  border-color: var(--clr-border);
}

body.dark .spec-table th {
  background: var(--clr-bg-muted);
}

body.dark .spec-table tr:nth-child(even) td {
  background: #1a1a1a;
}

/* ── Forms ───────────────────────────────────────────────── */
body.dark .form-input,
body.dark .form-textarea,
body.dark .form-select {
  background:   var(--clr-bg-card);
  color:        var(--clr-text);
  border-color: var(--clr-border);
}

body.dark .form-input::placeholder,
body.dark .form-textarea::placeholder {
  color: var(--clr-text-light);
}

body.dark .form-input:focus,
body.dark .form-textarea:focus,
body.dark .form-select:focus {
  border-color: var(--clr-link);
  box-shadow:   0 0 0 3px rgba(78, 163, 255, 0.2);
}

body.dark .form-label {
  color: var(--clr-text);
}

/* ── Buttons ─────────────────────────────────────────────── */
body.dark .btn--primary {
  background:   var(--clr-primary);
  border-color: var(--clr-primary);
  color:        #ffffff;
}

body.dark .btn--secondary {
  color:        var(--clr-link);
  border-color: var(--clr-link);
}

body.dark .btn--secondary:hover {
  background: rgba(78, 163, 255, 0.15);
}

body.dark .btn--ghost {
  color:        var(--clr-text);
  border-color: var(--clr-border);
}

body.dark .btn--ghost:hover {
  background: var(--clr-bg-muted);
}

/* ── Tags & Badges ───────────────────────────────────────── */
body.dark .tag {
  color:        var(--clr-text-muted);
  border-color: var(--clr-border);
  background:   transparent;
}

body.dark .tag:hover {
  background:   rgba(78, 163, 255, 0.12);
  color:        var(--clr-link);
  border-color: var(--clr-link);
}

body.dark .badge {
  background: var(--clr-bg-muted);
  color:      var(--clr-text-muted);
}

body.dark .badge--primary {
  background: rgba(37, 99, 235, 0.2);
  color:      var(--clr-link);
}

body.dark .badge--success {
  background: rgba(22, 163, 74, 0.2);
  color:      #4ade80;
}

body.dark .badge--warning {
  background: rgba(245, 158, 11, 0.2);
  color:      #fbbf24;
}

body.dark .badge--danger {
  background: rgba(220, 38, 38, 0.2);
  color:      #f87171;
}

/* ── Alerts ──────────────────────────────────────────────── */
body.dark .alert--info {
  background:   rgba(37, 99, 235, 0.12);
  color:        #93c5fd;
  border-color: #2563eb;
}

body.dark .alert--success {
  background: rgba(22, 163, 74, 0.12);
  color:      #86efac;
  border-color: #16a34a;
}

body.dark .alert--warning {
  background: rgba(245, 158, 11, 0.12);
  color:      #fde68a;
  border-color: #f59e0b;
}

body.dark .alert--danger {
  background: rgba(220, 38, 38, 0.12);
  color:      #fca5a5;
  border-color: #dc2626;
}

/* ── Pros / Cons ─────────────────────────────────────────── */
body.dark .pros-cons__col {
  background: var(--clr-bg-card);
}

body.dark .pros-cons__col--pros li {
  background: rgba(22, 163, 74, 0.12);
  color:      var(--clr-text);
}

body.dark .pros-cons__col--cons li {
  background: rgba(220, 38, 38, 0.12);
  color:      var(--clr-text);
}

/* ── FAQ ─────────────────────────────────────────────────── */
body.dark .faq-item {
  background:   var(--clr-bg-card);
  border-color: var(--clr-border);
}

body.dark .faq-item__question {
  color: var(--clr-text);
}

body.dark .faq-item__question:hover {
  background: var(--clr-bg-muted);
}

body.dark .faq-item__answer {
  color:        var(--clr-text-muted);
  border-color: var(--clr-border);
}

/* ── Hero ────────────────────────────────────────────────── */
body.dark .hero {
  background:   var(--clr-bg-muted);
  border-color: var(--clr-border);
}

/* ── Widgets ─────────────────────────────────────────────── */
body.dark .widget {
  background:   var(--clr-bg-card);
  border-color: var(--clr-border);
}

body.dark .widget__list a {
  color: var(--clr-text);
}

body.dark .widget__list a:hover {
  color: var(--clr-link);
}

/* ── Pagination ──────────────────────────────────────────── */
body.dark .pagination__btn {
  background:   var(--clr-bg-card);
  border-color: var(--clr-border);
  color:        var(--clr-text);
}

body.dark .pagination__btn:hover {
  background:   rgba(78, 163, 255, 0.12);
  border-color: var(--clr-link);
  color:        var(--clr-link);
}

body.dark .pagination__btn--active {
  background:   var(--clr-primary);
  border-color: var(--clr-primary);
  color:        #fff;
}

/* ── Page Header ─────────────────────────────────────────── */
body.dark .page-header {
  border-color: var(--clr-border);
}

/* ── Horizontal Rule ─────────────────────────────────────── */
body.dark hr {
  border-color: var(--clr-border);
}

/* ── Code Blocks ─────────────────────────────────────────── */
body.dark code {
  background: var(--clr-bg-muted);
  color:      #e2e8f0;
}

body.dark pre {
  background:   var(--clr-bg-muted);
  border-color: var(--clr-border);
  color:        #e2e8f0;
}

/* ── Blockquote ──────────────────────────────────────────── */
body.dark blockquote {
  background:   rgba(37, 99, 235, 0.1);
  border-color: var(--clr-primary);
  color:        var(--clr-text-muted);
}

/* ── Footer ──────────────────────────────────────────────── */
body.dark .site-footer {
  background:  var(--clr-footer-bg);
  border-color: var(--clr-footer-border);
}

/* ── Dark Toggle Rotation ────────────────────────────────── */
body.dark .dark-toggle .dark-toggle__icon::before {
  content: '☀️';
}

/* Fallback for browsers that don't support ::before on button */
body:not(.dark) .dark-toggle .dark-toggle__icon {
  content: '🌙';
}