/**
 * Hero Gap Fix
 * Fixes the gap between hero banner and menu bar
 * The root cause is the breadcrumb navigation element
 */

/* BREADCRUMB FIX - This is the actual cause of the gap */
.breadcrumb {
    position: fixed !important;
    top: 70px !important; /* Position right after navbar */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    padding: 5px 0 !important; /* Minimal padding */
    margin: 0 !important;
    background: #f8f9fa !important; /* Light background */
    border-bottom: 1px solid #e1e5e9 !important;
}

/* Hero sections that follow breadcrumbs should start right after navbar + breadcrumb */
.hero,
.page-hero,
.about-hero,
.faq-hero,
.quote-hero {
    margin-top: 0 !important; /* Remove any margin-top */
    padding-top: 95px !important; /* Navbar (70px) + breadcrumb (25px) */
}

/* For pages without breadcrumbs (like homepage) */
.hero:not(.page-hero):not(.about-hero):not(.faq-hero):not(.quote-hero) {
    padding-top: 70px !important; /* Just navbar height */
}

/* Legal content pages */
.legal-content {
    margin-top: 0 !important;
    padding-top: 95px !important; /* Account for breadcrumb */
}

/* Also target sections that might follow a pattern */
section.hero,
main > .hero,
main > section.hero,
section.page-hero,
main > section.page-hero,
section.about-hero,
main > section.about-hero,
section.faq-hero,
main > section.faq-hero {
    margin-top: 0 !important;
    padding-top: 95px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .breadcrumb {
        padding: 3px 0 !important; /* Even less padding on mobile */
    }

    .hero,
    .page-hero,
    .about-hero,
    .faq-hero,
    .quote-hero,
    .legal-content,
    section.hero,
    main > .hero,
    main > section.hero,
    section.page-hero,
    main > section.page-hero,
    section.about-hero,
    main > section.about-hero,
    section.faq-hero,
    main > section.faq-hero {
        padding-top: 85px !important; /* Navbar (70px) + smaller breadcrumb (15px) */
    }

    .hero:not(.page-hero):not(.about-hero):not(.faq-hero):not(.quote-hero) {
        padding-top: 60px !important; /* Just navbar on mobile */
    }
}