/* TEK-1501 (owner 2026-10-17): High contrast on every public page.
 *
 * Loaded by the corporate, /dental entry, acquisition (Join / FAQ / Demo /
 * Apply), claim and 404 pages, together with /js/contrast-theme.js. The Dental
 * app pages keep their own token palette in styles.css; both use the same root
 * attribute and the same black / white / gold scheme.
 *
 * These pages mix many stylesheets with hard-coded colours, so the theme does
 * not re-tint each one. While it is on, it forces one readable scheme:
 * white text on black (21:1), gold links and borders on black (15:1), black
 * text on gold actions, black text on white fields. Every rule is scoped to
 * :root[data-theme="contrast"], so the normal theme is untouched.
 */

/* The toggle itself (all themes). Colours follow the surrounding header. */
.contrast-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: .85;
}
.contrast-toggle:hover { opacity: 1; }
.contrast-toggle:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; opacity: 1; }
.contrast-toggle svg { display: block; }
.hub-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 32px; }
.hub-top .hub-nav { margin-bottom: 0; }
.claim-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* ── The theme ─────────────────────────────────────────────────────────── */
:root[data-theme="contrast"] { color-scheme: dark; }
:root[data-theme="contrast"],
:root[data-theme="contrast"] body {
  background: #000000 !important;
  color: #ffffff !important;
}
:root[data-theme="contrast"] body *,
:root[data-theme="contrast"] body *::before,
:root[data-theme="contrast"] body *::after {
  background-color: transparent !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #ffd700 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Layers that sit on top of other content stay opaque. */
:root[data-theme="contrast"] header,
:root[data-theme="contrast"] .site-header,
:root[data-theme="contrast"] .site-nav,
:root[data-theme="contrast"] dialog,
:root[data-theme="contrast"] [role="dialog"],
:root[data-theme="contrast"] [class*="menu"],
:root[data-theme="contrast"] [class*="banner"],
:root[data-theme="contrast"] [class*="toast"],
:root[data-theme="contrast"] [class*="popover"] {
  background-color: #000000 !important;
}
:root[data-theme="contrast"] dialog::backdrop { background: rgba(0, 0, 0, .9) !important; }
/* Links and secondary text. */
:root[data-theme="contrast"] a,
:root[data-theme="contrast"] a * { color: #ffd700 !important; }
:root[data-theme="contrast"] a { text-decoration-color: #ffd700 !important; }
/* Primary actions: black on gold. */
:root[data-theme="contrast"] .btn-primary,
:root[data-theme="contrast"] .nav-cta,
:root[data-theme="contrast"] .acq-nav-cta,
:root[data-theme="contrast"] .cta,
:root[data-theme="contrast"] .button,
:root[data-theme="contrast"] .final-cta .btn-primary,
:root[data-theme="contrast"] button[type="submit"],
:root[data-theme="contrast"] .contrast-toggle[aria-pressed="true"] {
  background-color: #ffd700 !important;
  border-color: #ffd700 !important;
}
:root[data-theme="contrast"] .btn-primary,
:root[data-theme="contrast"] .btn-primary *,
:root[data-theme="contrast"] .nav-cta,
:root[data-theme="contrast"] .nav-cta *,
:root[data-theme="contrast"] .acq-nav-cta,
:root[data-theme="contrast"] .acq-nav-cta *,
:root[data-theme="contrast"] .cta,
:root[data-theme="contrast"] .cta *,
:root[data-theme="contrast"] .button,
:root[data-theme="contrast"] .button *,
:root[data-theme="contrast"] button[type="submit"],
:root[data-theme="contrast"] button[type="submit"] *,
:root[data-theme="contrast"] .contrast-toggle[aria-pressed="true"],
:root[data-theme="contrast"] .contrast-toggle[aria-pressed="true"] * {
  color: #000000 !important;
}
/* Other buttons: gold outline on black. */
:root[data-theme="contrast"] button,
:root[data-theme="contrast"] summary { border-color: #ffd700 !important; }
/* Form fields: black on white. */
:root[data-theme="contrast"] input,
:root[data-theme="contrast"] select,
:root[data-theme="contrast"] textarea {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ffd700 !important;
}
:root[data-theme="contrast"] input::placeholder,
:root[data-theme="contrast"] textarea::placeholder { color: #333333 !important; }
:root[data-theme="contrast"] option { background-color: #ffffff !important; color: #000000 !important; }
/* Focus is always visible. */
:root[data-theme="contrast"] *:focus-visible { outline: 3px solid #ffffff !important; outline-offset: 2px !important; }
/* Decorative imagery is quieter; logos and marks stay as they are. */
:root[data-theme="contrast"] .hero-globe { opacity: .35 !important; }
/* Disabled controls stay legible. */
:root[data-theme="contrast"] :disabled { color: #d0d0d0 !important; border-color: #d0d0d0 !important; }