/* ============================================================
   SimplifyAuth brand theme for MkDocs Material
   Ported from brand/brand-tokens.css. Light is the default theme; a designed
   dark variant is one toggle away. The blue->mint gradient is the single
   accent; the header stays near-black in BOTH themes so the white logo reads.
   Every color is defined per scheme so neither theme borrows the other's ink.
   The display face (Space Grotesk) is loaded via an extra_css URL in
   mkdocs.yml, which the `privacy` plugin self-hosts at build time.
   ============================================================ */

:root {
  /* brand constants (identical in both themes) */
  --sa-blue: #9cd5eb;
  --sa-mint: #a1f1bd;
  --sa-ice: #d7f0f2;
  --sa-navy: #04070d;

  /* bright gradient: filled buttons + verdict/hero accents on dark surfaces */
  --sa-grad-fill: linear-gradient(100deg, #9cd5eb 0%, #a1f1bd 100%);
  --sa-grad-soft: linear-gradient(100deg, rgba(156,213,235,.16), rgba(161,241,189,.16));
  --sa-glow: 0 0 0 1px rgba(161,241,189,.3), 0 14px 38px -12px rgba(156,213,235,.55);

  --sa-radius: 20px;
  --sa-radius-pill: 100px;

  --sa-font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sa-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Dark scheme (DEFAULT) --------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #04070d;
  --md-default-bg-color--light: #070d18;
  --md-default-fg-color: #e9f4f8;
  --md-default-fg-color--light: #92a6b8;
  --md-default-fg-color--lighter: #5b6f82;
  --md-default-fg-color--lightest: rgba(156,213,235,.10);

  --md-primary-fg-color: #04070d;      /* header */
  --md-primary-bg-color: #e9f4f8;      /* header text */
  --md-accent-fg-color: #a1f1bd;
  --md-typeset-a-color: #9cd5eb;

  --md-code-bg-color: #0a1322;
  --md-code-fg-color: #d7f0f2;

  /* landing tokens */
  --sa-surface: #0a1322;
  --sa-surface-2: #070d18;
  --sa-line: rgba(156,213,235,.14);
  --sa-ink: #e9f4f8;
  --sa-ink-dim: #92a6b8;
  --sa-ink-faint: #5b6f82;
  --sa-accent: #9cd5eb;               /* readable accent on dark */
  --sa-grad-text: linear-gradient(100deg, #9cd5eb 0%, #a1f1bd 100%);
  --sa-ghost-fg: #d7f0f2;
  --sa-ghost-border: rgba(156,213,235,.35);
}

/* ---- Light scheme (designed, on-brand) --------------------------------- */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #f4f8fa;
  --md-default-bg-color--light: #eef4f6;
  --md-default-fg-color: #0f2827;      /* brand dark-teal ink */
  --md-default-fg-color--light: #47616a;
  --md-default-fg-color--lighter: #6b8390;
  --md-default-fg-color--lightest: rgba(15,40,39,.10);

  --md-primary-fg-color: #04070d;      /* header stays dark in light theme too */
  --md-primary-bg-color: #e9f4f8;
  --md-accent-fg-color: #0e7490;
  --md-typeset-a-color: #0e7490;       /* darker cyan: passes contrast on white */

  --md-code-bg-color: #eaf2f5;
  --md-code-fg-color: #0f2827;

  --sa-surface: #ffffff;
  --sa-surface-2: #eef4f6;
  --sa-line: rgba(15,40,39,.12);
  --sa-ink: #0f2827;
  --sa-ink-dim: #47616a;
  --sa-ink-faint: #6b8390;
  --sa-accent: #0e7490;
  /* darker gradient so hero words + stats read on a light ground */
  --sa-grad-text: linear-gradient(100deg, #0e7490 0%, #15803d 100%);
  --sa-ghost-fg: #0f2827;
  --sa-ghost-border: rgba(15,40,39,.28);
}

/* ---- Typography -------------------------------------------------------- */
body, .md-typeset { font-family: var(--sa-font-body); }

.md-typeset h1, .md-typeset h2, .md-typeset h3,
.md-typeset h4, .md-header__title, .md-nav__title {
  font-family: var(--sa-font-display);
  letter-spacing: -0.02em;
}
.md-typeset h1 {
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--sa-ink);
}
.md-typeset h2 { letter-spacing: -0.025em; }

/* ---- Buttons: fully-rounded pills; primary = gradient + glow ----------- */
.md-typeset .md-button {
  border-radius: var(--sa-radius-pill);
  padding: 0.62em 1.55em;
  font-family: var(--sa-font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 0;
  color: var(--sa-ghost-fg);
  box-shadow: inset 0 0 0 1px var(--sa-ghost-border);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, color .3s;
}
.md-typeset .md-button:hover { transform: translateY(-2px); }
.md-typeset .md-button:focus-visible {
  outline: 2px solid var(--sa-accent);
  outline-offset: 3px;
}
.md-typeset .md-button--primary {
  color: #04131a;
  background: var(--sa-grad-fill);
  box-shadow: var(--sa-glow);
}
.md-typeset .md-button--primary:hover {
  color: #04131a;
  background: var(--sa-grad-fill);
}

/* ---- Signature gradient text (apply to 1-2 words) ---------------------- */
.sa-grad {
  background: var(--sa-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- Eyebrow label ----------------------------------------------------- */
.sa-eyebrow {
  display: inline-block;
  font-family: var(--sa-font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sa-accent);
  margin: 0 0 1rem;
}

/* ---- Per-theme image swap (hero wordmark) ------------------------------ */
[data-md-color-scheme="slate"] .sa-only-light { display: none; }
[data-md-color-scheme="default"] .sa-only-dark { display: none; }

/* ---- Hero -------------------------------------------------------------- */
.sa-hero { position: relative; padding: 1rem 0 0.5rem; }
.sa-hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 460px;
  background: var(--sa-grad-soft);
  filter: blur(90px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}
.sa-hero .sa-wordmark { height: 34px; width: auto; margin-bottom: 1.4rem; opacity: 0.95; }
.md-typeset .sa-hero h1 {
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  line-height: 1.05;
  margin: 0.2rem 0 0.6rem;
}
.sa-lead {
  font-size: clamp(1.05rem, 2vw, 1.28rem);
  color: var(--sa-ink-dim);
  max-width: 40ch;
  line-height: 1.5;
}

/* ---- Verdict chips (dark-surfaced in both themes => always legible) ---- */
.sa-verdicts { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.6rem 0 0.4rem; }
.sa-chip {
  font-family: var(--sa-font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  padding: 0.4rem 0.9rem;
  border-radius: var(--sa-radius-pill);
  background: #0a1322;
  border: 1px solid rgba(156,213,235,.18);
  white-space: nowrap;
}
.sa-chip--confirmed { color: #a1f1bd; }
.sa-chip--refuted { color: #ff9b9b; }
.sa-chip--unverifiable { color: #ffcf7a; }
.sa-chip--advisory { color: #9cd5eb; }

/* ---- Cards (restyle Material's .grid.cards) ---------------------------- */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  background: var(--sa-surface);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  padding: 1.4rem 1.5rem;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  transform: translateY(-3px);
  border-color: rgba(156,213,235,.32);
  box-shadow: 0 18px 40px -20px rgba(4,7,13,.7);
}
.md-typeset .grid.cards > ul > li > :first-child { margin-top: 0; }

/* ---- Evidence stat band ------------------------------------------------ */
.sa-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.4rem;
  margin: 1.6rem 0;
  padding: 1.6rem;
  background: var(--sa-surface-2);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
}
.sa-stat__num {
  display: block;
  font-family: var(--sa-font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.9rem);
  line-height: 1;
  background: var(--sa-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sa-stat__label { display: block; margin-top: 0.5rem; color: var(--sa-ink-dim); font-size: 0.9rem; line-height: 1.35; }

/* ---- Verdict quote block ("We could not check...") --------------------- */
.md-typeset .admonition.quote,
.md-typeset details.quote {
  border-left: 3px solid transparent;
  border-image: var(--sa-grad-fill) 1;
  background: var(--sa-surface-2);
  border-radius: 0 var(--sa-radius) var(--sa-radius) 0;
}

/* ---- Code + hairlines -------------------------------------------------- */
.md-typeset code { font-size: 0.85em; }
.md-typeset pre > code { border: 1px solid var(--sa-line); border-radius: 12px; }
.md-typeset hr { border-bottom-color: var(--sa-line); }

/* ---- Header polish ----------------------------------------------------- */
.md-header { box-shadow: 0 1px 0 rgba(156,213,235,.10); }
.md-header__button.md-logo img { height: 1.6rem; width: auto; }

/* ---- Motion (load-in only; respects reduced-motion) -------------------- */
@media (prefers-reduced-motion: no-preference) {
  .sa-reveal { opacity: 0; transform: translateY(16px); animation: sa-rise .7s cubic-bezier(.2,.8,.2,1) forwards; }
  .sa-reveal.d1 { animation-delay: .08s; }
  .sa-reveal.d2 { animation-delay: .16s; }
  .sa-reveal.d3 { animation-delay: .24s; }
  .sa-reveal.d4 { animation-delay: .32s; }
}
@keyframes sa-rise { to { opacity: 1; transform: none; } }