.page-template-toolkit {
    h1 {
        font-size: 3.6rem;
        color: var(--color-black);
    }
    .heading {
        @media (max-width: 768px) {
            text-align: left;
        }
    }
}
.toolkit-hero {
    padding-top: 80px;

    @media (max-width: 768px) {
        padding-top: 60px;
    }
    .container {
        display: flex;
        gap: 25px;

        @media (max-width: 992px) {
            flex-wrap: wrap;
            gap: 30px;
        }
    }
    .toolkit-hero__back {
        margin-bottom: 30px;

        @media (max-width: 768px) {
            margin-bottom: 30px;
        }
        .social-link {
            font-size: 1.8rem;

            @media (max-width: 768px) {
                font-size: 1.6rem;
            }
            &:hover, &:focus-visible {
                span {
                    top: 0px;
                    right: 0px;
                    left: -5px;

                    @media (max-width: 768px) {
                        top: 2px;
                    }
                }
            }
            &:after {
                width: calc(100% - 28px);
                right: 0px;
                left: auto;
            }
            span {
                top: 0px;
                right: 0px;
                left: 0px;
                margin-right: 5px;
                transition: .3s ease-in-out;

                @media (max-width: 768px) {
                    top: 2px;
                }
            }
        }
    }
    .toolkit-hero__left {
        width: 50%;

        @media (max-width: 992px) {
            width: 100%;
        }
        .heading {
            margin-bottom: 25px;
            text-wrap: pretty;

            @media (max-width: 768px) {
                text-align: left;
            }
        }
        .toolkit-hero__left__text {
            max-width: 550px;
            margin-bottom: 20px;

            @media (max-width: 992px) {
                margin-bottom: -5px;
            }
        }
        .btn {
            @media (max-width: 992px) {
                display: none;
            }
        }
    }
    .toolkit-hero__right {
        width: 50%;

        @media (max-width: 992px) {
            width: 100%;
        }
        .callout {
            background-color: var(--color-teal);
            padding: 35px 45px;
            border-radius: 10px;
            box-shadow: var(--box-shadow);
            color: var(--color-white);
            position: relative;

            @media (max-width: 992px) {
                padding: 25px;
            }
            p, ul {
                font-size: 1.7rem;
                font-weight: 500;
                text-wrap: pretty;
                margin-bottom: 1.3rem;
            }
            p {
                &:last-of-type {
                    margin-bottom: 0px;
                }
            }
            ul {
                padding-left: 40px;

                @media (max-width: 768px) {
                    padding-left: 30px;
                }
            }
        }
        .news__posts__button {
            @media (max-width: 768px) {
                text-align: center;
            }
            .btn {
                display: none;
                margin-top: 30px;

                @media (max-width: 992px) {
                    display: inline-block;
                }
            }
        }
    }
    .pagination {
        margin-top: 40px;

        @media (max-width: 768px) {
            margin-top: 30px;
        }
        .page-numbers {
            color: var(--color-black);
            padding: 6px 8px;

            &:hover, &:focus-visible {
                color: var(--color-primary);
            }
            &.current {
                background-color: var(--color-primary);
                color: var(--color-white);
            }
            &.prev, &.next {
                display: inline-block;
                font-size: 0px;
                width: 16px;
                height: 16px;
                position: relative;
                top: -13px;
                padding: 0px;

                &:after {
                    font-family: 'Font Awesome 6 Pro';
                    font-size: 1.6rem;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            &.prev {
                margin-right: 5px;

                &:after {
                    content: '\f060';
                }
            }
            &.next {     
                margin-left: 5px;

                &:after {
                    content: '\f061';
                }
            }
        }
    }
}
.accordion-section {
    padding-top: 80px;

    @media (max-width: 768px) {
        padding-top: 60px;
    }
}
.accordion-item {
    margin-bottom: 25px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: .3s ease-in-out;

    &:hover {
        box-shadow: var(--box-shadow);        
    }
    &:last-of-type {
        margin-bottom: 0px;
    }
}
.accordion-header {
    width: 100%;
}
.accordion-button {
    width: 100%;
    background-color: var(--color-white);
    border: none;
    padding: 35px 45px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-black);
    transition: all 0.3s ease;

    &:hover {
        .toggle-icon {
            transform: scale(1.2);
            background-color: var(--color-orange);
        }
    }
    &:focus {
        outline: none;
    }
    &.collapsed {
        .icon-minus {
            display: none;
        }
        .icon-plus {
            display: block;
        }
    }
    &:not(.collapsed) {
        .icon-minus {
            display: block;
        }
        .icon-plus {
            display: none;
        }
    }
}
.toggle-icon {
    position: relative;
    width: 30px;
    height: 30px;
    background-color: var(--color-primary);
    border-radius: 50%;
    transition: .3s ease-in-out;

    span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.6rem;
        color: var(--color-white);
    }
}
.accordion-title {
    margin-left: var(--spacing-md);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    
    .downloads {
        padding: calc(var(--spacing-lg) + var(--spacing-xs));
        padding-top:0;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    &.open {
        max-height: 5000px; /* Large enough to accommodate content */

        .downloads {
            opacity: 1;
        }
    }
}
.downloads {        
    .download-item {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: calc(var(--spacing-lg) + var(--spacing-xs));
        margin-bottom: calc(var(--spacing-lg) + var(--spacing-xs));
        border-bottom: 1px solid var(--color-yellow);

        @media (max-width: 768px) {
            flex-direction: column-reverse;
        }
        &:first-of-type {
            border-top: 1px solid var(--color-yellow);
            padding-top: calc(var(--spacing-lg) + var(--spacing-xs));
        }
        &:last-of-type {
            padding-bottom: 0;
            margin-bottom: 0;
            border: none;
        }
        .download-img {
            width: 250px;

            @media (max-width: 768px) {
                width: 100%;
                max-width: 250px;
                margin: 0px auto;
            }
            img {
                width: 100%;
                display: block;
            }
        }
        .download-content {
            width: calc(100% - 250px);
            padding-left: calc(var(--spacing-lg) + var(--spacing-xs));

            @media (max-width: 768px) {
                width: 100%;
                padding-left: 0;
                padding-bottom: calc(var(--spacing-lg) + var(--spacing-xs));
            }
            h3 {
                margin-bottom: 1.5rem;
            }
            p, ul {
                font-size: 1.7rem;
                margin-bottom: 1.5rem;

                strong {
                    font-weight: bold;
                }
            }
            ul {
                padding-left: 40px;

                @media (max-width: 768px) {
                    padding-left: 30px;
                }
            }
            .download-share {
                p {
                    margin-bottom: 1rem;
                }
                .download-link {
                    font-size: 1.7rem;
                    font-weight: 600;
                    padding: 7px 12px;

                    &:hover, &:focus-visible {
                        transform: scale(1.05);
                    }
                }
            }
        }
    }
}