﻿/* =========================================================
   NAVBAR THEME
   ========================================================= */
:root {
    --kb-navbar-border: rgba(0, 0, 0, 0.08);
    --kb-navbar-brand: var(--kb-text-primary);
    --kb-navbar-link: var(--kb-text-primary);
    --kb-navbar-link-hover: var(--kb-color-primary);
    --kb-navbar-muted: var(--kb-text-secondary);
    --kb-dropdown-bg: #ffffff;
    --kb-dropdown-border: rgba(0, 0, 0, 0.08);
    --kb-dropdown-item: var(--kb-text-primary);
    --kb-dropdown-item-hover-bg: rgba(13, 110, 253, 0.06);
    --kb-offcanvas-bg: var(--kb-surface-elevated);
    --kb-offcanvas-border: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] {
    --kb-navbar-border: rgba(255, 255, 255, 0.08);
    --kb-navbar-brand: var(--kb-text-primary);
    --kb-navbar-link: rgba(255, 255, 255, 0.86);
    --kb-navbar-link-hover: rgba(255, 255, 255, 1);
    --kb-navbar-muted: var(--kb-text-secondary);
    --kb-dropdown-bg: #1b1f24;
    --kb-dropdown-border: rgba(255, 255, 255, 0.08);
    --kb-dropdown-item: rgba(255, 255, 255, 0.92);
    --kb-dropdown-item-hover-bg: rgba(255, 255, 255, 0.06);
    --kb-offcanvas-bg: #1b1f24;
    --kb-offcanvas-border: rgba(255, 255, 255, 0.08);
}

.kb-navbar {
    backdrop-filter: saturate(180%) blur(10px);
    background: var(--kb-surface-navbar) !important;
}

.kb-navbar-brand-name {
    color: var(--kb-navbar-brand);
    text-transform: capitalize;
}

.kb-brand-logo img {
    max-width: 50px;
}

[data-theme="dark"] .kb-brand-logo img {
    filter: brightness(1.05);
}

.kb-navbar-theme {
    border-bottom: 1px solid var(--kb-navbar-border);
}

.kb-navbar-brand {
    color: var(--kb-navbar-brand) !important;
}

[data-theme="dark"] .kb-navbar-brand {
    color: var(--kb-navbar-brand) !important;
}

.kb-navbar-muted {
    color: var(--kb-navbar-muted) !important;
}

.kb-nav-link {
    color: var(--kb-navbar-link);
    border-radius: 10px;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
    transition: color .15s ease, background-color .15s ease;
    text-transform: uppercase;
}

    .kb-nav-link:hover,
    .kb-nav-link:focus {
        color: var(--kb-btn-primary-soft-color);
    }

[data-theme="dark"] .kb-nav-link:hover,
[data-theme="dark"] .kb-nav-link:focus {
    color: var(--kb-btn-primary-soft-color);
    
}

.kb-btn-primary-soft {
    background: var(--kb-btn-primary-soft-bg);
    color: var(--kb-btn-primary-soft-color);
    border: 1px solid var(--kb-btn-primary-soft-border);
    border-radius: 999px;
    padding: .55rem .95rem;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}

    .kb-btn-primary-soft:hover,
    .kb-btn-primary-soft:focus {
        background: var(--kb-btn-primary-soft-hover-bg);
        color: var(--kb-btn-primary-soft-color);
        transform: translateY(-1px);
    }

.kb-dropdown-menu {
    background: var(--kb-dropdown-bg);
    border: 1px solid var(--kb-dropdown-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] .kb-dropdown-menu {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.kb-dropdown-item {
    color: var(--kb-dropdown-item);
}

    .kb-dropdown-item:hover,
    .kb-dropdown-item:focus {
        color: var(--kb-dropdown-item);
        background: var(--kb-dropdown-item-hover-bg);
    }

.kb-offcanvas {
    background: var(--kb-offcanvas-bg);
    color: var(--kb-text-primary);
}

.kb-offcanvas-header {
    border-bottom: 1px solid var(--kb-offcanvas-border);
}

.kb-offcanvas-footer {
    border-top: 1px solid var(--kb-offcanvas-border);
}

.kb-offcanvas-close {
    filter: none;
}

[data-theme="dark"] .kb-offcanvas-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.kb-navbar-toggler {
    border-color: var(--kb-navbar-border);
}

    .kb-navbar-toggler .navbar-toggler-icon {
        filter: none !important;
    }

    [data-theme="dark"] .kb-navbar-toggler .navbar-toggler-icon {
        filter: invert(1) grayscale(100%) brightness(200%) !important;
    }