/* =====================================================================
   Woulfe's K9 — FAQs
   Depends on tokens.css and reveal.css.

   Two columns: the heading and a "talk to someone" card on the left, the
   questions on the right. The left column sticks while the list scrolls, so
   the way out of the section is always on screen — which is the whole point
   of the card. Below 1080px it unsticks and stacks.

   Surface treatment is the testimonials block's: black ground with an
   ambient radial, panels on --k9-surface-card with a hairline and a top
   highlight, glass on anything that overlays. See DESIGN-SYSTEM.md §9.
   ===================================================================== */

.wk9-faq {
    /* Anchor target — the sticky bar would otherwise land on the heading. */
    scroll-margin-top: calc(var(--wk9-header-offset, 108px) + var(--k9-space-4));
    position: relative;
    box-sizing: border-box;
    padding: var(--k9-section-y) 0;
    background: var(--k9-surface);
    color: var(--k9-text);
    font-family: var(--k9-font-body);
    isolation: isolate;
    overflow: hidden;

    /* Full-bleed out of whatever container it is dropped into. */
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

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

.wk9-faq__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 50% at 18% 12%, var(--k9-ink-800) 0%, transparent 70%);
}

.wk9-faq__inner {
    width: min(var(--k9-container), calc(100% - (var(--k9-gutter) * 2)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: clamp(var(--k9-space-8), 5vw, var(--k9-space-20));
}

/* Aside ---------------------------------------------------------------- */

/* Stuck to the BOTTOM, not the top.
   Pinning to the top means the column detaches the moment the section reaches
   the header and immediately sits ~120px below the first question — the two
   columns are only level for the instant before it pins. Sticking to the
   bottom instead leaves the column in flow, so it stays level with the list
   the whole way down, and only pins once it would otherwise scroll off the
   foot of the screen. It still releases at the end of the grid row, which is
   the bottom of the question list.

   This relies on the column being shorter than the viewport — it is, by some
   way — otherwise the top of it would be pinned out of sight. */
.wk9-faq__aside {
    position: sticky;
    bottom: var(--k9-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--k9-space-10);
}

.wk9-faq__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--k9-space-3);
    margin: 0 0 var(--k9-space-4);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
}

.wk9-faq__eyebrow-rule {
    display: block;
    width: 32px;
    height: 1px;
    flex: 0 0 32px;
    background: var(--k9-text-faint);
}

.wk9-faq__heading {
    margin: 0;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-display-lg);
    line-height: var(--k9-leading-display);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
    text-wrap: balance;
}

.wk9-faq__lede {
    margin: var(--k9-space-4) 0 0;
    font-size: var(--k9-text-body-lg);
    line-height: var(--k9-leading-snug);
    color: var(--k9-text-muted);
    max-width: 44ch;
}

/* Card ----------------------------------------------------------------- */

.wk9-faq__card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--k9-space-4);
    padding: var(--k9-space-8);
    border-radius: var(--k9-radius-xl);
    border: 1px solid var(--k9-line);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 44%),
        var(--k9-surface-card);
    box-shadow: var(--k9-shadow-3), var(--k9-shadow-inset);
}

.wk9-faq__card-kicker {
    display: flex;
    align-items: center;
    gap: var(--k9-space-3);
    margin: 0;
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-secondary);
}

/* The same live dot the header uses beside the WhatsApp number — it means
   "there is a person on the end of this", and it should mean that in both
   places or in neither. */
.wk9-faq__dot {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: var(--k9-radius-pill);
    background: var(--k9-success);
}

.wk9-faq__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--k9-success);
    animation: wk9-faq-pulse 2.4s var(--k9-ease) infinite;
}

@keyframes wk9-faq-pulse {
    0%   { opacity: 0.55; transform: scale(1); }
    70%  { opacity: 0;    transform: scale(2.6); }
    100% { opacity: 0;    transform: scale(2.6); }
}

.wk9-faq__card-title {
    margin: 0;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-lg);
    line-height: var(--k9-leading-display);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
}

.wk9-faq__card-text {
    margin: 0;
    font-size: var(--k9-text-body-sm);
    line-height: 1.65;
    color: var(--k9-text-muted);
}

.wk9-faq__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--k9-space-3);
    width: 100%;
    min-height: 52px;
    margin-top: var(--k9-space-2);
    padding: 0 var(--k9-space-6);
    border-radius: var(--k9-radius-pill);
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background var(--k9-duration-fast) var(--k9-ease),
        transform var(--k9-duration-fast) var(--k9-ease);
}

.wk9-faq__cta svg { transition: transform var(--k9-duration) var(--k9-ease); }
.wk9-faq__cta:hover { background: var(--k9-action-hover); }
.wk9-faq__cta:hover svg { transform: translateX(3px); }
.wk9-faq__cta:active { transform: translateY(1px); }

.wk9-faq__cta:focus-visible {
    outline: none;
    box-shadow: var(--k9-focus-ring);
}

.wk9-faq__call {
    margin: 0;
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
}

.wk9-faq__call a {
    color: var(--k9-text);
    font-weight: var(--k9-weight-bold);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--k9-line-strong);
}

