/* ================================================== */
/* ==      HEADER BAR & NAVIGATION STYLES          == */
/* ================================================== */

.header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    z-index: 1000; 
    padding: 15px 0; 
   background: rgba(0, 0, 0, 0.00); /* Commented out for the new one */
    backdrop-filter: blur(0px); /* <--- DISABLED */
    background-color: rgba(11, 19, 43, 0.0); /* <--- ADDED cheap fallback */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
    transition: all 0.3s ease; 
}
/* ...and change them to this */
.header:hover { backdrop-filter: blur(15px); } /* <--- DISABLED */

.header.scrolled {
    background: rgba(11, 19, 43, 0.05);
    backdrop-filter: blur(0px); /* <--- DISABLED */
    background-color: rgba(11, 19, 43, 0.0); /* <--- ADDED cheap fallback */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative; /* <-- ADD THIS LINE */
}

/* ================================================================= */
/* ==   LOGO LAYOUT & SIZING (NO VISUAL STYLES)                   == */
/* ================================================================= */

.header .logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 50px; /* DESKTOP SIZE */
    width: auto;

    /* ▼▼▼ THE FIXES ARE HERE ▼▼▼ */

    /* 
       TRICK 1: Force onto its own rendering layer (the "magic bullet").
       This often switches the browser to a more advanced anti-aliasing engine.
       It hints that the element might be animated, prompting better handling.
    */
    transform: translateZ(0);
    will-change: transform; /* Reinforces the hint for modern browsers */
    
    /* 
       TRICK 2: The Outline Hack.
       Applying a transparent outline can subtly change the element's bounding box,
       forcing the browser to recalculate and often improve the anti-aliasing
       on the edges of the SVG content inside.
    */
    outline: 1px solid transparent;

    /* 
       TRICK 3 (Optional but good): Prevent sub-pixel rendering.
       This can sometimes help by nudging the element to align with the
       pixel grid, but the translateZ(0) trick is usually more effective.
       You can uncomment this if the first two tricks aren't enough.
    */
    /* backface-visibility: hidden; */
}

/* --- This rule makes the SVG fill its container --- */
.header .logo-svg {
    display: block;
    height: 100%;
    width: auto;
}

/* ==================================================================== */
/* ==   SVG CRISPNESS FIX: APPLYING A DEFINING STROKE (USER IDEA)    == */
/* ==================================================================== */

/*
  This is the key. We target the SVG paths inside the header and apply
  a thin, solid-color stroke. This forces the browser to render a hard
  edge, eliminating anti-aliasing artifacts.
*/
.header .logo-svg .apx-mark-fill,
.header .logo-svg .instinct-text {
    /* 
       THE STROKE COLOR: 
       A dark color like quantum-blue provides a sharp "ink line".
       You could also use a light color like 'var(--starlight)' for a "halo" effect.
    */
    stroke: currentColor;;

    /* 
       THE STROKE WIDTH:
       This value is in the SVG's coordinate system. It needs to be a
       small number. '2' or '3' is usually perfect for a 720px wide viewBox.
       It will appear extremely thin when scaled down.
    */
    stroke-width: 2.5;

    /* These ensure corners and line ends are smooth */
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* ===================================================================== */
/* ==   REMOVED SECTIONS                                              == */
/* ===================================================================== */
/*
    ALL of the old ".header .logo-svg .logo-paths", ".edge-effects", etc.
    rules have been DELETED from this file. Those visual styles are now
    correctly handled by the <style> block inside your self-contained
    logo.svg file. This prevents conflicts and makes the system modular.
*/
/* ===================================================================== */


/* ============================================================ */
/* ==   MOBILE OVERRIDE (Layout Only)                        == */
/* ============================================================ */
@media (max-width: 768px) {

    /* --- Adjust container size for mobile layout --- */
    .header .logo-wrapper {
        height: 40px; 
    }

    /* 
       The old mobile override that changed the logo's fill and stroke
       has been DELETED. If you want a different look on mobile, you would
       call loadLogo with the 'logo-variant-apple-lite' class instead.
    */
}


/* ================================================== */
/* ==      NAVIGATION & OTHER HEADER STYLES        == */
/* ================================================== */
/* (All of your other styles for .main-nav, .hamburger, .cart-link, etc. are correct and remain unchanged) */

.main-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* Keep these original styles */
    display: flex;
    gap: 2rem;
}

.main-nav a {
    color: var(--starlight);
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 1rem;
    position: relative;
    padding-bottom: 5px;
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--nav-underline-color, var(--kinetic-teal));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
}
.main-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}
/* Add this CSS to fix your mobile navigation */

/* Mobile Navigation Styles */
.mobile-nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001;
}

