/* ============================================
   HOMEPAGE SPACING FIX
   Prevents header from overlapping hero section
   ============================================ */

/* Calculate header height:
   - header-top: ~40px (padding 10px top + 10px bottom + content)
   - header-main: ~90px (padding 15px top + 15px bottom + logo 60px)
   - Total: ~130px
   Add extra padding for breathing room: 200px total
*/

/* Ensure hero section has proper top spacing to account for fixed/sticky header */
.hero-section:not(.jnh-hero-split) {
    margin-top: 0 !important;
    padding-top: 240px !important;
    position: relative;
}

/* On mobile, reduce padding slightly */
@media (max-width: 768px) {
    .hero-section:not(.jnh-hero-split) {
        padding-top: 200px !important;
    }
}

@media (max-width: 480px) {
    .hero-section:not(.jnh-hero-split) {
        padding-top: 180px !important;
    }
}

/* Ensure header doesn't overlap content - keep it sticky but account for it */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    background: var(--white) !important;
}

.site-header * {
    position: relative;
    z-index: 10001 !important;
}

/* Make sure hero content is above decorative lines - HIGHEST PRIORITY */
.hero-content {
    position: relative !important;
    z-index: 1000 !important;
}

.hero-content * {
    position: relative;
    z-index: 1001 !important;
}

/* Ensure decorative lines (::before and ::after) stay behind content - NEGATIVE Z-INDEX */
.hero-section::before,
.hero-section::after {
    z-index: -1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important;
}

/* Override inline styles from front-page.php to ensure proper spacing */
body.home .hero-section:not(.jnh-hero-split),
body.page-template-front-page .hero-section:not(.jnh-hero-split) {
    padding-top: 240px !important;
}

@media (max-width: 768px) {
    body.home .hero-section:not(.jnh-hero-split),
    body.page-template-front-page .hero-section:not(.jnh-hero-split) {
        padding-top: 200px !important;
    }
}

@media (max-width: 480px) {
    body.home .hero-section:not(.jnh-hero-split),
    body.page-template-front-page .hero-section:not(.jnh-hero-split) {
        padding-top: 180px !important;
    }
}

/* Split hero: top padding lives inside .jnh-hero-split__copy (not 240px on section) */
body.home .hero-section.jnh-hero-split,
body.page-template-front-page .hero-section.jnh-hero-split {
    padding-top: 0 !important;
}