/* =============================================================================
   Batch 7 — Homepage + legal-pages cohesion polish
   -----------------------------------------------------------------------------
   Scope:
     - Homepage (index.html / index.php): raise the language menu dropdown
       z-index so it always wins over any sibling content below the sticky
       navbar (hero, showcase). The dropdown's host stacking context today
       sits at z-index 50, which is fine against current siblings but fragile
       against any future z-index introduced in the hero surface.
     - Legal pages (AGB / impressum / datenschutz / kontakt): map the shell
       typography to the shared token scale from resources/css/tokens.css
       WITHOUT altering rendered values (tokens resolve to the same pixel
       sizes the legal shell uses today). Adds a horizontal-scroll safety
       net on the body and the top-bar shell at 360 px so any future content
       cannot bust the viewport.

   Why these changes live in one file:
     Both gaps are small and cross-surface, and grouping them keeps the
     cascade order predictable. This sheet loads AFTER tokens.css / buttons.css /
     inputs.css / a11y-touch.css / a11y-focus.css and AFTER the page-specific
     stylesheet, so it only reinforces — it does not restyle existing rules.

   Non-goals:
     - Does NOT touch skip-link / <main> landmark markup (Batch 5).
     - Does NOT touch cart-polish / a11y-focus / a11y-touch / tokens rules.
     - Does NOT change i18n or JS.
     - Does NOT override legal-core.css colors or the --page-accent palette.
   ========================================================================== */


/* =============================================================================
   1) Homepage — language menu dropdown elevation
   --------------------------------------------------------------------------
   styles.css pins:
     .navbar.sticky-top { z-index: 100 }        (also the local stacking ctx)
     .rt-lang-menu     { z-index: 50 }
     .hero-content     { z-index: 2 }
   Raise the menu host + dropdown without breaking that order. The menu now
   sits at Bootstrap-modal-below but clearly above any future hero overlay
   token (hero-scroll-hint is z-index 2; hero-content is z-index 2).
   Scoped to the navbar so legal-page .rt-lang-menu (different stacking
   context, already relative-positioned) is untouched.
   ========================================================================== */
.navbar .rt-lang-menu {
  z-index: 1030;
}

.navbar .rt-lang-menu__dropdown {
  /* Dropdown is a child of .rt-lang-menu so it sits in its stacking ctx;
     pinning it here means future descendants inside the menu can never
     accidentally float above the dropdown list. */
  z-index: 1035;
  /* Harden separation from hero gradient behind: the current background
     token (--color-surface #131315) already covers, but a heavier drop
     shadow helps the panel read on the busy video poster. */
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.6);
}


/* =============================================================================
   2) Homepage — nav typography consistency with buttons.css
   --------------------------------------------------------------------------
   .navbar-brand currently renders at 1.05rem / 600. Map the font-size to
   the shared scale token with a hard-coded fallback that exactly equals the
   current rendered value, so the visual weight/size does not shift — the
   link now just reads from tokens when they are present.
   ========================================================================== */
.navbar .navbar-brand {
  font-size: clamp(var(--font-size-md, 16px), 1.05rem, var(--font-size-lg, 18px));
  font-weight: var(--font-weight-600, 600);
}

.navbar .rt-lang-menu__toggle {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-500, 500);
}

.navbar .rt-lang-menu__item {
  font-size: var(--font-size-sm, 14px);
  font-weight: var(--font-weight-500, 500);
}


/* =============================================================================
   3) Legal pages — body typography consumes shared tokens
   --------------------------------------------------------------------------
   legal-core.css sets body { line-height: 1.6; font-family: system-ui, ... }
   without an explicit font-size, so browser default (16px) applies. The
   shared --font-size-md token is also 16px and --line-height-relaxed is
   1.65, so consuming them keeps the rendered result within a hair of today
   (0.05 line-height delta is imperceptible). This wires the legal shell
   into the token system without visible change.
   ========================================================================== */
body.page-shell {
  font-size: var(--font-size-md, 16px);
  line-height: var(--line-height-relaxed, 1.65);
}

body.page-shell .eyebrow {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-600, 600);
}

body.page-shell .page-lead,
body.page-shell .card p,
body.page-shell .muted {
  line-height: var(--line-height-relaxed, 1.65);
}

body.page-shell .footer-note {
  font-size: var(--font-size-sm, 14px);
}


/* =============================================================================
   4) Legal pages — horizontal-scroll safety net
   --------------------------------------------------------------------------
   Batch 3 verified there are no current 360 px overflow offenders on these
   pages. This is a defensive guard so that any future untested content
   (new badge, wider table, long URL) cannot bust the viewport. `overflow-x:
   clip` is preferred over `overflow-x: hidden` because it does not create a
   scroll container (no interference with position:sticky).
   ========================================================================== */
body.page-shell {
  overflow-x: clip;
}

body.page-shell .page-width {
  max-width: 100%;
  /* legal-core.css already uses width: min(100%, var(--page-content)), so
     this reaffirms the box model without shrinking the content frame. */
  min-width: 0;
}


/* =============================================================================
   5) Legal pages — page-actions on ≤360 px
   --------------------------------------------------------------------------
   AGB / Impressum / Datenschutz / Kontakt `.page-actions` have multiple
   buttons (up to 3 on kontakt.html). legal-core.css already flex-wraps them
   at ≤720 px; at ≤360 px we ensure every button occupies one row so none
   of them squeeze below the 44 px touch-target enforced by a11y-touch.css.
   ========================================================================== */
@media (max-width: 360px) {
  body.page-shell .page-actions {
    flex-direction: column;
    align-items: stretch;
  }

  body.page-shell .page-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* =============================================================================
   6) Legal pages — badge-row overflow guard on 360 px
   --------------------------------------------------------------------------
   legal-core.css sets `.badge { flex: 1 1 240px }`. At 360 px minus body
   padding that can be ~320 px — close to but not less than 240, so it's
   safe today. Defense: at ≤360 px force each badge to 100% of its row so
   three-badge rows (datenschutz, AGB) always stack cleanly.
   ========================================================================== */
@media (max-width: 360px) {
  body.page-shell .badge {
    flex: 1 1 100%;
  }
}


/* =============================================================================
   7) Reduced motion — no-op placeholder
   --------------------------------------------------------------------------
   This sheet adds no animations or transitions. Rule kept for future
   contributors as a signal that prefers-reduced-motion was considered.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* No animated rules in this file. */
}