/*
 * Overrides to the stylesheet from the designer:
 */

.navbar-nav {
    /* Apply 'px-2' styling from the design */
    .nav-item {
        padding-right: .5rem;
        padding-left: .5rem;

        .nav-link.selected {
            font-weight: 700;
        }
    }
}

.dropdown-menu {
    /* Apply 'text-white' style from design */
    .dropdown-item {
        color: var(--white) !important;

        &.selected {
            background-color: var(--white) !important;
            color: var(--primary-teal) !important;
            border-radius: var(--bs-border-radius) !important;
            font-weight: 700 !important;
        }
    }
}

.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover {
    border-radius: var(--bs-border-radius) !important;
}

.infographic-mobile{
    width: 100%;
    height: auto;
    display: none;
}

.infographic-img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 800px) {
    .infographic-img {
        display: none;
    }
    .infographic-mobile {
        display: block;
    }
}

.impact-story-card {
    .card-img-top {
        width: 100%;
        height: 225px;
        object-fit: cover;
    }
}

/* Override the testimonial slider to show all testimonials at once and disable the animation
 * (With only 3 testimonials, the slider doesn't work well and looks awkward, so we show them all at once instead)
 */
.testimonial-slider {
    overflow: visible;
    padding-inline: 0;

    .testimonial-track {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 1.5rem;
        animation: none;

        .testimonial-card {
            flex: 1 1 0;
            width: auto;
            margin: 0;
            max-width: 100%;
        }
    }
}

@media (max-width: 768px) {
    .testimonial-track {
        flex-direction: column;
    }
}

/* Override the button background colors 'none' to 'unset' since 'none' is not a valid value */
.btn-gd-primary:hover { background-color: unset; }
.btn-gd-secondary:hover { background-color: unset; }
.btn-gd-primary-outline { background-color: unset; }
.btn-gd-secondary-outline { background-color: unset; }