/* Knowledge Library Specific Styles */

.resource-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

    /* All Resources sections: never wrap or squeeze cards. If the viewport can't fit 4 at their
   natural size, the row scrolls horizontally instead. */
    .resource-scroll-container .resource-scroll-row {
        flex-wrap: nowrap !important;
    }

    .resource-scroll-container .resource-scroll-item {
        /* Prevent Bootstrap's percentage-based column widths from shrinking cards too much */
        min-width: 300px;
    }

@media (max-width: 575.98px) {
    /* On very small screens, keep cards comfortably wide */
    .resource-scroll-container .resource-scroll-item {
        min-width: 85%;
    }
}

.resource-scroll-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Hide scrollbar for all scrollable elements while maintaining scrollability */
.overflow-auto {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

    .overflow-auto::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

.btn-teal:hover {
    background-color: #1a7a70 !important;
}

.view-more-link:hover {
    color: #1a7a70 !important;
}

@media (max-width: 767.98px) {
    .resource-scroll-container .row {
        margin-right: -15px;
        margin-left: -15px;
        padding-left: 15px;
        padding-right: 15px;
    }
}

.nav-pills .nav-link {
    color: #282525;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 30px;
    padding: 0.75rem 1.875rem;
    font-weight: 500;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    white-space: nowrap;
    width: auto;
    min-width: max-content;
}

    .nav-pills .nav-link.active {
        color: #239589;
        background-color: #e0f5f3;
        border-color: rgba(45, 190, 175, 0.2);
    }

    .nav-pills .nav-link:hover:not(.active) {
        background-color: #f8f9fa;
        border-color: #c0c0c0;
    }

.resource-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .resource-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1) !important;
    }

.bg-light-teal-section {
    background-color: #e9f5f4;
}