/**
 * Force Header Background Colors - Ultra High Priority
 * Ensures header has gradient background visible
 */

/* ========================================
   DESKTOP - Header Background
   ======================================== */
@media (min-width: 768px) {
    /* Force header background gradient */
    html body #masthead,
    body #masthead,
    #masthead,
    html body .site-header,
    body .site-header,
    .site-header {
        background: linear-gradient(135deg, #c8232c 0%, #e74c3c 100%) !important;
        background-color: #c8232c !important;
    }
    
    /* Ensure child elements are transparent */
    html body #masthead .header-wrapper,
    body #masthead .header-wrapper,
    #masthead .header-wrapper,
    html body .site-header .header-wrapper,
    body .site-header .header-wrapper,
    .site-header .header-wrapper {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    html body #masthead .container,
    body #masthead .container,
    #masthead .container,
    html body .site-header .container,
    body .site-header .container,
    .site-header .container {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    html body #masthead .header-top,
    body #masthead .header-top,
    #masthead .header-top,
    html body .site-header .header-top,
    body .site-header .header-top,
    .site-header .header-top {
        background: transparent !important;
        background-color: transparent !important;
    }
}

/* ========================================
   MOBILE - Header Background
   ======================================== */
@media (max-width: 767px) {
    /* Force header background gradient */
    html body #masthead,
    body #masthead,
    #masthead,
    html body .site-header,
    body .site-header,
    .site-header {
        background: linear-gradient(135deg, #c8232c 0%, #e74c3c 100%) !important;
        background-color: #c8232c !important;
    }
    
    /* Ensure child elements are transparent to show parent background */
    html body #masthead .header-wrapper,
    body #masthead .header-wrapper,
    #masthead .header-wrapper,
    html body .site-header .header-wrapper,
    body .site-header .header-wrapper,
    .site-header .header-wrapper {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    html body #masthead .container,
    body #masthead .container,
    #masthead .container,
    html body .site-header .container,
    body .site-header .container,
    .site-header .container {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    html body #masthead .header-top,
    body #masthead .header-top,
    #masthead .header-top,
    html body .site-header .header-top,
    body .site-header .header-top,
    .site-header .header-top {
        background: transparent !important;
        background-color: transparent !important;
    }
}

/* ========================================
   OVERRIDE ANY INLINE STYLES
   ======================================== */

/* Remove any white/other backgrounds that might be inline */
#masthead[style*="background"],
.site-header[style*="background"] {
    background: linear-gradient(135deg, #c8232c 0%, #e74c3c 100%) !important;
}

#masthead .header-wrapper[style*="background"],
.site-header .header-wrapper[style*="background"],
#masthead .container[style*="background"],
.site-header .container[style*="background"],
#masthead .header-top[style*="background"],
.site-header .header-top[style*="background"] {
    background: transparent !important;
    background-color: transparent !important;
}