/* Serif accordion echoing the PDF's "HADAS Stages" block. */

.stages-accordion {
    max-width: 720px;
    margin-inline: auto;
    padding-block: clamp(var(--space-7), 8vw, var(--space-9));
    padding-inline: var(--space-5);
    color: var(--color-text);
}

.stages-accordion__head {
    text-align: center;
    padding-block-end: var(--space-5);
}

.stages-accordion__title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: 0.04em;
    margin: 0;
    color: #294265;  /* echoes the dark blue used for HADAS mark in PDF */
}

.stages-accordion__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid #294265;
}

.stages-accordion__row {
    border-block-end: 1px solid #294265;
}

.stages-accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-4) var(--space-3);
    background: transparent;
    border: 0;
    color: #294265;
    font-family: var(--font-serif);
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 400;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}

.stages-accordion__toggle:hover {
    background: rgba(41, 66, 101, 0.04);
}

.stages-accordion__sign {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 26px;
    line-height: 1;
}

.stages-accordion__toggle[aria-expanded="true"] .stages-accordion__sign::before {
    content: '−';
}

.stages-accordion__toggle[aria-expanded="true"] .stages-accordion__sign {
    color: transparent;
    position: relative;
}

.stages-accordion__toggle[aria-expanded="true"] .stages-accordion__sign::before {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: 0;
    color: #294265;
}

.stages-accordion__body {
    padding: 0 var(--space-3) var(--space-5);
    animation: acc-in var(--dur-slow) var(--ease-out);
}

.stages-accordion__body p {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.75;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 60ch;
}

@keyframes acc-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}