/**
 * Final Header-Hero Gap Fix
 * This file is loaded last to ensure it takes precedence over all other styles
 * Version: 1.1 (May 3, 2025)
 */

/* Ensure the header height variable is consistently defined */
:root {
    --header-height: 70px; /* Default fallback, can be overridden elsewhere */
}

/* Force all margin and padding reset at the outset */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix any conflicts with body padding */
body {
    padding-top: var(--header-height, 70px) !important; /* Force fixed value */
    margin: 0 !important;
    overflow-x: hidden !important;
}

/* Force fixed positioning on header */
header, 
.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    height: var(--header-height, 70px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Force hero section to connect directly to header */
.hero-section,
#hero,
.hero {
    position: relative !important;
    margin-top: var(--header-height, 70px) !important; /* Add margin equal to header height */
    margin-bottom: 0 !important;
    padding-top: 30px !important; /* Add some padding for spacing */
    padding-bottom: 0 !important;
    top: 0 !important;
}

/* Clear any potential margin collapsing */
header::after,
.header::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    margin: 0 !important;
    padding: 0 !important;
}

/* Destroy any elements that might be creating gaps */
header + * + .hero-section,
header + div + .hero-section,
header ~ div:not(.hero-section):not(.container):not([id]):empty {
    display: none !important;
}

/* Ensure seamless connection for nested elements */
header + .hero-section,
header + main .hero-section,
header + section:first-of-type,
main .hero-section:first-child {
    margin-top: var(--header-height, 70px) !important; /* Add margin equal to header height */
    padding-top: 30px !important; /* Add some padding for spacing */
}

/* Clean up any margin issues from main container elements */
main,
.main-content,
.container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force consistent width and prevent horizontal scrolling */
header, 
.hero-section,
.hero {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Handle any browser calculation inconsistencies */
.container,
.hero-section .container,
header .container {
    box-sizing: border-box !important;
}

/* Mobile specific fixes */
@media (max-width: 991px) {
    /* Adjust header height for mobile if needed */
    :root {
        --header-height: 60px; /* Mobile header might be shorter */
    }
    
    /* Ensure mobile menu doesn't create gaps */
    .nav-links {
        top: var(--header-height, 60px) !important;
    }
    
    /* Force hero positioning */
    .hero-section,
    .hero {
        margin-top: var(--header-height, 60px) !important; /* Match mobile header height */
    }
    
    /* Handle any mobile-specific containers */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Fix for iOS Safari */
@supports (-webkit-touch-callout: none) {
    body {
        /* iOS Safari specific padding adjustment */
        padding-top: calc(var(--header-height, 70px) + env(safe-area-inset-top, 0)) !important;
    }
    
    header, .header {
        /* Adjust header for iOS notch */
        height: calc(var(--header-height, 70px) + env(safe-area-inset-top, 0)) !important;
        padding-top: env(safe-area-inset-top, 0) !important;
    }
}

/* Debugging outline - uncomment to visualize spacing issues */
/*
header, .header { border: 3px solid red !important; }
.hero-section, #hero, .hero { border: 3px solid blue !important; }
.container { border: 1px dashed green !important; }
*/