html, 
body {
    margin: 0;
    padding: 0;
    /* Optional: Ensure a clean box model globally */
    box-sizing: border-box; 
}

.wp-header-main-wrapper {
    position: relative !important;
    width: 100%; /* Changed from 100vw to avoid scrollbar issues */
    background-color: #0000FF; 
    top: 0;
}

#wp-header-bg {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    z-index: 0; 
    pointer-events: all; 
    overflow: hidden; /* Ensures no spillover */
}

/* Updated for Canvas */
#magnifying-grid-canvas {
    display: block; /* Removes 3px legacy inline spacing */
    width: 100%;
    height: 100%;
    pointer-events: none;
    touch-action: none; /* Improves performance on mobile */
}

/* Grid canvas styling: size relative to host container */
.magnifying-grid-canvas {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important; /* fill host container width */
    height: auto !important; /* height set by JS to match wrapper height */
    pointer-events: none !important;
    z-index: 0 !important; /* sit above host background but below content (content has z-index:1) */
}

/* Override inherited layout constraints for forced full-width canvases */
.grid-bg-force-full-width .magnifying-grid-canvas {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Stale viewport-spanning static grid: fixed under content for better performance */
.magnifying-grid-canvas.viewport-stale {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Ensure content in wrappers with the stale class overlays the fixed grid */
.blue-grid-bg-stale > * {
    position: relative;
    z-index: 1;
}

.header-content-blocks {
    position: relative; 
    z-index: 10; 
    pointer-events: auto;
    margin-top: 0 !important;
}

/* Ensure wrapper content overlays the canvas */
.blue-grid-bg > *:not(.magnifying-grid-canvas) {
    position: relative;
    z-index: 1;
}


.pointer-donotskip {
    pointer-events: auto;
}

.header-no-background {
    background-color: #00000000 !important;
}

        
/*
        .wp-header-bg {
            
             
            top: 0;
            left: 0;
            width: 100vw; 
            height: 100vh; 
            
            pointer-events: all; 
            background-color: #0000FF; 
        }

        .header-inner-content {
            position: absolute;
            pointer-events: all; 
            top: 0; 
            left: 0; 
        }
        
        #magnifying-grid-background {
            width: 100%;
            height: 100%;
            pointer-events: all; 
            touch-action: none; 
        }


        */
        /* 2. Individual Grid Lines (SVG) */
        .grid-line {
            fill: none;
            stroke: #00007cd5;
            stroke-width: 2;
            transition: stroke 0.3s ease-out; 
        }