/**
 * Navigation Component - FINAL CORRECTED
 * Juliana y Fadi Tango Website
 * 
 * KOMPLETT mit Language Switcher & vertikalem Trenner!
 */

/* ==================== HEADER ==================== */

header {
    background: #000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    /* Vertikales Padding bewusst in px (nicht rem) - siehe Kommentar bei
       .logo-mark: Header-Höhe = padding-top + Logo-Höhe + padding-bottom
       muss exakt gleich bleiben, das lässt sich in px am einfachsten
       nachrechnen/anpassen. Horizontales Padding bleibt in rem (unrelevant
       für die Header-Höhe). */
    /*padding: 8.4px 2rem 14px 2rem;*/
	padding: 2px 2rem 2px 2rem;	
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* ==================== LOGO ==================== */

.logo {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s;
}

.logo:hover {
    transform: scale(1.05);
}

/* Header-Höhe = padding-top (.header-content) + Logo-Höhe + padding-bottom.
   .header-icons ist position:absolute und zählt NICHT zur Höhe - einziger
   höhenbestimmender Faktor ist also das Logo. Damit die Header-Höhe beim
   Vergrößern/Verkleinern des Logos konstant bleibt, IMMER beide Werte
   gegenläufig anpassen.
   AKTUELLER STAND: Desktop 65px Logo + 2px + 2px Padding = 69px.
   Mobile (siehe unten) ergibt 68.4px - beide liegen 0.6px auseinander,
   in der Praxis nicht sichtbar, aber nicht mehr exakt identisch wie
   ursprünglich (78.4px war der alte gemeinsame Zielwert vor der letzten
   manuellen Anpassung dieser Werte). Bei Bedarf beide Werte auf denselben
   Zielwert neu ausrechnen. */
.logo-mark {
    height: 65px;
    width: auto;
    display: block;
}

/* Ruhezustand: Weiß. transition steht hier (nicht erst in :hover), da CSS
   Transitions auf dem AUSGANGSZUSTAND stehen müssen, um in BEIDE Richtungen
   (rein und raus) weich zu laufen - sonst liefe nur das Einblenden beim
   Hover weich, das Zurückwechseln beim Verlassen aber abrupt. */
.logo-mark #logo-monogram,
.logo-mark #logo-name {
    fill: var(--color-white);
    transition: fill 0.3s;
}

.logo-mark #logo-rule {
    stroke: var(--color-white);
    transition: stroke 0.3s;
}

/* Hover: Monogramm, Namenszug und Trennlinie wechseln einheitlich auf Gold
   (--color-primary, entspricht #ddbf5f). fill/stroke stehen in der SVG
   bewusst als PRÄSENTATIONS-Attribute (nicht als style="..."), damit diese
   externen Regeln sie ohne !important überschreiben können - Präsentations-
   attribute haben die niedrigste CSS-Priorität, echte style-Attribute
   hätten das verhindert (nur !important schlägt inline-style). */
.logo:hover .logo-mark #logo-monogram,
.logo:hover .logo-mark #logo-name {
    fill: var(--color-primary);
}

.logo:hover .logo-mark #logo-rule {
    stroke: var(--color-primary);
}

/* ==================== HEADER ICONS ==================== */

.header-icons {
    display: flex;
    align-items: center;
    gap: 1rem;/*1rem;*/
    position: absolute;
    right: 1.25rem;/*2rem;*/
}

.header-social-icon {
    /* Klickfläche bleibt 28px (Touch-Target-Mindestmaß), das sichtbare
       Icon selbst ist kleiner (siehe svg-Regel unten) - exakt dasselbe
       Prinzip wie bei "nav .social-icons a" weiter unten in dieser Datei,
       damit Header- und Nav-Icons optisch gleich groß wirken (vorher:
       Header-SVG füllte die volle 28px, Nav-SVG war nur 20px -
       spürbarer Größenunterschied trotz identischem Icon-Set). */
    width: 28px;
    height: 28px;
    color: #fff;
    transition: color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-social-icon:hover {
    color: var(--color-primary);
    transform: scale(1.2);
}

/* Facebook (erstes Icon) etwas näher an Instagram heranrücken, ohne
   den .header-icons-gap selbst zu ändern - eine globale gap-Reduktion
   würde auch den Abstand Instagram->Burger-Menü verkleinern, was hier
   nicht gewünscht ist. Negativer margin-right wirkt gezielt nur auf
   diesen einen Zwischenraum. :first-of-type reicht aus, da beide
   Icons dieselbe Klasse/denselben Tag (<a>) nutzen - keine
   Markup-Änderung nötig. */
.header-social-icon:first-of-type {
    margin-right: -14px;/*-8px;*/
}

.header-social-icon svg {
    width: 20px;
    height: 20px;
}

/* ==================== BURGER MENU ==================== */

.burger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: transform 0.3s;
}

