/* ==========================================================================
   The four hand-authored blog pages
   --------------------------------------------------------------------------
   /blog/es/estudios-hierro-…, /blog/es/analisis-inmunologico-…,
   /blog/fr/marqueurs-complement-… and /blog/fr/meilleure-ia-… predate the
   generated article template. Each carries its own ~430-line inline <style>
   block with two dozen hardcoded light colours — a white article surface with
   near-black text — so on a dark page they were unreadable. These four URLs
   carry the site's largest impression counts, so they are worth the file.

   That inline block is emitted after the stylesheet links, so every rule here
   is prefixed with `body` to outrank it on specificity rather than !important.
   Light mode is deliberately left alone; only the dark scheme needs repair.
   ========================================================================== */

body .blog-article { color: var(--ink); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body .blog-article h1,
  :root:not([data-theme='light']) body .blog-article h2,
  :root:not([data-theme='light']) body .blog-article h3,
  :root:not([data-theme='light']) body .blog-article h4,
  :root:not([data-theme='light']) body .author-info h4,
  :root:not([data-theme='light']) body .faq-item h4,
  :root:not([data-theme='light']) body .toc-box h4,
  :root:not([data-theme='light']) body .source-box h4 { color: var(--ink); }

  :root:not([data-theme='light']) body .blog-article p,
  :root:not([data-theme='light']) body .blog-article li,
  :root:not([data-theme='light']) body .faq-item p { color: var(--ink); }

  :root:not([data-theme='light']) body .author-info p,
  :root:not([data-theme='light']) body .meta-info,
  :root:not([data-theme='light']) body .image-caption,
  :root:not([data-theme='light']) body .breadcrumb-nav span { color: var(--ink-2); }

  :root:not([data-theme='light']) body .meta-info,
  :root:not([data-theme='light']) body .reference-table td,
  :root:not([data-theme='light']) body .reference-table th { border-color: var(--line); }

  :root:not([data-theme='light']) body .author-box,
  :root:not([data-theme='light']) body .toc-box { background: var(--surface-2); }

  :root:not([data-theme='light']) body .faq-item,
  :root:not([data-theme='light']) body .source-box,
  :root:not([data-theme='light']) body .reference-table { background: var(--surface-3); }

  :root:not([data-theme='light']) body .reference-table tr:nth-child(even) { background-color: var(--surface-2); }
  :root:not([data-theme='light']) body .reference-table tr:hover { background-color: var(--surface-3); }
  :root:not([data-theme='light']) body .reference-table td { color: var(--ink); }

  :root:not([data-theme='light']) body .info-box { background: var(--ok-soft); }
  :root:not([data-theme='light']) body .info-box h4,
  :root:not([data-theme='light']) body .info-box p { color: var(--ok); }

  :root:not([data-theme='light']) body .warning-box { background: var(--warn-soft); }
  :root:not([data-theme='light']) body .warning-box h4,
  :root:not([data-theme='light']) body .warning-box p { color: var(--warn); }

  :root:not([data-theme='light']) body .danger-box { background: var(--danger-soft); }
  :root:not([data-theme='light']) body .danger-box h4,
  :root:not([data-theme='light']) body .danger-box p { color: var(--danger); }

  :root:not([data-theme='light']) body .source-box a,
  :root:not([data-theme='light']) body .toc-box a,
  :root:not([data-theme='light']) body .breadcrumb-nav a { color: var(--brand); }
}

:root[data-theme='dark'] body .blog-article h1,
:root[data-theme='dark'] body .blog-article h2,
:root[data-theme='dark'] body .blog-article h3,
:root[data-theme='dark'] body .blog-article h4,
:root[data-theme='dark'] body .author-info h4,
:root[data-theme='dark'] body .faq-item h4,
:root[data-theme='dark'] body .toc-box h4,
:root[data-theme='dark'] body .source-box h4 { color: var(--ink); }

:root[data-theme='dark'] body .blog-article p,
:root[data-theme='dark'] body .blog-article li,
:root[data-theme='dark'] body .faq-item p { color: var(--ink); }

:root[data-theme='dark'] body .author-info p,
:root[data-theme='dark'] body .meta-info,
:root[data-theme='dark'] body .image-caption,
:root[data-theme='dark'] body .breadcrumb-nav span { color: var(--ink-2); }

:root[data-theme='dark'] body .meta-info,
:root[data-theme='dark'] body .reference-table td,
:root[data-theme='dark'] body .reference-table th { border-color: var(--line); }

