/**
 * FAQ shortcode (efcb-faq): accordion + search bar.
 * Class prefix: .faq (BEM-ish, matches the rest of the theme's __/_ usage).
 */
/* Same animated wash .site__content itself uses by default (static parts
   here - background-color fallback, background-size, animation; the
   actual gradient colors are Theme-Options-derived, injected by
   get_dynamic_css() in functions.php via the shared ".site__content,
   .news, .faq" selector, reusing the "gradient" keyframe below/in
   main.css). Explicit on .faq itself, not left to show through from
   .site__content behind it, so this section's own background can never
   depend on .site__content's short-page classification
   (_fillShortContent() in jquery.main.js, deciding between this wash and
   a flat secondary-color fill) - user requirement: "the color of the
   background should never change. with filter same background as
   without filter" (a search filtering the visible FAQ list shrinks
   .site__content's real height, which is exactly what can flip that
   classification - unrelated to the FAQ's own content, so the FAQ's
   background shouldn't react to it either). This section's text colours
   (the theme's secondary, via --ef-color-secondary) were chosen for this
   backdrop and stay correctly readable against it unconditionally - see jquery.main.js's own
   _fillShortContent() for the belt-and-suspenders fix that also stops
   .site__content itself from ever choosing the flat fill on a page that
   contains this section. */
/* Padding comes from .ef-section (assets/css/tokens.css). */
.faq {
    background-color: var(--ef-color-surface-alt);
}
.faq__search {
    max-width: 520px;
    margin: 0 auto 30px;
}
.faq__search-wrap {
    position: relative;
}
.faq__search-input {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 44px 14px 18px;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ef-color-secondary);
    background: var(--ef-color-surface);
    border: 2px solid var(--ef-color-secondary);
    border-radius: var(--ef-radius-pill);
}
/* Fallback default - matches the theme's default ef_primary_color
   (var(--ef-color-primary)); overridden by Waldgeister_Theme_Functions::get_dynamic_css() in
   functions.php with the site's actually-configured primary color, same
   pattern main.css's own primary-colored elements follow. */
.faq__search-input:focus {
    outline: none;
    border-color: var(--ef-color-primary);
    box-shadow: 0 0 0 3px var(--ef-color-primary);
}
.faq__search-clear {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    line-height: 1;
    font-size: 20px;
    color: color-mix(in srgb, var(--ef-color-secondary) 72%, transparent);
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}
.faq__search-clear:hover,
.faq__search-clear:focus-visible {
    color: var(--ef-color-secondary);
    background: var(--ef-color-surface-alt);
}
.faq__search-clear[hidden] {
    display: none;
}
.faq__no-results {
    max-width: 520px;
    margin: 0 auto 30px;
    text-align: center;
}
.faq__group {
    margin: 0 0 40px;
}
/* Element in the selector so the AUTHORED size actually applies. This
   rule declared 26px and rendered 36px at desktop, because
   `h3.site__title` (0,1,1) silently outranked a bare class (0,1,0) - found
   by measuring, 2026-08-18. The heading is an <h2> now (it groups a section
   directly under the page h1), which would have made it 42px instead. */
h2.faq__group-title,
.faq__group-title {
    font-size: 26px;
    line-height: 30px;
    margin: 0 0 15px;
    padding: 0 0 12px;
}
.faq__list,
.faq__results {
    max-width: 820px;
    margin: 0 auto;
}
.faq__item {
    border-bottom: 1px solid var(--ef-color-line);
}
.faq__question {
    margin: 0;
    font-size: inherit;
    font-weight: normal;
}
.faq__toggle {
    display: block;
    width: 100%;
    padding: 18px 34px 18px 0;
    font-family: inherit;
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
    text-align: left;
    color: var(--ef-color-secondary);
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}
/* Fallback default - see .faq__search-input:focus's comment above; same
   dynamic-CSS override applies here. */
.faq__toggle:focus-visible {
    outline: 2px solid var(--ef-color-primary);
    outline-offset: 2px;
}
.faq__toggle::after {
    content: '+';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
}
.faq__toggle[aria-expanded="true"]::after {
    content: '\2212'; /* − */
}
.faq__answer {
    padding: 0 34px 20px 0;
    font-size: 15px;
    line-height: 1.6;
}
.faq__answer[hidden] {
    display: none;
}
.faq__answer p:first-child {
    margin-top: 0;
}
.faq__answer p:last-child {
    margin-bottom: 0;
}