/**
 * Legibility fixes for /free, /free-2, /checklist and /start.
 * Loaded after page inline styles and free-resource-shell.css.
 */

body[data-i18n-page="free"],
body[data-i18n-page="free-2"],
body[data-i18n-page="checklist"],
body[data-i18n-page="start"] {
  color: #f8fafc;
  color-scheme: dark;
}

body[data-i18n-page] main,
body[data-i18n-page] .resource-switcher,
body[data-i18n-page] .free-nav {
  position: relative;
  z-index: 1;
}

/* Top bar: dark glass so header copy stays readable */
body[data-i18n-page] .topbar {
  background: rgba(6, 17, 31, 0.94);
  border-bottom-color: rgba(148, 163, 184, 0.22);
}

body[data-i18n-page] .topbar .brand,
body[data-i18n-page] .topbar .brand-name {
  color: #f8fafc;
}

body[data-i18n-page] .topbar .brand-sub {
  color: #94a3b8;
}

body[data-i18n-page] .lang-switcher-label-text {
  color: #94a3b8;
}

body[data-i18n-page] .lang-switcher-select {
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(148, 163, 184, 0.32);
}

body[data-i18n-page] .lang-switcher-select option {
  color: #0f172a;
  background: #f8fafc;
}

/* Hero & sections on page background (outside glass panels) */
body[data-i18n-page] main h1,
body[data-i18n-page] main .section-title,
body[data-i18n-page] main .hero-title {
  color: #f8fafc;
}

body[data-i18n-page] main .hero-lead,
body[data-i18n-page] main .section-subtitle,
body[data-i18n-page] main .hero-note,
body[data-i18n-page] main .starter-note {
  color: #cbd5e1;
}

body[data-i18n-page] .eyebrow,
body[data-i18n-page] .free-nav-label {
  color: #94a3b8;
}

body[data-i18n-page] .free-nav-link {
  color: #cbd5e1;
}

body[data-i18n-page] .free-nav-link:hover,
body[data-i18n-page] .free-nav-link.active,
body[data-i18n-page] .free-nav-link.start-active {
  color: #e0f2fe;
}

body[data-i18n-page] .free-nav-link.nav-start {
  color: #94a3b8;
}

body[data-i18n-page] .free-nav-link.nav-start:hover,
body[data-i18n-page] .free-nav-link.nav-start:focus-visible {
  color: #e0f2fe;
}

body[data-i18n-page] .resource-tag,
body[data-i18n-page] .book-tag,
body[data-i18n-page] .free-card-tag,
body[data-i18n-page] .featured-label,
body[data-i18n-page] .step-number {
  color: #bae6fd;
}

body[data-i18n-page] .starter-badge,
body[data-i18n-page] .preview-badge {
  color: #bbf7d0;
}

body[data-i18n-page] .inside-item h3,
body[data-i18n-page] .process-item h3,
body[data-i18n-page] .path-item h3,
body[data-i18n-page] .resource-link-card h3 {
  color: #f8fafc;
}

body[data-i18n-page] .point,
body[data-i18n-page] .trust-chip,
body[data-i18n-page] .inside-item,
body[data-i18n-page] .process-item,
body[data-i18n-page] .path-item,
body[data-i18n-page] .resource-link-card,
body[data-i18n-page] .checklist-items li {
  color: #e2e8f0;
}

body[data-i18n-page] .checklist-category {
  color: #7dd3fc;
}

body[data-i18n-page] .checklist-divider {
  color: #94a3b8;
}

body[data-i18n-page] .checklist-card,
body[data-i18n-page] .card.checklist-card {
  color: #f8fafc;
}

body[data-i18n-page] .section-sub,
body[data-i18n-page] .inside-item p,
body[data-i18n-page] .process-item p,
body[data-i18n-page] .path-item p,
body[data-i18n-page] .resource-link-card p,
body[data-i18n-page] .book p,
body[data-i18n-page] .free-card p,
body[data-i18n-page] .step p,
body[data-i18n-page] .featured p,
body[data-i18n-page] .final-box p {
  color: #cbd5e1;
}

