/*
 * Past Events accordion — mirrors the styling of the former Elementor nested accordion/tabs.
 *
 * Every button rule is prefixed with `.scp-pe` so it outranks Hello Elementor's
 * reset (`button:hover/:focus { background: #c36 }`, `white-space: nowrap`) and
 * the Elementor kit's global button font.
 */

.scp-pe {
    --scp-pe-blue: #007ed3;
    --scp-pe-red: #ff0000;
    --scp-pe-white: #ffffff;
    --scp-pe-text: #030b1b;
    --scp-pe-heading-font: "Oswald", "Arial Narrow", sans-serif;
    width: 100%;
}

.scp-pe-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* --- Accordion item --- */

.scp-pe .scp-pe-item {
    background: var(--scp-pe-white);
}

.scp-pe .scp-pe-heading {
    margin: 0;
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}

.scp-pe .scp-pe-title,
.scp-pe .scp-pe-title:hover,
.scp-pe .scp-pe-title:focus,
.scp-pe .scp-pe-title:active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 15px 25px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--scp-pe-blue);
    color: var(--scp-pe-white);
    font-family: var(--scp-pe-heading-font);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: color 0.2s ease;
}

.scp-pe .scp-pe-title:hover {
    color: rgba(255, 255, 255, 0.72);
}

.scp-pe .scp-pe-title:focus {
    outline: none;
}

.scp-pe .scp-pe-title:focus-visible {
    outline: 2px solid var(--scp-pe-white);
    outline-offset: -6px;
}

.scp-pe .scp-pe-title-text {
    flex: 1 1 auto;
}

.scp-pe .scp-pe-icon {
    flex: 0 0 auto;
    display: inline-flex;
    width: 24px;
    height: 24px;
    color: var(--scp-pe-white);
    transition: color 0.2s ease;
}

.scp-pe .scp-pe-icon svg {
    width: 24px;
    height: 24px;
}

/* Idle: show the "down" chevron only. Open: show the "up" chevron only. */
.scp-pe .scp-pe-icon .scp-pe-icon-closed { display: block; }
.scp-pe .scp-pe-icon .scp-pe-icon-open { display: none; }
.scp-pe .scp-pe-item.is-open .scp-pe-icon .scp-pe-icon-closed { display: none; }
.scp-pe .scp-pe-item.is-open .scp-pe-icon .scp-pe-icon-open { display: block; }

.scp-pe .scp-pe-title:hover .scp-pe-icon,
.scp-pe .scp-pe-item.is-open .scp-pe-icon {
    color: var(--scp-pe-red);
}

.scp-pe .scp-pe-panel {
    padding: 15px;
}

.scp-pe .scp-pe-panel[hidden] {
    display: none;
}

/* --- Tabs --- */

.scp-pe .scp-pe-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 2px;
}

.scp-pe .scp-pe-tab,
.scp-pe .scp-pe-tab:focus,
.scp-pe .scp-pe-tab:active {
    flex: 1 1 200px;
    margin: 0;
    padding: 15px;
    border: 2px solid var(--scp-pe-red);
    border-radius: 0;
    box-shadow: none;
    background: var(--scp-pe-white);
    color: var(--scp-pe-red);
    font-family: var(--scp-pe-heading-font);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.scp-pe .scp-pe-tab + .scp-pe-tab {
    margin-left: -2px;
}

.scp-pe .scp-pe-tab:hover,
.scp-pe .scp-pe-tab[aria-selected="true"],
.scp-pe .scp-pe-tab[aria-selected="true"]:focus {
    background: var(--scp-pe-red);
    color: var(--scp-pe-white);
}

.scp-pe .scp-pe-tab:focus {
    outline: none;
}

.scp-pe .scp-pe-tab:focus-visible {
    outline: 2px solid var(--scp-pe-text);
    outline-offset: 2px;
    position: relative;
    z-index: 1;
}

.scp-pe .scp-pe-tabpanel {
    padding: 15px;
    border: 2px solid var(--scp-pe-red);
    background: var(--scp-pe-white);
    overflow-x: auto;
}

.scp-pe .scp-pe-tabpanel[hidden] {
    display: none;
}

/* --- States --- */

.scp-pe .scp-pe-loading,
.scp-pe .scp-pe-error,
.scp-pe .scp-pe-none,
.scp-pe.scp-pe-empty {
    margin: 0;
    padding: 12px 0;
    color: var(--scp-pe-text);
}

.scp-pe .scp-pe-loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -2px;
    animation: scp-pe-spin 0.8s linear infinite;
}

@keyframes scp-pe-spin {
    to { transform: rotate(360deg); }
}

.scp-pe .scp-pe-retry,
.scp-pe .scp-pe-retry:focus {
    margin-left: 6px;
    padding: 4px 10px;
    border: 1px solid var(--scp-pe-red);
    border-radius: 0;
    background: var(--scp-pe-white);
    color: var(--scp-pe-red);
    cursor: pointer;
}

.scp-pe .scp-pe-retry:hover {
    background: var(--scp-pe-red);
    color: var(--scp-pe-white);
}

/* --- Load more --- */

.scp-pe .scp-pe-more-wrap {
    display: flex;
    justify-content: center;
    padding: 20px 0 0;
}

.scp-pe .scp-pe-more,
.scp-pe .scp-pe-more:focus,
.scp-pe .scp-pe-more:active {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: 2px solid var(--scp-pe-blue);
    border-radius: 0;
    box-shadow: none;
    background: var(--scp-pe-white);
    color: var(--scp-pe-blue);
    font-family: var(--scp-pe-heading-font);
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.scp-pe .scp-pe-more:hover,
.scp-pe .scp-pe-more:focus-visible {
    background: var(--scp-pe-blue);
    color: var(--scp-pe-white);
}

.scp-pe .scp-pe-more:focus {
    outline: none;
}

.scp-pe .scp-pe-more:focus-visible {
    outline: 2px solid var(--scp-pe-text);
    outline-offset: 2px;
}

.scp-pe .scp-pe-more:disabled,
.scp-pe .scp-pe-more.is-loading {
    opacity: 0.7;
    cursor: progress;
}

/* --- Small screens --- */

@media (max-width: 767px) {
    .scp-pe .scp-pe-title,
    .scp-pe .scp-pe-title:hover,
    .scp-pe .scp-pe-title:focus {
        padding: 12px 16px;
        font-size: 20px;
    }
    .scp-pe .scp-pe-tab,
    .scp-pe .scp-pe-tab:focus {
        flex-basis: 100%;
        font-size: 18px;
    }
    .scp-pe .scp-pe-tab + .scp-pe-tab {
        margin-left: 0;
        margin-top: -2px;
    }
    .scp-pe .scp-pe-panel,
    .scp-pe .scp-pe-tabpanel {
        padding: 10px;
    }
}