/* ============================================================
   GlobalBases.com — Module navigation & table-of-contents polish
   (issue docker/gb-customer-docs#1)

   Scope: MODULE docs only (main.html loads this when extra.gb.portal is
   false; the Portal landing hides nav + toc anyway). Pairs with two markup
   choices so it never needs fragile custom JS:
     - builder.py drops navigation.sections, so the LEFT nav uses Material's
       native (checkbox) collapsible sections;
     - partials/toc-item.html wraps RIGHT-TOC groups in native
       <details>/<summary>, so they collapse with real keyboard support and
       a JS-off fallback. This file only styles those structures.

   What it does, both sides "auf sinnvolle art und weise":
     LEFT nav (desktop):
       - remove the redundant site-name title bar at the top;
       - set off top-level (H1/section) entries: dark + bold;
       - indent nested pages with a guide line so they read as subordinate.
     RIGHT toc:
       - remove the visible "Table of contents" title bar (desktop);
       - top-level headings (H2) dark + bold, and a focusable chevron makes
         each group with sub-headings collapsible;
       - deeper headings (H3+) indented with a guide line — clear hierarchy.

   All colours use Material's scheme-aware tokens, so the dark/light toggle
   keeps working. Below the desktop breakpoint (76.25em) Material's mobile
   drawer layout is left untouched; only the collapse chevron (which is
   useful everywhere) styles across viewports.
   ============================================================ */

/* ======================================================================
   RIGHT: table of contents — collapsible groups (all viewports)
   The chevron is a native <summary>; see partials/toc-item.html.
   ====================================================================== */

.md-nav--secondary .gb-toc__item { position: relative; }

/* The heading stays a normal link; leave room at the row end for the
   chevron so long headings don't run under it. */
[dir=ltr] .md-nav--secondary .gb-toc__link { padding-right: 1.4rem; }
[dir=rtl] .md-nav--secondary .gb-toc__link { padding-left: 1.4rem; }

/* The <details> wrapper contributes no box of its own — only its nested
   nav flows (below the link); the summary is taken out of flow below. */
.md-nav--secondary .gb-toc__group { display: block; }

/* <summary> chevron: a focusable, no-JS toggle pinned to the end of the
   heading row. We draw our own icon and suppress the native marker.
   The 1.2rem box is centred on the first heading line: at the stock top:.1rem
   its centre measured 5.4px BELOW that line's centre, so lift it by exactly
   that much. The hit target keeps its full 1.2rem, and the icon's RTL mirror
   / open rotation (on ::after) are unaffected. */
.md-nav--secondary .gb-toc__toggle {
  position: absolute;
  top: calc(.1rem - 5.4px);
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
  color: var(--md-default-fg-color--light);
  border-radius: .1rem;
}
[dir=ltr] .md-nav--secondary .gb-toc__toggle { right: 0; }
[dir=rtl] .md-nav--secondary .gb-toc__toggle { left: 0; }
.md-nav--secondary .gb-toc__toggle::-webkit-details-marker { display: none; }
.md-nav--secondary .gb-toc__toggle::marker { content: ""; }
.md-nav--secondary .gb-toc__toggle::after {
  content: "";
  width: .9rem;
  height: .9rem;
  background-color: currentcolor;
  -webkit-mask-image: var(--md-nav-icon--next);
          mask-image: var(--md-nav-icon--next);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: transform .25s;
}
/* RTL closed: mirror the right-pointing chevron to point left (toward the
   RTL reading start). Use scaleX(-1), a true horizontal mirror — scale(-1)
   is scale(-1,-1), i.e. a 180deg rotation, which composes wrongly with the
   open-state rotate below. */
[dir=rtl] .md-nav--secondary .gb-toc__toggle::after { transform: scaleX(-1); }
/* Open (both directions): rotate the right-pointing chevron a quarter-turn
   to DOWN. "Down" is direction-neutral, so this single, higher-specificity
   rule ([open] attr + 3 classes) correctly overrides the RTL mirror above —
   no RTL-specific open rule is needed (and rotate(90deg) scaleX(-1) would
   point UP; see gb-nav chevron notes / tests). */
