.ffbps-faq {
--ffbps-accent:
var(
--wp--custom--ffbps--accent,
var(
--wp--preset--color--accent,
var(--wp--preset--color--primary, currentColor)
)
);
--ffbps-title-size: 1.5em;
--ffbps-question-size: 1em;
--ffbps-answer-size: 1em;
--ffbps-question-weight: 600;
--ffbps-section-spacing: 2em;
--ffbps-item-padding-y: 0.9em;
--ffbps-item-padding-x: 1em;
--ffbps-radius: 0;
--ffbps-icon-size: 1.75em;
clear: both;
margin-block: var(--ffbps-section-spacing);
color: inherit;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
.ffbps-faq__header {
margin-block-end: 0.75em;
}
.ffbps-faq__eyebrow {
display: block;
margin-block-end: 0.2em;
color: var(--ffbps-accent);
font-size: 0.75em;
font-weight: 700;
line-height: 1.4;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.ffbps-faq__title {
margin-block: 0;
color: inherit;
font-family: inherit;
font-size: var(--ffbps-title-size);
line-height: 1.25;
}
.ffbps-faq__items {
overflow: hidden;
border-block-start: 1px solid rgba(127, 127, 127, 0.28);
border-radius: var(--ffbps-radius);
}
@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
.ffbps-faq__items {
border-block-start-color: color-mix(in srgb, currentColor 22%, transparent);
}
}
.ffbps-faq__item {
margin: 0;
color: inherit;
background: transparent;
border: 0;
border-block-end: 1px solid rgba(127, 127, 127, 0.28);
}
@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
.ffbps-faq__item {
border-block-end-color: color-mix(in srgb, currentColor 22%, transparent);
}
}
.ffbps-faq__question {
position: relative;
display: block;
min-height: calc(var(--ffbps-icon-size) + (2 * var(--ffbps-item-padding-y)));
margin: 0;
padding-block: var(--ffbps-item-padding-y);
padding-inline: var(--ffbps-item-padding-x);
padding-inline-end: calc(var(--ffbps-item-padding-x) + var(--ffbps-icon-size) + 1em);
color: inherit;
font: inherit;
line-height: 1.45;
background: transparent;
border: 0;
cursor: pointer;
list-style: none;
transition: opacity 0.2s ease;
}
.ffbps-faq__question::-webkit-details-marker {
display: none;
}
.ffbps-faq__question::marker {
content: "";
}
.ffbps-faq__question:hover {
opacity: 0.78;
}
.ffbps-faq__question:focus {
outline: none;
}
.ffbps-faq__question:focus-visible {
outline: 2px solid var(--ffbps-accent);
outline-offset: -2px;
}
.ffbps-faq__question-heading {
margin: 0;
color: inherit;
font-family: inherit;
font-size: var(--ffbps-question-size);
font-weight: var(--ffbps-question-weight);
line-height: inherit;
}
span.ffbps-faq__question-heading {
display: block;
}
.ffbps-faq__question::before,
.ffbps-faq__question::after {
position: absolute;
top: 50%;
inset-inline-end: var(--ffbps-item-padding-x);
width: calc(var(--ffbps-icon-size) * 0.45);
height: 1px;
color: var(--ffbps-accent);
background: currentColor;
content: "";
transform: translateY(-50%);
transition: opacity 0.2s ease;
}
.ffbps-faq__question::after {
inset-inline-end: calc(var(--ffbps-item-padding-x) + (var(--ffbps-icon-size) * 0.225));
width: 1px;
height: calc(var(--ffbps-icon-size) * 0.45);
}
.ffbps-faq__item[open] > .ffbps-faq__question::after {
opacity: 0;
}
.ffbps-faq__answer {
color: inherit;
font-size: var(--ffbps-answer-size);
background: transparent;
}
.ffbps-faq__answer-inner {
padding-block: 0 calc(var(--ffbps-item-padding-y) + 0.2em);
padding-inline: var(--ffbps-item-padding-x);
font-family: inherit;
line-height: inherit;
}
.ffbps-faq__answer-inner > :first-child {
margin-block-start: 0;
}
.ffbps-faq__answer-inner > :last-child {
margin-block-end: 0;
}
.ffbps-faq__answer-inner a {
color: inherit;
}
@media (prefers-reduced-motion: reduce) {
.ffbps-faq__question,
.ffbps-faq__question::before,
.ffbps-faq__question::after {
transition: none;
}
}
@media print {
.ffbps-faq__answer {
display: block !important;
}
}