/* 
 * Custom Styles for Service Section
 * This file overrides the default styles from tms-block-frontend.css
 * You can write your custom CSS for the service section here.
 */

/* Add your service section styles below */
/* Ensure the title turns white when the overlay is shown (clicked/tapped on touch devices) */
.content-category-grid__column.wp-block-tms-blocks-content-category-grid-column-item.show-overlay h2.content-category-grid__column-title,
.content-category-grid__column.wp-block-tms-blocks-content-category-grid-column-item.show-overlay h2.has-text-color {
    color: #ffffff !important;
}

/* Fallback for hover on desktop if needed */
.content-category-grid__column.wp-block-tms-blocks-content-category-grid-column-item:hover h2.content-category-grid__column-title,
.content-category-grid__column.wp-block-tms-blocks-content-category-grid-column-item:hover h2.has-text-color {
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .content-logo--carousel .content-logo__slider .swiper-slide img {
        width: 40%;
    }
}

@media (max-width: 768px) {
    .content-category-grid__accordion-content.active {
        padding: 2rem 1rem;
        background: #1F75EE;
        display: flex;
        flex-direction: column;
    }

    .content-category-grid__column-bg {
        max-width: 15rem;
    }

    p {
        text-align: center;
    }

    .content-category-grid__column-button {
        justify-content: center;
    }

}



@media (max-width: 768px) {
    .page-id-50 .wp-block-paragraph {
        padding: 0 1rem;
    }

    .content-buckets-medium__wrapper {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 1080px) {
    .page-id-50 .wp-block-paragraph {
        padding: 0 2.5rem;
    }

    .content-buckets-medium__wrapper {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

.content-buckets-medium__wrapper {
    padding-left: 16px;
    padding-right: 16px;
}

.page-id-50 .wp-block-paragraph {
    padding: 0 16px;
    text-align: unset;
}

:root :where(.wp-custom-css-4d13ce02.server-home-block .content-category-grid__column-bg) {
    background-size: 70% !important;
}

@media (min-width: 769px) and (max-width: 1001px) {
    :root :where(.wp-custom-css-4d13ce02.server-home-block .content-category-grid__column-bg) {
        background-size: 40% !important;
    }

    .content-category-grid__column-content-wrapper {
        justify-content: end;
    }

    .content-category-grid__column-content-wrapper .content-category-grid__column-button.wp-block-tms-blocks-tms-button {
        margin-bottom: 24px;
    }

    .content-category-grid__column-description {
        line-height: 1.5em;
        max-height: 7.5em;
        overflow-y: auto;
        padding-right: 8px;
        pointer-events: auto !important;
        overscroll-behavior: contain;
    }

    .content-category-grid__column-description::-webkit-scrollbar {
        width: 4px;
    }

    .content-category-grid__column-description::-webkit-scrollbar-track {
        background: transparent;
    }

    .content-category-grid__column-description::-webkit-scrollbar-thumb {
        background: #ffffff !important;
        border-radius: 10px;
    }

    /* Fix click and scroll being blocked by overlapping layers */
    .content-category-grid__column-bg,
    .content-category-grid__column::before,
    .content-category-grid__column::after {
        pointer-events: none !important;
    }

    .content-category-grid__accordion-content {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }

    .content-category-grid__column-button {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
}

.content-category-grid__column.show-overlay .content-category-grid__overlay--hover,
.content-category-grid__column:hover .content-category-grid__overlay--hover {
    opacity: var(0.95, 1);
}

* {
    -webkit-tap-highlight-color: transparent !important;
}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
    outline: none !important;
    box-shadow: none !important;
}