/* Hamburger Icon Styles */
.hamburger-box {
    width: 24px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 24px;
    height: 2px;
    background-color: var(--starlight);
    border-radius: 1px;
    position: absolute;
    /* THE FIX: Only transition the transform property. */
    transition: transform 0.3s ease; 
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -1px;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: '';
    display: block;
}

.hamburger-inner::before {
    top: -8px;
}

.hamburger-inner::after {
    bottom: -8px;
}

/* Screen reader only class */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile breakpoint - show hamburger, modify nav */
@media (max-width: 768px) {
    .mobile-nav-toggle {
        display: block; /* Show hamburger on mobile */
    }
    
    .main-nav {
        /* Hide nav by default on mobile */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(11, 19, 43, 0.95);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3rem;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
    }
    
    .main-nav a {
        font-size: 1.5rem;
        color: var(--starlight);
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
    
    /* When nav is open */
    .header.nav-open .main-nav {
        transform: translateX(0);
    }
    
    .header.nav-open .main-nav a {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Stagger the link animations */
    .header.nav-open .main-nav a:nth-child(1) { transition-delay: 0.1s; }
    .header.nav-open .main-nav a:nth-child(2) { transition-delay: 0.2s; }
    .header.nav-open .main-nav a:nth-child(3) { transition-delay: 0.3s; }
    .header.nav-open .main-nav a:nth-child(4) { transition-delay: 0.4s; }
    .header.nav-open .main-nav a:nth-child(5) { transition-delay: 0.5s; }
    
    /* Animate hamburger to X when open */
    .header.nav-open .hamburger-inner {
        transform: rotate(45deg);
    }
    
    .header.nav-open .hamburger-inner::before {
        top: 0;
        transform: rotate(90deg);
    }
    
    .header.nav-open .hamburger-inner::after {
        bottom: 0;
        transform: rotate(90deg);
    }
    
    /* Adjust header container on mobile */
    .header-container {
        padding: 0 20px;
    }
}

/* Tablet breakpoint adjustments */
@media (max-width: 1024px) and (min-width: 769px) {
    .header-container {
        padding: 0 40px;
    }
    
    .main-nav {
        gap: 1.5rem;
    }
    
    .main-nav a {
        font-size: 0.9rem;
    }
}

/* --- 1. Define the glow/pulse animation --- */
@keyframes cart-pulse {
  0% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 245, 212, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 245, 212, 0);
  }
  100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 245, 212, 0);
  }
}

/* --- 2. Style the cart link for positioning --- */
.cart-link {
    position: relative; /* This is required for the pseudo-element */
}

.cart-link::after {
    content: '';
    position: absolute;
    
    /* === THE FIX === */
    /* Adjusted position for better visual placement */
    top: -4px;
    right: -6px;
    
    width: 8px;
    height: 8px;
    
    background-color: var(--kinetic-teal);
    border-radius: 50%;
    
    /* Lifts the dot and its glow ABOVE the SVG icon */
    z-index: 1; 
    
    /* Initially, it's hidden */
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    pointer-events: none; /* So it doesn't block clicks */
}
/* --- 4. Define the active state --- */
.cart-link.cart-active::after {
    /* When active, it becomes visible */
    opacity: 1;
    transform: scale(1);
    
    /* And the animation starts */
    animation: cart-pulse 2s infinite;
}

/* ADD THIS NEW RULE */
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem; /* Adjust as needed for spacing between cart and hamburger */
}

/* ADD THIS NEW RULE TO NUDGE THE CART ICON */
.header-actions .site-nav {
    position: relative;
    top: -4px; /* Negative value moves it up. Try -1px or -3px for fine-tuning. */
}

/* =================================================================== */
/* ==   DEFINITIVE ANCHOR CLICK OVERRIDE (FINAL FIX)                == */
/* =================================================================== */

/* This class is more powerful than .theme-light and will instantly
   force the header to the correct dark theme (white text) appearance. */

/* =================================================================== */
/* ==   DEFINITIVE ANCHOR CLICK OVERRIDE (FINAL FIX)                == */
/* =================================================================== */

/* This class uses !important to win any style battle, including against
   inline styles left by a lingering GSAP scrub animation. */

.header.force-dark-theme .main-nav a,
.header.force-dark-theme .site-nav > .cart-link {
    color: var(--starlight) !important;
}

/* This targets the logo text */
.header.force-dark-theme .logo-wrapper .instinct-text {
    fill: var(--starlight) !important;
}

/* This targets the hamburger icon */
.header.force-dark-theme .hamburger-inner,
.header.force-dark-theme .hamburger-inner::before,
.header.force-dark-theme .hamburger-inner::after {
    background-color: var(--starlight) !important;
}