/* pcw-a11y-structure.css — strukturelle Barrierefreiheit.
 *
 * Warum eine eigene Datei (nicht in pcw-design.css):
 *   pcw-design.css gehoert Terminal D1 (Design-Token-Vertrag). D1 laeuft
 *   parallel; dieser Injektor ebenfalls. Eigene Datei => kein
 *   Merge-Konflikt beim Zusammenfuehren der Terminals, und die
 *   Verantwortung „strukturelle A11y" bleibt an einem Ort.
 *
 * Was diese Datei leistet:
 *   1. Skip-Link (Befund 3 aus tests/test_accessibility.py)
 *      WCAG 2.4.1 verlangt einen Skip-Link als erstes fokussierbares
 *      Element der Seite. Der Injektor post-build-inject-landmarks.js
 *      setzt <a class="pcw-skip-link"> als erstes Kind von <body>, also
 *      vor der Quartz-Sidebar. Versteckt per transform/clip, sichtbar
 *      bei :focus. Ein dauerhaft versteckter Skip-Link waere keiner.
 *   2. <main>-Wrapper (Befund 1, Landmarken)
 *      Quartz liefert <div class="center">, aber kein <main>. Ohne
 *      Landmark koennen Screenreader-Nutzer nicht direkt zum
 *      Hauptinhalt springen. Der Injektor wickelt den Inhalt von
 *      .center in <main>. CSS-Auswirkungen auf das Grid sind
 *      explizit kompensiert (siehe .pcw-main).
 *   3. <header>-Wrapper (Befund 1, Landmarken)
 *      Quartz' Header-Komponente rendert nur dann <header>, wenn
 *      children vorhanden sind. Der Header-Slot ist im aktuellen
 *      Layout leer (article-title steht in beforeBody). Der Injektor
 *      setzt <header> als Wrapper um .page-header. .pcw-header
 *      garantiert display:block, damit der Wrapper keine Flex-
 *      oder Grid-Anomalien in den Layouts erzeugt.
 *   4. Explorer-Titel (Befund 2, h2-vor-h1)
 *      Im Explorer wurde <h2>{title}</h2> durch <span class="explorer-title">
 *      ersetzt. Diese Klasse traegt dieselbe Schriftgroesse wie das
 *      fruehere h2, damit der visuelle Eindruck identisch bleibt.
 *
 * Token-Vertrag (PCW-D1):
 *   --pcw-ink, --pcw-bg, --pcw-bg-raised, --pcw-border, --pcw-accent,
 *   --pcw-focus, --pcw-space-2, --pcw-space-3, --pcw-radius-sm
 *
 * CSP `style-src 'self'` (docker/Caddyfile): keine Inline-Styles.
 * Diese Datei wird vom Injektor per <link rel="stylesheet"> einmal
 * pro Seite eingebunden.
 */

/* ----- 1. Skip-Link ----- */

