.faq-accordion-custom{
	margin: var(--block-margin) auto;
    display: flex;
    flex-direction: column;
    column-gap: var(--item-column-gap);
    row-gap: var(--heading-and-body-gap);
}

.faq-accordion-custom.animate__animated {
    animation-name: fadeInUp;
    
}

.faq-accordion-custom :is(h2, h3):is(h2, h3) {
    margin: 0;
    overflow-wrap: break-word;
}

.faq-accordion-custom:is([data-align="center"]) header {
    text-align: center;
}

.faq-accordion-custom:is([data-align="right"]) header {
    text-align: right;
}

.faq-accordion-custom header{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--small-row-gap);
    align-items: flex-end;
}

.faq-accordion-custom header p {
    margin-bottom: 0;
}

.faq-accordion-custom-grid{
    display: flex;
    flex-direction: column;
    position: relative;
    row-gap: var(--item-row-gap);
}

.faq-accordion-custom details{
    width: 100%;
    border: 0.1rem solid;
}

.faq-accordion-custom details > div > .faq-accordion-custom-buttons a::after {
    content: '';
    display: inline-block;
    margin-left: 0.2em;
    width: 0.4em;
    height: 0.4em;
    border-bottom: 0.2rem solid;
    border-right: 0.2rem solid;
    transform: translateY(-0.1em) rotate(-45deg);
}

.faq-accordion-custom details:not(:last-child){
    margin-bottom: -0.1rem;
}

.faq-accordion-custom details > summary{
    padding: var(--item-row-gap);
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
}

.faq-accordion-custom details > summary h3 {
    font: var(--font-headline-5);
    color: var(--link-color);
}

.faq-accordion-custom details > summary p {
    margin-bottom: 0;
}

.faq-accordion-custom details > summary::-webkit-details-marker {
    display: none;
}

.faq-accordion-custom details > summary::before{
    content: '';
    display: block;
    position: absolute;
    right: var(--item-column-gap);
    border-bottom: 0.2rem solid var(--accent-color);
    width: 1.21333333em;
    transition: 0.3s ease all;
}

.faq-accordion-custom details > summary::after{
    content: '';
    display: block;
    position: absolute;
    right: var(--item-column-gap);
    border-bottom: 0.2rem solid var(--accent-color);
    width: 1.21333333em;
    transform: translateY(50%) translateY(-0.05em) rotateZ(90deg);
    transition: 0.3s ease all;
}

.faq-accordion-custom details[open] > div {
    padding-top: 0;
    padding-left: var(--item-column-gap);
    padding-right: var(--block-margin);
    padding-bottom: var(--item-row-gap);
}

.faq-accordion-custom details[open] > div p a {
    color: var(--color-white) !important;
}

.faq-accordion-custom details[open] > summary::after{
    transition: 0.3s ease all;
    transform: rotateZ(0deg);
}

.faq-accordion-custom details > summary:is(:active, :focus, :hover) {
    color: var(--hover-link-color);
    transition: 0.3s ease all;
}

.faq-accordion-custom details > summary:is(:active, :focus, :hover)::before,
.faq-accordion-custom details > summary:is(:active, :focus, :hover)::after{
    border-bottom: 0.2rem solid var(--hover-link-color);
    transition: 0.3s ease all;
}

.faq-accordion-custom details:not([open]) {
    transition: 0.3s ease all;
}

.faq-accordion-custom details[open] {
    color: var(--color-white);
    background-color: var(--accent-color);
    transition: 0.3s ease all;
}

.faq-accordion-custom details[open] > summary h3 {
    color: var(--color-white);
    transition: 0.3s ease all;
}

.faq-accordion-custom details[open] > summary{
    color: var(--color-white);
    transition: 0.3s ease all;
}

.faq-accordion-custom details[open] > summary::before,
.faq-accordion-custom details[open] > summary::after{
    border-bottom: 0.2rem solid var(--color-white);
    transition: 0.3s ease all;
}

.faq-accordion-custom details[open] a.tertiary-button {
    color: var(--color-white);
    text-decoration-color: var(--color-white);
}

.faq-accordion-custom details > div{
    padding-bottom: 1em;
}

.faq-accordion-custom details > div > *:last-child{
    margin-bottom: 0;
}

.faq-accordion-custom-grid-buttons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--buttons-gap);
}

.faq-accordion-custom-buttons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--buttons-gap);
    margin-bottom: var(--item-row-gap);
}

.faq-accordion-custom details[open] a.primary-button {
    --primary-button-text-color: var(--color-deepest-blue);
    --primary-button-background-color: var(--color-white);
    --primary-button-border-color: var(--color-white);
}

.faq-accordion-custom details[open] a.secondary-button {
    --secondary-button-text-color: var(--color-white);
    --secondary-button-background-color: transparent;
    --secondary-button-border-color: var(--color-white);
}

.faq-accordion-custom details[open] a.secondary-button:is(:active, :hover, :focus) {
    --secondary-button-hover-text-color: var(--color-deepest-blue);
    --secondary-button-hover-background-color: var(--color-white);
    --secondary-button-hover-border-color: var(--color-white);
}

a.faq-accordion-custom-grid-button {
    padding: 0 0 calc(var(--item-row-gap) / 2);
}

@media (max-width: 991px) {
    .faq-accordion-custom-grid details summary h3 {
        max-width: 25rem;
        margin-bottom: 0;
    }
}

@media (min-width: 992px) {
    .faq-accordion-custom header{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--large-column-gap);
    }

    .faq-accordion-custom-buttons {
        grid-column: 2;
    }
}
