/* Site-wide header — included on every page. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border-base);
  height: var(--header-height);
  /* Linkes Padding sitzt am Logo (--logo-padding-left), damit es separat
     konfigurierbar bleibt. Rechtes Padding hier am Header-Container. */
  padding: 0 24px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-left: var(--logo-padding-left);
  text-decoration: none;
}
.site-logo-image {
  /* 14px Luft oben + unten gegen den Header-Rand. Auto-Breite erhält die
     Aspect-Ratio des PNGs, object-fit:contain hält Transparenz intakt. */
  height: calc(var(--header-height) - 28px);
  width: auto;
  display: block;
  object-fit: contain;
}

.site-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-nav-link {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 3px;
  color: var(--text-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--nav-link-font-size);
  transition: color 0.15s, background 0.15s;
}
.site-nav-link:hover { color: var(--accent-strong); background: var(--nav-link-hover-bg); }
.site-nav-link.active { color: var(--accent-strong); background: var(--nav-link-active-bg); }

.site-auth {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.site-auth-name { color: var(--auth-name-color); font-size: var(--auth-name-font-size); }
.site-auth-form { display: inline; margin: 0; padding: 0; }
.site-auth-btn {
  display: inline-block;
  padding: 4px 12px;
  background: var(--logout-btn-bg);
  border: none;
  border-radius: 3px;
  color: var(--logout-btn-text);
  font-size: var(--auth-btn-font-size);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.site-auth-btn:hover { background: var(--logout-btn-bg-hover); }

/* Desktop: Burger versteckt, Collapse-Wrapper läuft als unsichtbarer Inline-Container mit */
#header-burger { display: none; }
#header-collapse {
  display: contents; /* Auf Desktop verhält sich der Wrapper, als wäre er nicht da — Flex-Children sind nav + .site-auth */
}

/* ── Mobile (≤600px): Hamburger-Drawer ───────────────────────────────── */
@media (max-width: 600px) {
  /* Sicherheitsnetz gegen horizontalen Scroll, falls Header oder Drawer
     sich verrechnet. */
  html, body { overflow-x: hidden; }

  .site-header {
    gap: 12px;
    /* Mobile: --logo-padding-left wird ignoriert (siehe .site-logo unten);
       Header bekommt symmetrisches Padding für den rechten Burger-Abstand. */
    padding: 0 14px;
    box-sizing: border-box;
    max-width: 100vw;
    position: relative;
    /* KEIN overflow:hidden — sonst clippt der ausgeklappte Drawer
       (#header-collapse mit position:absolute; top:100%). Schutz gegen
       horizontalen Page-Scroll ist bereits via html,body{overflow-x:hidden}
       weiter oben gesetzt. */
  }

  /* Logo auf Mobile horizontal mittig — aus dem Flex-Flow raus, damit
     #header-burger trotzdem über margin-left:auto am rechten Rand sitzt. */
  .site-logo {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    padding-left: 0;
  }

  #header-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 40px; height: 36px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--burger-border);
    border-radius: 4px;
    color: var(--accent-strong);
    font-size: 1.05rem;
    /* line-height:1 verhindert, dass die Glyph-Baseline des ☰-Zeichens den
       Button optisch nach unten zieht — flex zentriert dann zuverlässig. */
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  #header-burger:hover { border-color: var(--accent); background: var(--accent-tint); }

  #header-collapse {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-base);
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    z-index: 199;
  }
  #header-collapse.open { display: flex; }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .site-nav-link {
    padding: 10px 12px;
    /* font-size erbt von Desktop-Regel (var --nav-link-font-size) — Mobile
       hat keinen eigenen Override mehr, damit der Admin-Wert konsistent
       greift. */
    /* Sprint 16.3 (Item #8 follow-up): Items im Hamburger-Drawer zentriert. */
    text-align: center;
  }

  /* Sprint 16.3 (Item #8): Trennlinie über User-Name war var(--bg-page)
     (dunkel + kaum sichtbar). Auf #ffffff hart gesetzt für klare Trennung. */
  .site-auth {
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    border-top: 1px solid #ffffff;
    padding-top: 12px;
  }
  .site-auth-name { padding: 0 4px; text-align: center; }
  .site-auth-form { display: block; text-align: center; }
  /* width:100% sorgt dafür, dass der Button die volle Drawer-Breite einnimmt;
     ohne das säße er bei display:block ohne explizite Breite am linken Rand. */
  .site-auth-btn  { display: block; width: 100%; padding: 10px 12px; text-align: center; box-sizing: border-box; }
}