/**
 * OUTSKIRT Dark Mode
 *
 * All rules scoped under `html[data-theme="dark"]`. Specificity is (0,2,1),
 * which beats the bare class-selector rules in the site's inline <style>
 * blocks (0,1,0) so we never need `!important` — except where the existing
 * stylesheet itself uses `!important` (handful of shadow rules in style.css).
 *
 * Palette is GitHub-style dark: very dark blue-gray (`#0d1117`) rather than
 * pure black — avoids OLED smear and gives bright accents room to breathe.
 * All text/bg pairs verified ≥ WCAG AA.
 */

/* ────────────────────────────────────────────────────────────────────
 * Tokens
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] {
    color-scheme: dark; /* hands native scrollbars/form controls to browser */

    --osp-bg-0: #0d1117;
    --osp-bg-1: #161b22;
    --osp-bg-2: #1f242c;
    --osp-bg-3: #262c36;

    --osp-fg-0: #e6e6e6;
    --osp-fg-1: #b8bcc4;
    --osp-fg-2: #7a7f8a;

    --osp-border-1: #2d333b;
    --osp-border-2: #3a414b;

    --osp-link: #5b9cf0;
    --osp-link-hover: #7eb3ff;
    --osp-gold: #f0c040;
    --osp-gold-heading: #ffd76b;
    --osp-success: #4ade80;
    --osp-danger: #f87171;
    --osp-orange: #ffa94d;
    --osp-purple: #c084fc;

    /* Tinted semantic surfaces — keep the meaning, shift the lightness */
    --osp-bg-best-season: #2a2418;
    --osp-bg-best-season-bb: #1e2418;
    --osp-bg-lr-me: #2a2614;
    --osp-bg-ws-cs-summary: #161d2a;
}

/* No-transition guard — flipped on for one frame during toggle to keep the
 * colour swap snappy instead of a slow brown smear across every element. */
html.osp-theme-switching,
html.osp-theme-switching * {
    transition: none !important;
}

/* ────────────────────────────────────────────────────────────────────
 * WordPress / Mesmerize Pro surfaces
 * ──────────────────────────────────────────────────────────────────── */

/* Mesmerize sets `html { background-color: #ffffff }` (parent style.css:7970)
 * — without this override the white bleeds through wherever there's a gap
 * in the dark layers (top of homepage, scrollbar gutter, body margin) and
 * shows as bright bands. */
html[data-theme="dark"] {
    background-color: var(--osp-bg-0);
}
html[data-theme="dark"] body {
    background: var(--osp-bg-0);
    color: var(--osp-fg-0);
}

/* Mesmerize wraps every inner page in `.page-content > .content` and paints
 * them `#F5FAFD` via `.mesmerize-inner-page .page-content/.content` in the
 * parent style.css. When a section inside is narrower than the viewport
 * (page-builder rows with column gutters, etc.), those wrappers show as
 * pale vertical bars on the left/right of the section. */
html[data-theme="dark"].mesmerize-inner-page .page-content,
html[data-theme="dark"].mesmerize-inner-page .content,
html[data-theme="dark"] .mesmerize-inner-page .page-content,
html[data-theme="dark"] .mesmerize-inner-page .content,
html[data-theme="dark"] body .page-content,
html[data-theme="dark"] body .page-content > .content {
    background-color: var(--osp-bg-0);
}
html[data-theme="dark"] a { color: var(--osp-link); }
html[data-theme="dark"] a:hover { color: var(--osp-link-hover); }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: var(--osp-fg-0); }

/* Page sections — Mesmerize's page builder bakes inline
 *   style="background-image: none; background-color: rgb(245, 250, 253);"
 * (or `rgb(255, 255, 255)`) onto every `.content-section` element. Inline
 * style attributes beat any external rule without `!important`, so this
 * has to use `!important` to defeat the editor-saved values.
 *
 * Default = bg-0 (deepest). Sections that were painted the lighter
 * `rgb(245, 250, 253)` tint in light mode get bg-1 instead, so the same
 * subtle two-tone alternation between adjacent sections is preserved
 * in dark mode. We match via attribute selector on the inline style
 * string, which is the only signal carried in the HTML. */