:root[data-theme='dark'] body .author-box,
:root[data-theme='dark'] body .toc-box { background: var(--surface-2); }

:root[data-theme='dark'] body .faq-item,
:root[data-theme='dark'] body .source-box,
:root[data-theme='dark'] body .reference-table { background: var(--surface-3); }

:root[data-theme='dark'] body .reference-table tr:nth-child(even) { background-color: var(--surface-2); }
:root[data-theme='dark'] body .reference-table tr:hover { background-color: var(--surface-3); }
:root[data-theme='dark'] body .reference-table td { color: var(--ink); }

:root[data-theme='dark'] body .info-box { background: var(--ok-soft); }
:root[data-theme='dark'] body .info-box h4,
:root[data-theme='dark'] body .info-box p { color: var(--ok); }

:root[data-theme='dark'] body .warning-box { background: var(--warn-soft); }
:root[data-theme='dark'] body .warning-box h4,
:root[data-theme='dark'] body .warning-box p { color: var(--warn); }

:root[data-theme='dark'] body .danger-box { background: var(--danger-soft); }
:root[data-theme='dark'] body .danger-box h4,
:root[data-theme='dark'] body .danger-box p { color: var(--danger); }

:root[data-theme='dark'] body .source-box a,
:root[data-theme='dark'] body .toc-box a,
:root[data-theme='dark'] body .breadcrumb-nav a { color: var(--brand); }

/* Light mode: the page hardcodes #64748b for captions, which measures 4.48:1
   on the page surface — just under AA. */
body .image-caption { color: var(--ink-2); }

/* Dark mode: the page also hardcodes white surfaces (the navbar, cards, list
   panels). Lightening their text without darkening them left light-on-white
   at 1.13:1 — the worst reading on the site. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body .navbar,
  :root:not([data-theme='light']) body .navbar.bg-white,
  :root:not([data-theme='light']) body .card,
  :root:not([data-theme='light']) body .bg-white,
  :root:not([data-theme='light']) body .list-group-item,
  :root:not([data-theme='light']) body .highlight-box,
  :root:not([data-theme='light']) body .stats-grid > * { background-color: var(--surface); }

  :root:not([data-theme='light']) body .navbar .nav-link,
  :root:not([data-theme='light']) body .card h4,
  :root:not([data-theme='light']) body .card li,
  :root:not([data-theme='light']) body .list-group-item { color: var(--ink); }
}

:root[data-theme='dark'] body .navbar,
:root[data-theme='dark'] body .navbar.bg-white,
:root[data-theme='dark'] body .card,
:root[data-theme='dark'] body .bg-white,
:root[data-theme='dark'] body .list-group-item,
:root[data-theme='dark'] body .highlight-box,
:root[data-theme='dark'] body .stats-grid > * { background-color: var(--surface); }

:root[data-theme='dark'] body .navbar .nav-link,
:root[data-theme='dark'] body .card h4,
:root[data-theme='dark'] body .card li,
:root[data-theme='dark'] body .list-group-item { color: var(--ink); }

/* `.bg-white` and `.navbar.bg-white` carry Bootstrap's !important, and
   `.comparison-card` hardcodes #fff in the page's own inline block. All three
   left light text on a white panel in dark mode. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body .bg-white,
  :root:not([data-theme='light']) body .navbar.bg-white { background-color: var(--surface) !important; }
  :root:not([data-theme='light']) body .comparison-card,
  :root:not([data-theme='light']) body .comparison-card.deficiency,
  :root:not([data-theme='light']) body .comparison-card.overload { background: var(--surface-2); }
  :root:not([data-theme='light']) body .comparison-card h4,
  :root:not([data-theme='light']) body .comparison-card li,
  :root:not([data-theme='light']) body .comparison-card p { color: var(--ink); }
}

:root[data-theme='dark'] body .bg-white,
:root[data-theme='dark'] body .navbar.bg-white { background-color: var(--surface) !important; }
:root[data-theme='dark'] body .comparison-card,
:root[data-theme='dark'] body .comparison-card.deficiency,
:root[data-theme='dark'] body .comparison-card.overload { background: var(--surface-2); }
:root[data-theme='dark'] body .comparison-card h4,
:root[data-theme='dark'] body .comparison-card li,
:root[data-theme='dark'] body .comparison-card p { color: var(--ink); }