/*
 * ContentKit Navigation Component Styles
 * 
 * Styles for the site navigation bar.
 * Requires: _variables.css (or main.css) to be loaded first for CSS custom properties.
 * 
 * Usage: <link rel="stylesheet" href="{% static 'css/components/_navbar.css' %}">
 */

.navbar {
    background: var(--bg-secondary, #16213e) !important;
    border-bottom: 1px solid var(--border-color, #374151);
    padding: var(--spacing-md, 1rem) 0;
}

.navbar-brand {
    font-family: var(--font-family-heading, 'Atkinson Hyperlegible', system-ui, sans-serif);
    font-weight: 700;
    font-size: var(--font-size-xl, 1.25rem);
    color: var(--color-primary, #e67e22) !important;
}

.navbar-nav .nav-link {
    color: var(--text-secondary, #cbd5e1) !important;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem) !important;
    border-radius: var(--radius-md, 0.5rem);
    transition: all var(--transition-fast, 150ms ease);
}

.navbar-nav .nav-link:hover {
    color: var(--text-primary, #f8f9fa) !important;
    background: var(--bg-tertiary, #0f3460);
}

.navbar-nav .nav-link.active {
    color: var(--color-primary, #e67e22) !important;
}

.navbar-toggler {
    border-color: var(--border-color, #374151);
    padding: var(--spacing-sm, 0.5rem);
}

/* Dark mode toggler icon (default) */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(248, 249, 250, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Light mode toggler icon */
[data-theme="light"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(26, 26, 46, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Light theme navbar overrides - ensure dark text on light background */
[data-theme="light"] .navbar {
    background: var(--bg-secondary, #f8f9fa) !important;
}

[data-theme="light"] .navbar-nav .nav-link {
    color: var(--text-secondary, #4a5568) !important;
}

[data-theme="light"] .navbar-nav .nav-link:hover {
    color: var(--text-primary, #1a1a2e) !important;
    background: var(--bg-tertiary, #e9ecef);
}

[data-theme="light"] .navbar-nav .nav-link.active {
    color: var(--color-primary, #d35400) !important;
}

[data-theme="light"] .navbar-brand {
    color: var(--color-primary, #d35400) !important;
}

[data-theme="light"] .navbar-toggler {
    border-color: var(--border-color, #e2e8f0);
}

/* Search form in navbar */
.navbar .form-control {
    background: var(--bg-input, #2d3748);
    border-color: var(--border-color, #374151);
    color: var(--text-primary, #f8f9fa);
}

.navbar .form-control::placeholder {
    color: var(--text-muted, #94a3b8);
}

.navbar .form-control:focus {
    background: var(--bg-input, #2d3748);
    border-color: var(--color-primary, #e67e22);
    color: var(--text-primary, #f8f9fa);
    box-shadow: var(--focus-ring, 0 0 0 3px rgba(230, 126, 34, 0.5));
}

/* Light mode search input */
[data-theme="light"] .navbar .form-control {
    background: var(--bg-input, #ffffff);
    color: var(--text-primary, #1a1a2e);
}

/* Navbar buttons */
.navbar .btn-outline-primary {
    color: var(--color-primary, #e67e22);
    border-color: var(--color-primary, #e67e22);
}

.navbar .btn-outline-primary:hover {
    background: var(--color-primary, #e67e22);
    border-color: var(--color-primary, #e67e22);
    color: var(--text-inverse, #1a1a2e);
}

.navbar .btn-outline-secondary {
    color: var(--text-secondary, #cbd5e1);
    border-color: var(--border-color, #374151);
}

.navbar .btn-outline-secondary:hover {
    background: var(--bg-tertiary, #0f3460);
    border-color: var(--border-light, #4b5563);
    color: var(--text-primary, #f8f9fa);
}