/* ==========================================================================
   GS Languages Plugin Styles (v 1.1.x)
   ========================================================================== */

#primary {
    width: 100% !important; 
    /* REQUIRED FOR FULL WIDTH */
    margin: 0 !important;    
    padding: 0 !important;
}

.gsl-hero-section {
    width: 100% !important;
    /* needs to be 50px less than the others layout thing with other css */
    min-height: 590px; 
    display: flex !important;
    align-items: center !important; 
    justify-content: center !important; 
    overflow: hidden;

    margin-left: 0 !important;
    margin-right: 0 !important;

    top: auto !important; 
    bottom: auto !important; 
    
}

/* Image container/background */
.gsl-hero-image {
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 590px !important; /* Retained 550px */
    background-size: cover;
    background-position: center;
    z-index: 1 !important; 
}

/* 60% Black Overlay */
.gsl-hero-overlay {
    position: absolute !important; 
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 590px !important; /* Retained 550px */
    background-color: rgba(0, 0, 0, 0.6) !important; 
    z-index: 2 !important; 
}

/* Text Content Container */
.gsl-hero-content {
    position: relative !important; 
    z-index: 3 !important; 
    color: #ffffff;
    text-align: center;
    max-width: 900px;
    padding: 20px;
}

.gsl-hero-content h1 {
    font-size: 3em;
    margin-bottom: 0.5em;
    color: inherit;
}

.gsl-hero-content p {
    font-size: 1.5em;
    /* margin-bottom: 1.5em; - Kept commented out as per your version */
}
.container.language {
    /* Center the container and limit its width like a standard WP page */
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* Add 20px padding for left and right edges */
    padding-left: 20px !important;
    padding-right: 20px !important;
    
    /* Add margin for bottom spacing */
    /* margin-bottom: 50px !important;  */
        margin-top: -20px;

}
/* Media Query for smaller screens */
@media (max-width: 768px) {
    .gsl-hero-section {
        min-height: 400px;
    }
    /* ADDED: Mobile height sync for absolute elements */
    .gsl-hero-image, .gsl-hero-overlay {
        height: 400px !important;
    }
    
    .gsl-hero-content h1 {
        font-size: 2em;
    }
    .gsl-hero-content p {
        font-size: 1.2em;
    }
}
/* ==========================================================================
   CSS RESET: Clear Custom List Styles for a specific container
   ========================================================================== */

.gsl-catposts li::before{
    content: none !important; /* Removes the custom arrow (\203A) */
    position: static !important; /* Clears 'position: absolute' */
    left: auto !important;
    margin-right: 0 !important;

}
.gsl-catposts a{
    color: #ffffff;
    text-decoration: underline;
}
.gsl-catposts {
    margin-top: -20px;
}

/* ==========================================================================
   CSS ADDITION FOR REUSABLE HERO (gsl-hero-bottom)
   ========================================================================== */

/* Overrides the 'top: 0' that was necessary for the first hero 
   to work against global theme structure. 
   Removing it lets the absolute elements anchor to their immediate parent 
   (.gsl-hero-section) which is correct for reusable sections mid-page.
*/
.gsl-hero-bottom .gsl-hero-image,
.gsl-hero-bottom .gsl-hero-overlay {
    /* REMOVES CONFLICT: Disables the 'top: 0' anchor */
    top: auto !important; 
    bottom: auto !important; 
    
    /* Re-establishes the anchor relative to the current section */
    height: 590px !important; 
    
    /* Ensure no unwanted left/right movement */
    left: 0 !important; 
    right: 0 !important;

}

/* Also ensure the bottom hero's container height respects its own media queries */
@media (max-width: 768px) {
    .gsl-hero-bottom .gsl-hero-image, 
    .gsl-hero-bottom .gsl-hero-overlay {
        /* Mobile height must use the mobile min-height value */
        height: 400px !important;
    }
}