/* ==========================================================================
   DARK MODE — universal, applies across every page
   Strategy: invert + hue-rotate the whole page for an instant, low-risk
   dark theme, then counter-invert images/icons/the toggle button itself
   so photos, the logo and the control stay true-to-color.
   ========================================================================== */

html[data-theme="dark"] {
  background: #0f0f14;
  /* Keep native form controls rendering in their normal "light" colors —
     the body filter below inverts them to dark. If the browser is left to
     auto-dark-style inputs itself (color-scheme: dark), that native
     dark styling gets inverted a second time and text becomes invisible. */
  color-scheme: light;
}

/* Belt-and-braces: force light-mode rendering on form controls before the
   invert filter flips them, regardless of what the browser/OS prefers. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  color-scheme: light;
}

html[data-theme="dark"] body {
  filter: invert(1) hue-rotate(180deg);
  background: #fff; /* inverts to a near-black page background */
}

/* Counter-invert media so it still looks like a normal photo/logo */
html[data-theme="dark"] img,
html[data-theme="dark"] svg,
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] .no-invert {
  filter: invert(1) hue-rotate(180deg);
}

body { transition: background-color .25s ease, color .25s ease; }

/* ===== Dark mode toggle button (always rendered in true colors) ===== */
.dark-mode-toggle {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: #201f28;
  color: #f4e7c9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  transition: transform .2s ease, box-shadow .2s ease;
}
.dark-mode-toggle:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 24px rgba(0,0,0,0.38); }
.dark-mode-toggle:active { transform: translateY(-1px) scale(0.97); }

/* If the page already has a "scroll to top" button in this corner, give
   the dark mode toggle a bit more room above it. */
.scroll-top ~ .dark-mode-toggle,
.dark-mode-toggle ~ .scroll-top {
  bottom: 22px;
}
.dark-mode-toggle.stacked { bottom: 84px; }

@media (max-width: 480px) {
  .dark-mode-toggle { right: 14px; bottom: 14px; width: 44px; height: 44px; font-size: 18px; }
  .dark-mode-toggle.stacked { bottom: 70px; }
}

/* ===== Dark mode toggle — inline header version =====
   Sits inside .header-contact-line, right before the phone number,
   styled to match the phone/email "chip" look already used there. */
.dark-mode-toggle-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid #ece0c8;
  background: #201f28;
  color: #f4e7c9;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dark-mode-toggle-inline:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 4px 12px rgba(0,0,0,0.24);
  border-color: #c9982a;
}
.dark-mode-toggle-inline:active { transform: translateY(0) scale(0.96); }
.dark-mode-toggle-inline .dmt-icon { line-height: 1; }

@media (max-width: 480px) {
  .dark-mode-toggle-inline { width: 28px; height: 28px; font-size: 13px; }
}