/* Mobile - Remove ALL gaps between header and content */

@media screen and (max-width: 768px) {
    /* Small consistent spacing from header */
    #content,
    .site-content {
        margin-top: 0 !important;
        padding-top: 15px !important;
    }
    
    main,
    .content-area,
    .page-content,
    .entry-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* First child elements should have no top margin */
    #content > *:first-child,
    .site-content > *:first-child,
    main > *:first-child {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Specific for that dark section */
    .hero-section,
    section:first-child,
    .page-header:first-child,
    .entry-header:first-child {
        margin-top: 0 !important;
        padding-top: 20px !important; /* Small padding for text */
    }
    
    /* Override desktop spacing on mobile */
    .site-content {
        margin-top: 0 !important;
    }
    
    /* Make sure body padding is just for fixed header */
    body {
        padding-top: 60px !important;
    }
    
    /* First section after header */
    body > #page > #content > *:first-child {
        margin-top: 0 !important;
    }
}