/* ============================================================================
   theme.css — dark mode for volleyballrankings.com
   Loaded AFTER apple-theme.css on every public page. Light mode is the
   default (the values pages already define). Dark mode applies when:
     1. the visitor chose it (html[data-theme="dark"], persisted by theme.js), or
     2. their OS prefers dark and they have not chosen light (auto).
   Both blocks below must stay identical — one is the explicit choice, the
   other the OS-driven default.
   ============================================================================ */

:root[data-theme="dark"] {
  /* Legacy page palette */
  --bg:       #0B1220;
  --surface:  #111C2F;
  --surface2: #16233A;
  --border:   #26374F;
  --text:     #ECF1F8;
  --text2:    #9FAFC4;
  --accent:   #6CB2F7;
  --accent2:  #8CC4FF;
  --green:    #5FCF70;
  --red:      #FF6B5E;
  --yellow:   #FFB84D;
  --cyan:     #6CD2FF;
  /* Apple-gallery tokens (apple-theme.css) */
  --ax-canvas:    #0E1726;
  --ax-parchment: #0B1220;
  --ax-pearl:     #101B2E;
  --ax-ink:       #ECF1F8;
  --ax-ink-80:    #C8D2E0;
  --ax-ink-48:    #8FA1B8;
  --ax-divider:   #1C2A40;
  --ax-hairline:  #26374F;
  --ax-primary:        #3F8CFF;
  --ax-primary-focus:  #6CB2F7;
  --ax-primary-ondark: #5FCF70;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:       #0B1220;
    --surface:  #111C2F;
    --surface2: #16233A;
    --border:   #26374F;
    --text:     #ECF1F8;
    --text2:    #9FAFC4;
    --accent:   #6CB2F7;
    --accent2:  #8CC4FF;
    --green:    #5FCF70;
    --red:      #FF6B5E;
    --yellow:   #FFB84D;
    --cyan:     #6CD2FF;
    --ax-canvas:    #0E1726;
    --ax-parchment: #0B1220;
    --ax-pearl:     #101B2E;
    --ax-ink:       #ECF1F8;
    --ax-ink-80:    #C8D2E0;
    --ax-ink-48:    #8FA1B8;
    --ax-divider:   #1C2A40;
    --ax-hairline:  #26374F;
    --ax-primary:        #3F8CFF;
    --ax-primary-focus:  #6CB2F7;
    --ax-primary-ondark: #5FCF70;
  }
}

/* ---- Pieces with hardcoded light colors, retinted via the vars ---------- */
/* Inline brand SVGs: wordmark text uses fixed ink fills */
svg text[fill="#1d1d1f"] { fill: var(--text, #1d1d1f); }
svg text[fill="#6e6e73"] { fill: var(--text2, #6e6e73); }

/* Nav logo: navy lockup by day, white lockup by night */
.nav-logo-dark { display: none !important; }
:root[data-theme="dark"] .ax-nav-brand img:not(.nav-logo-dark) { display: none !important; }
:root[data-theme="dark"] .nav-logo-dark { display: block !important; }

:root[data-theme="dark"] .ax-subnav { background: rgba(13, 21, 36, 0.8); border-bottom-color: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .ax-btn:hover { background: #2E6FD0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ax-nav-brand img:not(.nav-logo-dark) { display: none !important; }
  :root:not([data-theme="light"]) .nav-logo-dark { display: block !important; }
  :root:not([data-theme="light"]) .ax-subnav { background: rgba(13, 21, 36, 0.8); border-bottom-color: rgba(255, 255, 255, 0.08); }
  :root:not([data-theme="light"]) .ax-btn:hover { background: #2E6FD0; }
}

/* ---- The toggle button (injected by theme.js) --------------------------- */
#themeToggle {
  position: fixed;
  bottom: 18px;
  left: 18px;
  z-index: 9500;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border, #DCE4EC);
  background: var(--surface, #ffffff);
  color: var(--text, #041C3D);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background-color 0.2s ease;
}
#themeToggle:hover { transform: scale(1.08); }
#themeToggle:focus-visible { outline: 2px solid var(--accent, #0071e3); outline-offset: 2px; }

/* In the site header (site-nav.js's #sxTheme slot, beside the account
   button): same footprint as the account button, no floating shadow. */
#themeToggle.in-nav {
  position: static;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  box-shadow: none;
  background: transparent;
  font-size: 17px;
  flex: 0 0 auto;
}
#themeToggle.in-nav:hover {
  transform: none;
  background: color-mix(in srgb, var(--text, #041C3D) 8%, transparent);
}

/* ---- Mobile: no focus zoom ---------------------------------------------- */
/* iOS Safari zooms the whole page when a focused control's text is under
   16px, which is how tapping "Search teams" left the dashboard stuck
   zoomed/off-center. Keeping every text-entry control at 16px on phone-size
   screens removes the trigger; desktop keeps each page's designed sizes. */
@media (max-width: 768px) {
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="password"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* View size (account menu: Compact / Normal / Large, theme.js VRView).
   Scales the page content; the site header keeps its size. */
html[data-view="compact"] .container,
html[data-view="compact"] .team-page { zoom: 0.88; }
html[data-view="large"] .container,
html[data-view="large"] .team-page { zoom: 1.15; }