/**
 * FAQ block.
 *
 * Values mirror the two Tilda originals (bebestschool.es/en/spanish): the
 * heading record rec617543137 — 28 px/600 at the top of a 226 px band, a
 * 20 px/400 line 5 px under it and a 62 px chat button 22 px under that — and
 * the t849 accordion rec617543138, whose rows are 24 px/600 questions with
 * 27 px of air above and below, a 40 px plus on the right, 18 px/300 answers,
 * and a 1 px #eee rule above every row and below the last.
 *
 * The Zero Block sits on the 1200 px grid while the accordion sits in Tilda's
 * t-container, which is the same grid with 20 px of padding — so the questions
 * start 20 px right of the heading. That offset is kept.
 */

.bbs-faq {
    --bbs-faq-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bbs-faq-container: 1200px;
    --bbs-faq-gutter: 20px;

    --bbs-faq-line: #eeeeee;
    --bbs-faq-ink: #000000;
    --bbs-faq-icon: #222222;
    --bbs-faq-accent: #ff5c00;

    padding: 20px 0 60px;
    background: #ffffff;
    font-family: var(--bbs-faq-font);
}

.bbs-faq *,
.bbs-faq *::before,
.bbs-faq *::after {
    box-sizing: border-box;
}

.bbs-faq__inner {
    max-width: calc(var(--bbs-faq-container) + var(--bbs-faq-gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--bbs-faq-gutter);
}

/* ── Heading, line, chat button ── */
.bbs-faq__intro {
    padding-bottom: 32px;
}

.bbs-faq__title {
    margin: 0;
    color: var(--bbs-faq-ink);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 600;
}

.bbs-faq__text {
    /* The original's boxes sit 5 px apart; the heading's own line box holds the rest. */
    max-width: 490px;
    margin: 5px 0 0;
    /* Black at 60%, as in the original — it reads as grey beside the heading. */
    color: var(--bbs-faq-ink);
    opacity: 0.6;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 400;
}

.bbs-faq__chat {
    display: inline-block;
    margin-top: 22px;
    line-height: 0;
    transition: transform 0.2s ease-in-out;
}

.bbs-faq__chat:hover,
.bbs-faq__chat:focus-visible {
    transform: scale(1.06);
}

.bbs-faq__chat:focus-visible {
    outline: 2px solid var(--bbs-faq-accent);
    outline-offset: 4px;
}

.bbs-faq__chat-icon {
    display: block;
    width: 62px;
    height: 62px;
}

/* ── Questions ──
 * Inset 20 px inside the grid: the accordion is in Tilda's t-container while
 * the heading above it is on the bare grid. */
.bbs-faq__list {
    margin: 0;
    padding: 0 var(--bbs-faq-gutter);
    list-style: none;
}

.bbs-faq__item {
    margin: 0;
    border-top: 1px solid var(--bbs-faq-line);
}

/*
 * The rule below the list closes it off. It belongs to the last row, not to
 * the list: a border on the list is drawn outside its side padding and would
 * run 40 px wider than every rule above it.
 */
.bbs-faq__item:last-child {
    border-bottom: 1px solid var(--bbs-faq-line);
}

/* A paragraph since it stopped being an H3/H4; clear carries over what the
   theme gives every heading, so the list lays out exactly as before. */
.bbs-faq__question {
    clear: both;
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

.bbs-faq__trigger {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 27px 50px 27px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--bbs-faq-ink);
    font-family: inherit;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.bbs-faq__trigger:focus-visible {
    outline: 2px solid var(--bbs-faq-accent);
    outline-offset: -2px;
}

/*
 * The circle takes the fill and the plus takes the stroke, so hovering turns
 * the whole mark into an orange disc with a white cross on it.
 */
.bbs-faq__icon {
    position: absolute;
    top: 50%;
    right: 0;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    fill: transparent;
    stroke: var(--bbs-faq-icon);
    transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
}

.bbs-faq__trigger:hover .bbs-faq__icon,
.bbs-faq__trigger:focus-visible .bbs-faq__icon {
    fill: var(--bbs-faq-accent);
    stroke: #ffffff;
}

.bbs-faq__icon-lines {
    transform-origin: center;
    transition: transform 0.3s ease-in-out;
}

.bbs-faq__item.is-open .bbs-faq__icon-lines {
    transform: rotate(-45deg);
}

/* ── Answers ──
 * A 0fr→1fr grid row opens to exactly the height of the text, which a
 * max-height guess cannot do. visibility keeps a closed answer's links out of
 * the tab order, and waits for the close to finish before hiding. */
.bbs-faq__answer {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.3s ease-in-out, visibility 0s linear 0.3s;
}

.bbs-faq__item.is-open .bbs-faq__answer {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 0.3s ease-in-out, visibility 0s;
}

.bbs-faq__answer-inner {
    overflow: hidden;
    min-height: 0;
}

.bbs-faq__answer-inner > *:first-child {
    margin-top: 0;
}

.bbs-faq__answer-inner p,
.bbs-faq__answer-inner ul,
.bbs-faq__answer-inner ol {
    margin: 0 0 20px;
    color: var(--bbs-faq-ink);
    font-size: 18px;
    line-height: 1.55;
    font-weight: 300;
}

.bbs-faq__answer-inner ul,
.bbs-faq__answer-inner ol {
    padding-left: 26px;
}

.bbs-faq__answer-inner a {
    color: var(--bbs-faq-accent);
}

/* ── Answers style ──
 * The t585 accordion at the end of the exercise pages (rec2018290573): 30 px
 * above and 45 px below, a centred 42 px/600 heading 80 px over the list, the
 * list 8 columns of the grid wide (760 px, 600 px from 1199 down, full width
 * below 640), 40 px icons that fill #eee on hover, every row closed, and
 * 16 px/300 numbered answers in italics with 40 px under them. */
.bbs-faq--answers {
    padding: 30px 0 45px;
}

.bbs-faq--answers .bbs-faq__intro {
    padding-bottom: 80px;
    text-align: center;
}

.bbs-faq--answers .bbs-faq__title {
    font-size: 42px;
    line-height: 1.23;
}

.bbs-faq--answers .bbs-faq__list {
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
}

.bbs-faq--answers .bbs-faq__trigger:hover .bbs-faq__icon,
.bbs-faq--answers .bbs-faq__trigger:focus-visible .bbs-faq__icon {
    fill: var(--bbs-faq-line);
    stroke: var(--bbs-faq-icon);
}

/* A margin, not padding: padding would hold a closed row open. */
.bbs-faq--answers .bbs-faq__answer-inner > :last-child {
    margin-bottom: 40px;
}

.bbs-faq--answers .bbs-faq__answer-inner p,
.bbs-faq--answers .bbs-faq__answer-inner ul,
.bbs-faq--answers .bbs-faq__answer-inner ol {
    margin-bottom: 0;
    font-size: 16px;
    line-height: 1.55;
}

.bbs-faq--answers .bbs-faq__answer-inner > * + * {
    margin-top: 20px;
}

.bbs-faq--answers .bbs-faq__answer-inner ol,
.bbs-faq--answers .bbs-faq__answer-inner ul {
    padding-left: 2em;
}

.bbs-faq--answers .bbs-faq__answer-inner li {
    font-style: italic;
}

/* ── 1199 and below ── */
@media (max-width: 1199px) {
    .bbs-faq--answers .bbs-faq__title {
        font-size: 38px;
    }

    .bbs-faq--answers .bbs-faq__list {
        max-width: 600px;
    }

    .bbs-faq--answers .bbs-faq__trigger {
        font-size: 22px;
    }

    .bbs-faq--answers .bbs-faq__answer-inner p,
    .bbs-faq--answers .bbs-faq__answer-inner ul,
    .bbs-faq--answers .bbs-faq__answer-inner ol {
        font-size: 14px;
    }
}

/* ── 959 and below ── */
@media (max-width: 959px) {
    .bbs-faq--answers .bbs-faq__intro {
        padding-bottom: 45px;
    }

    .bbs-faq__trigger {
        font-size: 22px;
    }

    .bbs-faq__answer-inner p,
    .bbs-faq__answer-inner ul,
    .bbs-faq__answer-inner ol {
        font-size: 16px;
    }
}

/* ── 639 and below ── */
@media (max-width: 639px) {
    .bbs-faq {
        --bbs-faq-gutter: 16px;

        padding-bottom: 40px;
    }

    .bbs-faq__title {
        font-size: 24px;
    }

    .bbs-faq__text {
        font-size: 18px;
    }

    .bbs-faq__chat-icon {
        width: 52px;
        height: 52px;
    }

    /* The original tightens its rows down here; the questions get long. */
    .bbs-faq__trigger {
        padding: 15px 44px 14px 0;
        font-size: 20px;
    }

    .bbs-faq__icon {
        width: 32px;
        height: 32px;
    }

    .bbs-faq__answer-inner p,
    .bbs-faq__answer-inner ul,
    .bbs-faq__answer-inner ol {
        margin-bottom: 15px;
        font-size: 14px;
        line-height: 1.45;
    }
}

/* The answers style keeps 20 px gutters and 40 px icons on phones. */
@media (max-width: 639px) {
    .bbs-faq.bbs-faq--answers {
        --bbs-faq-gutter: 20px;

        padding-bottom: 45px;
    }

    .bbs-faq--answers .bbs-faq__title {
        font-size: 30px;
    }

    .bbs-faq--answers .bbs-faq__trigger {
        padding-right: 50px;
        font-size: 20px;
    }

    .bbs-faq--answers .bbs-faq__icon {
        width: 40px;
        height: 40px;
    }

    .bbs-faq--answers .bbs-faq__answer-inner > :last-child {
        margin-bottom: 25px;
    }

    .bbs-faq--answers .bbs-faq__answer-inner p,
    .bbs-faq--answers .bbs-faq__answer-inner ul,
    .bbs-faq--answers .bbs-faq__answer-inner ol {
        font-size: 12px;
        line-height: 1.45;
    }

    .bbs-faq--answers .bbs-faq__answer-inner > * + * {
        margin-top: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bbs-faq__answer,
    .bbs-faq__item.is-open .bbs-faq__answer,
    .bbs-faq__icon,
    .bbs-faq__icon-lines,
    .bbs-faq__chat {
        transition: none;
    }
}