header {
    position: sticky; /* Makes the header "stick" to the top on scroll */
    top: 0;
    z-index: 100;
    padding: 1rem; 
}

/* * UPDATED: Replaced old .glass-header styles 
 * with styles from .switcher
*/
nav.glass-header {
    /* --- Basic Layout --- */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 900px; /* Constrain the header width */
    margin: 0 auto; /* Center the header */
    height: 70px;
    box-sizing: border-box;
    padding: 8px 2rem; /* Adjusted padding */
    border-radius: 99em;

    /* --- NEW: Apple Glass Effect --- */
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    /* Use the new #switcher filter */
    backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) url(#switcher) saturate(var(--saturation));
    
    /* This is the complex shadow from the Apple example */
    box-shadow: inset 0 0 0 1px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 10%),
          transparent
        ),
      inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
            calc(var(--glass-reflex-light) * 90%), transparent),
      inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
            calc(var(--glass-reflex-light) * 80%), transparent),
      inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
            calc(var(--glass-reflex-light) * 60%), transparent),
      inset -0.3px -1px 4px 0px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
          transparent
        ),
      inset -1.5px 2.5px 0px -2px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
          transparent
        ),
      inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
            calc(var(--glass-reflex-dark) * 20%), transparent),
      inset 2px -6.5px 1px -4px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
          transparent
        ),
      0px 1px 5px 0px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
          transparent
        ),
      0px 6px 16px 0px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
          transparent
        );
    transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
      box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

/* --- Styling for the links and logo --- */
/* 1. REPLACE your old .logo rule with this */
.logo {
    text-decoration: none;
    position: relative;
    z-index: 2;
    
    /* These ensure it's a container that can size its child */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. ADD this new rule for the SVG itself */
.logo svg {
    height: 45px;  /* Set the height you want */
    width: 45px;   /* Set the width you want */
    display: block;
    filter: drop-shadow(0 0 5px #03d5ff);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Space between links */
    /* NEW: Required for positioning the selector */
    position: relative;
    height: 100%;
}
.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    
    /* NEW: Sizing and stacking context */
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 0.5rem; /* Add some horizontal padding */
    position: relative;
    z-index: 2; /* Ensures links are ON TOP of the selector */
    transition: color 0.3s ease;
}

.nav-links a.nav-link-active {
    color: var(--c-action) !important;
}

.nav-links a svg {
    width: 24px;  /* You can change this size */
    height: 24px; /* You can change this size */
    transition: fill 0.3s ease;
}

/* --- Hover effect for the SVG icon --- */
.nav-links a:hover svg {
    color: var(--c-action);
}

/* NEW: Style for the moving selector */
.nav-selector {
    position: absolute;
    left: 0;
    top: 0.35rem; /* Matches the .switcher::after style */
    height: calc(100% - 10px); /* Matches the .switcher::after style */
    border-radius: 99em;
    z-index: 1; /* Sits behind links, above nav background */
    
    /* NEW: Style from .switcher::after */
    background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
    box-shadow: inset 0 0 0 1px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 10%),
          transparent
        ),
      inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light)
            calc(var(--glass-reflex-light) * 90%), transparent),
      inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light)
            calc(var(--glass-reflex-light) * 80%), transparent),
      inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light)
            calc(var(--glass-reflex-light) * 60%), transparent),
      inset -1px 2px 3px -1px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
          transparent
        ),
      inset 0px -4px 1px -2px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
          transparent
        ),
      0px 3px 6px 0px
        color-mix(
          in srgb,
          var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
          transparent
        );
}

















/* --- Add this entire block to the end of header.css --- */
/* --- (Replacing any previous @media queries) --- */

/* --- Mobile Navigation Toggle Button --- */
.mobile-nav-toggle {
    display: none; /* Hidden on desktop by default */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 1001;
}

.mobile-nav-toggle svg {
    color: var(--c-light);
    width: 28px;
    height: 28px;
}

.mobile-nav-toggle .icon-close {
    display: none;
}

/* --- State when menu is open --- */
.mobile-nav-toggle[aria-expanded="true"] .icon-hamburger {
    display: none;
}

.mobile-nav-toggle[aria-expanded="true"] .icon-close {
    display: block;
}


/* --- Mobile & Tablet Styles --- */
@media (max-width: 820px) {

    /* --- Anchor the dropdown to the header bar --- */
    nav.glass-header {
        position: relative;
        height: 60px;
        padding: 8px 1rem;
        width: 95%;
    }

    .logo svg {
        height: 35px; /* Smaller logo */
        width: 35px;
    }

    /* --- Show the hamburger --- */
    .mobile-nav-toggle {
        display: block;
    }

    /* --- Style the new dropdown menu --- */
    /* REPLACE the .nav-links rule inside your @media (max-width: 820px) block */

.nav-links {
    position: absolute;
    top: calc(100% + 10px); /* 10px below the header */
    right: 0; /* Align to the right */
    
    width: 300px; /* Set a width for the dropdown */
    height: auto; /* Auto height */
    
    /* --- START: UPDATED GLASS EFFECT --- */
    /* Use the dark background color with 85% opacity */
    background-color: color-mix(in srgb, var(--c-bg) 85%, transparent); 
    
    /* Increased blur for a better effect on the dark background */
    backdrop-filter: blur(12px) url(#switcher) saturate(var(--saturation)); 
    -webkit-backdrop-filter: blur(12px) url(#switcher) saturate(var(--saturation)); 
    /* --- END: UPDATED GLASS EFFECT --- */

    /* Use the same shadow as the header */
    box-shadow: inset 0 0 0 1px
        color-mix(
          in srgb,
          var(--c-light) calc(var(--glass-reflex-light) * 10%),
          transparent
        ),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light)
              calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light)
              calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light)
              calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px
          color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
            transparent
          ),
        inset -1.5px 2.5px 0px -2px
          color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
            transparent
          ),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark)
              calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px
          color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent
          ),
        0px 1px 5px 0px
          color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent
          ),
        0px 6px 16px 0px
          color-mix(
            in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
            transparent
          );

      /* Layout */
      border-radius: 24px; /* Rounded corners */
      padding: 1rem;
      flex-direction: column;
      align-items: flex-start; /* Align links to the left */
      gap: 0.5rem; /* Tighter gap */
      z-index: 1000;
      
      /* --- Animation (Hidden by default) --- */
      visibility: hidden;
      opacity: 0;
      transform: translateY(-10px) scale(0.95);
      transform-origin: top right;
      transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
  }

    /* --- Show the mobile menu when open --- */
    .nav-links.is-open {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Hide the desktop pill selector */
    .nav-selector {
        display: none;
    }

    /* --- Restyle links for the mobile menu --- */
    .nav-links a {
        font-size: 1.1rem; /* Standard dropdown font size */
        font-weight: 600;
        font-family: 'Lato', sans-serif;
        padding: 0.75rem 0.5rem;
        height: auto; /* Override desktop height */
        width: 100%; /* Make links fill the dropdown width */
        border-radius: 8px;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .nav-links a:hover {
        background-color: color-mix(in srgb, var(--c-light) 10%, transparent);
        color: var(--c-action);
    }

    /* --- Style the Resume link --- */
    .nav-links a[href="resume.html"] {
        display: flex;
        align-items: center;
        gap: 0.75rem; /* Space between text and icon */
    }

    .nav-links a[href="resume.html"] span {
        display: inline; /* Show the "Resume" text */
    }

    .nav-links a svg {
        width: 22px; /* Standard icon size */
        height: 22px;
    }
}