/* ============================================================================
   Radiant Garden — MkDocs Material  <->  Design Tokens
   ----------------------------------------------------------------------------
   Maps MkDocs Material --md-* variables to the central Radiant Garden design
   tokens (--rg-*) loaded from /shared/theme.css. Keeps weave.radiantgarden.io/docs/
   visually consistent with the rest of the weave site without duplicating colors.

   Load order in mkdocs.yml extra_css:
     1. https://weave.radiantgarden.io/shared/theme.css  (defines --rg-*)
     2. stylesheets/rg-material.css                      (this file)
     3. stylesheets/extra.css                            (local overrides)

   Note: --md-* variable names can differ slightly across Material versions.
   Check against the installed version if something looks off.
   ============================================================================ */

[data-md-color-scheme="slate"] {

  /* -- Surfaces / background ------------------------------------------------ */
  --md-default-bg-color:            var(--rg-bg);
  --md-default-bg-color--light:     color-mix(in srgb, var(--rg-bg) 92%, white 8%);
  --md-default-bg-color--lighter:   color-mix(in srgb, var(--rg-bg) 80%, white 20%);
  --md-default-bg-color--lightest:  color-mix(in srgb, var(--rg-bg) 70%, white 30%);

  /* -- Text ----------------------------------------------------------------- */
  --md-default-fg-color:            var(--rg-text);
  --md-default-fg-color--light:     var(--rg-text-subtle);
  --md-default-fg-color--lighter:   var(--rg-text-muted);
  --md-default-fg-color--lightest:  color-mix(in srgb, var(--rg-text-muted) 45%, transparent);

  /* -- Header & tabs (Material "primary") -----------------------------------
     Intentionally gray (surface), NOT orange — orange is the sparse accent. */
  --md-primary-fg-color:            var(--rg-surface);
  --md-primary-fg-color--light:     var(--rg-surface-2);
  --md-primary-fg-color--dark:      var(--rg-bg-deep);
  --md-primary-bg-color:            var(--rg-text);
  --md-primary-bg-color--light:     var(--rg-text-muted);

  /* -- Interactive accent (hover/active) = blue (navigation/info) ---------- */
  --md-accent-fg-color:             var(--rg-link);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--rg-link) 10%, transparent);

  /* -- Body links = blue ---------------------------------------------------- */
  --md-typeset-a-color:             var(--rg-link);

  /* -- Code ----------------------------------------------------------------- */
  --md-code-bg-color:               var(--rg-bg-deep);
  --md-code-fg-color:               var(--rg-text-subtle);

  /* -- Footer --------------------------------------------------------------- */
  --md-footer-bg-color:             var(--rg-bg-deep);
  --md-footer-bg-color--dark:       var(--rg-bg-deep);
  --md-footer-fg-color:             var(--rg-text);
  --md-footer-fg-color--light:      var(--rg-text-muted);
  --md-footer-fg-color--lighter:    var(--rg-text-muted);

  /* -- Typography: Inter (self-hosted via /shared/theme.css, GDPR) --------- */
  --md-text-font-family:            var(--rg-font);
  --md-code-font-family:            var(--rg-font-mono);
}

/* Force font where Material doesn't pick up the variable
   (Material loads no Google Fonts when font: false is set). */
.md-typeset,
.md-header,
.md-nav,
.md-footer,
.md-tabs { font-family: var(--rg-font); }

/* "You are here": active left-nav entry in orange (sparse, targeted). */
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link--active:hover,
[data-md-color-scheme="slate"] .md-nav__link--active > .md-nav__link {
  color: var(--rg-brand);
}

/* Primary buttons / call-to-action in orange. */
[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background-color: var(--rg-brand);
  border-color: var(--rg-brand);
  color: var(--rg-text);
}
[data-md-color-scheme="slate"] .md-typeset .md-button--primary:hover {
  background-color: var(--rg-brand-hover);
  border-color: var(--rg-brand-hover);
}

/* ============================================================================
   Geteilte Top-Navbar (/shared/nav.js)  <->  MkDocs-Layout
   ----------------------------------------------------------------------------
   nav.js liefert nur die Navbar selbst (MkDocs-agnostisch). Wie sie sich ins
   Material-Layout einfügt, lebt hier: weave-Navbar fix oben, Material-Header als
   transparente Control-Ebene (Suche/Burger) ohne eigene Balkenhöhe, Body-Offset
   um die Navbar-Höhe, plus ein Streifen, der Materials Header beim Laden
   überdeckt, bis nav.js die Navbar gebaut hat (flicker-free).

   Höhe = Vertrag --weave-nav-h: nav.js misst die echte Navbar-Höhe und schreibt
   sie zur Laufzeit auf <html>; der Fallback 37px (auch in /shared/theme.css und
   sidebar.css) greift nur bis dahin bzw. solange prod-theme.css den Wert noch
   nicht ausliefert.

   Als statisches CSS im <head> (extra_css) greift der Offset bereits beim Parsen
   — also bevor nav.js läuft. Überlebt zudem Materials Instant-Loading-Body-Swap,
   weil der <head> dabei unangetastet bleibt.
   ============================================================================ */

body[data-md-color-scheme] > .weave-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

body[data-md-color-scheme] {
  padding-top: var(--weave-nav-h, 37px);
}

body[data-md-color-scheme]::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--weave-nav-h, 37px);
  background: var(--rg-bg);
  z-index: 9998;
}