html[data-theme="dark"] .content-section,
html[data-theme="dark"] .content-section-spacing,
html[data-theme="dark"] section,
html[data-theme="dark"] .footer-wrapper,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer {
    background-color: var(--osp-bg-0) !important;
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .content-section[style*="245, 250, 253"],
html[data-theme="dark"] section[style*="245, 250, 253"] {
    background-color: var(--osp-bg-1) !important;
}

/* Recruitment page (page id 365) — the two page-builder sections
 * (#recruitments + #steps) both carry an inline `style="background-color"`
 * baked in by Mesmerize's builder. The Steps section in particular has
 * only `content-section-spacing` (no `content-section`) and lives below
 * the form, so it needs explicit ID-level targeting to outrank everything. */
html[data-theme="dark"] body #steps,
html[data-theme="dark"] body #recruitments,
html[data-theme="dark"] body #steps > .gridContainer,
html[data-theme="dark"] body #steps .steps-to-apply,
html[data-theme="dark"] body #steps .forminator-ui {
    background-color: var(--osp-bg-0) !important;
    color: var(--osp-fg-0);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .card.bordered,
html[data-theme="dark"] .card.shadow-large {
    background-color: var(--osp-bg-1);
    color: var(--osp-fg-0);
    border-color: var(--osp-border-1);
}
html[data-theme="dark"] .card .card-title,
html[data-theme="dark"] .card .card-text { color: var(--osp-fg-0); }

/* Nav bar — Mesmerize keeps `.navigation-bar` transparent by default and
 * only paints it (white) when (a) `.coloured-nav` is on (customizer) or
 * (b) `.fixto-fixed` is added by the scroll-pin JS. Mirror that exactly.
 *
 * `!important` is required for the fixto-fixed override because the kirki
 * cached style hardcodes white with `!important`:
 *   .mesmerize-front-page .navigation-bar.fixto-fixed { background-color:
 *     rgba(255,255,255,1) !important; }
 *   .mesmerize-inner-page .navigation-bar.fixto-fixed { ... !important; }
 * Specificity (0,2,1) on our selector loses against (0,2,0)+!important. */
html[data-theme="dark"] .navigation-bar.fixto-fixed,
html[data-theme="dark"] .navigation-bar.coloured-nav {
    background-color: var(--osp-bg-1) !important;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6);
}
/* `.navigation-bar.bordered` border: the kirki cached style already paints
 * it as `rgba(255, 255, 255, 0.5)` (semi-transparent white) — that blends
 * invisibly against both light hero banners AND our dark backgrounds. We
 * deliberately do NOT override `border-bottom-color` here; setting it to a
 * dark value made it visible as a thin black line over the homepage hero. */

html[data-theme="dark"] .main-menu > li > a,
html[data-theme="dark"] #main_menu > li > a,
html[data-theme="dark"] #offcanvas_menu > li > a { color: var(--osp-fg-0); }

/* Inner-page hero/header — the page template renders
 *   <div class="header ..." style="background-image:url(banner); background-color:#FFFFFF">
 * with the white as an inline HTML attribute. Inline `style=""` beats any
 * external CSS without `!important`, so we use it here.
 *
 * The same trick is needed for `.header-homepage` if any inner page uses
 * that variant. The `background-image` from the banner still wins visually
 * where the image is opaque — `background-color` only shows in gaps. */
html[data-theme="dark"] .header,
html[data-theme="dark"] .header-homepage,
html[data-theme="dark"] .header-wrapper {
    background-color: var(--osp-bg-0) !important;
}

/* Footer — the actual coloured surface is `.footer .footer-content`
 * (a kirki cached rule):
 *   .footer .footer-content { background-color: #fff; }
 * My earlier override targeted `.footer` itself, but the inner content
 * has its own background that sits on top of the outer `.footer`. */
html[data-theme="dark"] .footer,
html[data-theme="dark"] .footer.footer-simple,
html[data-theme="dark"] .footer .footer-content {
    background-color: var(--osp-bg-1);
    color: var(--osp-fg-1);
}
html[data-theme="dark"] .footer p,
html[data-theme="dark"] .footer .copyright { color: var(--osp-fg-1); }
html[data-theme="dark"] .footer a { color: var(--osp-link); }
html[data-theme="dark"] .footer a:hover { color: var(--osp-link-hover); }

/* ────────────────────────────────────────────────────────────────────
 * Theme-toggle widget (lives in the nav)
 * ──────────────────────────────────────────────────────────────────── */

