/* ==========================================================================
   eatme-navigation — fixe Top-Nav (Logo + Social-Links)
   Referenziert nur Werte aus tokens.css, siehe ARCHITECTURE.md.

   Figma: node-id 1-3445 ("eatme-navigation"). Liegt in Figma als eigene
   Instanz ÜBER section-01-stage (gleiche x/y-Position, 0/0) -> die Nav ist
   ein Overlay über der Stage, sie schiebt den Seiteninhalt NICHT nach unten.
   Deshalb hier position: fixed statt eines eigenen Platzes im Dokumentfluss.

   Logo-Asset (assets/logo/eatme_logo.png) hat zwar bereits echte PNG-
   Transparenz (Palette + tRNS-Chunk), bekommt aber zusätzlich
   mix-blend-mode: multiply auf Wunsch -- verstärkt den "aufs Papier
   gedruckt"-Look über dem Himmel-Hintergrund/der Stage.

   Wichtig: #site-nav hat pointer-events:none (siehe unten), damit die
   unsichtbare Box der Nav keine Klicks auf darunterliegenden Content
   (z.B. das Lyrics-Modul, wenn es beim Scrollen unter die Nav rutscht)
   blockt. .eatme-nav-links a UND .eatme-nav-logo-link holen sich das
   explizit zurück (Logo verlinkt auf index.html, siehe unten).
   ========================================================================== */

#site-nav {
  /* überschreibt die Basis-Regel aus styles.css (position: relative) --
     diese Datei wird in index.html NACH styles.css eingebunden. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Die Nav hat keinen sichtbaren Hintergrund, aber ihre Box (Padding,
     Logo-Fläche, Lücken zwischen den Links) würde ohne dies trotzdem
     Klicks blocken -- für alles, was beim Scrollen unter diesen Bereich
     rutscht (z.B. das Lyrics-Modul). pointer-events:none lässt Klicks
     grundsätzlich durch; die eigentlichen Links holen sich das gezielt
     zurück (siehe .eatme-nav-links a unten). */
  pointer-events: none;
}

.eatme-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 24px;
}

/* Logo: 743px max, skaliert erst fluid, sobald 743px mehr als ~80% der
   Viewport-Breite wären -- darunter min. 330px breit.
   clamp(MIN, PREFERRED, MAX) liefert genau dieses Verhalten:
   - großer Viewport: 80vw > 743px -> clamp liefert 743px (MAX)
   - mittlerer Viewport: 330px < 80vw < 743px -> clamp liefert 80vw (fluid)
   - kleiner Viewport: 80vw < 330px -> clamp liefert 330px (MIN, Boden)

   Logo ist jetzt ein <a href="index.html"> (verlinkt auf die Startseite,
   auch von imprint-and-privacy.html aus) -- die Breiten-Logik sitzt daher
   auf .eatme-nav-logo-link, das <img> selbst füllt einfach 100%.
   BEWUSST OHNE die globale Link-Hover-Convention (Opacity+Blur) aus
   styles.css: Til wollte keinen Hover-Effekt auf dem Logo, nur
   Klickbarkeit -- daher hier explizit zurückgesetzt (padding/margin/
   transition/will-change neutralisiert, :hover ohne Wirkung). */
.eatme-nav-logo-link {
  display: block;
  width: clamp(330px, 80vw, 743px);
  pointer-events: auto; /* holt sich Klickbarkeit vom #site-nav-Reset zurück */
  padding: 0;
  margin: 0;
  will-change: auto;
  transition: none;
}
.eatme-nav-logo-link:hover {
  opacity: 1;
  filter: none;
}

.eatme-nav-logo {
  display: block;
  width: 100%;
  aspect-ratio: 743 / 139; /* intrinsische Maße des Logo-Assets */
  object-fit: contain;
  mix-blend-mode: multiply;
  -webkit-user-drag: none;
  user-select: none;
}

/* Links-Zeile: volle Breite, 8px horizontales Padding, 16px Gap,
   Textstil 1:1 aus Figma = copy-l (Michroma 14px, line-height 1.8,
   letter-spacing 0) -- kein neuer Font-Wert nötig.
   Hover-Verhalten (Opacity + Blur) kommt jetzt aus der globalen
   Link-Convention in styles.css -- hier nur noch die Nav-spezifische
   Typografie. */
.eatme-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* Sicherheitsnetz für sehr schmale Viewports */
  gap: 16px;
  width: 100%;
  padding: 0 8px;
  overflow: visible; /* explizit, damit der Hover-Blur an Links/Rechts
                         nicht am Container-Rand abgeschnitten wird */
}

.eatme-nav-links a {
  pointer-events: auto; /* holt sich Klickbarkeit vom #site-nav-Reset zurück */
  font-family: var(--font-copy-l-family);
  font-size: var(--font-copy-l-size);
  line-height: var(--font-copy-l-line-height);
  letter-spacing: var(--font-copy-l-letter-spacing);
  white-space: nowrap;
}

/* ---- Mobile (768px verbindlicher Breakpoint, siehe tokens-notes.md) ----
   Logo ist über clamp() bereits fluid bis zum 330px-Boden -- braucht keine
   eigene Mobile-Regel. Nav-Gesamtpadding wird auf Mobile um 8px reduziert
   (24px -> 16px). Links-Zeile: horizontales Padding bekommt stattdessen
   4px links/rechts (statt komplett 0), flex-wrap bleibt auf nowrap, damit
   die vier Links auf schmalen Viewports garantiert in einer Zeile bleiben
   statt umzubrechen. Bei sehr schmalen Screens kann das die Links zusammen
   mit dem 12px-Gap breiter machen als der Viewport -- das ist hier bewusst
   in Kauf genommen (Wunsch: kein Umbruch), ggf. mit horizontalem Scroll auf
   der Nav selbst statt Umbruch, falls das später stört. */
@media (max-width: 768px) {
  .eatme-nav {
    padding: 16px;
  }

  .eatme-nav-links {
    padding: 0 4px;
    gap: 12px;
    flex-wrap: nowrap;
  }
}