/* ============================================================
   nav_menu.css — Menü-Manager Styles
   Einbinden in header.php NACH style.css und report.css:
   <link rel="stylesheet" href="/assets/css/nav_menu.css">

   Enthält:
   - .nav-link-highlight  (hervorgehobener CTA-Link)
   - .nav-tpl-*           (4 Design-Templates)
   - Mobile-Overrides     (Konflikte mit style.css behoben)

   Klassen-Konflikt-Check (gegenüber style.css / report.css):
   ✓ .nav-link-highlight  — neu, kein Konflikt
   ✓ .nav-tpl-*           — neu, kein Konflikt
   ⚠ .nav-link (mobil)    — style.css setzt border-radius:0 global
                             → hier gezielt mit :not() Ausnahme geregelt
   ⚠ .main-nav (mobil)    — style.css setzt background:#fff global
                             → Template-Farben mit höherer Spezifität überschrieben
   ============================================================ */


/* ============================================================
   HERVORGEHOBENER NAV-LINK (highlight)
   Wird gesetzt wenn highlight=1 in menu_header/menu_footer
   ============================================================ */

.nav-link-highlight {
    background: linear-gradient(135deg, #2a4a8a, #1a2f5e);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: 6px !important; /* !important: überschreibt mobile border-radius:0 */
    font-weight: 700;
    transition: opacity 0.15s, transform 0.15s, background 0.15s;
}

.nav-link-highlight:hover {
    background: linear-gradient(135deg, #1a2f5e, #0f1e3d) !important;
    color: #fff !important;
    opacity: 0.92;
    transform: translateY(-1px);
    text-decoration: none;
}

.nav-link-highlight.nav-link-active {
    background: linear-gradient(135deg, #1a2f5e, #0f1e3d) !important;
    color: #fff !important;
}

/* Mobile: Highlight-Button bleibt als Button sichtbar */
@media (max-width: 860px) {
    .nav-link-highlight {
        margin: 6px 16px;               /* Abstand zum Rand im aufgeklappten Menü */
        border-bottom: none !important; /* style.css setzt border-bottom auf .nav-link */
        border-radius: 6px !important;
        text-align: center;
    }
}


/* ============================================================
   DESIGN-TEMPLATE: Standard (default)
   Entspricht dem bestehenden style.css-Design — keine Änderung
   ============================================================ */
/* .nav-tpl-default: keine eigenen Regeln nötig, style.css greift */


/* ============================================================
   DESIGN-TEMPLATE: Dark
   ============================================================ */

.site-header:has(.nav-tpl-dark) {
    background: #0f1e3d;
    border-bottom-color: #1e3a6e;
}

.nav-tpl-dark .nav-link {
    color: #e2e8f0;
}

.nav-tpl-dark .nav-link:hover {
    background: rgba(96, 165, 250, 0.15);
    color: #fff;
}

.nav-tpl-dark .nav-link-active {
    background: rgba(96, 165, 250, 0.2);
    color: #fff;
}

.nav-tpl-dark .nav-link-highlight {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
}

.nav-tpl-dark .nav-link-highlight:hover {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
}

/* Dark-Template: Mobile Dropdown hat auch dunklen Hintergrund */
@media (max-width: 860px) {
    .nav-tpl-dark {
        background: #0f1e3d !important; /* Überschreibt style.css background:#fff */
        border-bottom-color: #1e3a6e !important;
    }
    .nav-tpl-dark .nav-link {
        border-bottom-color: #1e3a6e !important;
        color: #e2e8f0;
    }
    .nav-tpl-dark .nav-link:hover {
        background: rgba(96, 165, 250, 0.15) !important;
    }
}


/* ============================================================
   DESIGN-TEMPLATE: Minimal
   ============================================================ */

.site-header:has(.nav-tpl-minimal) {
    background: #f8faff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.nav-tpl-minimal .nav-link {
    color: #374151;
    font-weight: 500;
}

.nav-tpl-minimal .nav-link:hover {
    background: #eff6ff;
    color: #1a2f5e;
}

.nav-tpl-minimal .nav-link-active {
    background: #e0e7ff;
    color: #1a2f5e;
    font-weight: 600;
}

.nav-tpl-minimal .nav-link-highlight {
    background: #e0e7ff !important;
    color: #1a2f5e !important;
    font-weight: 700;
    border: 1px solid #c7d2fe;
}

.nav-tpl-minimal .nav-link-highlight:hover {
    background: #c7d2fe !important;
    opacity: 1;
}

@media (max-width: 860px) {
    .nav-tpl-minimal {
        background: #f8faff !important;
    }
    .nav-tpl-minimal .nav-link {
        border-bottom-color: #e5e7eb !important;
    }
}


/* ============================================================
   DESIGN-TEMPLATE: Tech
   ============================================================ */

.site-header:has(.nav-tpl-tech) {
    background: #0d1b2a;
    border-bottom-color: #1e3a5f;
    box-shadow: 0 2px 12px rgba(6, 182, 212, 0.08);
}

.nav-tpl-tech .nav-link {
    color: #94a3b8;
    letter-spacing: 0.02em;
    font-size: 13px;
}

.nav-tpl-tech .nav-link:hover {
    background: rgba(6, 182, 212, 0.12);
    color: #06b6d4;
}

.nav-tpl-tech .nav-link-active {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
    font-weight: 700;
}

.nav-tpl-tech .nav-link-highlight {
    background: linear-gradient(135deg, #06b6d4, #0284c7) !important;
    color: #0d1b2a !important;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.nav-tpl-tech .nav-link-highlight:hover {
    background: linear-gradient(135deg, #22d3ee, #06b6d4) !important;
    color: #0d1b2a !important;
    opacity: 1;
}

@media (max-width: 860px) {
    .nav-tpl-tech {
        background: #0d1b2a !important;
        border-bottom-color: #1e3a5f !important;
    }
    .nav-tpl-tech .nav-link {
        border-bottom-color: #1e3a5f !important;
        color: #94a3b8;
    }
    .nav-tpl-tech .nav-link:hover {
        background: rgba(6, 182, 212, 0.12) !important;
        color: #06b6d4;
    }
}


/* ============================================================
   FALLBACK: :has() Browserunterstützung
   :has() wird von allen modernen Browsern unterstützt (≥ 2023).
   Für ältere Browser greift das Template nicht auf site-header,
   nur auf .nav-link-Farben — das ist akzeptabel.
   ============================================================ */


/* ============================================================
   FOOTER — Hervorgehobener Link (highlight)
   ============================================================ */

.footer-nav-highlight {
    background: linear-gradient(135deg, #2a4a8a, #1a2f5e);
    color: #fff !important;
    padding: 4px 12px;
    border-radius: 5px;
    font-weight: 700;
    transition: opacity 0.15s;
}

.footer-nav-highlight:hover {
    opacity: 0.85;
    color: #fff !important;
    text-decoration: none !important;
}

/* ============================================================
   FOOTER — Responsive
   ============================================================ */

@media (max-width: 600px) {
    .footer-nav {
        flex-direction: column;
        gap: 6px;
    }
    .footer-sep {
        display: none;
    }
    .footer-nav-highlight {
        display: inline-block;
        margin-top: 2px;
    }
}