/*
 * Light mode + the dark/light switch in the top navbar.
 *
 * The Webflow styles colour almost everything from two swatches
 * (--swatch--dark #20201f and --swatch--light #e7e7e4), so light mode swaps
 * them, plus a few hard-coded colours. Dark stays the default; the choice is
 * stored per visitor (see /js/theme.js and the inline script in BaseLayout).
 */

html[data-theme="light"] {
  color-scheme: light;
  --swatch--dark: #e7e7e4;
  --swatch--light: #20201f;
  --swatch--dark-faded-light: #e7e7e41a;
  --swatch--dark-faded-mid: #e7e7e4bf;
  --swatch--light-faded: #20201f1f;
  --swatch--light-faded-mid: #20201f33;
  --black: #e7e7e4;
  --black_home: #e7e7e480;
  --black_nav-bars: #e7e7e4bf;
  /* A deeper pink so pink text stays readable on the light background. */
  --swatch--brand: #d63a44;
  --pink: #d63a44;
  background-color: #e7e7e4;
}

/* Pink buttons keep dark text in both modes. */
html[data-theme="light"] .hm-button,
html[data-theme="light"] .hm-button:hover,
html[data-theme="light"] .copy-btn,
html[data-theme="light"] .copy-btn .button_text {
  color: #20201f;
}

/* Photo credits printed over light photos stay dark. */
html[data-theme="light"] .black-text,
html[data-theme="light"] .black-text a {
  color: #20201f;
}

/* Home page: typing text, and the page-transition overlay. */
html[data-theme="light"] .type_sym,
html[data-theme="light"] .typing-container,
html[data-theme="light"] #typing-text {
  color: #20201f;
}

html[data-theme="light"] #warp-overlay {
  background-color: #e7e7e4;
}

html[data-theme="light"] body {
  background-color: var(--swatch--dark);
  color: var(--swatch--light);
}

/* Smooth hand-over when switching (not on first paint). */
html.theme-animating,
html.theme-animating * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ---------- The switch ---------- */

.hm-list-item.theme-toggle-item {
  display: flex;
  align-items: center;
}

.theme-toggle {
  --toggle-w: 3.25rem;
  --toggle-h: 1.75rem;
  --knob: calc(var(--toggle-h) - 0.375rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  width: var(--toggle-w);
  height: var(--toggle-h);
  margin: 0 var(--sizes--0-5rem);
  padding: 0;
  border: var(--border-width--main) solid #e7e7e4;
  border-radius: var(--radius--round);
  background-color: #20201f;
  color: #e7e7e4;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--swatch--brand);
  outline-offset: 3px;
}

.theme-toggle__knob {
  position: absolute;
  top: 50%;
  left: 0.1875rem;
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background-color: #e7e7e4;
  transform: translateY(-50%);
  transition: left 0.3s ease, background-color 0.3s ease;
}

.theme-toggle__icon {
  position: absolute;
  top: 50%;
  width: 0.95rem;
  height: 0.95rem;
  transform: translateY(-50%);
  transition: opacity 0.2s ease;
}

.theme-toggle__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.theme-toggle__icon--moon { right: 0.4rem; opacity: 1; }
.theme-toggle__icon--sun { left: 0.4rem; opacity: 0; }

.theme-toggle:hover .theme-toggle__knob {
  background-color: var(--swatch--brand-light);
}

/* Light mode: light pill, sun on the left, dark knob on the right. */
html[data-theme="light"] .theme-toggle {
  border-color: #20201f;
  background-color: #e7e7e4;
  color: #20201f;
}

html[data-theme="light"] .theme-toggle__knob {
  left: calc(100% - var(--knob) - 0.1875rem);
  background-color: #20201f;
}

html[data-theme="light"] .theme-toggle:hover .theme-toggle__knob {
  background-color: var(--swatch--brand);
}

html[data-theme="light"] .theme-toggle__icon--moon { opacity: 0; }
html[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; }

/* In the mobile burger menu, its own row, right-aligned like the links. */
@media screen and (max-width: 991px) {
  .hm-list-item.theme-toggle-item {
    justify-content: flex-end;
    padding: var(--sizes--0-5rem) 0;
  }
  .hm-list-item.theme-toggle-item .theme-toggle {
    margin-right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle__knob,
  .theme-toggle__icon,
  html.theme-animating,
  html.theme-animating * {
    transition: none !important;
  }
}

/* ---------- Cursors ----------
 * An arrow with a contrasting outline (light on dark, dark on light) so it
 * stays visible on any background, and a pink hand for anything clickable.
 */
:root {
  --cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5v16.8l4.3-3.9 2.8 6.3 2.8-1.2-2.8-6.2h5.9z' fill='%23e7e7e4' stroke='%2320201f' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
  --cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 14.5V4.5a1.5 1.5 0 0 1 3 0V10V8.5a1.5 1.5 0 0 1 3 0v2V9.5a1.5 1.5 0 0 1 3 0V11v-.5a1.5 1.5 0 0 1 3 0V15c0 4-2.5 6.5-6 6.5h-1.5c-2.2 0-3.6-1-4.8-2.8l-4.3-4.1a1.6 1.6 0 0 1 2.6-1.9z' fill='%23fa6b72' stroke='%2320201f' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 10 3, pointer;
}

html[data-theme="light"] {
  --cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5v16.8l4.3-3.9 2.8 6.3 2.8-1.2-2.8-6.2h5.9z' fill='%2320201f' stroke='%23e7e7e4' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
  --cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M9 14.5V4.5a1.5 1.5 0 0 1 3 0V10V8.5a1.5 1.5 0 0 1 3 0v2V9.5a1.5 1.5 0 0 1 3 0V11v-.5a1.5 1.5 0 0 1 3 0V15c0 4-2.5 6.5-6 6.5h-1.5c-2.2 0-3.6-1-4.8-2.8l-4.3-4.1a1.6 1.6 0 0 1 2.6-1.9z' fill='%23d63a44' stroke='%2320201f' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 10 3, pointer;
}

html {
  cursor: var(--cursor-arrow);
}

html a[href],
html button:not(:disabled),
html [role="button"],
html [role="switch"],
html label,
html select,
html summary,
html input[type="submit"],
html input[type="button"],
html input[type="reset"],
html input[type="checkbox"],
html input[type="radio"],
html .w-button,
html .w-nav-button,
html .w-dropdown-toggle,
html .w-tab-link,
html .w-form-label,
html .w-slider-dot,
html .w-slider-arrow-left,
html .w-slider-arrow-right,
html .w-lightbox-control,
html .w-lightbox-item,
html .hm-button,
html .hm-button-secondary,
html .hm-button-2,
html .copy-btn {
  cursor: var(--cursor-hand);
}

/* Text fields keep the normal text cursor. */
html input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"]),
html textarea,
html [contenteditable="true"] {
  cursor: text;
}