/* ========================================================================
   Custom Navigation Improvements
   ======================================================================== */

/* Enhanced Navbar Container */
.tm-navbar {
    background: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Logo/Brand Area Enhancement */
.tm-navbar .uk-panel {
    transition: transform 0.3s ease;
}

.tm-navbar .uk-panel:hover {
    transform: scale(1.05);
}

/* Navigation Links - Base State */
.uk-navbar-nav > li > a {
    height: 50px !important;
    line-height: 50px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    transition: all 0.3s ease;
    position: relative;
    letter-spacing: 0.3px;
}

/* Remove default hover background, add custom effect */
.uk-navbar-nav > li:hover > a,
.uk-navbar-nav > li > a:focus {
    background-color: transparent !important;
    color: #d80000 !important;
}

/* Modern underline effect on hover */
.uk-navbar-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background: #d80000;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.uk-navbar-nav > li:hover > a::after,
.uk-navbar-nav > li > a:focus::after {
    width: 80%;
}

/* Active State Enhancement */
.uk-navbar-nav > li.uk-active > a {
    background-color: #d80000 !important;
    color: #ffffff !important;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(216, 0, 0, 0.3);
}

.uk-navbar-nav > li.uk-active > a::after {
    display: none;
}

/* Better spacing between nav items */
.uk-navbar-nav > li {
    margin: 0 2px;
}

/* Mobile Menu Toggle Enhancement */
.uk-navbar-toggle {
    color: #d80000 !important;
    font-size: 24px !important;
    transition: all 0.3s ease;
}

.uk-navbar-toggle:hover,
.uk-navbar-toggle:focus {
    color: #a00000 !important;
    transform: scale(1.1);
}

/* Mobile Offcanvas Menu Improvements */
.uk-offcanvas-bar {
    background: #2c2c2c !important;
}

.uk-nav-offcanvas > li > a {
    color: #ffffff !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    font-size: 14px !important;
}

.uk-nav-offcanvas > li:hover > a,
.uk-nav-offcanvas > li.uk-active > a {
    background: #d80000 !important;
    padding-left: 30px !important;
}

/* Responsive adjustments */
@media (max-width: 959px) {
    .uk-navbar-nav > li > a {
        padding: 0 12px !important;
        font-size: 12px !important;
    }
}

@media (min-width: 1220px) {
    .uk-navbar-nav > li > a {
        padding: 0 25px !important;
        font-size: 14px !important;
    }
}

/* Smooth scrolling for the entire page */
html {
    scroll-behavior: smooth;
}