/**
 * Home Hero Fix
 * This CSS file contains direct overrides for the home page hero section
 */

/* Target the hero section on the home page specifically */
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section {
    background: linear-gradient(rgba(0, 113, 188, 0.8), rgba(41, 171, 226, 0.8)), url('../img/hero-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    color: white !important;
    padding: 150px 0 !important;
    text-align: center !important;
    position: relative !important;
}

/* Remove any ::before pseudo-elements */
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Force white text in hero sections */
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section h1, 
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section h2, 
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section h3, 
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section h4, 
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section h5, 
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section h6, 
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section p, 
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section div {
    color: white !important;
}

/* Ensure proper styling for buttons in the hero section */
body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section .btn-accent {
    background-color: var(--accent-color) !important;
    color: white !important;
}

body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section .btn-secondary {
    background-color: var(--secondary-color) !important;
    color: white !important;
}

/* Ensure proper styling for the hero section on all screen sizes */
@media (max-width: 768px) {
    body:not(.news-page):not(.events-page):not(.announcements-page) .hero-section {
        padding: 100px 0 !important;
    }
}