.burger-menu:hover {
    transform: scale(1.2);
}

.burger-menu:hover span {
    background: var(--color-primary);
}

.burger-menu span {
    display: block;
    /* Von 28px auf 22px reduziert, passend zu den ebenfalls verkleinerten
       Header-Social-Icons (28px -> 20px SVG) - vorher wirkte der Burger
       im Vergleich überdimensioniert. Die X-Transformation beim Öffnen
       (siehe .active-Regeln unten) hängt an margin/height, nicht an
       dieser Breite, bleibt also unverändert korrekt. */
    width: 22px;
    height: 3px;
    background: #fff;
    margin: 5px 0;
    transition: 0.3s;
}

.burger-menu.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.burger-menu.active span:nth-child(2) {
    opacity: 0;
}

.burger-menu.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* ==================== MOBILE NAVIGATION ==================== */

nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 400px;
    /* Doppel-Deklaration bewusst (siehe base.css für ausführliche
       Begründung): 100vh als Fallback, 100dvh danach für moderne
       Browser - besonders relevant hier, da das Menü als fixiertes
       Off-Canvas-Panel bei falscher Höhenberechnung auf iOS Safari
       durch die dynamische Adressleiste am unteren Rand beschnitten
       wirken könnte. */
    height: 100vh;
    height: 100dvh;
    background: #000;
    box-shadow: -2px 0 10px rgba(0,0,0,0.5);
    transition: right 0.3s ease;
    overflow-y: auto;
    z-index: 1001;
    padding-top: 80px;
}

/* Scrollbalken - exakt identisch zum Kurs-Overlay (.kurs-overlay__box in
   kurs-overlay.css), damit beide scrollenden Bereiche der Seite einheitlich
   aussehen. Bewusst hier dupliziert statt einer gemeinsamen Klasse - bei
   aktuell nur diesen 2 Anwendungsfällen lohnt sich eine Abstraktion noch
   nicht, Duplizierung ist bei rein visuellem Styling unkritisch. */
nav {
    scrollbar-width: thin;
    scrollbar-color: #555 var(--color-gray-800);
}

nav::-webkit-scrollbar {
    width: 8px;
}

nav::-webkit-scrollbar-track {
    background: var(--color-gray-800);
    border-radius: 4px;
    margin: 8px 0;
}

nav::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 4px;
}

nav::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

nav.active {
    right: 0;
}

/* ==================== NAV HEADER ==================== */

.nav-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
}

/* ==================== CLOSE MENU BUTTON ==================== */

.close-menu {
    background: none;
    border: none;
    color: #fff;
    font-size: var(--font-size-6xl);
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s, transform 0.3s;
    order: 2;
    margin-left: auto;
}

.close-menu:hover {
    color: var(--color-primary);
    transform: scale(1.2);
}

/* ==================== SOCIAL ICONS IN NAV ==================== */

.social-icons {
    display: flex;
    gap: 0.7rem;
    order: 1;
    align-items: center;
}

/* Navigation Social Icons - Exakt wie Header */
nav .social-icons a {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: none;
    background: none;
    transition: transform 0.3s;
}

nav .social-icons a:hover {
    transform: scale(1.2);
}

nav .social-icons a svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    fill: none;
    transition: stroke 0.3s;
}

nav .social-icons a:hover svg {
    stroke: var(--color-primary);
}

/* ==================== LANGUAGE SWITCHER ==================== */
/* WICHTIG: Vertikaler Trenner zwischen Icons und Switcher! */

.language-switcher-menu {
    display: flex;
    /* Kompromisswert projektweit (vorher 3-stufige Kaskade: 4px Desktop /
       3px ≤768px / 2px ≤480px, siehe Fluid-Design-Audit Kategorie A).
       Unterschied war mit 2-4px optisch kaum wahrnehmbar - bewusst KEIN
       clamp() hier (anders als bei .hero), da der Aufwand für 5 einzeln
       zu wartende Formeln in keinem Verhältnis zum kaum sichtbaren
       Effekt stünde. Stattdessen die bisherige mittlere Stufe (768px-
       Wert) einheitlich für alle Bildschirmgrößen übernommen. */
    gap: 3px;
    align-items: center;
    margin-left: 12px;
    padding-left: 12px;
    
    /* VERTIKALER TRENNER - Gold-Balken */
    border-left: 2px solid rgba(221, 191, 95, 0.5);
}

