/* Custom styles */

/* Gradient overlay for main banner */
.main__image_bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 50%; /* Gradient covers left half of the image */
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none; /* Allows clicking through to elements behind */
}

/* Make sure the image container displays correctly */
.main__image_bg img {
    width: 100%;
    display: block;
}

/* Make sure the text is positioned above the gradient */
.main .main__text_block {
    position: relative;
    z-index: 2; /* Higher than the gradient overlay */
}

/* Hide gradient on mobile */
@media (max-width: 767px) {
    .main__image_bg::after {
        display: none;
    }
    
    /* Hide hero block completely on mobile */
    .main__heroes {
        display: none;
    }

    .nav__menu ul li.show-item:has(a):after {
        display: none;
    }
}

a.button {
    text-align: center;
}

.show-item-has-submenu {
    padding-top: .875em;
    padding-bottom: .875em;
}

.show-item-has-submenu > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


.nav__menu ul li.show-item:has(.show-text):after {
    content: "";
    position: absolute;
    top: 1.5em;
    right: 1.25em;
    width: 1.75em;
    height: .875em;
    display: block;
    background: url(../img/icons/arrow-bottom-header.svg) no-repeat;
    -webkit-filter: grayscale(1) brightness(3);
    filter: grayscale(1) brightness(3);
    background-position: 50%;
    -moz-background-size: contain;
    background-size: contain;
    -webkit-transition: .2s ease-in-out;
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out
}

.nav__menu ul li.show-item:has(.show-text).active:after {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1)
}