/* ==========================================================================
   Seizure-Safe Schools — EDAN custom theme
   Editorial / publication styling layered over MkDocs Material.
   Pairing: Newsreader (serif headings) + Inter (body) + JetBrains Mono (code).
   Brand: medical red (#b3202c) with warm-ink neutrals.
   ========================================================================== */

/* Serif display face for headings (Inter + JetBrains Mono load via mkdocs.yml). */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --edan-red: #b3202c;
  --edan-red-dark: #8f1922;
  --edan-red-tint: rgba(179, 32, 44, 0.08);
  --edan-ink: #24211e;       /* warm near-black for headings/header */
  --edan-ink-soft: #3a3733;

  /* Editorial serif for headings */
  --edan-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Accent (hover/active) — brand red */
  --md-accent-fg-color: var(--edan-red);

  /* Links use brand red */
  --md-typeset-a-color: var(--edan-red);

  /* Slightly warmer, calmer reading surface */
  --md-default-fg-color: #232020;
  --md-default-fg-color--light: #5d5851;
  --md-default-bg-color: #fcfcfb;
}

/* Recolor Material's primary (header, drawer, search) to charcoal ink.
   Must match Material's own [data-md-color-primary] scope to win the cascade. */
[data-md-color-primary="red"] {
  --md-primary-fg-color: var(--edan-ink);
  --md-primary-fg-color--light: #4a463f;
  --md-primary-fg-color--dark: #19170f;
}

/* Dark scheme adjustments — keep brand red legible on dark surfaces */
[data-md-color-scheme="slate"] {
  --edan-red: #ff6b73;
  --edan-red-tint: rgba(255, 107, 115, 0.12);
  --md-primary-fg-color: #1b1916;
  --md-accent-fg-color: #ff8088;
  --md-typeset-a-color: #ff8088;
  --md-default-bg-color: #16140f;
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
.md-typeset {
  font-size: 0.82rem;          /* ~16.4px base — comfortable long-form reading */
  line-height: 1.72;
  letter-spacing: 0.001em;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--edan-serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--edan-ink);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4 {
  color: #f3efe9;
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2.35rem;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 0.5em;
}

.md-typeset h2 {
  font-size: 1.55rem;
  line-height: 1.2;
  margin-top: 2.6em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.md-typeset h3 {
  font-size: 1.2rem;
  margin-top: 1.9em;
}

/* The italic lede paragraph right under the page title reads as a standfirst */
.md-typeset h1 + p > em:only-child,
.md-typeset h1 + p em {
  font-style: italic;
}
.md-typeset h1 + p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}

/* Comfortable measure for prose without starving wide tables/figures */
.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  max-width: 42rem;
}

/* --------------------------------------------------------------------------
   3. Links
   -------------------------------------------------------------------------- */
.md-typeset a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.md-typeset a:hover {
  color: var(--edan-red-dark);
  border-bottom-color: currentColor;
}

/* --------------------------------------------------------------------------
   4. Header / navigation — quiet charcoal bar with red accents
   -------------------------------------------------------------------------- */
.md-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
  border-bottom: 3px solid var(--edan-red);
}
.md-header__title {
  font-family: var(--edan-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* Tabs: subtle, with a red indicator on the active item */
.md-tabs {
  background-color: var(--edan-ink);
}
.md-tabs__link {
  opacity: 0.78;
  font-size: 0.74rem;
  transition: opacity 160ms ease;
}
.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}

/* Active item in the left nav gets the brand red */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--edan-red);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   5. Focus states & motion (accessibility)
   -------------------------------------------------------------------------- */
.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-tabs__link:focus-visible,
.md-search__input:focus-visible,
button:focus-visible {
  outline: 3px solid var(--edan-red);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   6. Blockquotes, admonitions, tables, code
   -------------------------------------------------------------------------- */
.md-typeset blockquote {
  border-left: 3px solid var(--edan-red);
  background: var(--edan-red-tint);
  color: var(--md-default-fg-color);
  border-radius: 0 6px 6px 0;
  padding: 0.5rem 1rem;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: 8px;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  font-size: 0.78rem;
}

.md-typeset table:not([class]) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-size: 0.74rem;
}
.md-typeset table:not([class]) th {
  background: var(--edan-ink);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: #2a2620;
}

