/* ============================================================
   Zentrale Navigation für taotraining.at / heilendes-tao.com
   Ersetzt die alte Bild-Sprachleiste (sprachen_bg_text_*.jpg)
   und vereinheitlicht das Hauptmenü.

   Optik wie zuvor (Verdana, oranger Verlauf, cremefarbenes Menü),
   aber als echter, responsiver Text. Auf dem Handy:
   Hamburger in der Sprachzeile, Menü klappt auf (reines CSS, kein JS).

   >>> Schrift global ändern: nur die eine Zeile --nav-font unten. <<<
   ============================================================ */

:root {
  --nav-font:  Verdana, Arial, Helvetica, sans-serif;
  --nav-cream: #FEF8EB;   /* Hintergrund Hauptmenü */
  --nav-red:   #990000;   /* aktive Seite / Hover   */
  --nav-ink:   #4d1204;   /* warmes Dunkelbraun: Menüpunkte + aktive Sprache */
  --nav-max:   632px;     /* Breite wie bisheriges Layout */
}

.taonav {
  position: relative;
  max-width: var(--nav-max);
  margin: 0 auto;
  font-family: var(--nav-font);
}
.taonav a { text-decoration: none; }

/* Toggle-Checkbox (versteckt, aber per Tastatur fokussierbar) */
.taonav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Kopfzeile: orangefarbene Sprachleiste + (am Handy) weisses Hamburger-Quadrat daneben */
.taonav-top { display: flex; align-items: stretch; }
.taonav-top .taonav-lang { flex: 1 1 auto; }

/* ---------- Sprachleiste (oranger Verlauf) ---------- */
.taonav-lang {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 2px 4px;
  padding: 4px 12px;
  font-size: 12px;
  letter-spacing: .4px;
  /* Heller Rot-Orange-Verlauf wie das Original (Anmutung vor Barrierefreiheit
     priorisiert; weisser Text auf dem hellen Teil erreicht WCAG AA nicht). */
  background: linear-gradient(90deg,
              #fdf6e3 0%, #f6c66a 38%, #e07a18 62%, #c14e07 100%);
}
.taonav-langlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; }
.taonav-lang a        { color: #ffffff; padding: 2px 8px; }
.taonav-lang a:hover  { text-decoration: underline; }
.taonav-lang a.active { color: var(--nav-ink); font-weight: bold; }
/* Desktop: ganzes Wort sichtbar, Kuerzel versteckt */
.taonav-lang .abbr    { display: none; }
.taonav-lang .full    { display: inline; }

/* Hamburger – eigenes weisses Quadrat NEBEN der orangenen Leiste; am Desktop ausgeblendet */
.taonav-burger {
  display: none;            /* am Desktop unsichtbar (volles Menue sichtbar) */
  align-items: center;
  justify-content: center;
  min-width: 30px;
  background: #ffffff;
  color: #000000;
  border: 1px solid #d8c9bf;   /* Hairline, damit das weisse Quadrat auf Weiss erkennbar ist */
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.taonav-burger::before { content: "\2630"; }   /* ☰ */

/* ---------- Hauptmenü (cremefarben) ----------
   Desktop: alle Punkte in EINER Zeile, gleichmäßig über die Breite verteilt
   (wie die alte Tabelle). */
.taonav-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 6px;
  list-style: none;
  margin: 0;
  padding: 9px 10px;
  background: var(--nav-cream);
  font-size: 12px;
  letter-spacing: .3px;
  white-space: nowrap;
}
.taonav-main a        { color: var(--nav-ink); }
.taonav-main a:hover  { color: var(--nav-red); }
.taonav-main a.active { color: var(--nav-red); font-weight: bold; }

/* ---------- Schmale Bildschirme (Handy) ---------- */
@media (max-width: 640px) {
  /* Sprachkürzel rechts in der orangenen Leiste, weisses Quadrat ganz rechts daneben */
  .taonav-burger { display: flex; }
  .taonav-lang .full { display: none; }
  .taonav-lang .abbr { display: inline; }
  /* ☰ wird zu ✕, wenn das Menü offen ist */
  .taonav-toggle:checked ~ .taonav-top .taonav-burger::before { content: "\2715"; }
  /* Menü standardmäßig zu, klappt bei aktivierter Checkbox auf */
  .taonav-main { display: none; }
  .taonav-toggle:checked ~ .taonav-main {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    white-space: normal;
    gap: 0;
    padding: 6px 12px 10px;
  }
  .taonav-toggle:checked ~ .taonav-main a { display: block; padding: 5px 0; }
}

/* ---------- Seminar-Subnavigation (seminare.js) ----------
   Die Seminartitel sollen wie im Original fett-schwarz OHNE Unterstreichung
   erscheinen. Hohe Spezifitaet (#id a) ueberschreibt die Browser-Vorgabe
   sicher. Die aktive Seite ist ohnehin roter Text ohne Link. */
#seminare-liste a,
#seminare-liste a:link,
#seminare-liste a:visited {
  color: #000000;
  text-decoration: none;
}
#seminare-liste a:hover { color: #990000; text-decoration: none; }
/* Aktive Seite (roter Text, bold_12_rot) hat im tao-CSS nur 14px Zeilenhoehe;
   in der Liste auf 20px angleichen, damit die Zeile gleich hoch ist wie die
   uebrigen (bold_12_0) und die Folgezeile nicht nach oben rutscht. */
#seminare-liste .bold_12_rot { line-height: 20px; }