/* ════════════════════════════════════════════════════════════════════════════
   DARK MODE — page-specific hardcoded-color overrides
   Covers the ~20 % of colour values not driven by CSS variables, plus all
   navy-as-text uses (var(--navy) = #0f1e3c is invisible on dark backgrounds).

   Convention
   ───────────
   • --dm-accent (#7db0ed)  — bright blue for text/icons. ≥ 5:1 on --card.
   • --dm-btn    (#1e4a9e)  — darker blue for CTA backgrounds. ≥ 7:1 on white.
   Defined in html[data-theme="dark"] in main.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Footer: preserve dark background (footer uses var(--ink) as *background*,
   but --ink is now light in dark mode) ── */

html[data-theme="dark"] footer {
  background: #07101e;
  border: 1px solid var(--border);
}

/* ── Article breadcrumb separator ── */

html[data-theme="dark"] .article-v1-breadcrumbs__sep {
  color: rgba(226, 232, 246, 0.25);
}

/* ── Strip scroll arrows: hardcoded disabled colours ── */

html[data-theme="dark"] .strip-ctrl-arrow:disabled {
  color: var(--ink-dim);
  border-color: var(--border);
  background: var(--ink-faint);
}

/* ── "Mehr Aktionen" dropdown: deepen shadow + fix hover navy text ── */

