/* ==========================================================================
   DARK MODE — everything that changes when the moon/sun switch is on.
   The switch puts data-theme="dark" on <html> (main.js > 10).

   1. Colors            the same tokens as tokens.css, with dark values
   2. Header            white links and light logo, as on the fixed bar
   3. Buttons
   4. Yellow bands      they stay yellow, so their text stays dark
   5. Panels and forms
   6. Details

   To adjust the dark look, start with the colors in section 1.
   ========================================================================== */

/* 1. COLORS --------------------------------------------------------------- */
html[data-theme="dark"] {
  color-scheme: dark;   /* dark scrollbars, date picker and select lists */

  --color-bg: #050b1f;                /* page background */
  --color-bg-soft: #0b1430;           /* soft boxes: facts, reviews, notes */
  --color-surface: #13214d;           /* cards, menus, form panels */
  --color-top: #0a173b;               /* top area of every page (yellow in light mode) */
  --color-top-ink: var(--white);
  --color-top-line: rgba(255, 255, 255, 0.2);
  --color-dark: var(--navy-800);      /* footer, dark panels, fixed header */

  --color-heading: var(--white);
  --color-text: #d3d8e6;
  --color-text-muted: #9aa4be;
  --color-ink: var(--white);
  --color-link: #8da4ef;              /* lighter blue, readable on dark */
  --color-line: rgba(255, 255, 255, 0.14);
  --color-field-line: rgba(255, 255, 255, 0.24);

  --color-primary: var(--yellow-500); /* main buttons turn yellow */
  --color-primary-hover: var(--yellow-400);
  --color-on-primary: var(--navy-900);

  --color-bars: #050b1f;              /* page-transition bars */
}

/* 2. HEADER --------------------------------------------------------------- */
html[data-theme="dark"] .site-header {
  --header-fg: var(--white);
  --header-hover: var(--yellow-500);
  --header-btn-bg: var(--yellow-500);
  --header-btn-fg: var(--navy-900);
}

html[data-theme="dark"] .site-logo__top {
  display: none;
}

html[data-theme="dark"] .site-logo__stuck {
  display: block;
}

html[data-theme="dark"] .site-header.is-stuck .site-header__bar {
  box-shadow: 0 1px 0 var(--color-line), 0 10px 30px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"]:not(.has-menu-stage) .site-menu,
html[data-theme="dark"] .site-menu-stage__panel,
html[data-theme="dark"] .mobile-menu {
  box-shadow: 0 0 0 1px var(--color-line), 0 40px 80px rgba(0, 0, 0, 0.5);
}

/* The switch itself: sun in, moon out */
html[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}

html[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 1;
  transform: none;
}

/* 3. BUTTONS -------------------------------------------------------------- */
html[data-theme="dark"] .btn--secondary:hover {
  color: var(--navy-900);
}

/* 4. YELLOW BANDS ---------------------------------------------------------
   "Send a photo" and "Leave a review" keep the brand yellow in dark mode.  */
html[data-theme="dark"] .cta-band__text h2,
html[data-theme="dark"] .cta-band__text .eyebrow {
  color: var(--navy-900);
}

html[data-theme="dark"] .cta-band__text .btn--primary {
  border-color: var(--navy-700);
  background: var(--navy-700);
  color: var(--white);
}

html[data-theme="dark"] .cta-band__text .btn--primary:hover {
  border-color: var(--navy-900);
  background: var(--navy-900);
}

html[data-theme="dark"] .cta-band__text .btn--secondary {
  color: var(--navy-900);
}

html[data-theme="dark"] .cta-band__text .btn--secondary:hover {
  border-color: var(--navy-900);
  background: var(--navy-900);
  color: var(--white);
}

/* 5. PANELS AND FORMS ----------------------------------------------------- */
html[data-theme="dark"] .eyebrow {
  color: var(--yellow-500);
}

html[data-theme="dark"] .hero__trust .rating {
  color: var(--yellow-500);
}

html[data-theme="dark"] .form-card {
  border: 1px solid var(--color-line);
}

/* Volty keeps a thin light edge so his black outline still reads on the dark card */
html[data-theme="dark"] .form-card__mascot,
html[data-theme="dark"] .volty,
.dark-panel .volty {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.55));
}

html[data-theme="dark"] .field input[type="file"] {
  border-color: var(--color-field-line);
}

html[data-theme="dark"] .fact,
html[data-theme="dark"] .note-box,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .review-slider__card,
html[data-theme="dark"] .aside-call,
html[data-theme="dark"] .dark-panel {
  box-shadow: inset 0 0 0 1px var(--color-line);
}

html[data-theme="dark"] .aside-call--emergency {
  box-shadow: none;
}

/* 6. DETAILS -------------------------------------------------------------- */

/* Badges: the logos have white versions, so they sit straight on the dark
   page. The two drawn badges become outlines: white frame, white panel.
   .badges--on-dark (the dark band on About) gets the same white look even
   when the page itself is light. */
html[data-theme="dark"] .badges__list .badge--light {
  display: none;
}

html[data-theme="dark"] .badges__list .badge--dark {
  display: block;
}

html[data-theme="dark"] .seal__frame,
html[data-theme="dark"] .seal__body,
.badges--on-dark .seal__frame,
.badges--on-dark .seal__body {
  fill: transparent;
  stroke: var(--white);
}

html[data-theme="dark"] .seal__panel,
.badges--on-dark .seal__panel {
  fill: var(--white);
}

html[data-theme="dark"] .seal__num,
.badges--on-dark .seal__num {
  fill: var(--white);
}

html[data-theme="dark"] .seal__cap--white,
html[data-theme="dark"] .seal__cap--gold,
.badges--on-dark .seal__cap--white,
.badges--on-dark .seal__cap--gold {
  fill: var(--navy-700);
}

html[data-theme="dark"] .seal__gray,
.badges--on-dark .seal__gray {
  fill: rgba(255, 255, 255, 0.28);
}

/* Red text needs to be lighter to be read on dark panels */
html[data-theme="dark"] .menu-item--emergency .menu-item__title,
html[data-theme="dark"] .mobile-menu__sub a.is-emergency,
html[data-theme="dark"] .service-card--emergency .service-card__title,
html[data-theme="dark"] .field__error {
  color: #ff8080;
}

html[data-theme="dark"] :focus-visible {
  outline-color: var(--yellow-400);
}

html[data-theme="dark"] .contact-bar {
  box-shadow: 0 -1px 0 var(--color-line), 0 -8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .site-footer {
  box-shadow: inset 0 1px 0 var(--color-line);
}

html[data-theme="dark"] .to-top {
  --to-top-track: rgba(255, 255, 255, 0.2);
  background: conic-gradient(var(--white) calc(var(--progress, 0) * 1%), var(--to-top-track) 0);
  color: var(--navy-900);
}

html[data-theme="dark"] .to-top::before {
  background: var(--yellow-500);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .to-top:hover::before {
  background: var(--yellow-400);
}