/* ============================================================
   PyGround Mobile-Layer (2026-08-06)
   Laedt NACH styles.css + redesign.css. Enthaelt AUSSCHLIESSLICH
   Regeln hinter Media Queries (<768px bzw. Touch-Pointer) —
   der Desktop-Look bleibt komplett in styles.css/redesign.css.

   Kernidee: Der fixe Header war auf --header-h: 70px kalibriert,
   wurde auf dem Handy aber mehrzeilig (bis 291px) und verdeckte
   den Content. Mobil ist der Header deshalb EINZEILIG (Logo +
   Burger, Rest im Offcanvas) und STICKY statt fixed — er schiebt
   den Content im Fluss vor sich her, egal wie hoch er wird.
   ============================================================ */

@media (max-width: 767.98px) {
  :root {
    /* Nur noch fuer min-height-Formeln relevant (Header ist sticky,
       Footer laeuft im Fluss mit) — Ueberdeckung ist damit unmoeglich. */
    --header-h: 58px;
    --footer-h: 0px;
  }

  /* Header sticky im Fluss statt fixed; kein kalibriertes Body-Padding mehr.
     Spezifitaet > .fixed-top/.fixed-bottom (Bootstrap-Klasse). */
  body { padding-top: 0; padding-bottom: 0; }
  body > header.fixed-top { position: sticky; }
  body > footer.fixed-bottom { position: static; }

  /* Der negative gutter-y-Margin der .row (g-3) collapst durch den Wrapper
     und zoege den Content 16px unter den sticky Header — abfangen. */
  .content-wrapper { padding-top: 1rem; }

  /* Burger-Button: 44px-Touchziel, Icon-Stil wie die Nav-Links */
  .pg-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -4px 0;              /* blaeht die py-2-Headerzeile nicht auf */
    background: transparent;
    border: 0;
    border-radius: 0.6rem;
    color: #e2e8f0;
    font-size: 1.3rem;
  }
  .pg-burger:active,
  .pg-burger:focus-visible {
    background-color: var(--accent-soft, rgba(45, 212, 191, 0.14));
    color: #fff;
  }
}

/* ---- Offcanvas-Menue im Site-Look (Klassen existieren nur mobil,
        daher hier ohne Query-Nesting fuer die Bootstrap-Variablen) ---- */
.pg-offcanvas {
  --bs-offcanvas-width: min(20rem, 86vw);
  --bs-offcanvas-bg: var(--surface, #1c1a24);
  --bs-offcanvas-color: var(--text-main, #e2e8f0);
  --bs-offcanvas-border-color: var(--border-soft, rgba(255, 255, 255, 0.07));
}
.pg-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--border-soft, rgba(255, 255, 255, 0.07));
}

/* Hauptnav im Offcanvas: volle Breite, komfortable Touch-Ziele */
.pg-offcanvas .pg-offcanvas-nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pg-offcanvas .pg-offcanvas-nav .nav-link-pg {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  font-size: 1.05rem;
  min-height: 44px;
}
.pg-offcanvas .pg-offcanvas-nav .nav-link-pg i {
  width: 1.4rem;
  text-align: center;
}

/* Konto-/Staff-Links unten im Menue */
.pg-offcanvas .pg-offcanvas-auth {
  border-top: 1px solid var(--border-soft, rgba(255, 255, 255, 0.07));
}
.pg-offcanvas .pg-oc-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  min-height: 44px;
  border-radius: 0.6rem;
  color: var(--text-muted, #94a3b8);
  text-decoration: none;
}
.pg-offcanvas .pg-oc-link:active,
.pg-offcanvas .pg-oc-link:focus-visible {
  color: #fff;
  background-color: var(--accent-soft, rgba(45, 212, 191, 0.14));
}
.pg-offcanvas .pg-oc-link i {
  width: 1.4rem;
  text-align: center;
}

/* Bereichsmenü (sidebar.html-Include) im Offcanvas: Trennlinie oben,
   Menülinks auf Touch-taugliche Höhe gebracht */
.pg-offcanvas .pg-offcanvas-section {
  border-top: 1px solid var(--border-soft, rgba(255, 255, 255, 0.07));
}
.pg-offcanvas .pg-offcanvas-section .pg-nav a,
.pg-offcanvas .pg-offcanvas-section .gnet-az a,
.pg-offcanvas .pg-offcanvas-section .gnet-az summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.pg-offcanvas .pg-offcanvas-section .pg-nav-date {
  margin-left: auto;
}

/* ---- Spezialseiten ----
   Leaderboard-Regeln leben NICHT hier, sondern im style-Block von
   aimodels/leaderboard.html: der lädt nach mobile.css und gewinnt bei
   gleichen Selektoren per Reihenfolge. */
@media (max-width: 767.98px) {
  /* Pyodide-Editor: Grafik-Canvas (640×400 im Markup) skaliert mit */
  .pywasm-canvas {
    max-width: 100%;
    height: auto;
  }
  /* Run/Stop/Status-Zeile darf umbrechen, ohne auszubrechen */
  .pywasm-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
  }
}

/* ---- Touch-Geräte (unabhängig von der Breite) ---- */
@media (pointer: coarse) {
  /* Tastatur-Hinweis „Strg/⌘+Enter zum Ausführen" ist ohne Hardware-
     Tastatur sinnlos */
  .pywasm-hint { display: none; }
}