/* ============================================================
   NAVBAR V3 - Regional-First Layout
   ============================================================
   Erweitert die existing nav-wrapper / nav Struktur aus
   topics-design.css um:
   - Header-Akzentlinie in --region-color
   - Region-Pill-Toggle (zentral in Hauptnav)
   - Sub-Nav (Zeile 2, kontextabhaengig)

   WICHTIG: --region-color wird bereits in regional.css definiert
   (Zeilen 13-44, body.region-ezh / body[data-region]). Wir nutzen
   die existing Variable, definieren NUR den Default-Fallback und
   ein zusaetzliches data-region-Mapping fuer Forwards-Compat.
   ============================================================ */

/* ------------------------------------------------------------
   REGION-COLOR FALLBACK + data-region MAPPING
   ------------------------------------------------------------
   regional.css setzt --region-color via body.region-*  Klasse.
   Hier erweitern wir um body[data-region="..."] Attribut, damit
   JS-State (data-region) und Server-Render (region-* Klasse) beide
   funktionieren. Beide nutzen die gleichen Tokens aus regional.css.
   ------------------------------------------------------------ */
:root {
  /* Default-Fallback wenn weder Klasse noch Attribut gesetzt */
  --region-color-default: #525252;
}

body[data-region="ezh"] {
  --region-color: var(--region-color-ezh, #1e88e5);
}
body[data-region="ebe"] {
  --region-color: var(--region-color-ebe, #fb8c00);
}
body[data-region="ebs"] {
  --region-color: var(--region-color-ebs, #e53935);
}

/* ------------------------------------------------------------
   HEADER-AKZENTLINIE (4px unter Hauptnav, in Region-Farbe)
   ------------------------------------------------------------ */
.nav-wrapper {
  border-bottom: 4px solid var(--region-color, var(--region-color-default)) !important;
  transition: border-color 0.3s ease;
}

/* ------------------------------------------------------------
   REGION-PILL-TOGGLE (zentral in der Navbar)
   ------------------------------------------------------------ */
.region-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9999px;
  padding: 3px;
  gap: 0;
  margin: 0 12px;
  align-self: center;
  flex-shrink: 0;
}

.region-toggle .region-pill {
  border: none;
  background: transparent;
  padding: 6px 16px;
  border-radius: 9999px;
  cursor: pointer;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  font-size: 13px;
  font-family: inherit;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}

.region-toggle .region-pill:hover {
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.04);
}

.region-toggle .region-pill.active {
  background: var(--region-color, #525252);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

/* Per-Region active-Farbe (deterministisch, unabhaengig von body[data-region]) */
.region-toggle .region-pill[data-region="ezh"].active {
  background: var(--region-color-ezh, #1e88e5);
}
.region-toggle .region-pill[data-region="ebe"].active {
  background: var(--region-color-ebe, #fb8c00);
}
.region-toggle .region-pill[data-region="ebs"].active {
  background: var(--region-color-ebs, #e53935);
}

.region-toggle .region-pill:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   SUB-NAV (Zeile 2 unter der Hauptnav, kontextabhaengig)
   ------------------------------------------------------------
   Sticky direkt unter der Hauptnav (Hauptnav = 52px hoch lt.
   topics-design.css). Hintergrund leicht heller als Hauptnav
   um visuelle Trennung zu schaffen.
   ------------------------------------------------------------ */
.subnav-wrapper {
  background: #2d2d2d;
  border-bottom: 1px solid #3a3a3a;
  padding: 0 18px;
  display: flex;
  align-items: center;
  height: 44px;
  position: sticky;
  top: 56px; /* Hauptnav 52px + 4px Akzentlinie */
  z-index: var(--z-sticky, 500);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.subnav-wrapper::-webkit-scrollbar {
  height: 4px;
}
.subnav-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.subnav-breadcrumb {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 500;
  margin-right: 18px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.subnav-breadcrumb .subnav-breadcrumb-region {
  color: var(--region-color, #ccc);
  font-weight: 700;
  margin-left: 4px;
}

.subnav-items {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
}

.subnav-item {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
  line-height: 1;
}

.subnav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.subnav-item.active {
  background: var(--region-color, #525252);
  color: white;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.subnav-item .subnav-icon {
  font-size: 14px;
  line-height: 1;
}

/* Trenner zwischen Sub-Nav-Gruppen */
.subnav-separator {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 6px;
}

/* ------------------------------------------------------------
   MOBILE-ADAPTATION
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .region-toggle {
    transform: scale(0.88);
    margin: 0 4px;
  }
  .region-toggle .region-pill {
    padding: 5px 12px;
    font-size: 12px;
  }

  .subnav-wrapper {
    padding: 0 10px;
    height: 40px;
    top: 56px;
  }
  .subnav-breadcrumb {
    display: none;
  }
  .subnav-item {
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* ------------------------------------------------------------
   DARK-MODE-AWARENESS (subnav heller im Light-Mode falls noetig)
   ------------------------------------------------------------ */
body.dark-mode .subnav-wrapper {
  background: #232323;
  border-bottom-color: #2a2a2a;
}