/* =========================================================
   richardhammond.net — dark / light mode
   Same pattern as inverseproject.com: a data-theme="dark"
   attribute on <html> swaps the colour variables, and a
   round moon/sun button sits at the right end of the nav.
   Loaded on every page after the page's own styles.
   ========================================================= */

/* ---------- Dark palette (warm, to match the paper tones) ---------- */
html[data-theme="dark"] {
  --paper:     #141312;
  --paper-2:   #1e1c1a;
  --ink:       #ece8e1;
  --ink-soft:  #b4aea4;
  --muted:     #878177;
  --line:      rgba(236,232,225,.16);
  --line-soft: rgba(236,232,225,.08);
  --accent:    #c99a78;
  --white:     #1f1d1a;   /* card / panel backgrounds */
  color-scheme: dark;
}

/* Home header text over the slideshow stays white (it used --white) */
html[data-theme="dark"] body.home .site-header:not(.scrolled) { color: #fff; }

/* Footer used --ink as its background; keep it a deep near-black */
html[data-theme="dark"] .site-footer { background: #0c0b0a; }

/* Buttons: invert cleanly */
html[data-theme="dark"] .btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- Toggle button (copied from Inverse's .dark-toggle) ---------- */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  background: transparent; border: 1px solid var(--line);
  color: inherit; cursor: pointer; flex-shrink: 0;
  margin-left: clamp(14px, 2vw, 24px);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.theme-toggle:hover { border-color: currentColor; background-color: var(--paper-2); }
.theme-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.theme-toggle svg { width: 16px; height: 16px; display: block; }

/* Over the home slideshow the header is transparent with white text */
body.home .site-header:not(.scrolled) .theme-toggle { border-color: rgba(255,255,255,.35); }
body.home .site-header:not(.scrolled) .theme-toggle:hover { border-color: #fff; background-color: rgba(255,255,255,.08); }

/* Moon in light mode, sun in dark mode */
.theme-toggle__sun { display: none !important; }
html[data-theme="dark"] .theme-toggle__sun  { display: block !important; }
html[data-theme="dark"] .theme-toggle__moon { display: none !important; }

/* Layout: brand on the left, links + toggle grouped on the right */
.nav .nav-links { margin-left: auto; }
@media (max-width: 900px) {
  .nav .theme-toggle { order: 2; margin-left: auto; }
  .nav .nav-toggle   { order: 3; }
}