.md-nav--secondary .gb-toc__group[open] > .gb-toc__toggle::after {
  transform: rotate(90deg);
}
.md-nav--secondary .gb-toc__toggle:hover { color: var(--md-accent-fg-color); }
.md-nav--secondary .gb-toc__toggle:focus-visible {
  outline: .1rem solid var(--md-accent-fg-color);
  outline-offset: .1rem;
}

/* Guarantee the group collapses regardless of Material's .md-nav display
   rules (belt-and-suspenders over the browser's native details hiding). */
.md-nav--secondary .gb-toc__group:not([open]) > .gb-toc__nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .md-nav--secondary .gb-toc__toggle::after { transition: none; }
}

/* ======================================================================
   RIGHT: table of contents — hierarchy (top-level bold, nested indented)
   ====================================================================== */

/* Top-level TOC entries (page H2s): dark + bold, matching the left nav's
   H1/section treatment. */
.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 700;
  color: var(--md-default-fg-color);
}
/* Keep the active heading ("you are here") on the accent colour, above the
   bold rule (equal specificity, later source) and Material's own 2-class
   active rule (which already covers nested links). */
.md-nav--secondary .md-nav__link--active,
.md-nav--secondary > .md-nav__list > .md-nav__item > .md-nav__link--active {
  color: var(--md-typeset-a-color);
}

/* ======================================================================
   LEFT: primary navigation, desktop only.
   Below this width Material turns the primary nav into the slide-in
   drawer; its title bar and layout must stay exactly as shipped.
   ====================================================================== */
