/* ============================================================
   Black & white theme for the careers site (<html data-theme="mono">).
   The header, hero photo, contact band and footer keep their dark look with
   white instead of gold; everything else becomes a black page.
   Colours set directly in the stylesheets are converted in
   theme-mono.generated.css (npm run theme:mono). This file sets the design
   tokens and the details a conversion cannot get right on its own.
   ============================================================ */

/* ---------- Theme switch (shown in both themes) ---------- */
.site-top .theme-switch { display: inline-flex; flex: none; align-items: center; gap: 2px; padding: 3px; border: 1px solid #5d543f; border-radius: 4px; background: #ffffff0c; }
.site-top .theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 34px; min-height: 28px; padding: 0; border: 0; border-radius: 2px; background: transparent; cursor: pointer; transition: background .2s; }
.site-top .theme-switch button:hover { background: #ffffff14; }
.site-top .theme-switch button[aria-pressed="true"] { background: #ffffff1f; box-shadow: inset 0 0 0 1px #ffffff33; }
.site-top .theme-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.theme-switch .sw { width: 14px; height: 14px; border-radius: 50%; display: block; }
.theme-switch .sw-gold { background: linear-gradient(135deg, #f0d68a, #c9a84c 50%, #8a6d1f); box-shadow: 0 0 0 1px #0d0c0a; }
.theme-switch .sw-mono { background: linear-gradient(135deg, #fff 50%, #0d0c0a 50%); box-shadow: 0 0 0 1px #ffffffb3; }
@media (max-width: 1100px) { .site-top .theme-switch { align-self: flex-start; margin-block: 4px; } }

/* Smooth cross-fade while switching (class added for half a second by the switch). */
html.theme-fading, html.theme-fading *, html.theme-fading *::before, html.theme-fading *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, filter .45s ease, box-shadow .45s ease !important;
}
html.theme-fading .btn { transition: none !important; }   /* gradients can't fade; swap buttons instantly instead of flashing */

/* ---------- Tokens: black page ---------- */
:root[data-theme="mono"] {
  color-scheme: dark;
  --black: #f2f2f2;                /* "strong" colour: text, filled buttons, icon discs */
  --black-2: #e6e6e6;
  --black-3: #d9d9d9;
  --ink: #f2f2f2;
  --ink-2: #cfcfcf;
  --muted: #a3a3a3;
  --line: #262626;
  --line-2: #3a3a3a;
  --bg: #0a0a0a;
  --card: #161616;
  --gold: #0a0a0a;                 /* accent drawn on "strong" discs */
  --gold-2: #c9c9c9;               /* labels */
  --gold-3: #ffffff;               /* links */
  --gold-soft: #1f1f1f;
  --gold-grad: linear-gradient(180deg, #ffffff, #e6e6e6);
  --danger: #ff8f85;
  --danger-soft: #2b1513;
  --ok: #7fd4a8;
  --ok-soft: #0f2219;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .6);
}
/* Dark areas keep the original tokens, with white in place of gold. */
:root[data-theme="mono"] :is(.site-top, .topbar, .hero2, .careers-hero, .job-top, .band, .site-footer, .why-stats, .skip-link) {
  --black: #0a0a0a;
  --ink: #0a0a0a;
  --ink-2: #333;
  --muted: #5c5c5c;
  --line: #e4e4e4;
  --line-2: #d2d2d2;
  --card: #fff;
  --gold: #ffffff;
  --gold-2: #1a1a1a;
  --gold-3: #000000;
  --gold-soft: #efefef;
}
:root[data-theme="mono"] body, :root[data-theme="mono"] body.careers-home { background: #0a0a0a; color: #f2f2f2; }

/* ---------- Photography and drawings ---------- */
/* The hero photos and the contact band's city drawing keep their colour. */
:root[data-theme="mono"] .choose .brand-mark { filter: grayscale(1) contrast(1.06); }
/* The ink drawing becomes white line art on black */
:root[data-theme="mono"] .why-visual { background: #0f0f0f; border-color: #262626; }
:root[data-theme="mono"] .why-visual img { filter: invert(1) grayscale(1) contrast(1.05); mix-blend-mode: screen; opacity: .92; }
:root[data-theme="mono"] .site-footer .brand-mark { filter: grayscale(1) brightness(4); }

/* ---------- Sections ---------- */
:root[data-theme="mono"] .site-main > #why::before { background: #111; border-top: 1px solid #2c2c2c; border-bottom: 1px solid #1e1e1e; }
:root[data-theme="mono"] .why-stats { background: linear-gradient(180deg, #1b1b1b, #111); border-top: 2px solid #fff; box-shadow: 0 0 0 1px #2a2a2a, 0 24px 50px -24px #000; }
:root[data-theme="mono"] .why-stats > div + div { border-left-color: #ffffff24; }
:root[data-theme="mono"] .why-stats dt { color: #a8a8a8; }
:root[data-theme="mono"] .search2 { border-top: 2px solid #fff; box-shadow: 0 24px 60px -20px #000, 0 0 0 1px #262626; }

/* ---------- Buttons: white with black text everywhere ---------- */
:root[data-theme="mono"] .btn.gold { background: #fff; border-color: #fff; color: #0a0a0a; }
:root[data-theme="mono"] .btn.gold:hover { background: #e6e6e6; border-color: #e6e6e6; color: #0a0a0a; filter: none; }

/* ---------- Forms ---------- */
:root[data-theme="mono"] :is(input, select, textarea)::placeholder { color: #7a7a7a; }
:root[data-theme="mono"] :is(input, select, textarea):focus { border-color: #f2f2f2; box-shadow: 0 0 0 3px rgba(255, 255, 255, .14); }
:root[data-theme="mono"] select { background-repeat: no-repeat; background-position: right 12px center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23e6e6e6' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); }
:root[data-theme="mono"] :is(.dropzone:hover, .dropzone.over, .exp-add.is-empty:hover) { border-color: #f2f2f2; }
:root[data-theme="mono"] :is(input.prefilled, select.prefilled) { border-color: #f2f2f2; background-color: #1c1c1c; }
:root[data-theme="mono"] .pf-status.busy::before { border-top-color: #f2f2f2; }
:root[data-theme="mono"] .sum-desc li::marker { color: #f2f2f2; }

/* Focus rings are white on every surface in this theme */
:root[data-theme="mono"] :focus-visible,
:root[data-theme="mono"] :is(.dropzone:focus-within, .toggle-group input:focus-visible + .toggle, .exp-add:focus-visible) { outline-color: #fff; }
:root[data-theme="mono"] .cv-cta { background: #111; border-color: #333; }

/* ---------- Cookie notice and settings ---------- */
:root[data-theme="mono"] .cc-backdrop { background: #000000b3; }
:root[data-theme="mono"] .cc-banner { border-top-color: #fff; box-shadow: 0 0 0 1px #2a2a2a, 0 30px 80px #000; }
:root[data-theme="mono"] .cc-dialog { box-shadow: 0 0 0 1px #2a2a2a, 0 24px 70px #000; }
:root[data-theme="mono"] :is(.cc-banner, .cc-dialog) .cc-btn:hover { color: #0a0a0a; }
:root[data-theme="mono"] .cc-ic { color: #fff; }

/* Clear secondary information and surface edges on the dark careers pages. */
:root[data-theme="mono"] .job-page .jp { --muted: #b5b5b5; --line: #303030; --ink-2: #d6d6d6; }
:root[data-theme="mono"] .job-page .jp-tabs a[aria-current="page"] { border-bottom-color: #fff; }
:root[data-theme="mono"] .job-page .jp-form :is(input, textarea)::placeholder { color: #a3a3a3; }