/* Letro Help Center — brand theme overrides for Material for MkDocs.
   Two things happen here:
     1. Self-hosted brand fonts (no Google Fonts CDN — the privacy pitch requires
        the help site not phone home). Bricolage Grotesque = headings, Raleway = body.
     2. Letro palette, wired to Material's `custom` primary/accent (mkdocs.yml).

   TODO(decision): swap the placeholder brand values below for Letro's real hex
   palette from the brand guidelines. Fonts are self-hosted (see below). */

/* ---- Self-hosted fonts -------------------------------------------------------
   Real variable-font woff2 files live in docs/assets/fonts/ (SIL OFL, see the
   OFL-*.txt licenses there). Each family ships two subsets — `latin` and
   `latin-ext` — and the `unicode-range` below means the browser downloads only
   the subset a page actually uses (latin-ext covers DE/FR/SV accents for §8).
   `local(...)` lets an installed copy win to avoid a redundant download. */

/* Bricolage Grotesque — headings */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;               /* variable weight axis */
  font-display: swap;
  src: local("Bricolage Grotesque"),
       url("../assets/fonts/BricolageGrotesque-latin-wght.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local("Bricolage Grotesque"),
       url("../assets/fonts/BricolageGrotesque-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Raleway — body */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 300 700;               /* variable weight axis */
  font-display: swap;
  src: local("Raleway"),
       url("../assets/fonts/Raleway-latin-wght.woff2") format("woff2");
  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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: local("Raleway"),
       url("../assets/fonts/Raleway-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Font wiring ------------------------------------------------------------- */

:root {
  --md-text-font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --md-code-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
    monospace;
}

/* Bricolage Grotesque for headings and the site title. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-nav__title {
  font-family: "Bricolage Grotesque", "Raleway", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---- Letro palette -----------------------------------------------------------
   Official brand colors (Letro brand guide §2). Material reads these CSS
   variables when primary/accent = custom (see mkdocs.yml).
     Primary   Red    #DA291C  (navbar, links)      — Pantone 485 C
     Secondary Yellow #FFC658                        — Pantone 135 C
     Signature gradient: deep red #D51300 → orange/yellow #F9BC50
   Note: yellow is decorative only — it fails text-contrast on white, so it's
   used for the gradient/borders, never for link or body text. */

:root {
  --letro-red:          #DA291C;   /* primary — navbar & links (4.9:1 on white) */
  --letro-red-deep:     #B21F14;   /* darker red — hovers, borders            */
  --letro-red-bright:   #F76D62;   /* lighter red — links on dark surfaces    */
  --letro-yellow:       #FFC658;   /* secondary — decorative accents          */
  --letro-grad-red:     #D51300;   /* signature gradient start (0%)           */
  --letro-grad-yellow:  #F9BC50;   /* signature gradient end (100%)           */
}

/* Light scheme */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--letro-red);
  --md-primary-fg-color--light: var(--letro-red-bright);
  --md-primary-fg-color--dark:  var(--letro-red-deep);
  --md-accent-fg-color:         var(--letro-red-deep);   /* legible link hover */
}

/* Dark (slate) scheme — keep the red navbar, but brighten links/hover so they
   stay legible on dark surfaces (mid red on dark is too low-contrast). */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        var(--letro-red);
  --md-primary-fg-color--light: var(--letro-red-bright);
  --md-primary-fg-color--dark:  var(--letro-red-deep);
  --md-accent-fg-color:         var(--letro-red-bright);
  --md-typeset-a-color:         var(--letro-red-bright);
}

/* ---- Signature gradient accent under the header ------------------------------
   A thin red→yellow strip — the brand's signature gradient — without touching
   header legibility (white text stays on solid red). */
.md-header {
  position: relative;
}
.md-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--letro-grad-red) 0%,
    var(--letro-yellow) 55%,
    var(--letro-grad-yellow) 100%
  );
}

/* ---- Home page cards --------------------------------------------------------- */

.md-typeset .grid.cards > ul > li {
  border-radius: 0.6rem;
  transition: border-color 125ms, box-shadow 125ms;
}

.md-typeset .grid.cards > ul > li:hover {
  /* Yellow reads fine as a border (no text-contrast requirement) and nods to
     the secondary brand color. */
  border-color: var(--letro-yellow);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.08);
}