﻿/* =============================================================
   ACCORDION 
   ============================================================= */

/* ── Wrapper reset ── */
.accordion-wrapper .accordion-section {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Each repeater item — same as .ecp-accordion-item ── */
.ecp-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    background: var(--white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
    border-radius: 0;
}

/* ── Top-left corner bracket — same as .acc-bracket ── */
.ecp-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 22px;
    border-top: 2px solid var(--primary-color);
    border-left: 2px solid var(--primary-color);
    pointer-events: none;
    z-index: 1;
}

/* ── Open state ── */
.ecp-item:has(.accordion-section-title.active) {
    background: var(--primary-color);
}

.ecp-item:has(.accordion-section-title.active)::before {
    border-color: rgba(255, 255, 255, 0.6);
}

/* ── Trigger <a> ── */
.accordion-section-title {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 16px 20px 16px 40px !important;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    cursor: pointer;
    text-align: left;
    line-height: 1.45;
    margin-top: 0 !important;
    text-decoration: none !important;
    box-sizing: border-box;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
}

/* ── h2 inside trigger — same as .acc-title ── */
.accordion-section-title h2 {
    flex: 1;
    font-size: 22px !important;
    font-weight: var(--medium) !important;
    color: #2A2A2A !important;
    margin: 0 !important;
    line-height: 1.45;
    font-family: var(--font-heading) !important;
}

/* ── Open — white title ── */
.accordion-section-title.active h2 {
    color: var(--white) !important;
    font-weight: 600 !important;
}

/* ── Chevron circle — DOWN by default — same as .acc-icon ── */
.accordion-section-title::after {
    content: "" !important;
    flex-shrink: 0;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    border-radius: 50% !important;
    background-color: var(--primary-color) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px !important;
    transition: transform 0.3s ease, background-color 0.2s ease;
    display: inline-flex !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
}

/* ── Open — chevron UP, circle lightens ── */
.accordion-section-title.active::after {
    transform: rotate(180deg) !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px !important;
}

/* ── Hover on closed ── */
.accordion-section-title:not(.active):hover {
    background-color: #f8f5fa !important;
    background-image: none !important;
}

.ecp-item:has(.accordion-section-title.active) .accordion-section-title:hover {
    background-color: transparent !important;
}

/* ── Content body — same as .ecp-accordion-body ── */
.accordion-section-content {
    display: none;
    padding: 0 20px 18px 40px !important;
    background: var(--primary-color) !important;
    border: none !important;
    color: var(--white);
}
.accordion-section-content h1, 
.accordion-section-content h2, 
.accordion-section-content h3, 
.accordion-section-content h4, 
.accordion-section-content h5, 
.accordion-section-content h6 {
    font-family: var(--font-heading) !important;
}
.accordion-section-content h1, 
.accordion-section-content h2, 
.accordion-section-content h3, 
.accordion-section-content h4, 
.accordion-section-content h5, 
.accordion-section-content h6, 
.accordion-section-content p, 
.accordion-section-content ul, 
.accordion-section-content li, 
.accordion-section-content a, 
.accordion-section-content div,
.accordion-section-content span, 
.accordion-section-content p span {
    color: var(--white) !important;
    background-color: transparent !important;
}
.accordion-section-content p,
.accordion-section-content li,
.accordion-section-content span {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    color: var(--white) !important;
    line-height: 1.75 !important;
}

.accordion-section-content a {
    color: var(--white) !important;
    text-decoration: underline !important;
}

.accordion-section-content a:hover {
    color: var(--white) !important;
}

/* ── Kill all old FAQ/accordion CSS leftovers ── */
.accordion-section:last-child .accordion-section-title,
.accordion-section-content {
    border: none !important;
}

.accordion-wrapper .accordion-section-title {
    width: 100% !important;
}

.ecp-item .accordion-section-content {
    display: none;
}