/* ============================================
   ECX 30 - Navigation
   Uebernommen aus dem Entwurf der Grafikerin,
   Werte, Media Queries und Uebergaenge unveraendert.
   Umbenennungen:
     .nav        -> .ecx-nav  (Unterklassen __inner,
                    __list, __item, __trigger, __menu bleiben)
     .ico        -> .ecx-ico
     .sub        -> .ecx-sub
     .is-active  -> .ecx-is-active
   Mobil: der Entwurf hat dafuer keine Loesung. In dieser
   Runde bewusst nichts gebaut, siehe docs/DECISIONS.md.
   ============================================ */

.ecx-nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}

/* Die WordPress-Adminleiste liegt fest oben und wuerde die klebende
   Leiste sonst verdecken. */
body.admin-bar .ecx-nav { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .ecx-nav { top: 46px; }
}

.ecx-nav__inner {
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: center;
}

.ecx-nav__list {
  display: flex; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}

.ecx-nav__item { position: relative; }

.ecx-nav__list a,
.ecx-nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 22px 18px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
  position: relative;
  transition: color var(--dur) var(--ease);
  background: none; border: 0; cursor: pointer; font-family: inherit;
  text-decoration: none;
  /* Buttons erben line-height nicht vom Body, der Browser setzt "normal".
     Ohne das sind Trigger und Link unterschiedlich hoch und sitzen dadurch
     nicht auf einer Linie. */
  line-height: 1.55;
}

.ecx-nav__list a::after,
.ecx-nav__trigger::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 14px; height: 2px;
  background: var(--ec-red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.ecx-nav__list a:hover,
.ecx-nav__trigger:hover { color: var(--ec-red); }

/* Aktiver Punkt: roter Unterstrich, bei Links wie bei Aufklapp-Punkten.
   Den Aufklapp-Punkt trifft es auch auf Unterseiten, siehe is_active()
   im Walker (WordPress setzt dort current-menu-ancestor). */
.ecx-nav__list a.ecx-is-active,
.ecx-nav__trigger.ecx-is-active { color: var(--ec-red); }
.ecx-nav__list a.ecx-is-active::after,
.ecx-nav__trigger.ecx-is-active::after { transform: scaleX(1); }

/* Der Unterstrich faehrt bei jedem Punkt aus, nicht nur bei denen mit
   Untermenue. Im Entwurf fehlte die Regel fuer die einfachen Links. */
.ecx-nav__item:hover > a::after,
.ecx-nav__item:hover > .ecx-nav__trigger::after { transform: scaleX(1); }
.ecx-nav__item:hover > .ecx-nav__trigger { color: var(--ec-red); }

/* Aufklapp-Punkte sind <button>. Der Browser gibt ihnen eine eigene
   Flaeche, die je nach Umgebung dunkel durchschlaegt. Hier explizit
   abgeraeumt, in allen Zustaenden. */
.ecx-nav__trigger,
.ecx-nav__trigger:hover,
.ecx-nav__trigger:focus,
.ecx-nav__trigger:active {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  background-image: none;
}
.ecx-nav__trigger svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.ecx-nav__item:hover .ecx-nav__trigger svg { transform: rotate(180deg); }

.ecx-nav__menu {
  position: absolute; left: 0; top: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  min-width: 240px; padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 60;
}

.ecx-nav__item:hover .ecx-nav__menu,
.ecx-nav__item:focus-within .ecx-nav__menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.ecx-nav__menu a {
  padding: 10px 14px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.ecx-nav__menu a::after { display: none; }
.ecx-nav__menu a:hover { background: var(--bg); color: var(--ec-red); }
.ecx-nav__menu a .ecx-ico { width: 18px; height: 18px; color: var(--ec-red); flex: none; }
.ecx-nav__menu a .ecx-sub { font-size: 11px; color: var(--ink-3); font-weight: 400; display: block; margin-top: 1px; }
.ecx-nav__menu a > div { display: flex; flex-direction: column; }

/* ============================================
   Stufe 2: 900 bis 1080px
   Die Leiste bleibt, wird aber enger, damit die
   sechs Punkte ohne Umbruch nebeneinander passen.
   ============================================ */
@media (max-width: 1080px) {
  .ecx-nav__inner { padding: 0 16px; }
  .ecx-nav__list { gap: 0; }

  .ecx-nav__list a,
  .ecx-nav__trigger {
    padding: 18px 11px;
    font-size: 13px;
    gap: 4px;
  }

  .ecx-nav__list a::after,
  .ecx-nav__trigger::after { left: 11px; right: 11px; bottom: 11px; }
}

/* ============================================
   Stufe 3: unter 900px
   Die Leiste entfaellt ganz, die Navigation
   laeuft ueber das Menue-Panel.
   Die overflow-x-Regel der Grafikerin ist hier
   bewusst nicht mehr vorhanden: eine waagerecht
   scrollende Leiste war die Notloesung, die das
   Panel jetzt ersetzt.
   ============================================ */
@media (max-width: 899px) {
  .ecx-nav { display: none; }
}