/**
 * Toolkit styles
 */

.toolkit {
    .hero-columns {
        display: flex;
        flex-wrap: wrap;
    }
    .hero-column-left {
        width: 50%;
        padding-right: var(--spacing-lg);
        display: flex;
        height: 100%;
        
        @media (max-width: 992px) {
            width: 100%;
            padding-right: 0;
            padding-bottom: var(--spacing-md);
            justify-content: flex-start;
        }
        h1 {
            margin-bottom: .5rem;
        }
        p {
            margin-bottom: 1rem;
            text-wrap: pretty;
        }
    }
    .hero-column-left-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .hero-column-right {
        width: 50%;
        display: flex;
        height: 100%;
        
        @media (max-width: 992px) {
            width: 100%;
            justify-content: flex-start;
        }
    }
    .hero-column-right-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: 100%;
    }
    .quote-wrapper-light-blue {
        background-color: var(--color-blue-light);
        border-radius: 8px;
        color: white;
        position: relative;
        padding-bottom: calc(var(--spacing-lg) - 1rem) !important;

        p, ul {
            font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
            font-weight: 600;
            line-height: 1.4;
            margin-bottom: 1rem;
        }
        ul {
            padding-left: 40px;
        }
    }
    .accordion-section {
        h2 {
            font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem);
        }
    }
    .accordion-item {
        margin-bottom: var(--spacing-sm);
        border-radius: 8px;
        overflow: hidden;
    }
    .accordion-header {
        width: 100%;
    }
    .accordion-button {
        width: 100%;
        background-color: var(--color-blue-pale);
        border: none;
        padding: calc(var(--spacing-md) + var(--spacing-xs));
        text-align: left;
        cursor: pointer;
        display: flex;
        align-items: center;
        font-family: var(--font-body);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-blue-dark);
        transition: all 0.3s ease;
    
        &:hover {
            background-color: #d5eeee;
        }
        &:focus {
            outline: none;
        }
        &.collapsed {
            .icon-minus {
                display: none;
            }
            .icon-plus {
                display: block;
            }
        }
        &:not(.collapsed) {
            .icon-minus {
                display: block;
            }
            .icon-plus {
                display: none;
            }
            .accordion-title {
                color: var(--color-blue-inactive);
            }
        }
    }
    .toggle-icon {
        margin-right: var(--spacing-sm);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
  
    .accordion-content {
        background-color: var(--color-blue-pale);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        
        .downloads {
            padding: calc(var(--spacing-md) + 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-md) + var(--spacing-xs));
            margin-bottom: calc(var(--spacing-md) + var(--spacing-xs));
            border-bottom: 2px solid white;

            @media (max-width: 768px) {
                flex-direction: column-reverse;
            }
            &: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-md) + var(--spacing-xs));

                @media (max-width: 768px) {
                    width: 100%;
                    padding-left: 0;
                    padding-bottom: calc(var(--spacing-md) + var(--spacing-xs));
                }
                h3 {
                    margin-bottom: 1rem;
                }
                p {
                    margin-bottom: 1rem;

                    strong {
                        font-weight: bold;
                    }
                }
                .download-share {
                    p {
                        margin-bottom: .7rem;
                    }
                    .download-link {
                        background-color: white;
                        border-color: white;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                        padding: calc(var(--spacing-xs) * 1.5) var(--spacing-sm);
                        text-align: left;
                        transition: transform 0.2s ease, box-shadow 0.2s ease;

                        &:hover, &:focus-visible {
                            transform: translateY(-2px);
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                        }
                        .link-name {
                            color: var(--color-blue-dark);
                        }
                        .seperator {
                            color: var(--color-gold);
                            margin: 0px 2px;
                        }
                        .file-info {
                            color: var(--color-blue-light);
                        }
                    }
                }
            }
        }
    }
}