/*
 * GlossoBench — sprapp.com design feel.
 *   blue-600 (#2563eb) brand, frosted-white sticky header, pale-blue surfaces,
 *   big soft shadows, small radii, Inter, tight 14px-ish type, blue links/CTAs.
 * Loaded after the Material theme via extra_css, so these overrides win.
 * Tokens mirror sprapp.com's own --accent / --surface / --border / --shadow-md.
 */

:root,
[data-md-color-scheme="default"] {
  --md-default-bg-color: #fbfdff;
  --md-default-bg-color--light: #f9fbfe;
  --md-default-fg-color: #0b1220;
  --md-default-fg-color--light: #5b6b85;
  --md-default-fg-color--lighter: #8a96aa;
  --md-default-fg-color--lightest: #c8d3e0;

  --md-primary-fg-color: #2563eb;
  --md-primary-fg-color--light: #4f86ff;
  --md-primary-fg-color--dark: #1d4ed8;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #eef4ff;

  --md-accent-fg-color: #2563eb;
  --md-accent-fg-color--transparent: rgba(37, 99, 235, 0.10);
  --md-accent-bg-color: #2563eb;
  --md-accent-bg-color--light: #dbeafe;

  /* sprapp-ish surfaces + radii + shadow, reused by the leaderboard page */
  --gb-surface: #ffffff;
  --gb-bg-soft: #f5f9ff;
  --gb-border: #e2e8f0;
  --gb-radius: 10px;
  --gb-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.14), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --gb-accent-tint: #eff6ff;
  --gb-accent-soft: #dbeafe;
}

[data-md-color-scheme="slate"] {
  --gb-surface: #0b1220;
  --gb-bg-soft: #0a0d12;
  --gb-border: #1e2a3d;
  --gb-accent-tint: rgba(37, 99, 235, 0.18);
  --gb-accent-soft: rgba(37, 99, 235, 0.30);
}

/* ---- frosted-white sticky header (sprapp Header_header) ---- */
.md-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gb-border);
  color: var(--md-default-fg-color);
  box-shadow: none;
}
[data-md-color-scheme="slate"] .md-header {
  background: rgba(11, 18, 32, 0.78);
}
.md-header__title, .md-header__topic, .md-header__title .md-ellipsis {
  color: #0b1220;
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-header__title,
[data-md-color-scheme="slate"] .md-header__topic { color: #fff; }
.md-header__button, .md-header__nav a { color: #4d5a6f; }
.md-header__button:hover, .md-header__button:focus { color: var(--md-accent-fg-color); }

/* ---- full-width header / tabs / footer inners (sprapp: bar spans viewport) ----
   The frosted bar is already full width; widen the INNER (logo + nav + tabs) so
   the menu content spans the viewport too, with breathing-room side padding. */
.md-header__inner,
.md-tabs__inner,
.md-footer__inner {
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: clamp(0.8rem, 4vw, 2.5rem);
  padding-right: clamp(0.8rem, 4vw, 2.5rem);
}

/* ---- tabs bar: soft surface, blue active ---- */
.md-tabs {
  background: var(--gb-bg-soft);
  border-bottom: 1px solid var(--gb-border);
  color: var(--md-default-fg-color);
}
.md-tabs__link { color: #5b6b85; }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--md-accent-fg-color); }

/* ---- sidebar nav ---- */
.md-nav__link { color: #4d5a6f; }
.md-nav__link:hover, .md-nav__link--active,
.md-nav__item--active > .md-nav__link { color: var(--md-accent-fg-color); }

/* ---- content links: blue, no underline until hover ---- */
.md-typeset a { color: var(--md-accent-fg-color); text-decoration: none; }
.md-typeset a:hover { text-decoration: underline; }

/* ---- typography: Inter, ~14px base, tight leading (sprapp) ---- */
.md-typeset {
  font-size: 0.82rem;
  line-height: 1.6;
  letter-spacing: -0.005em;
  color: #0b1220;
}
[data-md-color-scheme="slate"] .md-typeset { color: #e6edf6; }
.md-typeset h1 { letter-spacing: -0.03em; font-weight: 700; color: #0b1220; }
[data-md-color-scheme="slate"] .md-typeset h1 { color: #fff; }
.md-typeset h2 { letter-spacing: -0.02em; border-bottom-color: var(--gb-border); }
.md-typeset h3 { letter-spacing: -0.01em; }

/* ---- CTA buttons (sprapp navCta): blue, radius 10, weight 500 ---- */
.md-button {
  background: var(--md-accent-fg-color);
  color: #fff !important;
  border: 1px solid var(--md-accent-fg-color);
  border-radius: var(--gb-radius);
  font-weight: 500;
  padding: 0.42rem 1rem;
  box-shadow: none;
}
.md-button:hover {
  background: var(--md-primary-fg-color--dark);
  border-color: var(--md-primary-fg-color--dark);
}
.md-button--primary { background: var(--md-accent-fg-color); }

/* ---- admonitions / details / code: soft radius + sprapp shadow ---- */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--gb-radius);
  border-color: var(--gb-border);
  box-shadow: var(--gb-shadow);
}
.md-typeset code { border-radius: 6px; }
.md-typeset pre {
  border-radius: var(--gb-radius);
  box-shadow: var(--gb-shadow);
}
.md-typeset pre > code { border-radius: 0; }

/* ---- search input ---- */
.md-search__input { border-radius: var(--gb-radius); }

/* ---- landing CTA row (.gb-cta) ---- */
.gb-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0 1.6rem; }
.gb-cta a {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.5rem 1rem; border-radius: var(--gb-radius);
  font-weight: 500; text-decoration: none !important; font-size: 0.9rem;
}
.gb-cta a > strong { font-weight: 600; }
.gb-cta a:first-child {
  background: var(--md-accent-fg-color); color: #fff !important;
  border: 1px solid var(--md-accent-fg-color);
}
.gb-cta a:first-child:hover { background: var(--md-primary-fg-color--dark); }
.gb-cta a:not(:first-child) {
  color: var(--md-accent-fg-color) !important;
  background: var(--gb-accent-tint);
  border: 1px solid var(--gb-accent-soft);
}
.gb-cta a:not(:first-child):hover { background: var(--gb-accent-soft); }

/* ---- landing hero glow (sprapp gradient-hero) ---- */
.md-content__inner { position: relative; }
.md-content__inner > .gb-hero-glow { display: none; }