/* ==========================================================================
   readability.css: text-contrast fixes, loaded after layout.css.

   Only fixes places where text was hard or impossible to read in some themes.
   Every colour here comes from the active theme's own tokens, so each palette
   keeps its look. Nothing else changes.
   ========================================================================== */

/* 1. Desktop dropdown menus had a hard-coded white background, so in the dark
      themes (Night, Dark, Tokyo Night, Extinct, System-dark) the light menu
      text sat on white and was almost invisible. */
.dropdown { background: var(--lab-surface); border-color: var(--lab-line-strong); }
.dd-item b { color: var(--lab-ink); }
.dd-item span:not(.ic) span { color: var(--lab-muted); }
.dd-item:hover, .dd-item:focus-visible { background: var(--lab-bg-soft); }
.dd-item[aria-current="page"] b { color: var(--lab-accent); }

/* 2. GrowthEdge top bar: phone numbers and email were a fixed pale gold that was
      made for a dark bar; on the light themes they were unreadable. */
body.ge .topbar a { color: var(--lab-ink-2); }
body.ge .topbar a:hover { color: var(--lab-accent); }

/* 3. Small accent-coloured text on the dark bands and the footer (section labels,
      highlighted words, footer headings). Themes with a dark accent (teal,
      burgundy, red…) made it vanish. The accent keeps its hue and is only
      lightened as far as needed to read on the dark background. */
.section.dark, .site-footer {
  --lab-accent-on-dark: color-mix(in srgb, var(--lab-accent) 50%, var(--lab-dark-ink));
}
@supports (color: oklch(from red l c h)) {
  .section.dark, .site-footer { --lab-accent-on-dark: oklch(from var(--lab-accent) max(l, .74) c h); }
}
.section.dark .kicker,
.section.dark h1 em, .section.dark h2 em, .section.dark h3 em,
.site-footer h4, .site-footer .kicker { color: var(--lab-accent-on-dark); }

/* 4. Grey supporting text on tinted panels was slightly too faint in about half
      the themes. On those panels it now uses the theme's secondary ink colour. */
.section.alt, .section.tint, .callout, .result, .verdict, .seg, .tablist, .theme-panel {
  --lab-muted: var(--lab-ink-2);
  --muted: var(--lab-ink-2);
}