/**
 * ncss - Priority-Navigation (Custom Element <ncss-nav-priority>, Layer "components").
 * OPT-IN Erweiterung von components/nav.css für VIELE Navigationspunkte, die nicht
 * mehr in eine Zeile passen: Punkte werden automatisch, per ResizeObserver, in ein
 * "Mehr"-Dropdown verschoben - dasselbe .ncss-nav-dropdown/-submenu-Markup, das
 * nav.css bereits für gewöhnliche Untermenüs stylt, kein neues Optik-System nötig.
 * Für kurze Pills/Tags ohne Kollabier-Bedarf siehe stattdessen die reine CSS-Variante
 * `.ncss-nav--scroll` in nav.css.
 *
 * Einbindung (zusätzlich zu ncss.css/theme.css, NICHT Teil von ncss.css selbst - wie
 * page-transitions.css oder combobox.js ein bewusst separates Opt-in):
 *   <link rel="stylesheet" href="dist/components/nav-priority.css">
 *   <script src="dist/js/nav-priority.js" defer></script>
 *
 * Markup: identisch zur normalen .ncss-nav (siehe components/nav.css), nur die
 * bestehende <ul class="ncss-nav-list"> zusätzlich in <ncss-nav-priority> wrappen:
 *   <nav class="ncss-nav">
 *     <button type="button" class="ncss-nav-toggle" command="show-modal"
 *             commandfor="navPanel" aria-label="Menü öffnen">☰</button>
 *     <dialog id="navPanel" class="ncss-nav-panel ncss-offcanvas ncss-offcanvas--start">
 *       <button type="button" class="ncss-dialog-close" command="close"
 *               commandfor="navPanel" aria-label="Menü schließen">&times;</button>
 *       <ncss-nav-priority>
 *         <ul class="ncss-nav-list">
 *           <li class="ncss-nav-item"><a href="/">Start</a></li>
 *           <li class="ncss-nav-item"><a href="/a">Punkt A</a></li>
 *           ... (beliebig viele weitere - funktioniert für JEDE Anzahl)
 *         </ul>
 *       </ncss-nav-priority>
 *     </dialog>
 *   </nav>
 * Optionale Attribute auf <ncss-nav-priority>: `more-text="Mehr"` (Label),
 * `more-label="Weitere Punkte"` (aria-label für Screenreader).
 *
 * Funktioniert bei JEDER Breite, KEIN fester Breakpoint im Code (User-Vorgabe, siehe
 * Doku-Kommentar oben) - anders als eine normale .ncss-nav übernimmt eine .ncss-nav,
 * die <ncss-nav-priority> enthält, die volle Verantwortung für JEDE Bildschirmbreite
 * selbst; der normale Toggle-Button/Off-Canvas-Mechanismus von nav.css (für "keine
 * Priority-Nav vorhanden") wird dafür unconditional deaktiviert, nicht nur oberhalb
 * einer Schwelle - kein Hamburger-Handoff, auch nicht auf sehr schmalen Bildschirmen
 * (dort kollabiert es einfach bis auf 0 sichtbare Punkte + "Mehr", das JS behandelt
 * diesen Fall bereits). ERSTE Fassung hatte hier einen `matchMedia`-Bypass unterhalb
 * 1024px (auf die normale Off-Canvas-Ansicht umgeschaltet) - per User-Feedback wieder
 * entfernt: die Doku versprach von Anfang an "funktioniert für jede Punktzahl, kein
 * fester Breakpoint", der Bypass widersprach dem.
 *
 * OHNE JS (oder bevor customElements die Definition geladen hat), UND OHNE
 * ResizeObserver (js/nav-priority.js registriert die Custom-Element-Definition
 * gezielt gar nicht erst, wenn `ResizeObserver` fehlt - sonst würde die Definition
 * trotzdem erfolgreich sein, `:defined` also greifen, nur ohne die Layout-Logik,
 * die den dadurch entstehenden display:block-Zustand wieder sinnvoll füllt):
 * reiner Passthrough (`display: contents`), keine Funktionseinbuße - .ncss-nav-list
 * zeigt alle Punkte normal per flex-wrap in mehreren Zeilen (unverändertes
 * Standard-.ncss-nav-Verhalten, siehe nav.css) - EINZIGE Ausnahme in jedem dieser
 * Fälle: der Toggle-Button bleibt trotzdem sichtbar (unten), weil die :has()-Regel
 * dafür an :defined hängt, nicht am bloßen Vorhandensein des (noch unverbundenen)
 * Elements.
 */
ncss-nav-priority {
  display: contents;
}
/* Erst NACH der Custom-Element-Definition eine eigene Box - ResizeObserver kann ein
   display:contents-Element nicht messen (kein eigenes Boxmodell), das JS braucht
   also zwingend eine echte Box, sobald es aktiv ist. flex:1 1 auto + min-width:0
   spiegelt exakt .ncss-topbar-inner > nav (components/topbar.css) - dieselbe
   "darf innerhalb der Zeile schrumpfen"-Notwendigkeit. */
ncss-nav-priority:defined {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
/* Sobald das JS übernimmt, übernimmt es auch die volle Verantwortung für "was
   passiert bei Platzmangel" - natives flex-wrap würde sonst VOR der JS-Berechnung
   schon in eine zweite Zeile umbrechen (kurzes Doppelzeilen-Aufblitzen, bevor das
   Skript den Punkt stattdessen ins Mehr-Menü verschiebt). Die generelle Mobile-Regel
   in nav.css (`@media max-width:63.99rem { .ncss-nav-list { flex-direction:column;
   ...} }`) trifft JEDE .ncss-nav-list unconditional, auch diese - alle vier
   betroffenen Eigenschaften hier selbst zurücksetzen (Spezifität allein reicht nicht,
   entscheidet nur pro Eigenschaft, nicht über eine ganze Regel hinweg - dieselbe
   Falle wie bei .ncss-nav--scroll, siehe dortiger Kommentar in nav.css). */
ncss-nav-priority:defined > .ncss-nav-list {
  flex-direction: row;
  align-items: center;
  gap: var(--ncss-space-xs);
  margin-block-start: 0;
  flex-wrap: nowrap;
}
/* Der normale Toggle-Button/Off-Canvas-Mechanismus (nav.css) ist für ".ncss-nav OHNE
   eigene Priority-Lösung" gedacht - hier unconditional (nicht nur unterhalb einer
   Schwelle) abgeschaltet, siehe Doku-Kommentar oben. :has() statt eines
   JS-Toggle-Callbacks - rein deklarativ, reagiert automatisch auf :defined, ohne
   dass das JS selbst etwas an .ncss-nav-toggle/-panel ändern muss. */
.ncss-nav:has(ncss-nav-priority:defined) .ncss-nav-toggle {
  display: none;
}
.ncss-nav:has(ncss-nav-priority:defined) .ncss-nav-panel {
  display: contents;
}