/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

.navbar {
background-color: rgba(245, 243, 239, 0.85);
padding: 0;
margin: 0; /* Ensure no margin */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
font-size: 1.25rem;
font-family: 'Poppins', sans-serif;
height: 60px;
box-sizing: border-box;
line-height: 60px;
}

.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px;
height: 100%; /* Take full height of navbar */
margin: 0; /* Remove any margin */
}

/* Updated logo styles for image */
.logo {
display: flex;
align-items: center;
color: #1a3659;
text-decoration: none;
height: 60px; /* Match navbar height */
margin: 0; /* Remove any margin */
padding: 0; /* Remove any padding */
}

.logo-image {
height: 50px;
width: auto;
margin: 0; /* Explicitly remove margins */
padding: 0; /* Explicitly remove padding */
vertical-align: middle; /* Prevent baseline alignment issues */
display: block; /* Remove inline spacing */
transition: transform 0.3s ease;
}

.nav-links-div {
margin: 0; /* Remove any margin */
padding: 0; /* Remove any padding */
height: 100%; /* Take full height */
display: flex;
align-items: center;
}

.nav-links {
display: flex;
gap: 2rem;
margin: 0; /* Remove any margin */
padding: 0; /* Remove any padding */
align-items: center;
}

.nav-links a {
margin-left: 24px;
text-decoration: none;
color: #1a3659;
transition: color 0.3s ease;
line-height: 1; /* Reset line-height for links */
}

.nav-links a:hover {
color: #7d1f42;
transform: scale(1.05);
transition: transform 0.2s ease, color 0.2s ease;
}

.menu {
display: none;
border: none;
font-size: 1.8rem;
cursor: pointer;
color: #1a3659;
margin: 0;
padding: 0;
background: none;
}

@media (max-width: 1000px) {
    .menu {
        display: block;
        background: none;
    }

    .nav-links.show {
        top: 60px;
        display: flex;
        animation: slideDown 0.3s ease-out forwards;
        flex-direction: column;
        position: fixed;
        left: 0;
        width: 100%;
        background-color: rgba(245, 243, 239, 0.98);
        padding: 1rem;
        gap: 1.5rem;
        z-index: 1001;
        border: none;
    }

    .nav-links a {
        margin-left: 10px !important;
    }

    .nav-links a:hover {
        transform-origin: left center;
    }

    .nav-links a.active {
        position: relative;
        font-weight: 580;
        color: #7d1f42;
    }

    .nav-links a.active::after {
        content: "⮨";
        position: absolute;
        top: 50%;
        margin-left: 4px;
        transform: translateY(-50%);
        font-size: 1rem;
        color: #7d1f42;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .nav-links.show a.active::after,
    .nav-links a.active:hover::after {
        opacity: 1;
    }

    @keyframes slideDown {
        from {
            transform: translateY(-20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
}