/*------------------------------------*\
    
    FX Tabs/Accordion - Global styling for all tabs/accordions

    Add custom tabs/accordion styling to this file if it should be applied to all tabs/accordions on the site
    Otherwise, put your styles in individual block stylesheets

\*------------------------------------*/

.tab-accordion {
    position: relative;
}

.tab-accordion__tabs {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.tab-accordion__panel {
    margin-bottom: 0;
}

.tab-accordion__panel:not(.is-active) .tab-accordion__panel__content {
    display: none;
}

/* Tab Button Styles */
.tab-accordion__tab {
    padding: 13px 24px;
    margin: 0;
    background: transparent;
    font-weight: 800;
    line-height: 1em;
    font-size: 20px;
    font-family: "Sofia Sans Condensed", sans-serif;
    color: var(--blue);
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    list-style-type: none !important;
    display: block;
    text-decoration: none;
    width: 100%;
    text-align: left;
}

.tab-accordion__tab.is-active {
    color: var(--green);
    border-bottom: 2px solid var(--green);
}

.tab-accordion__tab:hover,
.tab-accordion__tab:focus {
    color: inherit;
    text-decoration: none;
}

/* Accordion Toggle Button Styles */
.tab-accordion__panel__toggle {
    display: flex;
    width: 100%;
    padding: 13px 24px;
    margin: 0;
    background: #fff;
    border: none;
    font-weight: 800;
    line-height: 1em;
    font-size: 20px;
    font-family: "Sofia Sans Condensed", sans-serif;
    color: var(--blue);
    text-align: left;
    cursor: pointer;
    box-shadow: 0px 0px 8px rgba(26, 36, 43, 0.25);
    border-radius: 8px;
    position: relative;
    padding-right: 48px;
    margin-bottom: 8px;
    list-style-type: none !important;
}

.tab-accordion__panel__toggle::after {
    content: "\e900";
    font-family: 'trap-and-treat-icon';
    position: absolute;
    right: 22px;
    top: 9px;
    font-size: 10px;
    pointer-events: none;
    color: var(--green);
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.tab-accordion__panel__toggle.is-active::after {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}

.tab-accordion__panel__toggle.is-active {
    color: var(--green);
    border-bottom: 2px solid var(--green);
}

.tab-accordion__panel__toggle:hover,
.tab-accordion__panel__toggle:focus {
    color: inherit;
    text-decoration: none;
}

/* Panel Content Styles */
.tab-accordion__panel__content {
    padding: 24px 0;
    overflow: hidden;
}

/* Dark Blue Background Styles */
.bg-dark-blue .tab-accordion__tab {
    color: var(--light-blue);
}

.bg-dark-blue .tab-accordion__tab.is-active {
    color: var(--white);
    border-color: var(--white);
}

@media (min-width: 768px) {
    /* Tab/Accordion - Tablet & Desktop */
    .tab-accordion__tab {
        padding: 13px 24px;
        width: auto;
        text-align: center;
        border-radius: 8px;
        border: none;
        border-bottom: 2px solid transparent;
    }


}

@media (min-width: 1200px) {
    /* Tab/Accordion - Desktop */

    .tab-accordion__panel__toggle {
        display: none; /* Hide accordion toggle on desktop+ */
    }
    
    .tab-accordion__tabs {
        justify-content: center;
        margin-bottom: 36px;
    }

    .tab-accordion__tab {
        width: 172px;
        padding: 11px 55px;
        font-size: 24px;
    }

    .tab-accordion__panel__content {
        padding: 0;
    }
}