/**
 * Navigation Components
 * 
 * Styles for main navigation and footer navigation components
 */

/* Main Navigation */
nav[aria-label="Hauptnavigation"] {
    display: flex;
    align-items: center;
}

nav[aria-label="Hauptnavigation"] menu {
    display: flex;
    gap: var(--space-md, 1rem);
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

nav[aria-label="Hauptnavigation"] menu li {
    margin: 0;
}

nav[aria-label="Hauptnavigation"] menu li a {
    color: var(--text, currentColor);
    text-decoration: none;
    font-weight: 500;
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
    border-radius: var(--radius-md, 0.375rem);
    transition: all var(--duration-default, 0.2s) var(--easing-default, ease);
    display: block;
}

nav[aria-label="Hauptnavigation"] menu li a:hover {
    background: oklch(from var(--bg-alt, #f5f5f5) calc(l + 0.05) c h);
    text-decoration: none;
}

nav[aria-label="Hauptnavigation"] menu li a[aria-current="page"] {
    background: var(--accent, #007bff);
    color: var(--bg, #ffffff);
    font-weight: 600;
}

/* Footer Navigation */
nav[aria-label="Footer Navigation"] {
    margin-bottom: var(--space-md, 1rem);
}

nav[aria-label="Footer Navigation"] menu.footer-nav {
    display: flex;
    gap: var(--space-md, 1rem);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

nav[aria-label="Footer Navigation"] menu.footer-nav li {
    margin: 0;
}

nav[aria-label="Footer Navigation"] menu.footer-nav li a {
    color: var(--muted, #6b7280);
    text-decoration: none;
    font-size: 0.875rem;
    padding: var(--space-xs, 0.25rem) 0;
    transition: color var(--duration-default, 0.2s) var(--easing-default, ease);
}

nav[aria-label="Footer Navigation"] menu.footer-nav li a:hover {
    color: var(--text, currentColor);
    text-decoration: underline;
}

nav[aria-label="Footer Navigation"] menu.footer-nav li a[aria-current="page"] {
    color: var(--text, currentColor);
    font-weight: 600;
    text-decoration: none;
}

/* Responsive */
@media (max-width: 768px) {
    nav[aria-label="Hauptnavigation"] menu {
        flex-direction: column;
        gap: var(--space-sm, 0.5rem);
        align-items: flex-start;
    }

    nav[aria-label="Footer Navigation"] menu.footer-nav {
        flex-direction: column;
        gap: var(--space-sm, 0.5rem);
        align-items: flex-start;
    }
}