/* ═══════════════════ Dark theme for the website ═══════════════════
   On when <html data-theme="dark"> (toggle in the nav bar, js/theme-toggle in header.php).
   1. The colour names are given dark-mode values (light text, dark surfaces).
   2. Parts that are dark in both themes (hero, footer, dark cards) get the light-mode
      values back, so their white text and navy backgrounds stay as they are.
   3. A few boxes with a fixed white background are moved onto the dark surface. */

html[data-theme="dark"] {
  color-scheme: dark;
  --navy: #E6EDF7; --navy-mid: #C7D4E6; --blue: #82B4F0; --blue-light: #A3C8F5;
  --teal: #19B3A0; --teal-light: #3FD3BF;
  --white: #0F1A2B; --off-white: #0B1424; --gray-100: #16243A; --gray-200: #26385A; --gray-400: #8296B0;
  --gray-600: #B5C3D6; --gray-800: #DCE4EF; --text: #DCE4EF; --text-muted: #9DB0C7;
  --line: #22324A; --mist: #9FB3C8;
  --shadow: 0 10px 30px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.5); --shadow-sm: none;
}
html[data-theme="dark"] body { background: #0B1424; color: var(--text); }

/* 2. Dark in both themes: put the light-mode colour names back inside them */
html[data-theme="dark"] :is(.topbar, .navbar, .dropdown-menu, .hero, .page-hero, .section-dark, .partners, .cta-banner,
  .service-card-header, .team-photo-placeholder, .blog-card-img, .slide-img-empty, .post-img-empty, .side-cta, .care-card,
  .footer, .blog-cta, .offer-cta, .offer-row-media, .offer-row-empty, .about-side, .sizing-table th, .filter-chip,
  .geo-chip.on, .quote-dot.is-active, .jvm-tooltip, .float-card, .offer-body, .keep-dark) {
  --navy: #0B1F3A; --navy-mid: #132E52; --blue: #1A5FA8; --blue-light: #2B7CD3;
  --white: #FFFFFF; --off-white: #F7F9FC; --gray-100: #EEF2F7; --gray-200: #D8E0EA; --gray-400: #8A9BB0;
  --gray-600: #4A5A72; --gray-800: #1E2D42; --text: #1E2D42; --text-muted: #5A6E87; --line: #E6E9ED;
}
/* Light sections become the dark page; card-like boxes sit on a slightly lighter surface */
html[data-theme="dark"] :is(.band-offer, .band-lib, .band-blog) { background: #0B1424; }
html[data-theme="dark"] .band-co { background: #0F1A2B; border-color: var(--line); }
html[data-theme="dark"] .newsletter { background: #0F1A2B; border-color: var(--line); }
html[data-theme="dark"] .trust { background: linear-gradient(135deg, #0B1424 0%, #0E1E33 55%, #0D2A2A 100%); }
html[data-theme="dark"] .trust::before { opacity: .35; }
html[data-theme="dark"] .client-tile img { background: #fff; }
html[data-theme="dark"] .marquee-track img { background: #fff; padding: 6px 10px; border-radius: 8px; box-sizing: content-box; height: 32px; opacity: .8; }
html[data-theme="dark"] :is(.blog-lead, .blog-item, .kpi-row li, .kb-steps article, .check-list li, .gloss-item, .faq-item,
  .sample-report, .geo-tile, .co-tile, .mini-reports a, .contact-card, .contact-grid .contact-form, .buy-grid .contact-form,
  .side-card, .rel-card, .toc-sec, .seg-card, .az-nav a) { background: #0F1A2B; }
html[data-theme="dark"] .geo-rank li.me a { background: #15304F; }
html[data-theme="dark"] .notice, html[data-theme="dark"] .dash-note { background: #2E2614; border-color: #6B5320; color: #F3CF85; }

/* Buttons and greens that were set for a white page */
html[data-theme="dark"] .btn-outline { color: var(--text); border-color: #3A4D6B; }
html[data-theme="dark"] .btn-outline:hover { background: #1C2C45; border-color: #4A6187; color: #fff; }
html[data-theme="dark"] :is(.sizing-table .cagr-cell, .category-growth strong, .growth-pct, .lib-growth strong, .fc-big, .chart-credit-msg, .tag-cat, .alert-success) { color: #4FD8C4; }
html[data-theme="dark"] .kpi-badge.up { background: #0F3B35; color: #7EE8D7; border-color: #1E5C53; }

/* Logos need their white backing to stay readable */
html[data-theme="dark"] :is(.fc-stat-icon img, .co-tile img, .co-hero-logo, .company-logo, .co-logo, .logo-stack img, .dash-logos img, .ct-name img) { background: #fff; }

/* Forms */
html[data-theme="dark"] :is(input, select, textarea) { background-color: #0B1424; color: var(--text); border-color: var(--gray-200); }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #7186A1; }

/* Tables and rich report text */
html[data-theme="dark"] :is(table td, .blog-body td) { border-color: var(--line); }
html[data-theme="dark"] .blog-body tr:hover td { background: #16243A; }
html[data-theme="dark"] img.co-logo { box-shadow: 0 0 0 1px #33476A; }

/* The light / dark switch: a sliding knob, in the far right corner of the nav bar.
   It is placed on its own (position: absolute), so the nav links keep their place. */
.navbar { position: sticky; }   /* keeps sticky, and is the frame the switch sits in */
.theme-switch { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); z-index: 2;
  background: none; border: 0; padding: 4px; margin: 0; cursor: pointer; border-radius: 30px; line-height: 0; }
.ts-track { position: relative; display: inline-block; width: 58px; height: 30px; border-radius: 30px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); }
.ts-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: .78rem; line-height: 1; }
.ts-sun  { left: 9px;  color: #F5C46B; }
.ts-moon { right: 9px; color: rgba(255,255,255,.55); }
.ts-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35); }
html[data-theme="dark"] .ts-track { background: #12B5A2; border-color: #12B5A2; }
html[data-theme="dark"] .ts-knob { left: 31px; background: #0B1F3A; }
html[data-theme="dark"] .ts-sun { color: rgba(255,255,255,.6); }
html[data-theme="dark"] .ts-moon { color: #fff; }
.theme-switch:hover .ts-track { border-color: rgba(255,255,255,.45); }
.theme-switch:focus-visible { outline: 2px solid #12B5A2; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .ts-knob { transition: left .2s ease, background-color .2s ease; } .ts-track { transition: background-color .2s ease; } }
/* Where the screen is narrow, leave room for it at the end of the link row */
@media (max-width: 1340px) and (min-width: 769px) { .navbar > .container { padding-right: 96px; } }
/* Phones: next to the menu button */
@media (max-width: 768px) { .theme-switch { right: 64px; } }
@media (prefers-reduced-motion: no-preference) { body, .section, .card { transition: background-color .2s ease, color .2s ease; } }