/* NAV */
/* SMART STICKY NAV */
#main-nav {
    position: fixed; /* Keep it anchored */
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95); /* Slight transparency for a modern feel */
    backdrop-filter: blur(10px); /* Premium frosty look */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 9999; /* Ensure it stays above everything */
    padding: 1.25rem 0;
    
    /* Initially visible */
    transform: translateY(0);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}

/* THE HIDDEN STATE (Triggered when scrolling down) */
#main-nav.nav-hidden {
    transform: translateY(-100%);
}

/* THE HOVER OVERRIDE (Forced visibility) */
#main-nav:hover {
    transform: translateY(0) !important;
}

/* Adjust the Hero section so it doesn't hide behind the fixed nav on page load */
#hero {
    margin-top: 5rem; /* Matches the nav height */
}

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    /* 
       Old: 3rem (48px)
       New: 4.5rem (72px) - This is a significant increase. 
       Adjust this up or down in 0.25rem increments to find your 'Sweet Spot'.
    */
    height: 6.5rem; 
    
    width: auto; /* Always keep this auto to prevent squishing */
    display: block;
    
    /* 
       PRO TIP: Large logos sometimes need a tiny bit of 
       top margin to look perfectly centered with the text 
    */
    margin-top: -0.25rem; 
    
    transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: .95;
}

/* 
   CEO'S ADDITION: The 'Shrink on Scroll' 
   If the logo is big, it might be distracting when sticky. 
   We can shrink it slightly when the user is scrolling.
*/
#main-nav.sticky-active .logo-img {
    height: 3.5rem; /* Shrinks slightly to save screen space */
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    /* 40px */
}

.nav-links {
    display: flex;
    gap: 1.875rem;
    align-items: center;
    /* 30px */
}

.nav-links a {
    font-weight: 500;
    font-size: 1.10rem;
}

.nav-links a:hover {
    color: var(--red);
    transition: color 0.2s ease;
}

/* 1. CONTAINER LOGIC */
.has-dropdown {
    position: relative; /* Anchor for the absolute menu */
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.3125rem; /* 5px */
    padding: 0.5rem 0;
}

.nav-icon {
    width: 0.875rem !important; /* 14px */
    height: 0.875rem !important;
    stroke-width: 2.5px;
    transition: transform 0.3s ease;
    color: var(--navy);
}

/* 2. DROPDOWN BOX STYLING */
.dropdown-menu {
    position: absolute;
    top: 100%; /* Sits exactly at the bottom of the nav bar */
    left: -1rem; /* Slight offset for visual balance */
    width: 12rem; /* 192px */
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 1rem 0;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.08); /* Soft clinical shadow */
    border: 1px solid rgba(0, 0, 0, 0.03);
    
    /* INITIAL HIDDEN STATE */
    opacity: 0;
    visibility: hidden;
    transform: translateY(1rem); /* Slides up into place */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 3. SHOW ON HOVER */
.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Rotate Chevron on Hover */
.has-dropdown:hover .nav-icon {
    transform: rotate(180deg);
    color: var(--red);
}

/* 4. DROPDOWN ITEM STYLING */
.dropdown-menu li a {
    display: block;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem; /* 14px */
    font-weight: 500;
    color: var(--navy);
    transition: all 0.2s ease;
}

.dropdown-menu li a:hover {
    background: var(--sm-light-grey); /* #F8F9FA */
    color: var(--red);
    padding-left: 1.75rem; /* Subtle 'push' effect on hover */
}/* 2. DROPDOWN BOX STYLING */

.btn-pill {
    background: var(--red);
    color: #fff !important;
    padding: 0.75rem 1.75rem;
    border-radius: 0.375rem;
    font-weight: 700;
    
    /* THE FIX: Add the border here first so the size never changes */
    border: 1px solid var(--red); 
    
    /* Transition everything for a smooth feel */
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-pill:hover {
    /* Now we just swap the colors */
    background: transparent; 
    color: var(--red) !important;
    /* The border is already there, we just ensure it stays the right color */
    border-color: var(--red); 
}

/* --- THE MISSING HAMBURGER STYLES --- */

#mobile-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 10001; /* Above the glass panel */
    position: relative;
}

#mobile-toggle i {
    width: 2rem !important;
    height: 2rem !important;
    stroke: var(--navy);
    stroke-width: 2px;
}

.hidden { display: none !important; }

/* --- MOBILE RESPONSIVE CALIBRATION --- */

@media (max-width: 64rem) { /* 1024px */
    #mobile-toggle {
        display: block; /* Show hamburger on mobile */
    }

    .nav-right {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        
        /* THE GLASS FIX */
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 4rem 2rem;
        gap: 3rem;
        
        /* Initial state: Hidden to the right */
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 10000;
    }

    /* Open State */
    .nav-right.active {
        transform: translateX(0);
    }

    .nav-links {
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }

    .nav-links a {
        font-size: 1.5rem; /* Larger for touch targets */
        font-weight: 700;
    }

    /* Dropdown adjustment for mobile */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        display: none; /* Initially hidden */
        width: 100%;
        text-align: center;
    }

    .has-dropdown.active .dropdown-menu {
        display: block;
    }
}


@media (max-width: 48rem) { /* 768px - Mobile */
    
    /* 1. THE LOGO: Smaller but still authoritative */
    .logo-img {
        height: 4.25rem !important; /* THE FIX: Scaled down from 6.5rem */
        transition: height 0.3s ease;
    }

    /* 2. THE HEADER PADDING: Pulls the menu and logo toward the center */
    .nav-flex {
        padding: 0 2rem; /* THE FIX: Increased side padding to push items inward */
    }

    /* 3. THE TOGGLE BUTTON: Better positioning */
    #mobile-toggle {
        display: block;
        margin-right: 0.5rem; /* THE FIX: Moves it away from the absolute edge */
    }

    /* 4. THE GLASS MENU CONTENT: Professional Centering */
    .nav-right {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        
        /* Premium Transparent Glass */
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        transform: translateX(100%);
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Ensure the mobile links are centered and neat */
    .nav-links {
        text-align: center;
    }

    .nav-links a {
        font-size: 1.75rem; /* Larger for easy tapping */
        font-weight: 800;
        color: var(--navy);
    }

    .dropdown-menu {
        text-align: center;
        margin-top: 1rem;
    }

    .dropdown-menu li a {
        font-size: 1.25rem;
        color: var(--grey-label);
        font-weight: 500;
    }
}