.md-typeset code {
  border-radius: 4px;
  font-size: 0.85em;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.md-footer-meta {
  background-color: var(--edan-ink);
}

/* --------------------------------------------------------------------------
   8. Existing EDAN components (preserved + refined)
   -------------------------------------------------------------------------- */

/* Minnesota-law callout */
.md-typeset .admonition.law,
.md-typeset details.law {
  border-color: var(--edan-red);
}
.md-typeset .law > .admonition-title,
.md-typeset .law > summary {
  background-color: var(--edan-red-tint);
}

/* MicroSim iframe sizing */
.microsim {
  width: 100%;
  max-width: 820px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Quiz answer reveal */
.md-typeset details.quiz {
  border-left: 3px solid #1a9850;
}

/* Headline statistic */
.edan-stat {
  font-family: var(--edan-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--edan-red);
}

/* ==========================================================================
   9. Modern / interactive layer — effects modelled on reactbits.dev,
   rebuilt in vanilla CSS/JS so they work in a static MkDocs build.
   Content is fully visible without JS; the .rb-ready flag (set by JS on
   <html>) is what arms the entrance animations. All motion is disabled
   under prefers-reduced-motion.
   ========================================================================== */

/* ---- Scroll Reveal / Animated Content -----------------------------------
   reactbits: "Scroll Reveal" + "Animated Content". Top-level content blocks
   fade and rise into view. Only armed once JS adds .rb-ready. */
@media (prefers-reduced-motion: no-preference) {
  .rb-ready .rb-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 620ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .rb-ready .rb-reveal.rb-in {
    opacity: 1;
    transform: none;
  }
}

/* ---- Aurora background (home hero only) ----------------------------------
   reactbits: "Aurora". A slow, soft brand-tinted gradient wash behind the
   first screen of the home page. Sits behind content, never over text. */
.rb-aurora {
  position: fixed;
  inset: -20vh 0 auto 0;
  height: 75vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 55% at 18% 12%, rgba(179, 32, 44, 0.16), transparent 70%),
    radial-gradient(38% 50% at 82% 8%, rgba(214, 122, 60, 0.14), transparent 72%),
    radial-gradient(45% 60% at 55% 0%, rgba(120, 36, 48, 0.12), transparent 75%);
  filter: blur(8px);
  opacity: 0;
  transition: opacity 900ms ease;
}
.rb-aurora.rb-in { opacity: 1; }
[data-md-color-scheme="slate"] .rb-aurora {
  background:
    radial-gradient(40% 55% at 18% 12%, rgba(255, 107, 115, 0.18), transparent 70%),
    radial-gradient(38% 50% at 82% 8%, rgba(214, 122, 60, 0.16), transparent 72%),
    radial-gradient(45% 60% at 55% 0%, rgba(255, 107, 115, 0.12), transparent 75%);
}
@media (prefers-reduced-motion: no-preference) {
  .rb-aurora {
    animation: rb-aurora-drift 22s ease-in-out infinite alternate;
  }
}
@keyframes rb-aurora-drift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); }
  100% { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

/* ---- Gradient / Shiny Text (home title) ----------------------------------
   reactbits: "Gradient Text" + "Shiny Text". A slow sheen sweeps across the
   home page H1. Falls back to solid ink when motion is reduced. */
@media (prefers-reduced-motion: no-preference) {
  .rb-gradient-text {
    background: linear-gradient(
      100deg,
      var(--edan-ink) 0%, var(--edan-ink) 38%,
      var(--edan-red) 50%,
      var(--edan-ink) 62%, var(--edan-ink) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rb-sheen 7s linear infinite;
  }
  [data-md-color-scheme="slate"] .rb-gradient-text {
    background: linear-gradient(
      100deg, #f3efe9 0%, #f3efe9 38%, var(--edan-red) 50%, #f3efe9 62%, #f3efe9 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
@keyframes rb-sheen {
  0%   { background-position: 180% center; }
  100% { background-position: -80% center; }
}

/* ---- Count Up ------------------------------------------------------------
   reactbits: "Count Up". JS animates the number; this just steadies width. */
.edan-stat { font-variant-numeric: tabular-nums; }

/* ---- Spotlight Card + hover lift -----------------------------------------
   reactbits: "Spotlight Card" / "Magic Bento". Callouts, details and tables
   lift on hover and reveal a soft cursor-following glow. */
.md-typeset .admonition,
.md-typeset details,
.md-typeset table:not([class]) {
  position: relative;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .md-typeset .admonition:hover,
  .md-typeset details:hover,
  .md-typeset table:not([class]):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  }
}
/* The glow layer is driven by --rb-x / --rb-y set from JS pointer tracking. */
.rb-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
  background: radial-gradient(
    180px circle at var(--rb-x, 50%) var(--rb-y, 0%),
    rgba(179, 32, 44, 0.10), transparent 60%);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rb-spot:hover::before { opacity: 1; }
}

/* ---- Star Border (edit action button) ------------------------------------
   reactbits: "Star Border". A subtle animated sheen on the page edit button. */
@media (prefers-reduced-motion: no-preference) {
  .md-content__button.md-icon {
    transition: color 200ms ease, transform 200ms ease;
  }
  .md-content__button.md-icon:hover {
    color: var(--edan-red);
    transform: rotate(-6deg) scale(1.08);
  }
}

/* ---- Homepage testimonial in the right sidebar ---------------------------
   The secondary sidebar only shows at 76.25em and wider. Below that the quote
   stays in the page body; at that width and up the body copy is hidden so the
   quote does not appear twice. The toc partial is also reused inside the
   mobile drawer, so the sidebar box is hidden everywhere except the sidebar. */
.edan-side-quote { display: none; }
@media screen and (min-width: 76.25em) {
  .md-sidebar--secondary .edan-side-quote {
    display: block;
    margin: 0 0 1.2rem 0.6rem;
    padding: 0.8rem 0.9rem;
    border-left: 0.2rem solid var(--md-accent-fg-color);
    border-radius: 0.2rem;
    background: var(--md-code-bg-color);
    font-size: 0.64rem;
    line-height: 1.5;
  }
  .edan-side-quote__title {
    margin: 0 0 0.4rem;
    font-weight: 700;
    color: var(--md-default-fg-color);
  }
  .edan-side-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--md-default-fg-color--light);
    font-style: italic;
  }
  .edan-side-quote blockquote p { margin: 0 0 0.5rem; }
  .edan-side-quote__by {
    margin: 0.4rem 0 0.3rem;
    color: var(--md-default-fg-color--lighter);
  }
  .edan-quote-inline { display: none; }
}

/* Hide the permalink symbol on every heading. Anchors still work: the heading
   ids are unchanged, so links like /about/#who-we-are jump as before. */
.md-typeset .headerlink { display: none; }

/* ---- EDAN logo ------------------------------------------------------------
   Header icon is a white rounded square, so it reads on the dark header.
   The homepage title is the full wordmark. Its navy letters disappear on the
   dark color scheme, so there it sits on a white card. */
.md-header__button.md-logo img { height: 1.8rem; width: auto; border-radius: 0.3rem; }
.md-typeset h1 .edan-hero-logo {
  display: block;
  width: 100%;
  max-width: 20rem;
  height: auto;
  margin: 0;
}
.md-typeset h1:has(.edan-hero-logo) { margin-bottom: 0.6rem; }
[data-md-color-scheme="slate"] .md-typeset h1 .edan-hero-logo {
  background: #fff;
  border-radius: 0.6rem;
  padding: 0.8rem 1rem;
  box-sizing: border-box;
}

/* Homepage tagline under the logo: smaller than the standfirst on other pages. */
.md-typeset h1:has(.edan-hero-logo) + p { font-size: 0.85rem; line-height: 1.5; }


/* ---- Start here paths ---------------------------------------------------- */
.start-row {
  border: 1px solid var(--md-default-fg-color--lightest, #ddd);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 16px;
  font-size: .95rem;
  background: var(--md-code-bg-color);
}