.pcw-skip-link {
  /* Position: erstes fokussierbares Element im <body>. Die
   * Sidebar-Buttons (Suche, Explorer, Darkmode) sollen erst NACH
   * dem Skip-Link im Tab-Order stehen — daher Injector-Stelle vor
   * #quartz-root. */
  position: absolute;
  top: -100px;
  left: var(--pcw-space-2, 0.5rem);
  z-index: 1000;
  /* Sichtbar wird der Link nur, wenn er Fokus bekommt. Bis dahin
   * versteckt — aber im DOM und im Tab-Order vorhanden, damit
   * WCAG 2.4.1 erfuellt ist (Tastatur erreichbar). */
  padding: var(--pcw-space-2, 0.5rem) var(--pcw-space-3, 1rem);
  background: var(--pcw-bg-raised, #ffffff);
  color: var(--pcw-ink, #1c1a16);
  border: 2px solid var(--pcw-accent, #1f6f5c);
  border-radius: var(--pcw-radius-sm, 3px);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
  /* Mindestgroesse 44x44 (WCAG 2.5.5/2.5.8). Padding und Zeilenhoehe
   * ergaben zusammen 41 px — drei zu wenig. Der Skip-Link entstand in
   * Terminal F1, die Touch-Ziel-Regel in F2: sie kannte ihn noch nicht,
   * weil beide parallel gebaut wurden. Deshalb steht die Groesse hier
   * bei dem Element, das sie braucht, und nicht in einer fremden Datei.
   * inline-flex + align-items zentriert den Text in der groesseren
   * Flaeche, ohne den Kasten optisch aufzublaehen. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  /* Versteck-Mechanismus: ausserhalb des Viewports per top, nicht
   * per display:none (sonst nicht fokussierbar) und nicht per
   * visibility:hidden (sonst nicht im Tab-Order). Beim Fokus
   * wandert der Link in den sichtbaren Bereich. */
  transition: top 0.15s ease-in-out;
}
.pcw-skip-link:focus,
.pcw-skip-link:focus-visible {
  top: var(--pcw-space-2, 0.5rem);
  outline: 3px solid var(--pcw-focus, var(--pcw-accent, #1f6f5c));
  outline-offset: 2px;
}
/* Reduced motion: ohne Uebergang springt der Link direkt in den
 * sichtbaren Bereich, was bei vestibular empfindlichen Nutzern
 * angenehmer ist. */
@media (prefers-reduced-motion: reduce) {
  .pcw-skip-link { transition: none; }
}

/* ----- 2. <main>-Wrapper ----- */

.pcw-main {
  /* Quartz' Grid (.page #quartz-body) sortiert seine Kinder nach
   * grid-area. .center hat grid-area:grid-center. <main> als Kind
   * von .center erbt die Position; mit display:block springt nichts
   * in eine Flex-Zeile. .center selbst bleibt Grid-Item, das neue
   * <main> ist nur ein normaler Block innerhalb. */
  display: block;
  min-width: 0;
}

/* ----- 3. <header>-Wrapper ----- */

.pcw-header {
  /* display:block, damit der Wrapper keine unerwarteten Flex- oder
   * Grid-Eigenschaften mitbringt. Das alte Quartz-Default fuer
   * <header> (display:flex im Header.tsx-CSS) gilt nur fuer das
   * ECHTE Quartz-<header>, nicht fuer unseren semantischen
   * Landmark-Wrapper. */
  display: block;
}

/* ----- 4. Explorer-Titel (Befund 2) ----- */

.explorer-title {
  /* Visuelle Wiederherstellung: der <h2>-Titel des linken
   * Sidebar-Explorers war 1rem, inline-block, margin 0. Dieselbe
   * Optik jetzt am <span>, damit der Tausch fuer sehende
   * Nutzer unmerklich bleibt. */
  font-size: 1rem;
  display: inline-block;
  margin: 0;
  font-weight: inherit;
}

/* ----- 5. Mobile Layout — S1 (plans/wiki_verbesserung_v1.md §4) -----
 *
 * Zwei strukturelle Mängel im mobilen Layout, deren Quelle Quartz
 * upstream liegt und die deshalb per Override gefixt werden:
 *
 *  (a) Doppelte Bedienelemente. Die Quartz-Sidebar bietet
 *      button.explorer-toggle.mobile-explorer (öffnet den
 *      Datei-Baum) und button.search-button (öffnet das Such-
 *      overlay). Die primäre Navigation bietet Menu (öffnet den
 *      Hauptnav-Drawer) und "Open search" (delegiert per JS an
 *      die Sidebar-Such-Komponente). Beide Paare sind auf 375 px
 *      gleichzeitig sichtbar — zweimal Hamburger, zweimal Suche.
 *      Plan S1 verlangt "genau EIN sichtbarer Sucheinstieg, genau
 *      EIN Menüeinstieg". Sidebar-Versionen verschwinden auf
 *      <801 px; primäre Navigation übernimmt. Der Klick-Pfad des
 *      Such-Buttons bleibt intakt (pcw-primary-nav.js:130 liest
 *      den Button weiterhin aus dem DOM, das Programmatic Click
 *      funktioniert mit display:none).
 *
 *  (b) Offene Folder-Inhalte im kollabierten Explorer. Quartz setzt
 *      `.explorer-content { visibility: hidden; transform:
 *      translateX(-100vw) }`, wenn der Explorer zugeklappt ist.
 *      `visibility` wird an Kinder vererbt — solange die Kinder
 *      keine eigene `visibility`-Regel mitbringen. Aber
 *      `.folder-outer.open` hat `visibility: visible`, damit
 *      geöffnete Folder im SICHTBAREN Explorer gerendert werden.
 *      Im kollabierten Zustand überschreibt das die Vererbung und
 *      zeichnet die Folder-Struktur bei `left ≈ -359 px` auf den
 *      linken Rand. Resultat: abgeschnittene Textfragmente am
 *      Bildschirmrand jeder Seite mit geöffnetem Folder (Startseite
 *      öffnet das `hub/`-Folder per Default, weil der Brotkrumen
 *      darauf zeigt). Selektor `.explorer.collapsed .folder-outer.open`
 *      matched nur offene Folder in einem ZUGEKLAPPTEN Explorer —
 *      der sichtbare Explorer bleibt unberührt.
 *
 *  Beide Regeln greifen, weil PCW-Stylesheets ungelayert sind und
 *  damit in der Kaskade gegen Quartz' @layer quartz-base gewinnen
 *  (componentResources.ts:411 — egal welche Spezifitaet die Quartz-
 *  Regel hat).
 */

@media (max-width: 800px) {
  /* (a) Doppelte Einstiege ausblenden. */
  .page > #quartz-body button.explorer-toggle.mobile-explorer,
  .page > #quartz-body button.search-button {
    display: none;
  }
  /* Die Upstream-Quartz-Explorer-JS setzt `.collapsed` auf
   * `.explorer` nur, wenn die Sichtbarkeit des mobile-explorer-
   * Toggle-Buttons als Proxy für "wir sind auf Mobil" benutzt wird
   * (siehe quartz/.quartz/plugins/explorer/src/components/scripts/
   * explorer.inline.ts:401). Wir blenden den Button gerade aus, also
   * greift dieser Mechanismus nicht mehr. Den collapsed-Zustand
   * übernimmt pcw-primary-nav.js:collapseExplorerIfMobile() — diese
   * Regel hier spiegelt nur das Verhalten wider, falls die JS aus
   * irgendeinem Grund nicht läuft (z. B. noscript / Pre-hydration-
   * Blink). */
  .page > #quartz-body .explorer:not(.collapsed) > .explorer-content {
    transform: translateX(-100vw);
    visibility: hidden;
  }
}

/* (b) Offene Folder im kollabierten Explorer verstecken.
 *
 * Wenn der Explorer collapsed ist, soll der Inhalt einschließlich
 * der mit `.open` markierten Folder unsichtbar sein. Quartz
 * upstream versteckt `.explorer-content` per `visibility: hidden`,
 * die Kinder erben das — außer sie haben selbst eine explizite
 * `visibility: visible`. `.folder-outer.open` setzt das explizit,
 * damit offene Folder im SICHTBAREN Explorer gerendert werden. Im
 * collapsed-Zustand überschreibt das die Vererbung und zeichnet die
 * Folder-Struktur bei `left ≈ -359 px` auf den Bildschirmrand. Wir
 * setzen die Sichtbarkeit deshalb selbst auf `hidden` zurück. */
.explorer.collapsed .folder-outer.open {
  visibility: hidden;
}