html[data-theme="dark"] .mehr-aktionen__dropdown {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .mehr-aktionen__item:hover {
  background: var(--ink-faint);
  color: var(--ink);
}

/* ── iCal modal ── */

html[data-theme="dark"] .ical-modal__hint {
  color: var(--ink-dim);
}

html[data-theme="dark"] .ical-modal__title {
  color: var(--dm-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   PARTNER LOGOS
   grayscale + low opacity makes logos invisible on dark backgrounds.
   Remove grayscale in dark mode and show at natural colour.
   ───────────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .sponsor-logo {
  filter: opacity(0.75);
}

html[data-theme="dark"] .sponsor-logo:hover {
  filter: opacity(1) !important;
}

html[data-theme="dark"] .sponsor-logo--light {
  filter: invert(0.75) opacity(0.75);
}

html[data-theme="dark"] .partner-hauptsponsor img,
html[data-theme="dark"] .partner-item img {
  filter: opacity(0.75);
}

html[data-theme="dark"] .partner-hauptsponsor:hover img,
html[data-theme="dark"] .partner-hauptsponsor:focus-visible img,
html[data-theme="dark"] .partner-item:hover img,
html[data-theme="dark"] .partner-item:focus-visible img {
  filter: none;
}

/* ── Dual logo: light/dark swap for partner grid items ── */
.partner-logo--dark {
  display: none;
}
html[data-theme="dark"] .partner-logo--light {
  display: none;
}
html[data-theme="dark"] .partner-logo--dark {
  display: block;
  filter: none;
}

/* ── Dual logo: light/dark swap for ticker (sponsor-logo) ── */
/* Compound selector beats .sponsor-logo { display: flex } in home.css (same dep, later load) */
.sponsor-logo.sponsor-logo--dark {
  display: none;
}
html[data-theme="dark"] .sponsor-logo.sponsor-logo--light {
  display: none;
}
html[data-theme="dark"] .sponsor-logo.sponsor-logo--dark {
  display: block;
  filter: opacity(0.75);
}

/* Partner page card backgrounds (#fafafa / #f0f0f0) */

html[data-theme="dark"] .partner-hauptsponsor,
html[data-theme="dark"] .partner-item {
  background: var(--ink-faint);
}

html[data-theme="dark"] .partner-hauptsponsor:hover,
html[data-theme="dark"] .partner-item:hover {
  background: var(--border);
}

html[data-theme="dark"] .partner-hauptsponsor:focus-visible,
html[data-theme="dark"] .partner-item:focus-visible {
  background: var(--border);
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   STANDINGS / LEAGUE TABLE
   .league-table td uses border-bottom: 1px solid #f5f5f5 (hardcoded near-white).
   .enc-game-row has the same issue.
   ───────────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .league-table td {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .enc-game-row {
  border-bottom-color: var(--border);
}

/* "Our team" highlight row: rgba(15,30,60,0.04) is invisible; navy team name is invisible */

html[data-theme="dark"] .league-table tr.is-us,
html[data-theme="dark"] .league-table tr.is-allied {
  background: rgba(94, 141, 216, 0.08);
}

html[data-theme="dark"] .league-table tr.is-us .st-team,
html[data-theme="dark"] .league-table tr.is-allied .st-team {
  color: var(--dm-accent);
}

html[data-theme="dark"] .ts-row--us {
  background: rgba(94, 141, 216, 0.08);
}

html[data-theme="dark"] .ts-row--us .ts-name {
  color: var(--dm-accent);
}

/* Table tab bar — active state uses var(--navy) */

html[data-theme="dark"] .table-tab.is-active {
  color: var(--dm-accent);
  border-bottom-color: var(--dm-accent);
}

/* Schedule header row: rgba(21,21,21,0.025) is essentially invisible on dark */

html[data-theme="dark"] table.sched th {
  background: rgba(255, 255, 255, 0.03);
}

/* Playoff bracket: encounter scores / winner names use var(--navy) */

html[data-theme="dark"] .enc-score__val {
  color: var(--ink);
}

html[data-theme="dark"] .enc-team__name--winner {
  color: var(--ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   SQUAD PAGE — POSITION NAV BAR
   Uses hardcoded background: rgba(244, 244, 244) = bright light grey.
   Active state count badge uses: rgba(15,30,60,0.1) bg + var(--navy) text.
   ───────────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .pos-nav {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

html[data-theme="dark"] .pos-nav__btn.active {
  border-bottom-color: var(--dm-accent);
}

html[data-theme="dark"] .pos-nav__btn.active .pos-nav__count {
  background: rgba(94, 141, 216, 0.15);
  color: var(--dm-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   WCAG: GOLD / YELLOW BUTTONS — force dark text
   var(--ink) becomes #e2e8f6 (near-white) in dark mode, but gold (#f0b429)
   needs dark text for WCAG AA (gold/white contrast ≈ 2.9:1 → fails).
   ───────────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .nav-tickets,
html[data-theme="dark"] .nav-mobile-action.nav-tickets,
html[data-theme="dark"] .act-btn--tickets,
html[data-theme="dark"] .promo-strip__cta,
html[data-theme="dark"] .article-richtext .wp-block-button__link,
html[data-theme="dark"] .article-richtext .wp-block-file__button {
  color: #111827 !important;
}

/* Home page: .card--grey uses hardcoded #f7f7f7 */

html[data-theme="dark"] .card--grey {
  background: var(--card);
}

/* ─────────────────────────────────────────────────────────────────────────
   NAVY TEXT → ACCESSIBLE BLUE
   All elements using color: var(--navy) or color: var(--navy-mid) as a
   foreground / text colour are invisible in dark mode (#0f1e3c on #14203a).
   Override to --dm-accent (#7db0ed) which achieves ≥ 5:1 on --card.
   ───────────────────────────────────────────────────────────────────────── */

/* Legal pages — headings */

html[data-theme="dark"] .legal-h2 {
  color: var(--dm-accent);
}

html[data-theme="dark"] .legal-h2__num {
  color: var(--dm-accent);
  background: var(--navy-faint);
  border-color: rgba(94, 141, 216, 0.2);
}

html[data-theme="dark"] .toc-link.is-active {
  color: var(--dm-accent);
}

/* Legal pages — body links */

html[data-theme="dark"] .legal-p a,
html[data-theme="dark"] .legal-p-num a {
  color: var(--dm-accent);
}

html[data-theme="dark"] .legal-p a:hover,
html[data-theme="dark"] .legal-p-num a:hover {
  color: #a5caff;
}

html[data-theme="dark"] .contact-block {
  background: var(--navy-faint);
  border-color: rgba(94, 141, 216, 0.18);
}

html[data-theme="dark"] .contact-block a {
  color: var(--dm-accent);
}

/* Legal pages — highlight paragraph */

html[data-theme="dark"] .legal-p-num.is-highlight {
  background: var(--navy-faint);
  border-color: rgba(94, 141, 216, 0.18);
}

html[data-theme="dark"] .legal-p-num.is-highlight .legal-p-num__index {
  color: var(--dm-accent);
}

/* Changelog sidebar badges */

html[data-theme="dark"] .changelog-toc-ver {
  color: var(--dm-accent);
  background: var(--navy-faint);
  border-color: rgba(94, 141, 216, 0.2);
}

html[data-theme="dark"] .changelog-toc-link.is-active .changelog-toc-ver {
  background: var(--dm-btn);
  color: #fff;
  border-color: var(--dm-btn);
}

html[data-theme="dark"] .changelog-entry__version {
  color: var(--dm-accent);
  background: var(--navy-faint);
  border-color: rgba(94, 141, 216, 0.2);
}

/* On mobile, .changelog-item__label colour is --navy */

html[data-theme="dark"] .changelog-item__label {
  color: var(--dm-accent);
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTACT PAGE — FORMS & CTA BUTTONS
   Navy-background buttons are barely distinguishable from the dark card bg.
   Cat-chip, selected states, and step dots all use --navy as accent.
   ───────────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .cat-chip {
  color: var(--dm-accent);
  background: var(--navy-faint);
  border-color: rgba(94, 141, 216, 0.2);
}

html[data-theme="dark"] .cat-chip__dot {
  background: var(--dm-accent);
}

html[data-theme="dark"] .cat-btn.is-selected .cat-btn__icon {
  color: var(--dm-accent);
  background: var(--navy-faint);
}

/* Checkmark SVG in selected cat-btn: hardcoded dark-navy stroke → light blue */

html[data-theme="dark"] .cat-btn.is-selected::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237db0ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
}

/* Primary CTA buttons: var(--navy) bg becomes near-invisible on dark card */

html[data-theme="dark"] .contact-submit {
  background: var(--dm-btn);
  color: #fff;
}

html[data-theme="dark"] .contact-submit:hover:not(:disabled) {
  background: var(--dm-btn-hover);
}

html[data-theme="dark"] .redirect-cta {
  background: var(--dm-btn);
  color: #fff;
}

html[data-theme="dark"] .redirect-cta:hover {
  background: var(--dm-btn-hover);
}

html[data-theme="dark"] .redirect-box__icon {
  background: var(--navy-faint);
  color: var(--dm-accent);
}

/* Step progress indicator dot */

html[data-theme="dark"] .step-node.is-active .step-node__dot {
  background: var(--dm-btn);
  border-color: var(--dm-btn);
}

/* Method badge: hardcoded #9a7010 (dark amber) is illegible on dark amber bg */

html[data-theme="dark"] .method-badge {
  color: #d4a820;
  background: rgba(240, 180, 41, 0.12);
}

/* Placeholder text: hardcoded rgba(21,21,21,0.28) = black-transparent → invisible */

html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder {
  color: var(--ink-dim);
}

/* ─────────────────────────────────────────────────────────────────────────
   TICKETS MAP
   Map tiles switch to night preset in tickets.js; these overrides adapt the
   control chrome around the map to match dark mode.
   ───────────────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .map-wrapper {
  background: #0b1322;
}

html[data-theme="dark"] .map-view-toggle,
html[data-theme="dark"] .map-location-denied {
  background: rgba(20, 32, 58, 0.92);
  border-color: var(--border);
}

html[data-theme="dark"] .map-view-btn.active {
  color: var(--dm-accent);
  background: var(--navy-faint);
}

/* ─────────────────────────────────────────────────────────────────────────
   CATEGORY TAGS — NEWS PAGE & ARTICLE PAGE
   Default and variant tags use var(--navy) or hardcoded colours that are
   invisible / low-contrast on dark backgrounds.
   ───────────────────────────────────────────────────────────────────────── */

/* News list: plain text tags */

html[data-theme="dark"] .news-row__tag {
  color: var(--dm-accent);
}

html[data-theme="dark"] .news-row__tag--match {
  color: var(--dm-accent);
}

html[data-theme="dark"] .news-row__tag--squad {
  /* #2970b8 is too dark on --card; step up to a brighter accessible blue */
  color: #7db0ed;
}

html[data-theme="dark"] .news-row__tag--community {
  /* var(--green) #1a6b3a is too dark — use a brighter teal-green instead */
  color: #3db870;
}

html[data-theme="dark"] .news-row__tag--youth {
  /* #d97706 amber — passable but slightly low; brighten */
  color: #f0b429;
}

/* Article info bar: pill badges */

html[data-theme="dark"] .article-tag--match {
  background: var(--navy-faint);
  color: var(--dm-accent);
}

html[data-theme="dark"] .article-tag--squad {
  /* --green-dim is rgba(26,107,58,0.12) — background fine; text needs brighter green */
  color: #3db870;
}

/* Article meta (wp-block-post-terms pills): uses ink-faint bg + ink-soft text
   — both are CSS-var-driven and auto-adapt, but ensure text has enough contrast */

html[data-theme="dark"] .article-v1-meta .wp-block-post-terms a {
  background: var(--ink-faint);
  color: var(--ink-soft);
}

/* Player Page */

html[data-theme="dark"] .statbox-cell-val {
  color: var(--text-white);
}

/* Index Calendar Links */

html[data-theme="dark"] .match-card__link:hover {
  color: var(--text-white);
}

html[data-theme="dark"] .promo-strip {
  background-color: var(--card) !important;
}