/* Sopify_Refactored/css/components/navbar.css */

header {
    background: var(--navbar-bg);
    /* backdrop-filter: blur(var(--navbar-glass-blur)); REMOVED or significantly reduced if using slightly transparent bg */
    /* -webkit-backdrop-filter: blur(var(--navbar-glass-blur)); REMOVED */
    border-bottom: 1px solid var(--navbar-border-color); /* Bottom border */
    box-shadow: var(--navbar-shadow-standard); /* Standard bottom shadow */
    
    position: fixed;
    width: 100%; /* Full width */
    top: 0;      /* At the very top */
    left: 0;     /* At the very left */
    z-index: 1000;
    border-radius: var(--border-radius-navbar); /* Likely 0px now */
    
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* If using a slightly transparent navbar background and want more blur:
header {
    background: rgba(255, 255, 255, 0.95); // Example
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    // ... rest of styles
}
*/

nav.container { /* Apply container constraints to the nav content, not the header bar */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Padding is now effectively controlled by the .container class from layout.css */
    /* min-height: var(--header-height-approx); /* Ensure nav content respects header height */
    height: var(--header-height-approx); /* Set fixed height for the nav content area */
    /* padding: 0.9rem 1.8rem; Removed, .container handles horizontal padding */
}

.logo {
    font-size: var(--font-size-logo); /* 1.8rem from base.css */
    font-weight: bold;
    color: var(--color-primary);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 1.8rem;
    align-items: center; /* Vertically align links with logo and button */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color-dark);
    font-weight: 500;
    font-size: var(--font-size-nav-link); /* var(--font-size-sm) from base.css */
    padding: 0.3rem 0; 
    transition: color 0.3s, opacity 0.3s;
    opacity: 0.9;
}

.nav-links a:hover {
    color: var(--color-primary);
    opacity: 1;
}

/* Contact button styling (inherits from buttons.css) */
/* If specific overrides for navbar context:
nav .contact-btn {
    padding: 0.6rem 1.2rem;
    font-size: var(--font-size-xs);
}
*/

/* Responsive Navbar */
@media (max-width: 768px) {
    /* header might not need width/left/top changes anymore if it's already full width */
    
    nav.container {
        /* Padding within the container for mobile */
        /* padding: 0.7rem var(--container-padding); Already handled by .container */
        height: calc(var(--header-height-approx) - 10px); /* Slightly shorter on mobile */
    }

    .logo {
        font-size: 1.6rem; /* Slightly smaller logo on mobile */
    }

    .nav-links {
        display: none; /* Hide for hamburger menu - IMPLEMENT HAMBURGER SEPARATELY */
    }
    
    /* Adjust contact button for mobile if it's visible outside hamburger */
    nav .contact-btn {
        padding: 0.5rem 1rem;
        font-size: var(--font-size-xs);
    }
}