/*
  nav.css
  ======
  Zuständig für:
  - Hauptnavigation (Desktop)
  - Mobile Menü (aufklappbar)
  - Dropdown / Submenu (klick-basiert, kein Hover-Zwang)

  Wichtige Stellen zum Anpassen:
  - Abstände: padding / gap
  - Dropdown-Breite: min-width in .dropdown
  - Active-State: .nav-item.is-active und .dropdown a.is-active
  - Mobile Breakpoint: @media (max-width: 720px)
  - Farben: primär über CSS-Variablen in base.css (z.B. --accent, --bg-soft, --border)
*/

/* ===============================
   DESKTOP: NAV-GRUNDLAYOUT
   =============================== */

.nav{
  display:flex;              /* Desktop: horizontal */
  gap:8px;                   /* Abstand zwischen Menüpunkten */
  align-items:stretch;
}

.nav-item{
  position:relative;         /* Dropdown-Anker */
  display:flex;
  flex-direction:column;
}

/*
  Auth-only navigation entry (e.g. "Intern")
  - Desktop: hidden (intern is reachable via URL and/or separate header actions)
  - Mobile: shown inside the burger menu
*/
.nav-item--auth-mobile{
  display:none;
}

.nav-link-row{
  display:flex;
  align-items:center;
  gap:4px;
}

/* ===============================
   LINKS / BUTTONS IM MENÜ
   =============================== */

.nav-link{
  padding:6px 8px;
  border-radius:10px;
  display:block;
  color:var(--text);
  text-decoration:none;
}

.nav-link:hover{
  background:var(--bg);
  text-decoration:none;
}

/*
  Parent ohne eigene Seite (kein href) – z.B. "About"
  -> bewusst leicht hervorgehoben (Rahmen), damit klar ist: klickbar / Dropdown
*/
.nav-parent{
  border:1px solid var(--border);
  background:var(--bg);
  cursor:pointer;
  font:inherit;

  display:flex;
  align-items:center;
  gap:6px;

  padding:6px 8px;
  border-radius:10px;

  color:var(--text);
}

/* Aktiver Menüpunkt (Parent oder Link) */
.nav-item.is-active > .nav-link-row .nav-link{
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:650;
  border:1px solid var(--accent-border);
}

/* ===============================
   SUBMENU / DROPDOWN
   =============================== */

.submenu-toggle{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:10px;
  padding:6px 8px;
  cursor:pointer;
  font:inherit;
  line-height:1;
  color:var(--text);
}

/* Offen-Status (visuelles Feedback) */
.submenu-toggle[aria-expanded="true"],
.nav-parent[aria-expanded="true"]{
  border-color:var(--accent-border);
  background:var(--accent-soft);
  color:var(--accent);
}

/* Kleiner Pfeil */
.chev{
  display:inline-block;
  transform:translateY(-1px);
}

/* ===============================
   DROPDOWN PANEL (DESKTOP)
   =============================== */

.dropdown{
  display:none;                  /* zu, bis JS .open setzt */
  position:absolute;
  top:calc(100% + 6px);
  left:0;

  background: var(--surface-dropdown);
    color: var(--on-dropdown);
  border:1px solid var(--border);
  border-radius:12px;

  min-width:180px;
  padding:6px;

  box-shadow:0 6px 18px rgba(0,0,0,.06);  z-index: 100;
}

.dropdown a{
  padding:8px 10px;
  border-radius:10px;
  display:block;

  color:var(--text);
  text-decoration:none;
}

.dropdown a:hover{
  background:var(--bg);
  text-decoration:none;
}

.dropdown a.is-active{
  background:var(--accent-soft);
  color:var(--accent);
  font-weight:650;
  border:1px solid var(--accent-border);
}

/* Dropdown sichtbar */
.nav-item.open > .dropdown{
  display:block;
}

/* ===============================
   MOBILE: MENÜ-BUTTON
   =============================== */

.nav-toggle{
  display:none; /* Desktop aus */
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font:inherit;
  color:var(--text);
}

/* ===============================
   RESPONSIVE / MOBILE
   =============================== */