@media screen and (min-width: 76.25em) {

  /* Shared guide geometry: both the left primary nav and the right TOC draw
     the SAME bounded guide the SAME distance off the parent text, so the two
     sidebars read as one visual system. Both navs are .md-nav, so each guide
     ::before inherits this token from its host. */
  .md-nav {
    --gb-guide-inset: .25rem;
  }

  /* "titel oben weg" (left): drop the duplicated site-name bar at the top
     of the sidebar. The header already shows the module name; the mobile
     drawer (outside this media query) keeps its own title bar. */
  .md-nav--primary > .md-nav__title {
    display: none;
  }

  /* "titel oben weg" (right): drop the visible "Table of contents" bar at
     the top of the right sidebar. On mobile the TOC is embedded in the left
     drawer where that label is a useful section header, so it stays there. */
  .md-nav--secondary > .md-nav__title {
    display: none;
  }

  /* Module H1 headroom: with both title bars gone the page title sits too far
     below the header (measured ~50.6px gap). Pull the whole main column up via
     .md-main__inner (Material's desktop default margin-top is 1.5rem); 1rem
     lands the header-to-H1 gap at ~39.6px and moves both sidebars with it, so
     they stay aligned. The smaller .md-content__inner::before trim (.4rem →
     .2rem) stays too; together they are not cramped. Module docs only (this
     file never loads on the portal) and desktop only (below the breakpoint
     Material's spacing is left untouched). */
  .md-main__inner {
    margin-top: 1rem;
  }
  .md-content__inner::before {
    height: .2rem;
  }

  /* Indent + guide-line the nested TOC levels to MATCH the left nav. Material
     natively indents the secondary nested list ([dir]-aware
     .md-nav--secondary .md-nav__list padding of .6rem, same value it gives the
     primary list), so we add NO padding of our own — that keeps the parent→
     child step identical to the left side (~13.2px). Earlier this rule added a
     further .5rem, which over-indented the TOC relative to the left nav. */
  .md-nav--secondary .gb-toc__nav {
    position: relative;
    margin-inline-start: 0;
  }
  /* Bounded guide, identical to the left one: same inline inset off the parent
     text (shared --gb-guide-inset), trimmed to the first→last child text line.
     Browser-measured on the rich fixture: here the nav box top coincides with
     the first child text line (the child row margin collapses out through the
     borderless secondary item), so top:0; the box bottom trails the last
     descendant text bottom by 8.8px (.4rem). */
  .md-nav--secondary .gb-toc__nav::before {
    content: "";
    position: absolute;
    inset-inline-start: var(--gb-guide-inset);
    top: 0;
    bottom: .4rem;
    width: .05rem;
    background-color: var(--md-default-fg-color--lightest);
  }

  /* Pull the whole nav fully left: ZERO each link's start padding so text
     sits at the sidebar text origin. Browser-measured at 1600px on the rich
     fixture: with padding 0 the top-level (parent) text lands at the same x
     as the nested guide below (both x=146.58). A positive value here
     misaligned them (parent text x=172.95 vs guide x=159.77), so it is not
     used. Applies to plain links AND the folder-index container (itself an
     .md-nav__link). Logical property -> RTL-safe. */
  .md-nav--primary .md-nav__link {
    padding-inline-start: 0;
  }

  /* "h1 ... fett": top-level entries read as section headers — bold. Covers a
     plain top-level link and the folder-index container's anchor. Only the
     WEIGHT is set here (high specificity); colour is set at near-zero
     specificity below so Material's native active/hover colouring wins. */
  .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
  .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link {
    font-weight: 700;
  }

  /* Micro-spacing: a touch (~.1rem) more vertical breathing room on every nav
     row, both sides. Material spaces rows via each row-carrying link's (or the
     folder-index container's) top margin — at desktop that is the global
     .md-nav__link{margin-top:.625em} for BOTH navs (Material's primary-only
     margin-top:0 lives solely in the mobile max-width query, so it does NOT
     apply here). So the increment is ADDITIVE: calc(.625em + .1rem); a bare
     .1rem would replace the stock .625em and shrink the gap.
       Targeting the item's DIRECT link child leaves the inner folder-index
     container anchor/label at Material's 0 (the flex row stays aligned). For a
     TOC group the extra margin collapses onto its <li>, moving the whole row
     — link AND the absolutely-positioned chevron — together, so their
     alignment is preserved. This +.1rem also flows to the top-level group gap
     via the same collapse (the .625em link margin already dominates any small
     item margin), so no separate group-spacing rule is needed — horizontal
     separators stay removed. Desktop-only; no horizontal geometry change. */
  .md-nav--primary .md-nav__item > .md-nav__link,
  .md-nav--secondary .md-nav__item > .md-nav__link {
    margin-top: calc(.625em + .1rem);
  }

  /* Colours via :where(): the structural part contributes ZERO specificity,
     so the whole selector is just .md-nav--primary (one class). Material's
     own .md-nav__link--active (two classes) and our hover rule then always
     win — no manual active/hover re-assertion needed, even for the container
     anchor (which Material also marks .md-nav__link--active). */
  .md-nav--primary :where(
      .md-nav__list > .md-nav__item > .md-nav__link,
      .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link) {
    color: var(--md-default-fg-color);
  }
  .md-nav--primary :where(.md-nav__item--nested .md-nav .md-nav__link) {
    color: var(--md-default-fg-color--light);
  }

  /* "sub headings ... klar unterstellen": guide each nested level with a
     BOUNDED ::before, not a full-height inline-start border. Zero outer margin
     keeps the nested nav's start edge at the parent level's TEXT and lets
     Material's nested-list padding indent the child text to the right — a
     modest step with no added drift. The nav is the positioning context. */
  .md-nav--primary .md-nav__item--nested > .md-nav {
    position: relative;
    margin-inline-start: 0;
  }
  /* Bounded guide: inset a hair to the right of the parent text (so it no
     longer sits directly under it) and trimmed to the first→last child text
     line rather than the nav box. Browser-measured on the rich fixture: the
     nav box top trails the first child text line by 11.8px — exactly the
     child row's own margin, calc(.625em + .1rem) — and the box bottom trails
     the last descendant text bottom by 8.8px (.4rem). RTL-safe. */
  .md-nav--primary .md-nav__item--nested > .md-nav::before {
    content: "";
    position: absolute;
    inset-inline-start: var(--gb-guide-inset);
    top: calc(.625em + .1rem);
    bottom: .4rem;
    width: .05rem;
    background-color: var(--md-default-fg-color--lightest);
  }

  /* The SEPARATE collapse chevron of a folder-with-index must be clearly
     focusable for keyboard users, with or without Material's JS. */
  .md-nav--primary .md-nav__container > .md-nav__link[for]:focus-visible {
    outline: .1rem solid var(--md-accent-fg-color);
    outline-offset: -.1rem;
  }

  /* Hover / keyboard focus on any primary link (incl. the container anchor):
     Material's accent. */
  .md-nav--primary .md-nav__link:focus,
  .md-nav--primary .md-nav__link:hover {
    color: var(--md-accent-fg-color);
  }
}