/* Forms and Accordion Block Styles */

.wp-block-accordion {
    display: flex;
    flex-direction: column;
}

.wp-block-accordion-heading {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: var(--vw-560-950-16-18);
    line-height: 1.3;
    color: var(--color-text-secondary);
}

.wp-block-accordion-heading:has(button[aria-expanded="true"]) {
    color: var(--color-primary);
}

.wp-block-accordion-panel {
    margin-top: 0;
    font-family: var(--font-family-body);
    padding: 0 var(--vw-560-1200-28-40);
    display: block !important;
    overflow: hidden;
    & > * {
        margin-block-start: var(--cq-300-1000-13-15);
    }
}

.wp-block-accordion-item:has(button[aria-expanded="true"]) {
    background-color: var(--color-background-extra-light);
    border-radius: 8px;
    grid-template-rows: min-content 1fr;
}

.wp-block-accordion-item:has(button[aria-expanded="true"]) + .wp-block-accordion-item:has(button[aria-expanded="true"]) {
    margin-top: 20px;
    transition: grid-template-rows 0.5s ease 0.15s, background-color 0.5s ease 0.45s, margin-top 0.5s ease 0.15s;
}

.wp-block-accordion-item {
    margin-block-start: 0;
    display: grid;
    grid-template-rows: min-content 0fr;
    transition: grid-template-rows 0.5s ease 0.15s, background-color 0.5s ease 0.15s, margin-top 0.5s ease 0.15s;
    .wp-block-accordion-panel {
        *:last-child {
            margin-bottom: var(--vw-560-1200-28-40);
        }
    }
}

.wp-block-accordion-item:has(+ .wp-block-accordion-item) {
    border-bottom: 2px solid #F9F9FE;
}

.wp-block-accordion-item:has(+ .wp-block-accordion-item:has(button[aria-expanded="true"])) {
    border-bottom: 0;
}

.wp-block-accordion-heading__toggle {
    padding: var(--vw-560-1200-28-40);
    gap: 1rem;
}

.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle:focus-within .wp-block-accordion-heading__toggle-icon,
.wp-block-accordion-heading__toggle:focus-visible .wp-block-accordion-heading__toggle-icon {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.wp-block-accordion-heading__toggle-title,
.wp-block-accordion-heading__toggle-icon {
    transition: color 0.3s ease;
}

.wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    transform: none;
}

.wp-block-accordion-heading__toggle-icon {
    font-size: 0;
    line-height: 0;
}

.wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading__toggle-icon::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: currentColor;
    transition: transform 0.3s ease;
}

.wp-block-accordion-heading__toggle-icon::before {
    transform: rotate(90deg);
}

.wp-block-accordion-item.is-open>.wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before {
    transform: rotate(0deg);
}