/* MCPower docs theme — thin overlay on leyline_base + notes.
   Loaded last in the cascade as the `_vault` layer, so these values win.
   Only palette + fonts are overridden; all layout/structure is inherited.

   The palette is copied from the MCPower app (ports/app/src/app.css :root and
   .dark) and mapped onto leyline's --color-* variables. Studio palette: cool
   slate + raspberry in light, midnight-purple + magenta-rose in dark.

   Fonts are self-hosted (no Google CDN — offline + GDPR). The woff2 set here
   (Manrope + Fraunces normal, latin + latin-ext) is a vendored copy shared,
   byte-for-byte, with ports/app/src/fonts/ and site/fonts/ — keep the three in
   sync (see the cross-reference comment at ports/app/src/app.css). JetBrains
   Mono is inherited from leyline_base, so it is NOT shipped here; italic
   Fraunces is site-only and also not shipped. */

:root {
  --color-bg: #eef1f5;             /* --background */
  --color-text: #14161a;           /* --foreground */
  --color-text-muted: #6a7280;     /* --muted-foreground */
  --color-link: #c2356b;           /* --primary */
  --color-link-hover: #a82a5a;     /* darker raspberry (no app var) */
  --color-border: #d4dae0;         /* --border */
  --color-code-bg: #e6eaef;        /* --muted */
  --color-code-text: #14161a;      /* --foreground */
  --color-surface: #f6f8fb;        /* --card */
  --color-active-bg: #e3e8ec;      /* --accent; --color-active-fg tracks --color-link-hover in base */

  /* Callout + highlight tints nudged into the slate/raspberry family so they
     don't read as the inherited parchment. Borders reuse the app chart hues. */
  --color-callout-info-bg: #dfe6f0;
  --color-callout-info-border: #5a7a9a;     /* chart-3 slate-blue */
  --color-callout-warn-bg: #f0e9d8;
  --color-callout-warn-border: #b58936;     /* chart-4 amber */
  --color-callout-error-bg: #f1ddd7;
  --color-callout-error-border: #c54a3a;    /* --destructive */
  --color-callout-note-bg: #e6eaef;
  --color-callout-note-border: #8a909a;     /* chart-5 grey */
  --color-callout-success-bg: #dde8e2;
  --color-callout-success-border: #3d7d6e;  /* chart-2 teal */
  --color-highlight: #f1d79a;               /* soft amber, above the warn wash */
}

[data-theme="dark"] {
  --color-bg: #110b1c;             /* --background */
  --color-text: #ede5f0;           /* --foreground */
  --color-text-muted: #8e8295;     /* --muted-foreground */
  --color-link: #ff5e8a;           /* --primary */
  --color-link-hover: #ff7a9e;     /* lighter rose (no app var) */
  --color-border: #2a2138;         /* --border */
  --color-code-bg: #211930;        /* --muted */
  --color-code-text: #ede5f0;      /* --foreground */
  --color-surface: #1c142a;        /* --card */
  --color-active-bg: #181125;      /* --accent */

  --color-callout-info-bg: #18203a;
  --color-callout-info-border: #7e90c8;
  --color-callout-warn-bg: #2a2212;
  --color-callout-warn-border: #d9a55a;     /* dark chart-4 */
  --color-callout-error-bg: #2a1a1a;
  --color-callout-error-border: #ef6b7a;    /* dark --destructive */
  --color-callout-note-bg: #211930;
  --color-callout-note-border: #9b8ea0;     /* dark chart-5 */
  --color-callout-success-bg: #142420;
  --color-callout-success-border: #6dbca5;  /* dark chart-2 */
  --color-highlight: #5a4a2a;
}

/* Fonts. --font-mono stays leyline_base's self-hosted JetBrains Mono. */
:root {
  --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-special: "Fraunces", ui-serif, Georgia, serif;
}

/* Article headings → Fraunces, mirroring the app's h1–h4 (base leaves them at
   --font-body). opsz 36 / wght 500 picks the display optical size. */
.page-body :is(h1, h2, h3, h4) {
  font-family: var(--font-special);
  font-variation-settings: 'opsz' 36, 'wght' 500;
  letter-spacing: -0.01em;
}

/* Justify body prose (base leaves it left/ragged-right). hyphens:auto keeps
   word-spacing even on narrow columns; headings/code/lists keep their default.
   Two wrappers: note pages use page.html's .page-body, the vault landing uses
   index.html's .vault-index — cover both so the home page justifies too. */
.page-body p,
.vault-index p {
  text-align: justify;
  hyphens: auto;
}

/* Header brand. The vault header.html override drops leyline's favicon + the
   site_title text and inlines the MCPower wordmark (.brand-mark) instead. It sits
   inside leyline_base's `.brand` (color: --color-text), so the svg's
   fill="currentColor" recolours per theme automatically — only sizing is needed.
   Sized a touch larger than the old 1.9rem site_title to give the bar more
   presence. */
.site-header .brand-mark {
  display: block;
  width: auto;
  height: 2.8rem;
}

/* Mobile menu. leyline_base hides the header .site-nav below 40rem, assuming it
   collapses into the left-sidebar hamburger — but this header nav holds the
   cross-site family links (Documentation / Examples / Download / Open online)
   that are deliberately NOT in the sidebar tree, so they'd vanish entirely on
   mobile. Re-show the nav and drop it onto its own row below the wordmark + theme
   toggle, styled as tap-friendly pills. The documentation + examples-book vaults
   share this overlay verbatim — change both together. */
@media (max-width: 40rem) {
  .site-header { flex-wrap: wrap; }
  .site-nav {
    display: flex;
    order: 99;
    flex-basis: 100%;
    margin-right: 0;
    margin-top: var(--space-2);
  }
  .site-nav-list {
    flex-wrap: wrap;
    width: 100%;
    gap: var(--space-2);
  }
  /* Each link becomes a bordered pill that grows to fill its row; 4 items wrap
     to a tidy 2×2 on a narrow phone. */
  .site-nav-item { flex: 1 1 auto; }
  .site-nav-item > a,
  .site-nav-label {
    display: block;
    text-align: center;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    white-space: nowrap;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
  }
  /* The base draws an animated underline via ::after; pointless on a pill. */
  .site-nav-item > a::after { display: none; }
  .site-nav-item > a:hover {
    border-color: var(--color-link);
    background: var(--color-code-bg);
  }
  /* Current section reads as a filled pill in the site's accent. */
  .site-nav-item.is-active > a {
    border-color: var(--color-link);
    background: var(--color-link);
    color: var(--color-bg);
  }
}

/* Left-rail brand block (brand.md widget) — compact meta under the header brand:
   version, author line, and the About/Support links (no logo, no tagline; those
   live in the header now). The container is `docs-brand`, NOT `brand` —
   leyline_base styles `.brand` (the masthead) as an inline-flex row, which would
   lay this block out horizontally. */
.docs-brand {
  text-align: center;
  padding: 0.25rem 0.25rem 0.5rem;
}
.brand-version {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.brand-by {
  margin: 0.6rem 0 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.brand-links {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
}
.brand-links a {
  font-weight: 600;
  font-size: 0.85rem;
}

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}