/* Beatkit color themes. Pages reference these tokens instead of hardcoded colors;
   includes/theme-head.php sets data-theme on <html> before first paint. */

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0B0C0E;            /* page background, inputs, code chips */
  --bg-alt: #0D0E11;        /* alternating page sections */
  --surface: #101215;       /* cards */
  --surface-2: #121417;     /* raised cards, dropdowns */
  --surface-3: #17191D;     /* hover fills, avatar backing */
  --hover: #14161A;
  --hover-2: #1A1D22;

  --line-faint: #171A1F;    /* section dividers */
  --line: #1D2026;          /* card borders, row dividers */
  --line-nav: #202329;
  --line-strong: #23262C;   /* inputs, pills, buttons */
  --line-btn: #2A2D33;
  --line-hover: #3A3E46;

  --text: #EDEEF0;
  --text-2: #C7CBD1;
  --text-3: #A5AAB3;
  --text-muted: #90959E;
  --text-faint: #70747C;
  --text-dim: #5C6069;

  --accent: #A855F7;
  --btn: #683599;
  --btn-text: #F8F5FF;

  --nav-glass: rgba(11,12,14,0.92);
  --backdrop: rgba(11,12,14,0.96);

  --ok: #4ADE80;
  --bad: #F87171;
  --warn: #FBBF24;

  --gold: #F2C744;          /* leaderboard ranks */
  --bronze: #C98A4B;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F6F6F9;
  --bg-alt: #EFEFF4;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #F0F0F5;
  --hover: #F3F3F7;
  --hover-2: #ECECF2;

  --line-faint: #EBEBF0;
  --line: #E4E4EA;
  --line-nav: #E4E4EA;
  --line-strong: #DCDCE3;
  --line-btn: #D4D4DC;
  --line-hover: #B8B8C4;

  --text: #14151A;
  --text-2: #33363D;
  --text-3: #464A53;
  --text-muted: #555A63;
  --text-faint: #666B74;
  --text-dim: #7A7F88;

  --accent: #9333EA;
  --btn: #683599;
  --btn-text: #F8F5FF;

  --nav-glass: rgba(255,255,255,0.9);
  --backdrop: rgba(246,246,249,0.97);

  --ok: #16A34A;
  --bad: #DC2626;
  --warn: #D97706;

  --gold: #A87A00;
  --bronze: #9A5B24;
}

/* Theme toggle button (includes/theme-toggle.php) */
.nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: transparent; border: 1px solid var(--line-strong); color: var(--text-muted); cursor: pointer; padding: 0; transition: color .15s ease, border-color .15s ease; }
.theme-toggle:hover { color: var(--text); border-color: var(--line-hover); }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Language picker (includes/lang-switch.php), next to the theme toggle */
.lang-picker { position: relative; display: inline-flex; align-items: center; height: 38px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--text-muted); transition: color .15s ease, border-color .15s ease; }
.lang-picker:hover, .lang-picker:focus-within { color: var(--text); border-color: var(--line-hover); }
.lang-picker svg { position: absolute; left: 10px; pointer-events: none; }
.lang-picker select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: inherit; font: 500 13px 'Inter', system-ui, sans-serif; height: 100%; padding: 0 12px 0 31px; cursor: pointer; border-radius: 8px; }
.lang-picker select:focus { outline: none; }
.lang-picker option { background: var(--surface-2); color: var(--text); }

/* Footer (includes/footer.php): on narrow screens the blurb gets its own row and
   the three link lists share the next one. */
@media (max-width: 760px) {
  .site-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 28px 20px !important; }
  .site-footer-grid > :first-child { grid-column: 1 / -1; }
}

/* Tablets and small laptops: the full nav needs about 1,100px, so up to there
   use the same ☰ menu the pages switch to at 860px and below (these rules
   match each page's own max-width: 860px block). */
@media (min-width: 861px) and (max-width: 1100px) {
  .hamburger-btn { display: inline-flex !important; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column !important; align-items: stretch !important;
    gap: 2px !important;
    background: var(--bg); border-bottom: 1px solid var(--line-nav);
    padding: 8px 24px 18px;
    display: none !important;
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  }
  .nav-links.open { display: flex !important; }
  .nav-links a.nav-link { width: 100%; box-sizing: border-box; padding: 12px 0 !important; border-bottom: 1px solid var(--line-faint); }
  .nav-links a.nav-link:last-of-type { border-bottom: none; }
  .nav-links a.btn-primary { margin-top: 12px; text-align: center; }
  #nav-backdrop { position: fixed; inset: 0; background: var(--backdrop); z-index: 8; opacity: 0; visibility: hidden; transition: opacity .15s ease; }
  #nav-backdrop.open { opacity: 1; visibility: visible; }
}