/**
 * Accordion — Dance Quest Classes section 2 / FAQ (Divi accordion).
 * Live values: 80% column, two rgba(0,0,0,.13) dividers 33px apart, 40px
 * Times New Roman heading in #325cb2 with a light rule under it, rows with
 * a 1px #d9d9d9 border, 20px padding and 30px between them; open row white
 * with a 24px #333 title, closed rows #f4f4f4 with a #666 title and blue plus.
 */
.accordion {
    padding: 0 0 65px;
    background: var(--background, #ffffff);
}

.accordion-inner {
    width: 80%;
    margin-inline: auto;
}

.accordion-divider {
    height: 0;
    margin: 0;
    padding-top: 32.9px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.13);
}

.accordion-heading {
    margin: 0 0 32px;
    padding: 50px 0 32px;
    border-bottom: 1px solid #f0f0f0;
    font-family: var(--font-display, "Times New Roman", Georgia, Times, serif);
    font-weight: var(--font-display-weight, 400);
    font-size: 40px;
    line-height: 1.1;
    text-align: center;
    color: var(--primary, #325cb2);
}

.accordion-items {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.accordion-item {
    border: 1px solid #d9d9d9;
    background: #f4f4f4;
}

.accordion-item[open] { background: var(--background, #ffffff); }

.accordion-title {
    position: relative;
    display: block;
    padding: 16px 60px 16px 20px;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-weight: 400;
    font-size: var(--font-size-2xl, 24px); /* live: every toggle title is 24px; closed ones are grey */
    line-height: 1.4;
    color: var(--muted-foreground, #666666);
    cursor: pointer;
    list-style: none;
}

.accordion-title::-webkit-details-marker { display: none; }

/* Blue plus on closed rows, the Divi toggle icon. */
.accordion-title::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 20px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--primary, #325cb2);
    color: var(--primary-foreground, #ffffff);
    font-size: 14px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.accordion-item[open] .accordion-title {
    padding-bottom: 10px;
    font-size: 24px;
    color: var(--foreground, #333333);
}

.accordion-item[open] .accordion-title::after { content: none; }

.accordion-body {
    padding: 0 20px 20px;
    font-family: var(--font-paragraph, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-size: var(--font-size-sm, 14px);
    line-height: 1.7;
    color: var(--muted-foreground, #666666);
}

.accordion-body p { margin: 0 0 1em; }
.accordion-body p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
    .accordion-heading { font-size: 30px; padding-top: 32px; }
    .accordion-item[open] .accordion-title { font-size: 20px; }
}

/* Side panel (FAQ): Divi 3/5 + 2/5 columns. */
.accordion--side .accordion-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 5.5%;
    align-items: start;
}
.accordion--side { padding-top: 60px; }
.accordion-side {
    font-family: var(--font-paragraph, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-size: var(--font-size-sm, 14px);
    line-height: 1.8;
    color: var(--muted-foreground, #666666);
}
.accordion-side h3 {
    margin: 0 0 12px;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-weight: var(--font-heading-weight, 500);
    font-size: 22px;
    color: var(--foreground, #333333);
}
.accordion-side p { margin: 0; }
@media (max-width: 980px) {
    .accordion--side .accordion-layout { grid-template-columns: 1fr; gap: 40px; }
}