@media (max-width:720px){

  .nav-item--auth-mobile{
    display:flex;
  }

  .nav-toggle{
    display:inline-grid;
    place-items:center;
    width:44px;
    height:44px;
    padding:0;
    border-radius:14px;
    justify-self:end;
    text-indent:-9999px;
    overflow:hidden;
    position:relative;
  }

  .nav-toggle::before{
    content:"☰";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    text-indent:0;
    font-size:22px;
    line-height:1;
    color:var(--text);
  }

  /*
    Mobile-Menü:
    - default: versteckt
    - aufgeklappt: body.nav-open .nav {
    z-index: 90; display:flex; }
    - Position: absolute unter dem Header
  */
  /*
    Mobile navigation as a "floating panel" (dropdown under header)
    ------------------------------------------------------------
    Goal: modern, cohesive look (not separate pills), theme-safe for light/dark.
  */
  .nav{
    display:none;
    position:absolute;
    right: var(--pad);
    top: calc(100% + 10px);

    width: min(92vw, 420px);

    background: var(--surface-dropdown);
    color: var(--on-dropdown);
    border: 1px solid var(--dropdown-border);
    border-radius: 16px;
    box-shadow: var(--dropdown-shadow);

    padding: 8px;

    max-height: calc(100vh - 92px);
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: max(12px, env(safe-area-inset-bottom));

    flex-direction:column;
    align-items:stretch;
    gap:4px;

    z-index: 50;
  }

  body.nav-open .nav{
    display:flex;
    animation: nav-panel-in .14s ease-out;
  }

  @keyframes nav-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  body.nav-open .nav{
    display:flex;
  }

  .nav-item{
    width:100%;
  }

  .nav-link-row{
    justify-content:space-between;
  }

  /* Menu items as list rows (not separate "pills") */
  .nav-link{
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    color: inherit;
  }

  .nav-link:hover{
    background: var(--dropdown-hover-bg);
  }

  /* Active state: subtle accent row */
  .nav-item.is-active > .nav-link-row .nav-link{
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent-border);
  }

  .submenu-toggle{
    border: none;
    background: transparent;
    color: inherit;
    border-radius: 12px;
    padding: 8px 10px;
  }

  .submenu-toggle:hover{
    background: var(--dropdown-hover-bg);
  }

  /*
    Dropdowns auf Mobile:
    - nicht floating
    - inline unter dem Parent
    - eingerückt
  */
  .dropdown{
    position: static;
    border: none;
    border-left: 1px solid var(--dropdown-border);
    border-radius: 0;
    box-shadow: none;

    margin-left: 12px;
    padding: 6px 0 0 12px;
    min-width: 0;
  }

  .nav-item.open > .dropdown{
    display:block;
  }
}

/* ===============================
   ACCESSIBILITY: FOKUS
   =============================== */

.nav a:focus-visible,
.nav button:focus-visible,
.nav-toggle:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:var(--focus-offset);
}


/* =========================================================
   Header foreground (token-driven)
   ---------------------------------------------------------
   When you change --surface-header, you typically also want
   consistent foreground colors (brand, links, toggles).
   These rules keep header UI inheriting from .site-header's
   color (which is set via --on-header).
   ========================================================= */

.site-header .brand,
.site-header .nav-link,
.site-header .nav-toggle,
.site-header .submenu-toggle,
.site-header .nav-parent {
  color: inherit;
}

/* Ensure button-style links inside header do not introduce their own background
   when the header surface is dark. */
.site-header .nav-parent {
  background: transparent;
}

/* Keep dropdown panels readable: dropdowns are surfaces of their own,
   so they should not inherit the header foreground color. */
.site-header .dropdown {
  color: var(--text);
}

/* =========================================================
   Dropdown surface (theme-safe)
   ---------------------------------------------------------
   Ensures dropdown panels are readable in both light and dark
   themes by using dedicated surface/foreground tokens.
   ========================================================= */

.site-header .dropdown {
  background: var(--surface-dropdown);
  color: var(--on-dropdown);
  border: 1px solid var(--dropdown-border);
  box-shadow: var(--dropdown-shadow);
}

.site-header .dropdown a {
  color: inherit;
}

.site-header .dropdown a:hover,
.site-header .dropdown a:focus-visible {
  background: var(--dropdown-hover-bg);
}


/* =========================================================
   Mobile menu colors (theme-safe)
   ---------------------------------------------------------
   The mobile menu panel is a surface of its own (like a dropdown).
   Use dropdown tokens so it stays readable in dark mode.
   ========================================================= */

@media (max-width:720px){
  body.nav-open .nav {
    background: var(--surface-dropdown);
    color: var(--on-dropdown);
  }

  body.nav-open .nav a,
  body.nav-open .nav button {
    color: inherit;
  }
}


/* =========================================================
   MOBILE: Menu toggle should show icon + text ("Menü")
   ---------------------------------------------------------
   The base mobile rule hides the label via text-indent and
   forces a 44x44 icon-only button. This override keeps the
   same control but presents it as a premium icon+label chip.
   ========================================================= */
@media (max-width:720px){

  .nav-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:0.55rem;

    width:auto;
    min-width:44px;
    height:44px;

    padding:0 14px;
    border-radius:14px;

    text-indent:0;
    overflow:visible;
  }

  .nav-toggle::before{
    content:"☰";
    position:static;
    inset:auto;

    display:inline-block;
    width:auto;
    height:auto;

    font-size:22px;
    line-height:1;
    margin:0;
  }
}