/* Custom styles for MzansiServe */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* Navbar link hover underline (thicker + fade-in) */
nav .nav-link {
    position: relative;
    color: inherit;
    text-decoration: none;
}

nav .nav-link::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 0.35rem;
    height: 3px; /* thickness of underline */
    background-color: #f4c21b; /* MzansiServe accent yellow */
    opacity: 0;
    transform: scaleX(0.3);
    transform-origin: center;
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}

nav .nav-link:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Navbar background gradient (blue to magenta) */
.mzansi-navbar {
    background: linear-gradient(to right, #4a8ff0 0%, #7a5fc2 50%, #c2187a 100%);
}

/* Footer background gradient (blue to magenta) */
.mzansi-footer {
    background: linear-gradient(to right, #4a8ff0 0%, #7a5fc2 50%, #c2187a 100%);
}

/* Navbar link layout: full height, equal width, inline display */
nav .nav-links-container {
    display: flex;
    height: 100%;
    flex-wrap: nowrap;
}

nav .nav-links-container > * {
    flex: 1;
    display: inline-flex;
}

nav .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 1rem;
    white-space: nowrap;
}


/* Logo Styles - Same height as nav bar (h-16 = 64px) */
.nav-logo {
    height: 64px;
    width: auto;
    max-height: 64px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    flex-shrink: 0;
}

/* Responsive Navigation Styles */
@media (max-width: 767px) {
    /* Hide desktop navigation on mobile */
    nav .nav-links-container {
        display: none !important;
    }
    
    /* Adjust logo size on mobile - same height as mobile nav */
    .nav-logo {
        height: 64px !important;
        max-height: 64px !important;
        width: auto !important;
    }
    
    /* Mobile menu container */
    .mobile-menu {
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        background: linear-gradient(to right, #4a8ff0 0%, #7a5fc2 50%, #c2187a 100%);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        z-index: 40;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-menu.active {
        max-height: 100vh;
        overflow-y: auto;
    }
    
    /* Mobile nav links */
    .mobile-nav-link {
        display: block;
        padding: 1rem 1.5rem;
        color: white;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: background-color 0.2s;
    }
    
    .mobile-nav-link:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }
    
    .mobile-nav-section {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Desktop: Hide mobile menu and show desktop navigation */
@media (min-width: 768px) {
    .mobile-menu {
        display: none !important;
    }
    
    /* Hide hamburger button on desktop */
    #hamburgerBtn {
        display: none !important;
    }
    
    /* Ensure desktop navigation is visible */
    nav .nav-links-container {
        display: flex !important;
    }
}