/* Sprach-Button - Minimalistisch */
.language-switcher-menu .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Ebenfalls Kompromisswert (vorher 6px/10px Desktop, 5px/8px ≤768px,
       4px/7px ≤480px) - gleiche Begründung wie oben. */
    padding: 5px 8px;
    background: transparent;
    color: #ffffff;
    border: none;
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s;
    min-width: 32px;
}

.language-switcher-menu .lang-btn:hover {
    color: var(--color-primary);
    transform: scale(1.2);
}

/* Active: Gold, fetter */
.language-switcher-menu .lang-btn.active {
    color: var(--color-primary);
    background: transparent;
    font-weight: 800;
    transform: scale(1.2);
}

/* ==================== NAV MENU ==================== */

nav ul {
    list-style: none;
    /* Fluid statt starrem 2rem oben/unten (Fluid-Design-Audit Kategorie
       B1, letzter Punkt). Gleiche Formel wie an anderen Stellen mit
       demselben 1rem-2rem-Wertebereich (.aktion-row, .container
       horizontal, .flip-cards gap) - Konsistenz mit dem Rest des
       Projekts. Links/rechts bleibt 0, unverändert. */
    /*padding: 1rem 0;/*clamp(var(--spacing-sm), 4vw, var(--spacing-lg)) 0;*/
	padding-top: 0.5rem;
    padding-bottom: clamp(var(--spacing-sm), 4vw, var(--spacing-lg));
}

nav ul li {
    border-bottom: 1px solid #2a2d32;
}

nav ul li a {
    display: block;
    padding: 1rem 2rem;
    color: #fff;
    text-decoration: none;
    transition: background 0.3s, color 0.3s, font-size 0.2s;
    font-size: var(--font-size-base);
}

nav ul li a:hover {
    background: #2a2d32;
    font-size: var(--font-size-lg);
    color: var(--color-primary);
}

/* ==================== SUBMENU ==================== */

nav ul li ul {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

nav ul li.submenu-open ul {
    max-height: 500px;
}

nav ul li > a {
    position: relative;
}

nav ul li.has-submenu > a::after {
    content: '›';
    position: absolute;
    right: 2rem;
    transition: transform 0.3s;
    font-size: var(--font-size-2xl);
}

nav ul li.has-submenu.submenu-open > a::after {
    transform: rotate(90deg);
}

nav ul li ul li a {
    padding-left: 3rem;
    font-size: var(--font-size-base);
    background: var(--color-gray-800);
}

nav ul li ul li a:hover {
    background: #2a2d32;
}

/* ==================== OVERLAY ==================== */

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.overlay.active {
    opacity: 1;
    visibility: visible;
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 768px) {
    .header-content {
        /* Gleiche Logik wie Desktop (siehe .logo-mark-Kommentar) -
           Header-Höhe bleibt bei 68.4px, nur horizontales Padding
           unterscheidet sich vom Desktop-Wert. */
        padding: 10.65px 1rem 17.75px 1rem;
    }
    
    .header-icons {
        right: 1rem;
    }
    
    nav {
        width: 320px;
    }
    
    .logo-mark {
        height: 40px;
    }
}

/* Sehr kleine Screens */
@media (max-width: 480px) {
    nav {
        width: 100%;
        max-width: 100%;
    }

    /* Logo bleibt mittig (justify-content:center in .header-content), bis
       der Platz neben dem rechten Icon-Bereich (.header-icons, position:
       absolute) eng wird. transform sitzt bewusst auf .logo, NICHT auf
       .header-content: Ein transform auf .header-content (position:
       relative) würde einen neuen Containing Block für alle absolut
       positionierten Nachfahren erzeugen - .header-icons (Social-Icons +
       Burger-Menü) hätte sich dadurch trotz unverändertem "right: 1rem"
       mitverschoben, da sich dessen Bezugsrahmen mitbewegt. Direkt auf
       .logo verschiebt ausschließlich das Logo. clamp() beginnt bei
       genau 0px bei 480px (nahtloser Anschluss, kein Sprung) und wandert
       erst darunter zunehmend nach links, bis -24px bei 320px (Boden). */
    .logo {
        transform: translateX(clamp(-24px, 15vw - 72px, 0px));
    }

    /* .logo:hover setzt normalerweise "transform: scale(1.05)" - als
       Shorthand würde das den translateX-Versatz hier überschreiben statt
       ihn zu ergänzen. Deshalb innerhalb dieser Media Query beide
       Transform-Funktionen explizit kombiniert. */
    .logo:hover {
        transform: translateX(clamp(-24px, 15vw - 72px, 0px)) scale(1.05);
    }
}