﻿.nav-menu {
    display: flex;
    justify-content: center; /* Horizontally centers links */
    align-items: center;
    gap: 40px; /* Balanced spacing between links */
    padding: 25px 0; /* Vertical padding for breathing room */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.menu-link {
    color: #333333; /* Dark grey */
    font-size: 18px; /* Readable size */
    font-weight: 700; /* Bold for emphasis */
    font-family: 'Arial', sans-serif; /* Matches cottage rules */
    text-decoration: none; /* No default underline */
    transition: color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
    text-align: center;
}

    .menu-link:hover {
        color: #555555; /* Slightly lighter grey on hover */
        transform: scale(1.05); /* Subtle zoom for interactivity */
    }

    .menu-link.active {
        color: #0026ff; /* Green for active link to tie into app theme */
        font-weight: 700; /* Maintain bold */
        text-decoration: underline; /* Underline active link */
    }

/* Responsive adjustments */
@media screen and (max-width: 600px) {
    .nav-menu {
        gap: 20px;
        padding: 15px 0;
        flex-direction: column; /* Stack links vertically on mobile */
    }

    .menu-link {
        font-size: 16px; /* Slightly smaller for mobile */
    }
}