/* Glass panels & cards */
body[data-i18n-page] .panel,
body[data-i18n-page] .preview,
body[data-i18n-page] .card,
body[data-i18n-page] .starter,
body[data-i18n-page] .step,
body[data-i18n-page] .book,
body[data-i18n-page] .free-card,
body[data-i18n-page] .featured,
body[data-i18n-page] .final-box {
  color: #f8fafc;
}

body[data-i18n-page] .panel h2,
body[data-i18n-page] .panel h3,
body[data-i18n-page] .preview h2,
body[data-i18n-page] .starter h2,
body[data-i18n-page] .step h3,
body[data-i18n-page] .book h3,
body[data-i18n-page] .free-card h3,
body[data-i18n-page] .featured h3,
body[data-i18n-page] .final-box h2 {
  color: #f8fafc;
}

body[data-i18n-page] .preview li,
body[data-i18n-page] .starter li {
  color: #e2e8f0;
}

body[data-i18n-page] .preview-note {
  color: #94a3b8;
}

/* Buttons */
body[data-i18n-page] .btn-primary,
body[data-i18n-page] .mini-primary {
  color: #0b1220 !important;
  background: linear-gradient(135deg, #38bdf8, #60a5fa);
}

body[data-i18n-page] .btn-primary:hover,
body[data-i18n-page] .btn-primary:focus-visible,
body[data-i18n-page] .mini-primary:hover,
body[data-i18n-page] .mini-primary:focus-visible {
  color: #020617;
}

body[data-i18n-page] .btn-secondary,
body[data-i18n-page] .mini-secondary {
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(148, 163, 184, 0.28);
}

body[data-i18n-page] .btn-secondary:hover,
body[data-i18n-page] .btn-secondary:focus-visible,
body[data-i18n-page] .mini-secondary:hover,
body[data-i18n-page] .mini-secondary:focus-visible {
  color: #ffffff;
  background: rgba(56, 189, 248, 0.14);
  border-color: rgba(56, 189, 248, 0.38);
}

/* Footer */
body[data-i18n-page] .footer {
  color: #94a3b8;
}

body[data-i18n-page] .footer a {
  color: #7dd3fc;
}

body[data-i18n-page] .footer a:hover,
body[data-i18n-page] .footer a:focus-visible {
  color: #bae6fd;
}

/* Resource switcher (shell) on dark pages */
body[data-i18n-page] .resource-switcher {
  background: rgba(6, 17, 31, 0.55);
  border-bottom-color: rgba(148, 163, 184, 0.18);
}

body[data-i18n-page] .resource-switcher-label {
  color: #94a3b8;
}

body[data-i18n-page] .resource-switcher-link {
  color: #cbd5e1;
}

body[data-i18n-page] .resource-switcher-link:hover,
body[data-i18n-page] .resource-switcher-link:focus-visible,
body[data-i18n-page] .resource-switcher-link.is-active {
  color: #f8fafc;
}

body[data-i18n-page] .resource-switcher-toggle {
  color: #f8fafc;
}

body[data-i18n-page] .resource-switcher-panel {
  background: linear-gradient(155deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.96));
}

body[data-i18n-page] .resource-switcher-link {
  color: #cbd5e1;
}

body[data-i18n-page] .resource-switcher-state {
  color: #94a3b8;
}

/* Neutralize global style.css rules that clash on these landings */
body[data-i18n-page] .btn.btn-primary {
  color: #0b1220 !important;
}

body[data-i18n-page] .btn.btn-secondary {
  color: #f8fafc !important;
}

@media (max-width: 640px) {
  body[data-i18n-page] main h1 {
    text-wrap: balance;
  }

  body[data-i18n-page] .hero-lead,
  body[data-i18n-page] .section-subtitle {
    max-width: 100%;
  }
}