/* ==========================================
   nav.css – Pierce-Home Navigation (Light Blue)
   ========================================== */

:root{
  --nav-bg: #ffffff;
  --nav-fg: #0f2f5f;
  --nav-fg-muted: #3c5a8a;
  --nav-line: #d7e3f5;
  --nav-accent: #2b63c6;
  --nav-accent-2: #1f4ea3;
  --nav-pill: #e9f2ff;
  --nav-pill-hover: #d8e8ff;
  --nav-bg-bar: #f6f9ff;
  --dropdown-bg: #ffffff;
  --dropdown-shadow: 0 10px 24px rgba(9, 30, 66, .10);

  --nav-font-size: 15px;
  --nav-line-height: 1.15;
  --nav-letter: .2px;
}

/* ===== Header ===== */
.ph-header{
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-bottom: 1px solid var(--nav-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  position: relative;
  z-index: 6000;
}
.ph-header .logo-link{ display:flex; align-items:center; gap:10px; color: var(--nav-accent-2); text-decoration:none; font-weight: 700; }
.ph-header .logo{ width:36px; height:36px; border-radius:8px; }
.ph-header .page-title{ font-size: 1.1rem; letter-spacing: .2px; }
.header-right{ display:flex; align-items:center; gap:14px; }
.user-info{ text-align:right; font-size:.92rem; color: var(--nav-fg-muted); }
.btn-logout{
  display:inline-block; padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--nav-line); background: var(--nav-pill);
  color: var(--nav-accent-2); text-decoration:none; font-weight: 600;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-logout:hover{ background: var(--nav-pill-hover); border-color: #c8d9f3; }

/* ===== Hauptnavigation ===== */
.ph-nav{
  background: var(--nav-bg-bar);
  border-bottom: 1px solid var(--nav-line);
  position: relative;
  z-index: 7000;       /* über Content */
  isolation: isolate;  /* eigener Stacking-Kontext */
}

.nav-list{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  margin: 0 auto;
  max-width: 1200px;

  /* eine Zeile + horizontal scroll (für Mobil) */
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* ===== Nav Items ===== */
.nav-item{ position: relative; flex: 0 0 auto; }

.nav-item > a,
.nav-item > button{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nav-fg);
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;

  padding: 10px 16px;
  border-radius: 12px;

  font-weight: 700;
  font-size: var(--nav-font-size);
  line-height: var(--nav-line-height);
  letter-spacing: var(--nav-letter);

  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.nav-item > a:hover,
.nav-item > button:hover,
.nav-item > a:focus-visible,
.nav-item > button:focus-visible{
  background: var(--nav-pill);
  border-color: var(--nav-line);
  color: var(--nav-accent-2);
  outline: none;
  box-shadow: 0 0 0 3px rgba(43, 99, 198, .12);
}

.nav-item.active > a,
.nav-item.has-dropdown.open > button{
  background: var(--nav-pill);
  border-color: var(--nav-line);
  color: var(--nav-accent-2);
}

/* ===== Dropdown Toggle ===== */
.nav-item.has-dropdown > button{ position: relative; }
.nav-item.has-dropdown > button::after{
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--nav-fg-muted);
  margin-left: 8px;
  position: relative; top: 1px;
  transition: transform .15s ease, border-top-color .15s ease;
}
.nav-item.has-dropdown.open > button::after{ transform: rotate(180deg); border-top-color: var(--nav-accent-2); }

/* ===== Dropdown Menü ===== */
.dropdown-menu{
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: var(--dropdown-bg);
  border: 1px solid var(--nav-line);
  border-radius: 12px;
  box-shadow: var(--dropdown-shadow);
  padding: 6px;
  display: none;              /* nur über .open sichtbar */
  z-index: 100000;            /* über Content */
  text-align: left;
  list-style: none;
  margin: 0;
}
.dropdown-menu li{ list-style: none; margin: 0; padding: 0; }
.dropdown-menu a{
  display:block; padding: 9px 14px; border-radius: 10px;
  color: var(--nav-fg); text-decoration: none; font-weight: 600;
  font-size: var(--nav-font-size); line-height: 1.2; letter-spacing: .15px;
  transition: background .15s, color .15s;
}
.dropdown-menu a:hover, .dropdown-menu a:focus-visible{ background: var(--nav-pill); color: var(--nav-accent-2); outline: none; }

/* Öffnen */
.nav-item.has-dropdown.open .dropdown-menu{ display: block; }

/* Hover-Brücke (Desktop) */
.nav-item.has-dropdown::after{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 10px;
}

/* Badge */
.tag{
  display:inline-block;
  padding:.18rem .48rem;
  border-radius:999px;
  border:1px solid var(--nav-line);
  background: var(--nav-pill);
  color: var(--nav-accent-2);
  font-weight:700;
  font-size:.78rem;
}

/* ===== Mobile Tweaks ===== */
@media (max-width: 900px){
  .nav-list{ justify-content: flex-start; } /* erste Links sichtbar */
  .nav-item > a, .nav-item > button{ padding: 9px 12px; }
}

@media (max-width: 520px){
  .user-info{ display:none; }
}

/* ===== Desktop-Override: keine Scrollbar in der Nav ===== */
@media (min-width: 901px){
  .nav-list{
    overflow-x: visible;      /* Scrollbar weg */
    overflow-y: visible;
    -webkit-overflow-scrolling: auto;
  }
}