/* Accordion Styles for Yoast FAQ, WOAFAQ block, and WOA Accordion block */ 

.schema-faq-section, .woa-faq-item {
	border: var(--faq-item-border, 1px solid #ccc);
	border-radius: var(--faq-item-border-radius, .25rem);
	margin: var(--faq-item-margin, var(--spacing-sm, .5rem));
}
.schema-faq-question, .woa-faq-question {
    display: block;
    padding: var(--faq-question-padding, var(--spacing-md, 1rem));
	font-family: var(--faq-q-font-family, var(--heading-font-family));
	font-size: var(--faq-q-font-size, var(--font-size-lg, 1.2rem));
    margin: var(--faq-q-margin, 0);
    color: var(--faq-q-color);
}
.schema-faq-question:hover, .woa-faq-question:hover {
	cursor: pointer;
}
.schema-faq-question.active, .woa-faq-question.active  {
	border-bottom: var(--faq-item-border, 1px solid #ccc);
}
.schema-faq-question:before, .woa-faq-question:before {
    display: inline-block;
    width: var(--faq-toggle-size, 8px);
    height: var(--faq-toggle-size, 8px);
    margin-right: var(--faq-toggle-margin-right, var(--spacing-sm, .5rem));
    margin-bottom: var(--faq-toggle-margin-bottom, .3rem);
    border-color: var(--faq-toggle-color, var(--color-primary));
    border-style: solid;
    border-top: 0;
    border-right-width: calc( var(--faq-toggle-size, 8px) / 3);
    border-bottom-width: calc( var(--faq-toggle-size, 8px) / 3);
    border-left: 0;
    -webkit-transform: var(--faq-toggle-transform, rotate(45deg));
    transform: var(--faq-toggle-transform, rotate(45deg));
    content: "";
}
.schema-faq-question.active:before, .woa-faq-question.active:before {
	--faq-toggle-transform: rotate(-135deg);
}
.schema-faq-answer, .woa-faq-answer {
    height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: height 0.3s ease-out, min-height 0.3s ease-out, opacity 0.2s ease-out 0.1s, visibility 0.2s ease-out 0.1s;
}
.schema-faq-answer p, .schema-faq-answer a, .schema-faq-answer li, .woa-faq-answer p, .woa-faq-answer a, .woa-faq-answer li {
	font-size: var(--faq-a-font-size, var(--font-size-md, 1rem));
}
.schema-faq-answer.open, .woa-faq-answer.open {
    opacity: 1;
    visibility: visible;
    padding: var(--faq-a-padding, var(--spacing-sm, .5rem));
    min-height: var(--faq-a-min-height, 4rem);
}
a.woa-faq-edit {
    color: var(--faq-toggle-color, var(--color-primary));
    font-weight: 600;
}
a.woa-faq-edit:hover, a.woa-faq-edit:active, a.woa-faq-edit:focus  {
    color: var(--faq-q-color);
}

/* WOA Accordion Styles - with fallbacks to FAQ variables */
.woa-accordion-item {
	border: var(--woa-acc-item-border, var(--faq-item-border, 1px solid #ccc));
	border-radius: var(--woa-acc-item-border-radius, var(--faq-item-border-radius, .25rem));
	margin: var(--woa-acc-item-margin, var(--faq-item-margin, var(--spacing-sm, .5rem)));
}

.woa-accordion-header {
    display: block;
    padding: var(--woa-acc-question-padding, var(--faq-question-padding, var(--spacing-md, 1rem)));
	font-family: var(--woa-acc-q-font-family, var(--faq-q-font-family, var(--heading-font-family)));
	font-size: var(--woa-acc-q-font-size, var(--faq-q-font-size, var(--font-size-lg, 1.2rem)));
    margin: var(--woa-acc-q-margin, var(--faq-q-margin, 0));
    color: var(--woa-acc-q-color, var(--faq-q-color));
}

.woa-accordion-header:hover {
	cursor: pointer;
}

.woa-accordion-header.active {
	border-bottom: var(--woa-acc-item-border, var(--faq-item-border, 1px solid #ccc));
}

.woa-accordion-header:before {
    display: inline-block;
    width: var(--woa-acc-toggle-size, var(--faq-toggle-size, 8px));
    height: var(--woa-acc-toggle-size, var(--faq-toggle-size, 8px));
    margin-right: var(--woa-acc-toggle-margin-right, var(--faq-toggle-margin-right, var(--spacing-sm, .5rem)));
    margin-bottom: var(--woa-acc-toggle-margin-bottom, var(--faq-toggle-margin-bottom, .3rem));
    border-color: var(--woa-acc-toggle-color, var(--faq-toggle-color, var(--color-primary)));
    border-style: solid;
    border-top: 0;
    border-right-width: calc( var(--woa-acc-toggle-size, var(--faq-toggle-size, 8px)) / 3);
    border-bottom-width: calc( var(--woa-acc-toggle-size, var(--faq-toggle-size, 8px)) / 3);
    border-left: 0;
    -webkit-transform: var(--woa-acc-toggle-transform, var(--faq-toggle-transform, rotate(45deg)));
    transform: var(--woa-acc-toggle-transform, var(--faq-toggle-transform, rotate(45deg)));
    content: "";
}

.woa-accordion-header.active:before {
	--woa-acc-toggle-transform: rotate(-135deg);
	--faq-toggle-transform: rotate(-135deg);
}

.woa-accordion-body {
    height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: height 0.3s ease-out, min-height 0.3s ease-out, opacity 0.2s ease-out 0.1s, visibility 0.2s ease-out 0.1s;
}

.woa-accordion-body p, 
.woa-accordion-body a, 
.woa-accordion-body li {
	font-size: var(--woa-acc-a-font-size, var(--faq-a-font-size, var(--font-size-md, 1rem)));
}

.woa-accordion-body.open {
    opacity: 1;
    visibility: visible;
    padding: var(--woa-acc-a-padding, var(--faq-a-padding, var(--spacing-sm, .5rem)));
    min-height: var(--woa-acc-a-min-height, var(--faq-a-min-height, 4rem));
}