/*
 * Bilanzo Kopfzeile: Dropdown "Mehr" bedienbar machen.
 *
 * BEFUND (gemessen am Live-DOM mit Playwright, 14.09.2026, 1440x900):
 *   Acht von dreizehn Seiten-Templates setzen das Klappmenue mit
 *   .nav-more-dropdown { top: calc(100% + 8px); padding: 6px; }.
 *   Zwischen der Unterkante von .nav-more und der Oberkante des Menues
 *   liegen dadurch exakt 8 Pixel tote Flaeche. In dieser Luecke liegt
 *   DIV.nav-inner, nicht das Menue. Wer die Maus vom Trigger zum Menue
 *   bewegt, verliert dort :hover auf .nav-more, das Menue geht zu und
 *   kein Eintrag laesst sich anklicken.
 *   Belegt betroffen: /bexio-alternative/, /bexio-ki-buchhaltung/,
 *   /ai-bookkeeping/features/, /status, /blog.
 *   Die uebrigen Templates (Startseite, /changelog, /datenschutz,
 *   /pricing) hatten den Abstand bereits als Innenabstand geloest und
 *   waren mit gemessener Luecke 0 in Ordnung.
 *
 * WURZELFIX:
 *   Das Menue setzt wieder direkt an der Trigger-Unterkante an
 *   (top: 100%), der optische Abstand wird zu Innenabstand
 *   (padding-top). Damit ist die Hover-Flaeche zusammenhaengend, denn
 *   das Menue ist ein Nachfahre von .nav-more und haelt :hover selbst.
 *   Kein Rand, keine Bruecke, keine Zeitschaltung noetig.
 *
 * ZUSAETZLICH:
 *   Zustandsklassen fuer die Bedienung per Klick und Tastatur, siehe
 *   assets/bilanzo-nav-dropdown.js. Ohne sie ist das Menue auf Touch
 *   gar nicht erreichbar, weil dort kein Hover existiert.
 *
 * WARUM DIE KLASSE DOPPELT STEHT:
 *   Gemessen an der ausgelieferten Seite (Byte-Abstaende im HTML,
 *   14.09.2026): wp_head() steht in zwoelf der dreizehn Templates VOR
 *   dem inline <style>-Block. Nur auf der Startseite steht es danach.
 *   Die Ladereihenfolge reicht hier also nicht, anders als bei
 *   bilanzo-typography.css. Statt !important wird die Spezifitaet
 *   sauber angehoben, indem dieselbe Klasse zweimal genannt wird:
 *   .nav-more-dropdown.nav-more-dropdown ist (0,2,0) und schlaegt das
 *   inline (0,1,0), ohne von einem Elternselektor abzuhaengen.
 */

/* ── 1. Die Luecke schliessen ───────────────────────────────────────── */
.nav-more-dropdown.nav-more-dropdown {
  top: 100%;
  margin-top: 0;
  padding-top: 13px;          /* 8 px ehemalige Luecke + 5 px Eigenabstand */
}

/* ── 2. Trigger als bedienbares Element kennzeichnen ────────────────── */
.nav-more-trigger.nav-more-trigger {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-more-trigger.nav-more-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 5px;
}

/* ── 3. Klick- und Tastaturzustand ──────────────────────────────────── */
/* (0,4,0), schlaegt das inline .nav-more:hover .nav-more-dropdown (0,3,0). */
.nav-more.is-open > .nav-more-dropdown.nav-more-dropdown {
  display: flex;
  flex-direction: column;
}

/* Wurde per Klick geschlossen, waehrend die Maus noch auf dem Trigger
   steht: die Hover-Regel darf es nicht sofort wieder aufziehen. Wird
   beim Verlassen von .nav-more zurueckgenommen. */
.nav-more.is-suppressed > .nav-more-dropdown.nav-more-dropdown {
  display: none;
}

/* ── 4. Touch: kein Hover, nur Klick ────────────────────────────────── */
/* Auf Touch-Geraeten bleibt ein :hover nach dem Antippen haengen. Dort
   entscheidet ausschliesslich der Klickzustand. */
@media (hover: none) {
  .nav-more:hover .nav-more-dropdown.nav-more-dropdown {
    display: none;
  }
  .nav-more.is-open > .nav-more-dropdown.nav-more-dropdown {
    display: flex;
    flex-direction: column;
  }
  .nav-more.is-suppressed > .nav-more-dropdown.nav-more-dropdown {
    display: none;
  }
}