/* Materials Header beansprucht KEINE eigene Balkenhöhe mehr — sonst entsteht
   eine zweite Leiste unter der weave-Navbar (zu viel vertikaler Platz).
   Stattdessen: Header aus dem Fluss nehmen, transparent, ohne Schatten. Sichtbar
   bleiben nur die Controls (Suche; auf Mobile zusätzlich der Burger), die wir
   wie auf Contracts/Releases positionieren. Die leere Fläche ist click-through
   (pointer-events:none), die Controls bleiben interaktiv. */
.md-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000; /* über der weave-Navbar (9999), damit die aktive Suche den
                     eingegebenen Begriff sichtbar darüber legen kann */
  background: transparent;
  box-shadow: none;
  color: var(--rg-text);
  pointer-events: none;
}

.md-header__inner {
  pointer-events: none;
}

/* Material-Titel + Default-Logo (Buch) sind durch die weave-Navbar abgedeckt —
   im Header UND im Mobile-Drawer-Titel ausblenden. Das Favicon kommt separat
   nativ über theme.favicon (mkdocs.yml), nicht über dieses Logo. */
.md-header__title,
/* Header-Logo (Desktop): Material setzt .md-header__button.md-logo (0,2,0) —
   hier mit gleicher Spezifität matchen, sonst greift ein einfaches .md-logo nicht. */
.md-header__button.md-logo,
/* Drawer-Logo (Mobile): Material setzt .md-nav--primary .md-nav__title .md-logo
   (0,3,0) — exakt matchen, sonst gewinnt Materials display:block. */
.md-nav--primary .md-nav__title .md-logo {
  display: none;
}

/* Suche bleibt klickbar (Eltern sind click-through). */
.md-search {
  pointer-events: auto;
}

/* --- Desktop (Material zeigt die Suchbox inline, ohne Toggle): rechts in das
   Navbar-Band legen, statt in einer eigenen Zeile darunter. Der Header liegt
   dafür über der weave-Navbar (z 9999), bleibt aber click-through bis auf die
   Suche, sodass die Navbar-Links darunter klickbar bleiben. ----------------- */
@media screen and (min-width: 76.25em) {
  .md-header__inner {
    justify-content: flex-end;
    min-height: var(--weave-nav-h, 37px);
    padding: 0 var(--weave-toggle-inset, 10px);
  }
}

/* --- Mobile: Burger (links) + Such-Icon (rechts) als schwebende Buttons, beide
   exakt wie der geteilte .weave-sidebar-toggle (Contracts/Releases): 34×34,
   Fläche/Rahmen/Radius, Höhe (alles aus den --weave-toggle-* Tokens). Material
   zeigt diese Controls unterhalb von 76.1875em — genau dann, wenn der Doku-
   Drawer greift. -------------------------------------------------------------- */
@media screen and (max-width: 76.1875em) {
  /* Oben Platz für die schwebenden Buttons (Burger/Lupe), damit sie keinen
     Inhalt überdecken — wie der Freiraum oben bei .weave-main auf Contracts/
     Releases. Überschreibt Materials .md-main__inner-margin (1.5rem). Bewusst
     ein einfacher Wert: mehrteilige calc()-mit-Tokens wurden vom Browser still
     verworfen und fielen auf 1.5rem zurück. */
  .md-main__inner {
    margin-top: 3.75rem;
  }

  /* Aktive Vollbild-Suche über die schwebenden Buttons UND die weave-Navbar
     legen, damit der eingegebene Begriff sichtbar ist (nicht dahinter). */
  .md-search__overlay,
  .md-search__inner {
    z-index: 2000;
  }

  /* Mobile-Drawer (linke Doku-Navigation) + sein Backdrop beginnen UNTER der
     weave-Navbar — wie die geteilte .weave-sidebar/-backdrop auf Contracts/
     Releases —, statt oben hinter der Navbar zu verschwinden. Die Navbar bleibt
     so sichtbar über dem geöffneten Drawer. */
  .md-sidebar--primary {
    top: var(--weave-nav-h, 37px);
    height: calc(100% - var(--weave-nav-h, 37px));
  }

  .md-overlay {
    top: var(--weave-nav-h, 37px);
  }

  .md-header__button.md-icon[for="__drawer"],
  .md-header__button.md-icon[for="__search"] {
    position: fixed;
    top: calc(var(--weave-nav-h, 37px) + var(--weave-toggle-gap, 8px));
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--weave-toggle-size, 34px);
    height: var(--weave-toggle-size, 34px);
    margin: 0;
    padding: 0;
    background: var(--rg-surface);
    border: 1px solid var(--rg-border);
    border-radius: var(--rg-radius-md, 8px);
    color: var(--rg-text);
    opacity: 1;
    pointer-events: auto;
  }

  .md-header__button.md-icon[for="__drawer"] { left: var(--weave-toggle-inset, 10px); }
  .md-header__button.md-icon[for="__search"] { right: var(--weave-toggle-inset, 10px); }

  /* Burger: unser ☰-Glyph statt Materials SVG (deckungsgleich mit dem geteilten
     Button). Das Such-Icon behält Materials Lupe. */
  .md-header__button.md-icon[for="__drawer"] svg {
    display: none;
  }
  .md-header__button.md-icon[for="__drawer"]::after {
    content: "\2630"; /* ☰ */
    font-size: 1.05rem;
    line-height: 1;
  }
}