.wk9-faq__call a:hover { border-bottom-color: var(--k9-text); }

/* List ----------------------------------------------------------------- */

.wk9-faq__list {
    min-width: 0;
    margin: 0;
    display: grid;
    gap: var(--k9-space-3);
    align-content: start;
}

/* Rounded cards, matching the FAQ block already published on /faqs/ — same
   radius, same surface, same hairline. Two components answering the same
   nine questions should not be two different designs. */
.wk9-faq__item {
    overflow: hidden;
    border: var(--k9-border-width) solid var(--k9-line);
    border-radius: var(--k9-radius-md);
    background: var(--k9-surface-card);
    transition:
        background var(--k9-duration-fast) var(--k9-ease),
        border-color var(--k9-duration-fast) var(--k9-ease);
}

.wk9-faq__item:hover { background: var(--k9-surface-hover); }
.wk9-faq__item.is-open { border-color: var(--k9-line-strong); }

/* BeTheme styles bare <button> elements — it was handing this one a 999px
   radius and the display face, so the hover read as a pale lozenge in the
   wrong typeface. Everything it touches is therefore declared outright, and
   scoped to two classes so a single-class theme rule cannot take it back.
   See DESIGN-SYSTEM.md §12, rule 9. */
.wk9-faq .wk9-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k9-space-4);
    width: 100%;
    margin: 0;
    padding: var(--k9-space-4) var(--k9-space-5);
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    font-family: var(--k9-font-body);
    font-size: var(--k9-text-body);
    font-weight: var(--k9-weight-semibold);
    line-height: var(--k9-leading-snug);
    letter-spacing: var(--k9-tracking-body);
    color: var(--k9-text-secondary);
    transition: color var(--k9-duration-fast) var(--k9-ease);
}

.wk9-faq .wk9-faq__q:hover,
.wk9-faq .wk9-faq__item.is-open .wk9-faq__q { color: var(--k9-text); }

.wk9-faq .wk9-faq__q:focus-visible {
    outline: none;
    box-shadow: var(--k9-focus-ring);
    border-radius: var(--k9-radius-md);
}

/* Round chip carrying a plus that becomes a minus, and inverting to solid
   white when the answer is open — the same control as on /faqs/. The bars
   are drawn in CSS rather than swapped as two icons so they can animate. */
.wk9-faq__sign {
    position: relative;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: var(--k9-radius-pill);
    border: var(--k9-border-width) solid var(--k9-line);
    background: var(--k9-surface-inset);
    transition:
        background var(--k9-duration-fast) var(--k9-ease),
        border-color var(--k9-duration-fast) var(--k9-ease);
}

.wk9-faq__sign::before,
.wk9-faq__sign::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 2px;
    border-radius: 2px;
    background: var(--k9-text);
    transform: translate(-50%, -50%);
    transition:
        transform var(--k9-duration-slow) var(--k9-ease),
        background var(--k9-duration-fast) var(--k9-ease);
}

.wk9-faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }

.wk9-faq__item.is-open .wk9-faq__sign {
    background: var(--k9-action);
    border-color: var(--k9-action);
}

.wk9-faq__item.is-open .wk9-faq__sign::before,
.wk9-faq__item.is-open .wk9-faq__sign::after { background: var(--k9-action-text); }
.wk9-faq__item.is-open .wk9-faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); }

/* The collapse only exists once JavaScript has claimed the section. Without
   it every answer is simply open — nothing is hidden that cannot be shown.
   Animating grid-template-rows means no height has to be measured. */
.wk9-faq.is-enhanced .wk9-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--k9-duration-slow) var(--k9-ease);
}

.wk9-faq.is-enhanced .wk9-faq__item.is-open .wk9-faq__a {
    grid-template-rows: 1fr;
}

.wk9-faq.is-enhanced .wk9-faq__a-in {
    overflow: hidden;
    min-height: 0;
}

.wk9-faq__a-in p {
    margin: 0;
    padding: var(--k9-space-4) var(--k9-space-5);
    border-top: var(--k9-border-width) solid var(--k9-line);
    font-size: var(--k9-text-body-sm);
    line-height: var(--k9-leading-body);
    color: var(--k9-text-muted);
    max-width: 62ch;
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
    .wk9-faq__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--k9-space-10);
    }

    /* Sticky is meaningless once the card is above the list rather than
       beside it, and it would pin the card over the questions. */
    .wk9-faq__aside {
        position: static;
        bottom: auto;
        gap: var(--k9-space-8);
    }

    .wk9-faq__lede { max-width: 60ch; }
}

@media (max-width: 600px) {
    .wk9-faq__card { padding: var(--k9-space-6); }
    .wk9-faq .wk9-faq__q { padding: var(--k9-space-4); }
}

@media (prefers-reduced-motion: reduce) {
    .wk9-faq.is-enhanced .wk9-faq__a,
    .wk9-faq__sign::before,
    .wk9-faq__sign::after,
    .wk9-faq__cta,
    .wk9-faq__cta svg { transition: none; }
    .wk9-faq__dot::after { animation: none; }
}