/* =====================================================================
* GEO Best-Of — FAQ shortcode
*
* Markup contract (see Bestof_FAQ_Shortcode::render_html):
*
*
*
* All design tokens are exposed as CSS custom properties on
* `.bof-faq`. Themes / page-builders can re-skin the block by
* targeting the wrapper:
*
* .bof-faq { --bof-faq-accent: #c0392b; --bof-faq-radius: 0; }
*
* The shortcode also accepts a `class="…"` attribute so editors can
* scope custom CSS to a single placement without affecting other FAQs
* on the same site.
* ===================================================================== */
.bof-faq {
/* ── design tokens (override via theme CSS) ───────────────────── */
--bof-faq-text: currentColor;
--bof-faq-muted: color-mix(in srgb, currentColor 60%, transparent);
--bof-faq-bg: transparent;
--bof-faq-border: color-mix(in srgb, currentColor 14%, transparent);
--bof-faq-accent: #c0392b;
--bof-faq-accent-soft: color-mix(in srgb, var(--bof-faq-accent) 12%, transparent);
--bof-faq-radius: 0px;
--bof-faq-gap: 0px;
--bof-faq-pad-y: 1.25rem;
--bof-faq-pad-x: 0;
--bof-faq-font-q: inherit;
--bof-faq-font-a: inherit;
--bof-faq-size-q: 1.0625rem;
--bof-faq-size-a: 1rem;
--bof-faq-weight-q: 700;
--bof-faq-icon-size: 22px;
--bof-faq-icon-stroke: 2px;
--bof-faq-duration: .25s;
display: block;
color: var(--bof-faq-text);
font-family: inherit;
}
.bof-faq * { box-sizing: border-box; }
.bof-faq__title {
margin: 0 0 1.25rem;
font-family: var(--bof-faq-font-q);
font-weight: 800;
line-height: 1.15;
}
/* ── List container ─────────────────────────────────────────────── */
.bof-faq__list {
display: flex;
flex-direction: column;
gap: var(--bof-faq-gap);
background: var(--bof-faq-bg);
border-radius: var(--bof-faq-radius);
overflow: hidden;
}
/* ── Single item ────────────────────────────────────────────────── */
.bof-faq__item {
position: relative;
border-bottom: 1px solid var(--bof-faq-border);
padding: 0;
margin: 0;
}
.bof-faq__item:last-of-type { border-bottom: none; }
/* Native defaults out of the way; we control the affordance. */
.bof-faq__summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 1rem;
padding: var(--bof-faq-pad-y) var(--bof-faq-pad-x);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.bof-faq__summary::-webkit-details-marker { display: none; }
.bof-faq__summary::marker { content: ''; }
.bof-faq__summary:focus-visible {
outline: 2px solid var(--bof-faq-accent);
outline-offset: 4px;
border-radius: 4px;
}
.bof-faq__q {
margin: 0;
flex: 1 1 auto;
font-family: var(--bof-faq-font-q);
font-size: var(--bof-faq-size-q);
font-weight: var(--bof-faq-weight-q);
line-height: 1.4;
color: var(--bof-faq-text);
}
.bof-faq__icon {
flex: 0 0 var(--bof-faq-icon-size);
width: var(--bof-faq-icon-size);
height: var(--bof-faq-icon-size);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--bof-faq-accent);
transition: transform var(--bof-faq-duration) ease;
}
/* ── Answer ─────────────────────────────────────────────────────── */
.bof-faq__answer {
padding: 0 var(--bof-faq-pad-x) calc(var(--bof-faq-pad-y) * 1.15);
color: var(--bof-faq-muted);
font-family: var(--bof-faq-font-a);
font-size: var(--bof-faq-size-a);
line-height: 1.65;
}
.bof-faq__answer p:first-child { margin-top: 0; }
.bof-faq__answer p:last-child { margin-bottom: 0; }
.bof-faq__answer a {
color: var(--bof-faq-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ───────────────────────────────────────────────────────────────
* ICONS — plus/minus, chevron, circles, none
* ─────────────────────────────────────────────────────────────── */
/* Plus/minus (default). Built from two CSS-only bars so the
* "+" → "×" rotation is GPU-cheap. */
.bof-faq__icon-plus {
position: relative;
display: inline-block;
width: var(--bof-faq-icon-size);
height: var(--bof-faq-icon-size);
}
.bof-faq__icon-plus .bof-faq__icon-bar {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: var(--bof-faq-icon-stroke);
background: var(--bof-faq-accent);
border-radius: 999px;
transition: transform var(--bof-faq-duration) ease, opacity var(--bof-faq-duration) ease;
}
.bof-faq__icon-plus .bof-faq__icon-bar--h { transform: translate(-50%, -50%); }
.bof-faq__icon-plus .bof-faq__icon-bar--v { transform: translate(-50%, -50%) rotate(90deg); }
/* Open state — collapse the vertical bar into the horizontal so
* the icon morphs from + to a single horizontal minus. */
.bof-faq--icons-plusminus .bof-faq__item[open] .bof-faq__icon-plus .bof-faq__icon-bar--v {
transform: translate(-50%, -50%) rotate(0deg);
opacity: 0;
}
/* Chevron (svg) — rotate when item is open. */
.bof-faq__icon-svg--chevron { transition: transform var(--bof-faq-duration) ease; }
.bof-faq--icons-chevron .bof-faq__item[open] .bof-faq__icon-svg--chevron { transform: rotate(180deg); }
/* "Circles" — same +/× geometry but inside a soft pill. */
.bof-faq__icon-circle {
position: relative;
display: inline-flex;
width: var(--bof-faq-icon-size);
height: var(--bof-faq-icon-size);
border-radius: 999px;
background: var(--bof-faq-accent-soft);
}
.bof-faq__icon-circle .bof-faq__icon-bar {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: var(--bof-faq-icon-stroke);
background: var(--bof-faq-accent);
border-radius: 999px;
transition: transform var(--bof-faq-duration) ease, opacity var(--bof-faq-duration) ease;
}
.bof-faq__icon-circle .bof-faq__icon-bar--h { transform: translate(-50%, -50%); }
.bof-faq__icon-circle .bof-faq__icon-bar--v { transform: translate(-50%, -50%) rotate(90deg); }
.bof-faq--icons-circles .bof-faq__item[open] .bof-faq__icon-circle .bof-faq__icon-bar--v {
transform: translate(-50%, -50%) rotate(0);
opacity: 0;
}
/* ───────────────────────────────────────────────────────────────
* STYLE VARIANTS — accordion / list / cards / plain
* ─────────────────────────────────────────────────────────────── */
/* `list` — no native open/close, every answer always visible. The JS
* helper detects this and disables the toggle handler. */
.bof-faq--style-list .bof-faq__summary { cursor: default; }
.bof-faq--style-list .bof-faq__icon { display: none; }
.bof-faq--style-list .bof-faq__answer { display: block; }
/* `plain` — no separators, no icon, just headings + paragraphs.
* Useful when you want maximum freedom to style from your own CSS. */
.bof-faq--style-plain .bof-faq__item { border-bottom: none; }
.bof-faq--style-plain .bof-faq__icon { display: none; }
.bof-faq--style-plain .bof-faq__summary { cursor: default; padding-bottom: .25rem; }
.bof-faq--style-plain .bof-faq__answer { padding-top: 0; }
/* `cards` — every item gets its own padded card with a soft shadow. */
.bof-faq--style-cards {
--bof-faq-gap: .75rem;
--bof-faq-pad-x: 1.25rem;
--bof-faq-pad-y: 1.1rem;
}
.bof-faq--style-cards .bof-faq__item {
background: var(--bof-faq-bg, #fff);
border: 1px solid var(--bof-faq-border);
border-radius: var(--bof-faq-radius, 12px);
box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.bof-faq--style-cards { --bof-faq-radius: 14px; }
/* ───────────────────────────────────────────────────────────────
* THEMES — default / minimal / bordered / dark
* ─────────────────────────────────────────────────────────────── */
.bof-faq--theme-minimal {
--bof-faq-border: transparent;
--bof-faq-pad-y: .9rem;
}
.bof-faq--theme-minimal .bof-faq__item + .bof-faq__item { border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent); border-bottom: none; }
.bof-faq--theme-bordered {
--bof-faq-radius: 14px;
--bof-faq-pad-x: 1.25rem;
border: 1px solid var(--bof-faq-border);
border-radius: var(--bof-faq-radius);
padding: .5rem 0;
}
.bof-faq--theme-bordered .bof-faq__item { padding-left: 1.25rem; padding-right: 1.25rem; }
.bof-faq--theme-bordered .bof-faq__item:last-of-type { border-bottom: none; }
.bof-faq--theme-dark {
--bof-faq-text: #f3f4f6;
--bof-faq-muted: #cbd5e1;
--bof-faq-border: rgba(255,255,255,.12);
--bof-faq-bg: #0f172a;
--bof-faq-accent: #f97316;
color: var(--bof-faq-text);
}
.bof-faq--theme-dark .bof-faq__list {
background: var(--bof-faq-bg);
padding: .25rem 1.25rem;
border-radius: 14px;
}
/* ───────────────────────────────────────────────────────────────
* ACCORDION ANIMATION
*
* Native doesn't animate the open/close transition. We
* progressively enhance with a CSS-only height animation that the
* public JS triggers by setting a `--bof-faq-content-h` custom
* property to the measured answer height.
* ─────────────────────────────────────────────────────────────── */
.bof-faq--js .bof-faq__answer {
overflow: hidden;
max-height: 0;
opacity: 0;
transform: translateY(-4px);
transition: max-height var(--bof-faq-duration) ease, opacity var(--bof-faq-duration) ease, transform var(--bof-faq-duration) ease;
}
.bof-faq--js .bof-faq__item[open] .bof-faq__answer {
max-height: var(--bof-faq-content-h, 2000px);
opacity: 1;
transform: translateY(0);
}
/* When JS isn't available, fall back to the browser's default
* behaviour (answer fully visible when open). */
.bof-faq:not(.bof-faq--js) .bof-faq__answer {
max-height: none;
opacity: 1;
}
/* Reduce motion users skip the animation entirely. */
@media (prefers-reduced-motion: reduce) {
.bof-faq__icon,
.bof-faq__icon-svg--chevron,
.bof-faq__icon-plus .bof-faq__icon-bar,
.bof-faq__icon-circle .bof-faq__icon-bar,
.bof-faq--js .bof-faq__answer { transition: none !important; }
}