.osp-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 4px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    color: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    line-height: 0;
}
.osp-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}
.osp-theme-toggle:focus-visible {
    outline: 2px solid rgba(240, 192, 64, 0.6);
    outline-offset: 2px;
}
.osp-theme-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}
.osp-theme-toggle .osp-icon-sun  { display: block; }
.osp-theme-toggle .osp-icon-moon { display: none; }

html[data-theme="dark"] .osp-theme-toggle {
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .osp-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .osp-theme-toggle .osp-icon-sun  { display: none; }
html[data-theme="dark"] .osp-theme-toggle .osp-icon-moon { display: block; }

.osp-theme-toggle-item { list-style: none; display: inline-flex; align-items: center; }
.osp-theme-toggle-item > a:not(.osp-theme-toggle) { display: none; }

/* ────────────────────────────────────────────────────────────────────
 * .osp-* — player profile component overrides
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .osp { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-hdr h2 { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-hdr .osp-tag { color: var(--osp-fg-2); }
html[data-theme="dark"] .osp-hdr .osp-tag:hover { color: var(--osp-fg-1); }
html[data-theme="dark"] .osp-tag-copied::after { color: var(--osp-success); }
html[data-theme="dark"] .osp-hdr .osp-role,
html[data-theme="dark"] .osp-hdr .osp-clan-role,
html[data-theme="dark"] .osp-hdr .osp-league-line { color: var(--osp-fg-1); }
html[data-theme="dark"] .osp-hdr .osp-league-line .osp-global-rank { color: var(--osp-gold-heading); }
html[data-theme="dark"] .osp-clan-link { color: var(--osp-link); }
html[data-theme="dark"] .osp-label { background: var(--osp-bg-2); color: var(--osp-fg-1); }

/* Quick stats */
html[data-theme="dark"] .osp-quick {
    border-top-color: var(--osp-border-1);
    border-bottom-color: var(--osp-border-1);
}
html[data-theme="dark"] .osp-quick-val { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-quick-lbl { color: var(--osp-fg-2); }

/* Tabs */
html[data-theme="dark"] .osp-tab-btn {
    background: var(--osp-bg-2);
    color: var(--osp-fg-1);
}
html[data-theme="dark"] .osp-tab-btn:hover { background: var(--osp-bg-3); }

/* Completion stats / stat list */
html[data-theme="dark"] .osp-compl-item,
html[data-theme="dark"] .osp-stat-row {
    background: var(--osp-bg-1);
    border-color: var(--osp-border-1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .osp-compl-item .osp-compl-label,
html[data-theme="dark"] .osp-stat-row .osp-sr-label { color: var(--osp-fg-1); }
html[data-theme="dark"] .osp-compl-item .osp-compl-val,
html[data-theme="dark"] .osp-stat-row .osp-sr-val { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-compl-item .osp-compl-val.maxed { color: var(--osp-success); }

/* Subtitles + meta */
html[data-theme="dark"] .osp-subtitle {
    color: var(--osp-gold-heading);
    border-bottom-color: var(--osp-border-1);
}
html[data-theme="dark"] .osp-progress-line,
html[data-theme="dark"] .osp-no-data,
html[data-theme="dark"] .osp-bb-label,
html[data-theme="dark"] .osp-legend-loading,
html[data-theme="dark"] .osp-lr-notice,
html[data-theme="dark"] .osp-loading-anim { color: var(--osp-fg-1); }

/* Heroes / equipment labels */
html[data-theme="dark"] .osp-hero-name-badge { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-equip-hero-label { color: var(--osp-fg-2); }

/* Items list (BB fallback) */
html[data-theme="dark"] .osp-item {
    background: var(--osp-bg-1);
    border-color: var(--osp-border-1);
}
html[data-theme="dark"] .osp-item-name { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-item-lvl { color: var(--osp-gold-heading); }
html[data-theme="dark"] .osp-item-lvl.maxed { color: var(--osp-success); }

/* Achievements */
html[data-theme="dark"] .osp-ach {
    background: var(--osp-bg-1);
    border-color: var(--osp-border-1);
}
html[data-theme="dark"] .osp-ach-name { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-ach-info,
html[data-theme="dark"] .osp-ach-progress { color: var(--osp-fg-2); }

/* Best Season (tinted, semantic) */
html[data-theme="dark"] .osp-best-season {
    background: var(--osp-bg-best-season);
    border-color: #6a5a20;
}
html[data-theme="dark"] .osp-best-season .osp-bs-val { color: #ffd76b; }
html[data-theme="dark"] .osp-best-season .osp-bs-lbl { color: #c7a85a; }
html[data-theme="dark"] .osp-best-season-bb {
    background: var(--osp-bg-best-season-bb);
    border-color: #5a6a30;
}
html[data-theme="dark"] .osp-best-season-bb .osp-bs-val { color: #c8e07d; }
html[data-theme="dark"] .osp-best-season-bb .osp-bs-lbl { color: #94a85e; }

/* League ranking table */
html[data-theme="dark"] .osp-lr-table { border-color: var(--osp-border-1); }
html[data-theme="dark"] .osp-lr-row { border-bottom-color: var(--osp-border-1); }
html[data-theme="dark"] .osp-lr-row.lr-me { background: var(--osp-bg-lr-me); }
html[data-theme="dark"] .osp-lr-row.lr-promo { background: rgba(74, 222, 128, 0.10); }
html[data-theme="dark"] .osp-lr-row.lr-demo  { background: rgba(248, 113, 113, 0.10); }
html[data-theme="dark"] .lr-rank-num { color: var(--osp-fg-2); }
html[data-theme="dark"] .lr-trophies { color: var(--osp-fg-0); }
html[data-theme="dark"] .lr-name { color: var(--osp-link); }

/* Battle log */
html[data-theme="dark"] .osp-bl-section-title { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-bl-entry {
    background: var(--osp-bg-1);
    border-color: var(--osp-border-1);
}
html[data-theme="dark"] .osp-bl-pct { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-bl-arrow { color: var(--osp-success); }
html[data-theme="dark"] .osp-bl-arrow.defense { color: var(--osp-danger); }
html[data-theme="dark"] .osp-bl-opponent { color: var(--osp-link); }
html[data-theme="dark"] .osp-bl-loot-item { color: var(--osp-fg-1); }
html[data-theme="dark"] .osp-bl-type {
    background: var(--osp-bg-2);
    color: var(--osp-fg-1);
}
html[data-theme="dark"] .osp-bl-time { color: var(--osp-fg-2); }

/* Army composition */
html[data-theme="dark"] .osp-army { border-top-color: var(--osp-border-2); }
html[data-theme="dark"] .osp-army-toggle { color: var(--osp-link); }
html[data-theme="dark"] .osp-army-body {
    background: var(--osp-bg-2);
    border-color: var(--osp-border-1);
}
html[data-theme="dark"] .osp-army-group-label { color: var(--osp-fg-2); }
html[data-theme="dark"] .osp-army-count { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-army-hero-block {
    background: var(--osp-bg-3);
    border-color: var(--osp-border-2);
}
html[data-theme="dark"] .osp-army-group--cc { border-top-color: var(--osp-border-2); }

/* War Stats sub-tabs */
html[data-theme="dark"] .osp-ws-tabs { border-bottom-color: var(--osp-border-1); }
html[data-theme="dark"] .osp-ws-tab {
    background: var(--osp-bg-2);
    border-color: var(--osp-border-1);
    color: var(--osp-fg-1);
}
html[data-theme="dark"] .osp-ws-tab:hover { background: var(--osp-bg-3); }

html[data-theme="dark"] .osp-ws-year-label { color: var(--osp-fg-1); }
html[data-theme="dark"] .osp-ws-year-select {
    background: var(--osp-bg-2);
    border-color: var(--osp-border-2);
    color: var(--osp-fg-0);
}

/* CK / CP star buckets */
html[data-theme="dark"] .osp-ws-star-row {
    background: var(--osp-bg-1);
    border-color: var(--osp-border-1);
}
html[data-theme="dark"] .osp-ws-bucket-label { color: var(--osp-fg-1); }
html[data-theme="dark"] .osp-ws-bucket-val { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-ws-bucket-pct { color: var(--osp-fg-2); }
html[data-theme="dark"] .osp-ws-footer { color: var(--osp-fg-2); }

/* ClashSpot card */
html[data-theme="dark"] .osp-ws-cs-header { color: var(--osp-link); }
html[data-theme="dark"] .osp-ws-cs-summary {
    background: var(--osp-bg-ws-cs-summary);
    border-color: #2a3550;
}
html[data-theme="dark"] .osp-ws-cs-summary-label { color: var(--osp-fg-1); }
html[data-theme="dark"] .osp-ws-cs-summary-val { color: var(--osp-fg-0); }

html[data-theme="dark"] .osp-ws-cs-tbl thead th {
    color: var(--osp-fg-2);
    border-bottom-color: var(--osp-border-1);
}
html[data-theme="dark"] .osp-ws-cs-tbl tbody tr { border-bottom-color: var(--osp-border-1); }
html[data-theme="dark"] .osp-ws-cs-tbl tbody th.osp-ws-cs-row-label { color: var(--osp-fg-1); }
html[data-theme="dark"] .osp-ws-cs-count { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-ws-cs-pct { color: var(--osp-fg-2); }

/* Equipment-maxed banner (also lives in coc-assets.php inline CSS) */
html[data-theme="dark"] .osp-equip-maxed {
    background: linear-gradient(135deg, #2a2418, #3a2f1e);
    border-color: #6a5a20;
    color: var(--osp-gold-heading);
}

/* Tooltip — speech bubble. The ::after arrow must match the new bg. */
html[data-theme="dark"] .osp-tooltip {
    background: var(--osp-bg-3);
    color: var(--osp-fg-0);
    border-color: var(--osp-border-2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .osp-tooltip::after { border-top-color: var(--osp-bg-3); }
html[data-theme="dark"] .osp-tooltip .tt-name { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-tooltip .tt-detail { color: var(--osp-fg-2); }

/* ────────────────────────────────────────────────────────────────────
 * .outskirt-* — toggles
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .outskirt-bp-toggle-button {
    background: var(--osp-bg-2);
    color: var(--osp-fg-1);
}
html[data-theme="dark"] .outskirt-bp-toggle-button:hover { background: var(--osp-bg-3); }

/* ────────────────────────────────────────────────────────────────────
 * .clan-info-* — clan info card
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .clan-info-card { color: var(--osp-fg-0); }
html[data-theme="dark"] .clan-info-tagline code {
    background: rgba(255, 255, 255, 0.08);
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .clan-info-feature {
    background: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .clan-info-label-chip {
    background: rgba(255, 255, 255, 0.08);
    color: var(--osp-fg-0);
}

/* Click-to-copy clan tag pill */
html[data-theme="dark"] .clan-info-tag-btn {
    background: linear-gradient(180deg, #3a2e0e 0%, #4a3812 100%);
    border-color: rgba(240, 192, 64, 0.45);
    color: var(--osp-gold-heading);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 2px 6px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .clan-info-tag-btn:hover {
    background: linear-gradient(180deg, #4a3812 0%, #5a4516 100%);
    border-color: rgba(240, 192, 64, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 10px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .clan-info-tag-copy { color: var(--osp-gold); }
html[data-theme="dark"] .clan-info-tag-btn.is-copied {
    background: linear-gradient(180deg, #1c3a1c 0%, #285028 100%);
    border-color: rgba(74, 222, 128, 0.5);
    color: #b8eecf;
}
html[data-theme="dark"] .clan-info-tag-btn.is-copied .clan-info-tag-copy { color: #4ade80; }

/* ────────────────────────────────────────────────────────────────────
 * .rep-* — repartition cards
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .rep-toggle-button {
    background: var(--osp-bg-2);
    color: var(--osp-fg-1);
    border-color: transparent;
}
html[data-theme="dark"] .rep-toggle-button:hover {
    background: var(--osp-bg-3);
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .rep-toggle-button.is-active,
html[data-theme="dark"] .rep-toggle-button:disabled {
    background: var(--osp-gold);
    color: #2d1f00;
    border-color: #c98c00;
}
html[data-theme="dark"] .rep-description { color: var(--osp-fg-1); }
html[data-theme="dark"] .rep-col-title { border-bottom-color: var(--osp-border-1); }
html[data-theme="dark"] .rep-tile-track { stroke: rgba(255, 255, 255, 0.10); }
html[data-theme="dark"] .rep-eq-group {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .rep-eq-group-header { border-bottom-color: rgba(255, 255, 255, 0.10); }
html[data-theme="dark"] .rep-funfact-note { color: var(--osp-fg-1); }
html[data-theme="dark"] .rep-funfact-card { background: rgba(255, 255, 255, 0.05); }

/* ────────────────────────────────────────────────────────────────────
 * Player search + player cards (clan pages)
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .outskirt-player-search input[type="search"] {
    background: var(--osp-bg-1);
    border-color: var(--osp-border-1);
    color: var(--osp-fg-0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
html[data-theme="dark"] .outskirt-player-search input[type="search"]:focus {
    border-color: var(--osp-gold);
    box-shadow: 0 0 0 3px rgba(240, 192, 64, 0.18);
}
html[data-theme="dark"] .outskirt-player-search input[type="search"]::placeholder {
    color: var(--osp-fg-2);
}

html[data-theme="dark"] .player-card.osp-pc {
    background: var(--osp-bg-1);
    border-color: var(--osp-border-1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .osp-pc-stat { background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .osp-pc-lastaction { border-top-color: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .osp-pc-empty { color: var(--osp-fg-2); }

/* ────────────────────────────────────────────────────────────────────
 * .osp-clan-switcher — dropdown
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .osp-clan-switcher__btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
}
html[data-theme="dark"] .osp-clan-switcher__btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
}
html[data-theme="dark"] .osp-clan-switcher__menu {
    background: var(--osp-bg-2);
    border-color: var(--osp-border-2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6);
}
html[data-theme="dark"] .osp-clan-switcher__menu li { color: var(--osp-fg-0); }
html[data-theme="dark"] .osp-clan-switcher__menu li:hover { background: var(--osp-bg-3); }
html[data-theme="dark"] .osp-clan-switcher__menu li[aria-selected="true"] {
    background: rgba(240, 192, 64, 0.18);
    color: var(--osp-gold-heading);
}

/* ────────────────────────────────────────────────────────────────────
 * Forminator — recruitment form
 *
 * Forminator ships its own light-themed widget skin. These overrides cover
 * the surfaces, controls, labels, helper text, progress bar and buttons
 * for the recruitment form. The selectors are scoped under
 * `html[data-theme="dark"]` so the form keeps its light appearance for
 * users who never toggle dark mode. As an alternative, the same rules
 * would also work pasted into Forminator's "Custom CSS" panel
 * (Behavior → Custom CSS → Enable) — the in-form route is preferable if
 * you ever swap themes, since the styles travel with the form export.
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .forminator-ui,
html[data-theme="dark"] .forminator-ui.forminator-custom-form,
html[data-theme="dark"] .forminator-ui.forminator-design--bold {
    background: transparent;
    color: var(--osp-fg-0);
}

/* Labels + descriptions */
html[data-theme="dark"] .forminator-ui .forminator-label,
html[data-theme="dark"] .forminator-ui legend.forminator-label {
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .forminator-ui .forminator-description,
html[data-theme="dark"] .forminator-ui .forminator-multi-upload-message,
html[data-theme="dark"] .forminator-ui .forminator-pagination--content {
    color: var(--osp-fg-1);
}
html[data-theme="dark"] .forminator-ui .forminator-required {
    color: var(--osp-danger);
}

/* Text inputs, textareas, selects */
html[data-theme="dark"] .forminator-ui input[type="text"],
html[data-theme="dark"] .forminator-ui input[type="email"],
html[data-theme="dark"] .forminator-ui input[type="url"],
html[data-theme="dark"] .forminator-ui input[type="tel"],
html[data-theme="dark"] .forminator-ui input[type="number"],
html[data-theme="dark"] .forminator-ui input[type="password"],
html[data-theme="dark"] .forminator-ui input[type="search"],
html[data-theme="dark"] .forminator-ui input[type="date"],
html[data-theme="dark"] .forminator-ui textarea,
html[data-theme="dark"] .forminator-ui select,
html[data-theme="dark"] .forminator-ui .forminator-input,
html[data-theme="dark"] .forminator-ui .forminator-textarea,
html[data-theme="dark"] .forminator-ui .forminator-select--field {
    background-color: var(--osp-bg-1) !important;
    border-color: var(--osp-border-1) !important;
    color: var(--osp-fg-0) !important;
}
html[data-theme="dark"] .forminator-ui input::placeholder,
html[data-theme="dark"] .forminator-ui textarea::placeholder {
    color: var(--osp-fg-2);
    opacity: 1;
}
html[data-theme="dark"] .forminator-ui input:focus,
html[data-theme="dark"] .forminator-ui textarea:focus,
html[data-theme="dark"] .forminator-ui select:focus,
html[data-theme="dark"] .forminator-ui .forminator-input:focus,
html[data-theme="dark"] .forminator-ui .forminator-select--field:focus {
    border-color: var(--osp-link) !important;
    box-shadow: 0 0 0 3px rgba(91, 156, 240, 0.18) !important;
    outline: none !important;
}

/* Select2 (Forminator wraps native <select> in select2 widget) */
html[data-theme="dark"] .forminator-ui .select2-container--default .select2-selection,
html[data-theme="dark"] .forminator-ui .select2-container--default .select2-selection--single,
html[data-theme="dark"] .forminator-ui .select2-container--default .select2-selection--multiple {
    background-color: var(--osp-bg-1) !important;
    border-color: var(--osp-border-1) !important;
    color: var(--osp-fg-0) !important;
}
html[data-theme="dark"] .select2-dropdown {
    background-color: var(--osp-bg-2) !important;
    border-color: var(--osp-border-2) !important;
    color: var(--osp-fg-0) !important;
}
html[data-theme="dark"] .select2-results__option { color: var(--osp-fg-0); }
html[data-theme="dark"] .select2-results__option--highlighted[aria-selected],
html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--osp-bg-3) !important;
    color: var(--osp-fg-0) !important;
}
html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
    background-color: var(--osp-bg-1) !important;
    border-color: var(--osp-border-1) !important;
    color: var(--osp-fg-0) !important;
}

/* Buttons (Next, Submit, Back) */
html[data-theme="dark"] .forminator-ui .forminator-button,
html[data-theme="dark"] .forminator-ui .forminator-button-submit,
html[data-theme="dark"] .forminator-ui .forminator-pagination-submit {
    background-color: var(--osp-link) !important;
    color: #0d1117 !important;
    border-color: var(--osp-link) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-button:hover,
html[data-theme="dark"] .forminator-ui .forminator-button-submit:hover,
html[data-theme="dark"] .forminator-ui .forminator-pagination-submit:hover {
    background-color: var(--osp-link-hover) !important;
    border-color: var(--osp-link-hover) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-button-back {
    background-color: var(--osp-bg-2) !important;
    color: var(--osp-fg-0) !important;
    border-color: var(--osp-border-2) !important;
}

/* Pagination progress bar */
html[data-theme="dark"] .forminator-ui .forminator-pagination-progress {
    background-color: var(--osp-bg-2) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-pagination-progress > span,
html[data-theme="dark"] .forminator-ui .forminator-pagination-steps span.forminator-step--complete,
html[data-theme="dark"] .forminator-ui .forminator-progress-bar--bar {
    background-color: var(--osp-link) !important;
}

/* Checkboxes & radios — boxed/inline variants */
html[data-theme="dark"] .forminator-ui .forminator-checkbox-box,
html[data-theme="dark"] .forminator-ui .forminator-radio-box {
    background-color: var(--osp-bg-1) !important;
    border-color: var(--osp-border-2) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-checkbox-label,
html[data-theme="dark"] .forminator-ui .forminator-checkbox__label,
html[data-theme="dark"] .forminator-ui .forminator-radio-label {
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .forminator-ui input[type="checkbox"]:checked + .forminator-checkbox-box,
html[data-theme="dark"] .forminator-ui input[type="radio"]:checked + .forminator-radio-box {
    background-color: var(--osp-link) !important;
    border-color: var(--osp-link) !important;
}

/* File upload */
html[data-theme="dark"] .forminator-ui .forminator-multi-upload,
html[data-theme="dark"] .forminator-ui .forminator-upload-file {
    background-color: var(--osp-bg-1) !important;
    border-color: var(--osp-border-2) !important;
    color: var(--osp-fg-1) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-icon-upload { color: var(--osp-fg-1); }

/* Response messages */
html[data-theme="dark"] .forminator-ui .forminator-response-message {
    background-color: var(--osp-bg-1) !important;
    color: var(--osp-fg-0) !important;
    border-color: var(--osp-border-2) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-response-message.forminator-error {
    background-color: rgba(248, 113, 113, 0.10) !important;
    color: var(--osp-danger) !important;
    border-color: rgba(248, 113, 113, 0.35) !important;
}
html[data-theme="dark"] .forminator-ui .forminator-response-message.forminator-success {
    background-color: rgba(74, 222, 128, 0.10) !important;
    color: var(--osp-success) !important;
    border-color: rgba(74, 222, 128, 0.35) !important;
}

/* Consent / privacy chips */
html[data-theme="dark"] .forminator-ui .forminator-checkbox__wrapper {
    background-color: transparent;
}

/* ────────────────────────────────────────────────────────────────────
 * Clash font on inner-page hero subtitles
 *
 * NOT scoped to dark mode — applies in both themes. The site's "Force
 * Clash Font" customizer block forces `font-family: Clash !important` on
 * body, headings, buttons, etc., but `.inner-header-description .header-
 * subtitle` carries a kirki cached rule with higher specificity that
 * overrides it back to Muli. This rule wins via `!important` + matching
 * specificity. Lives here only because this stylesheet is enqueued
 * sitewide; conceptually it belongs in the child theme's style.css.
 * ──────────────────────────────────────────────────────────────────── */

.inner-header-description .header-subtitle,
.inner-header-description .header-subtitle2,
.header-homepage .header-subtitle,
.header-homepage .header-subtitle2 {
    font-family: "Clash", Muli, Helvetica, Arial, sans-serif !important;
}

/* ────────────────────────────────────────────────────────────────────
 * Mobile hamburger (offcanvas) trigger
 *
 * Mesmerize paints the burger black when the nav is in `.coloured-nav`
 * or `.fixto-fixed` state (parent style.css:5545+) — which kicks in on
 * scroll. Against the dark nav background that turns the burger nearly
 * invisible, so force it back to white. Same fix for the `.bubble`
 * (the round hover halo behind the icon).
 * ──────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .coloured-nav .main_menu_col [data-component="offcanvas"],
html[data-theme="dark"] .fixto-fixed .main_menu_col [data-component="offcanvas"],
html[data-theme="dark"] .main_menu_col [data-component="offcanvas"],
html[data-theme="dark"] .main_menu_col [data-component="offcanvas"] i.fa {
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .coloured-nav .main_menu_col [data-component="offcanvas"] .bubble,
html[data-theme="dark"] .fixto-fixed .main_menu_col [data-component="offcanvas"] .bubble {
    background-color: var(--osp-fg-0);
}

/* ────────────────────────────────────────────────────────────────────
 * Discord verification widget (.cdv-*)
 *
 * The widget injects its own light-mode stylesheet at runtime
 * (coc-discord-verify.js:419). The injected rules use class selectors
 * with specificity (0,1,0); adding `html[data-theme="dark"]` here gives
 * us (0,1,1) which wins without `!important`.
 * ──────────────────────────────────────────────────────────────────── */
html[data-theme="dark"] .cdv-card {
    background: var(--osp-bg-1);
    border-color: var(--osp-border-1);
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .cdv-card.cdv-verified {
    background: rgba(74, 222, 128, 0.08);
    border-color: rgba(74, 222, 128, 0.35);
}
html[data-theme="dark"] .cdv-title { color: var(--osp-fg-0); }
html[data-theme="dark"] .cdv-sub   { color: var(--osp-fg-1); }
html[data-theme="dark"] .cdv-help  { color: var(--osp-fg-2); }
html[data-theme="dark"] .cdv-help a,
html[data-theme="dark"] .cdv-card a { color: var(--osp-link); }
html[data-theme="dark"] .cdv-label  { color: var(--osp-fg-0); }
html[data-theme="dark"] .cdv-input {
    background: var(--osp-bg-2);
    border-color: var(--osp-border-2);
    color: var(--osp-fg-0);
}
html[data-theme="dark"] .cdv-input::placeholder { color: var(--osp-fg-2); }
html[data-theme="dark"] .cdv-divider { color: var(--osp-fg-2); }
html[data-theme="dark"] .cdv-divider:before,
html[data-theme="dark"] .cdv-divider:after { border-top-color: var(--osp-border-1); }
html[data-theme="dark"] .cdv-pending { color: var(--osp-gold-heading); }
html[data-theme="dark"] .cdv-uid { color: var(--osp-fg-1); }
html[data-theme="dark"] .cdv-uid code {
    color: var(--osp-fg-1);
    background: var(--osp-bg-2);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ────────────────────────────────────────────────────────────────────
 * Scrollbars (Firefox)
 * ──────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] { scrollbar-color: var(--osp-border-2) var(--osp-bg-0); }