/* /css/nav.css
   =========================================================
   German Foundation Coin (GFC)
   Hauptnavigation – Klarheit, Ruhe, Professionalität
   ========================================================= */


/* ---------- Basisstruktur ---------- */
.site-nav {
  display: block;
  justify-self: center;
  inline-size: 100%;
}

/* Header-Burger im index.html komplett ausblenden –
   nur der Button im nav-Partial wird genutzt */
.site-header > .nav-toggle {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list > li {
  min-width: 0;
}


/* ---------- Nav-Links ---------- */
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
  will-change: background, transform;
}

/* Hover / Fokus */
.nav-link:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}

.nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-color: var(--accent);
}


/* ---------- Aktive / starke Zustände ---------- */
.nav-link.is-active,
.nav-link[aria-current="true"],
.nav-link[aria-current="page"],
.nav-link.strong {
  background: linear-gradient(180deg, var(--accent), #89d8ff);
  color: var(--accent-ink);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(92,200,255,0.35);
}

.nav-link.strong:hover {
  transform: translateY(-1px);
}

/* CTA etwas stärker hervorheben */
.nav-link.strong.highlight {
  padding-inline: 20px;
  box-shadow: 0 8px 22px rgba(92,200,255,0.45);
  transform: translateY(-1px);
}

.nav-link.strong.highlight:hover {
  transform: translateY(-2px);
}


/* ---------- Separator ---------- */
.sep {
  inline-size: 1px;
  block-size: 22px;
  background: var(--border);
  margin-inline: 6px;
}


/* ---------- Motion Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}


/* ======================================================================
   NAV: Responsive Verhalten
   ====================================================================== */

/* ≤900px: Header-Layout für Mobile – Menü links, Sprache rechts */
@media (max-width: 900px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
  }

  /* Nav-Bereich links im Header */
  .site-nav {
    position: static;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: none;
  }

  .site-nav ul {
    margin: 0;
    padding: 0;
  }

  /* Unser Nav-Root direkt links */
  .site-nav .main-nav[data-nav-root] {
    display: flex;
    align-items: center;
  }

  /* Language-Switch & Co. rechts */
  .header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}


/* =========================================================
   NAVIGATION / HEADER – Branding & Logo
   ========================================================= */

.logo-large {
  height: var(--header-logo-h, 116px);
  width: auto;
  display: block;
  transition: transform .25s ease, opacity .25s ease;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.28));
}

.logo-large:hover {
  transform: scale(1.04);
  opacity: 0.96;
}

/* Light/Dark Mode Logo-Shadow */
@media (prefers-color-scheme: light) {
  .logo-large {
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.15))
            brightness(1.05)
            contrast(1.1);
  }
}

@media (prefers-color-scheme: dark) {
  .logo-large {
    filter: drop-shadow(0 3px 8px rgba(255,255,255,.1))
            brightness(1.15)
            contrast(1.1);
  }
}

/* Mini-Brandmark */
.favicon-mark {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: url("/assets/favicon/favicon-32.png") center/cover no-repeat;
  vertical-align: middle;
}


/* === Mobile Dropdown Navigation (Variante A) === */

/* Grund-Layout */
[data-nav-root] {
  position: relative;
  z-index: 200; /* über dem restlichen Inhalt */
}

/* Button allgemein – wird über data-nav-toggle auf Mobile aktiviert */
[data-nav-toggle] {
  display: none;
}

/* Icon-Button (drei Balken) */
.nav-toggle {
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;

  /* Icon-Farbe generell weiß (auch im Dark-Header sichtbar) */
  color: #ffffff !important;
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.nav-toggle-box {
  display: inline-flex;
  flex-direction: column;
  gap: 0.18rem;
}

.nav-toggle-bar {
  width: 1.4rem;
  height: 2.2px;
  border-radius: 999px;

  /* Balken explizit weiß, unabhängig von Vererbung */
  background-color: #ffffff !important;
  opacity: 1;
}

/* Desktop-Nav-Liste (Standard) */
[data-nav-root] [data-nav-list] {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ---------- Mobile: Dropdown ≤960px ---------- */
@media (max-width: 960px) {
  /* Nav-Root: Button + Dropdown nebeneinander */
  [data-nav-root] {
    display: flex;
    align-items: center;
  }

  /* Separator im Mobile-Zustand ausblenden */
  .sep {
    display: none;
  }

  .nav-list {
    justify-content: flex-start;
    gap: 8px;
    padding: 6px;
  }

  .nav-link {
    padding: 9px 12px;
    font-size: 0.9rem;
  }

  /* Button sichtbar, Liste standardmäßig zu */
  [data-nav-toggle] {
    display: inline-flex;
    margin-right: 0.5rem;
  }

  /* Dropdown-Paneel: zunächst versteckt,
     bündig am linken Rand unter dem Header */
  [data-nav-root] [data-nav-list] {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 0.5rem;

    flex-direction: column;
    align-items: stretch;      /* volle Breite der Items */
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    min-width: 12rem;
    max-width: 90vw;

    border-radius: 0.75rem;
    background: var(--surface-alt, #0b1120);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    z-index: 210;
  }

  /* geöffnet: Liste einblenden */
  [data-nav-root].is-open [data-nav-list] {
    display: flex;
  }

  /* Links: 100% Breite, Text & Icon nach links ausgerichtet */
  [data-nav-root] .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0;
  }
}


/* ---------- Desktop: ab 961px ---------- */
@media (min-width: 961px) {
  .nav-toggle {
    display: none !important;
  }

  [data-nav-root] {
    display: block;
  }

  [data-nav-root] [data-nav-list] {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .nav-link {
    width: auto;
    text-align: center;
    padding: 10px 16px;
  }
}


/* ===== Language Switch Fix ===== */
/* Sprache-Pills orientieren sich am globalen Farbsystem */
.header-actions .lang-pill-btn {
  color: var(--text) !important;
}

.header-actions .lang-pill-btn.is-active {
  color: var(--accent-ink) !important;
}

.header-actions .lang-sep {
  color: var(--muted) !important;
}