/*
 * /faqs — "Frequently Asked Questions", Figma "Website" file, nodes
 * 4512:681 (desktop 1440) and 4522:1416 (mobile 393).
 *
 * The page is split by audience: a segmented control picks "For pet families"
 * or "For veterinary practices", and only that panel is in the DOM flow. Inside
 * a panel, entries are grouped (Start here, Quickfind, Tutorials, …) and each
 * group is a two-column row: a sticky label on the left, the accordion on the
 * right. Below the list sits the "Still looking for an answer?" well.
 *
 * Everything here is scoped to `.faqs-page` (set on <body>) or to classes only
 * this page renders, because .terms / .rich-text-content are shared with
 * /validation, /terms-of-service and /privacy-notice.
 *
 * Units: rem, 1rem == 1px at each design width (the rem ladder is in the
 * <style> block of faqs/index.html), so Figma's pixel numbers go in verbatim
 * and scale at every viewport. Breakpoints 768 / 992 / 1440 match the rest of
 * the site; Figma draws 1440 and 393 only, and 768–1439 is an interpolation
 * on the same ladder the other supporting pages use.
 *
 * Top padding clears the fixed .site-header — 84rem at ≥992, 76rem below —
 * plus the 96rem (48rem on mobile) the frame leaves under it.
 *
 * Deviations from the frames, all deliberate:
 *   - Figma draws only the pet-family tab, whose eight questions in three
 *     groups are exactly what data/json/webcontData.json holds. The practice
 *     tab has no frame; it reuses every rule here, over four groups.
 *   - The three light greys are the frames' literal values, not the legacy
 *     ramp's — see --faq-well / --faq-sunken / --faq-rule below.
 *   - Ink is mono-900 (#121219), not the frames' unresolved `text/body: black`
 *     — the plus icon in the same frames is drawn as #121219, so mono-900 is
 *     what the design system means here.
 *   - The fade under the sticky bar tracks the page canvas. Both frames draw
 *     it as #f3f3f3 → transparent, left over from when this page had a grey
 *     canvas; over the white canvas they now specify, that is a visible grey
 *     band rather than a fade.
 *   - An open answer has no state in Figma. It uses the system's Body/M
 *     (16/24), the same step as a question, in the muted text colour.
 *   - Space between groups is tighter than the frame's 40: 16 at ≥992,
 *     12 below that, per product request.
 */

.faqs-page {
    /* Colors are role-named after the semantic layer the apps use — canvas /
       surface / well / sunken / rule / edge / fg / fg-muted / accent /
       on-accent (pointer-frontends `docs/ai/design-tokens.md`,
       `app/AGENTS.md` § Colors). Ink, accent and the two whites come from the
       site's own ramp in pointer-by-shakuro.css, with a fallback in case that
       stylesheet ever fails to load; the three light greys come from the
       frames, for the reason below. */
    --faq-canvas: var(--_colors---mono-100, #fff); /* the page itself */
    --faq-surface: var(--_colors---mono-100, #fff); /* the search input */
    /* Three light steps come from the frames as literal values, the way
       css/privacy.css takes --p-subtle / --p-dot / --p-hero-bg from its own.
       The Webflow-era ramp in pointer-by-shakuro.css is not the design
       system's: its mono-200 is #f0f0f6, five steps bluer than the frames'
       `color/mono/200: #f5f5f5`, and it has no mono-300 at all. Where the two
       disagree the frame wins, and the legacy ramp is left alone because four
       other pages still read it. Verified against the Figma render pixel for
       pixel. */
    --faq-well: #f5f5f5; /* the footnote panel — Figma color/mono/200 */
    --faq-sunken: #ebebed; /* the tab track — Figma 4512:1319 */
    --faq-rule: #ebebeb; /* row hairlines — Figma color/mono/300 */
    --faq-edge: var(--_colors---mono-400, #d2d2d8); /* the search input border */
    --faq-fg: var(--_colors---mono-900, #121219); /* titles, questions */
    --faq-fg-muted: var(--_colors---mono-700, #64646d); /* answers, notes */
    --faq-fg-faint: var(--_colors---mono-600, #888896); /* the search placeholder */
    --faq-accent: var(--_colors---colors-brand-orange, #ff6000);
    --faq-on-accent: var(--_colors---mono-100, #fff); /* text on an accent fill */
    /* .site-header is position:fixed, and its height is not a constant fraction
       of the viewport (Figma 4482:1919 is 84px at 1440, 4484:4325 is 76px at
       393). So the sticky offsets below are measured and written back as px by
       js/faqs.js; these are the fallbacks if that never runs. */
    --faq-controls-top: 84px;
    --faq-group-top: 160px;
    --faq-scroll-margin: 176px;

    /* The frames paint the page white; body in pointer-by-shakuro.css is the
       homepage's #f3f3f3. */
    background-color: var(--faq-canvas);
}

/* ---------------------------------------------------------------------------
 * Page rhythm — Figma "Main → Section" 4512:1312, 1440x1186 at y=84, padded
 * 96 vertical / 120 horizontal. The horizontal padding is .terms's own and is
 * already 120/40/16rem by breakpoint; only the 16rem step is off the frame,
 * which draws a 24 gutter at 393.
 * ------------------------------------------------------------------------ */
.faqs-page .terms {
    padding-top: 180rem; /* 84 header + 96 */
    padding-bottom: 96rem;
}

@media screen and (max-width: 991px) {
    .faqs-page .terms {
        padding-top: 124rem; /* 76 header + 48 */
        padding-bottom: 48rem;
    }
}

@media screen and (max-width: 767px) {
    .faqs-page .terms {
        padding-left: 24rem;
        padding-right: 24rem;
    }
}

/* Inter (Figma Typography/font/Primary) for everything but the two headings.
   The token override, not just font-family, is what redirects the Webflow `a`
   and `h1` element rules in pointer-by-shakuro.css — an element selector beats
   inheritance. Scoped to the section so the header and footer keep their own. */
.faqs-page .terms {
    --_colors---family-paragraph: var(--font-ui);
    font-family: var(--font-ui);
}

/* Title block — Figma 4512:1313/4512:1314, 880 wide. Space to the tabs below
   is 28, half the frame's 56, per product request. */
.faqs-page .blog-header {
    max-width: 880rem;
    padding-bottom: 28rem;
    text-align: center;
}

/* Figma "Heading/Regular" 64/76 at 1440, 32/38 at 393, tracking 0 — the shared
   h1 rule sets -2.76px, which is a px value at any width. */
.faqs-page .blog-title {
    font-family: var(--font-display);
    font-size: 64rem;
    line-height: 76rem;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--faq-fg);
    margin-top: 0;
}
/* 992–1439 and 768–991 have no frame; the title steps down on the same ladder
   .validation-h1 uses between the two that are drawn. */
@media screen and (max-width: 1439px) {
    .faqs-page .blog-title {
        font-size: 48rem;
        line-height: 56rem;
    }
}

@media screen and (max-width: 991px) {
    .faqs-page .blog-title {
        font-size: 40rem;
        line-height: 48rem;
    }
}

/* .rich-text-content is a centred flex column shared with /validation; here it
   holds just the controls and the panels, so its 60px gap would only push the
   sticky bar away from the list it belongs to. */
.faqs-page .rich-text-content {
    width: 100%;
    gap: 0;
}

/* Holds both audience panels; only one is ever in flow. */
.faq-panels {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * Controls — audience tabs + search. Figma 4512:1318, padded 12 above and 16
 * below. Sticky, so on a page this long you can always switch audience or
 * search without scrolling back up.
 * ------------------------------------------------------------------------ */
.faq-controls {
    position: sticky;
    top: var(--faq-controls-top);
    z-index: 6;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16rem;
    padding: 12rem 0 16rem;
    background: var(--faq-canvas);
}

/* Fades the list out under the sticky bar instead of letting rows cut hard.
   Figma 4512:1333, 24 tall. */
.faq-controls::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24rem;
    background: linear-gradient(to bottom, var(--faq-canvas), transparent);
    pointer-events: none;
}

/* Figma "Tablist - Who are you?" 4512:1319 — a 4-padded pill track. */
.faq-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4rem;
    padding: 4rem;
    border-radius: 999px;
    background: var(--faq-sunken);
}

/* Figma "Label/M": Inter 14/18 medium, -0.14 tracking, 10x20 padding. */
.faq-tab {
    appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 999px;
    padding: 10rem 20rem;
    font-family: var(--font-ui);
    font-size: 14rem;
    line-height: 18rem;
    font-weight: 500;
    letter-spacing: -0.14rem;
    color: var(--faq-fg-muted);
    background: transparent;
    transition: background-color .2s ease, color .2s ease;
}

.faq-tab:hover {
    color: var(--faq-fg);
}

.faq-tab[aria-selected="true"] {
    background: var(--faq-accent);
    color: var(--faq-on-accent);
}

.faq-tab:focus-visible {
    outline: 2px solid var(--faq-accent) !important;
    outline-offset: 2px;
}

/* Figma "Input - Search questions" 4512:1325 — 280x44, 16 icon inset 14. */
.faq-search {
    position: relative;
    display: flex;
    align-items: center;
    width: 280rem;
    max-width: 100%;
}

.faq-search svg {
    position: absolute;
    left: 14rem;
    width: 16rem;
    height: 16rem;
    color: var(--faq-fg-faint);
    pointer-events: none;
}

.faq-search input {
    /* Safari rounds and insets a bare search field; the box below is the box. */
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 44rem;
    margin: 0;
    padding: 0 16rem 0 38rem;
    border: 1px solid var(--faq-edge);
    border-radius: 999px;
    background: var(--faq-surface);
    font-family: var(--font-ui);
    font-size: 14rem;
    letter-spacing: -0.14rem;
    color: var(--faq-fg);
}

.faq-search input::placeholder {
    color: var(--faq-fg-faint);
}

.faq-search input:focus {
    border-color: var(--faq-accent);
}

.faq-search input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ---------------------------------------------------------------------------
 * Panels & groups — Figma 4512:1335, a 240 sticky label 40 from its list.
 * Each group sits 16rem below the one before it (12rem below 992) — see the
 * "Deviations from the frames" note above.
 * ------------------------------------------------------------------------ */
.faq-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.faq-panel[hidden] {
    display: none;
}

.faq-group {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40rem;
    padding: 16rem 0 0;
}

.faq-group.is-empty {
    display: none;
}

.faq-group-head {
    position: sticky;
    top: var(--faq-group-top);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4rem;
    width: 240rem;
    flex: 0 0 240rem;
}

/* Figma "Heading/Regular/S": Aeonik 18/24 medium. */
.group-title {
    font-family: var(--font-display);
    font-size: 18rem;
    line-height: 24rem;
    font-weight: 500;
    color: var(--faq-fg);
}

/* Figma "Body/S": Inter 14/20 regular, -0.28 tracking. */
.group-note {
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: -0.28rem;
    color: var(--faq-fg-muted);
}

.faq-list {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--faq-rule);
}

/* ---------------------------------------------------------------------------
 * Accordion item — Figma 4512:1342, a 20x4-padded row under a hairline.
 * ------------------------------------------------------------------------ */
.faq-item {
    width: 100%;
    display: block;
    padding: 0;
    border-bottom: 1px solid var(--faq-rule);
    scroll-margin-top: var(--faq-scroll-margin, 194px);
}

.faq-item[hidden] {
    display: none;
}

/* The list already has a top rule, so the last row's border would double up
   against the next group's. */
.faq-item:last-child {
    border-bottom: 0;
}

.item-top {
    appearance: none;
    border: 0;
    background: transparent;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24rem;
    padding: 20rem 4rem;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-ui);
    color: var(--faq-fg);
    transition: color .2s ease;
}

.item-top:hover {
    color: var(--faq-accent);
}

.item-top:focus-visible {
    outline: 2px solid var(--faq-accent) !important;
    outline-offset: -2px;
}

/* Figma "Body/M" one step up: Inter 18/24 regular, -0.32 tracking. */
.item-title {
    font-size: 18rem;
    line-height: 24rem;
    font-weight: 400;
    letter-spacing: -0.32rem;
    color: inherit;
}

/* Plus that becomes a minus: two bars, the vertical one collapses on open. */
.item-icon {
    position: relative;
    flex: 0 0 auto;
    width: 20rem;
    height: 20rem;
}

.item-icon::before,
.item-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14rem;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition: transform .25s ease, opacity .25s ease;
}

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

.item-top[aria-expanded="true"] .item-icon::after {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 0;
}

/* Height animation via grid rows — no max-height guessing, and it collapses
   correctly whatever the answer's length. */
.item-bottom {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .3s ease;
}

.item-bottom.show {
    grid-template-rows: 1fr;
}

.item-bottom-inner {
    overflow: hidden;
    min-height: 0;
}

.full-content {
    max-width: 720rem;
    padding: 0 4rem 24rem;
    font-size: 16rem;
    line-height: 24rem;
    font-weight: 400;
    letter-spacing: -0.32rem;
    color: var(--faq-fg-muted);
}

.full-content p {
    margin: 0 0 12rem;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.full-content p:last-child {
    margin-bottom: 0;
}

.full-content a,
.faq-footnote a {
    display: inline;
    color: var(--faq-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Highlight for search matches. */
.faq-item mark {
    background: rgba(255, 96, 0, .16);
    background: color-mix(in srgb, var(--faq-accent) 16%, transparent);
    color: inherit;
    border-radius: 2px;
}

/* ---------------------------------------------------------------------------
 * Tutorial videos. The Loom iframe used to be dropped in unsized, so it
 * rendered at the 300x150 default; this gives it a real 16:9 box.
 * ------------------------------------------------------------------------ */
.video-shell {
    position: relative;
    width: 100%;
    max-width: 720rem;
    margin: 0 4rem 20rem;
}

.video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12rem;
    overflow: hidden;
    background: var(--faq-well);
}

.video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-actions {
    margin-top: 12rem;
}

.video-open {
    font-size: 13rem;
    font-weight: 500;
    color: var(--faq-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Empty state + cross-audience search hint
 * ------------------------------------------------------------------------ */
.faq-empty {
    width: 100%;
    padding: 56rem 0;
    text-align: center;
    font-size: 16rem;
    line-height: 24rem;
    color: var(--faq-fg-muted);
}

.faq-empty[hidden] {
    display: none;
}

.faq-crosslink {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: var(--faq-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * "Still looking for an answer?" — Figma 4512:1405, a 16-radius well 64 below
 * the list, padded 32x40. The prompt and the sentence sit on one line at 1440
 * and stack centred at 393.
 * ------------------------------------------------------------------------ */
.faq-footnote {
    width: 100%;
    margin-top: 64rem;
    padding: 32rem 40rem;
    border-radius: 16rem;
    background: var(--faq-well);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20rem;
}

.faq-footnote p {
    margin: 0;
    max-width: 560rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4rem;
}

/* Matched to .faq-footnote span's Body/S size (14/20, -0.28 tracking) instead
   of Figma's Label/L so the whole line reads as one uniform, smaller size. */
.faq-footnote strong {
    font-size: 14rem;
    line-height: 20rem;
    font-weight: 500;
    letter-spacing: -0.28rem;
    color: var(--faq-fg);
    white-space: nowrap;
}

/* Figma "Body/S": Inter 14/20 regular, -0.28 tracking. */
.faq-footnote span {
    font-size: 14rem;
    line-height: 20rem;
    letter-spacing: -0.28rem;
    color: var(--faq-fg-muted);
}

/* ---------------------------------------------------------------------------
 * Tablet / mobile — the group label stacks above its list. Figma 4522:1456
 * drives the ≤767 numbers; 768–991 keeps the desktop type and only stacks.
 * ------------------------------------------------------------------------ */
@media screen and (max-width: 991px) {
    .faq-group {
        flex-direction: column;
        gap: 24rem;
        padding-top: 12rem;
    }

    .faq-group-head {
        position: static;
        width: 100%;
        flex: 0 0 auto;
        gap: 8rem;
    }

    .faq-list {
        width: 100%;
    }

    /* The label is a heading over its list now, not a column beside it, so it
       takes the mobile frame's Heading/Regular/M. */
    .group-title {
        font-size: 24rem;
        line-height: 28rem;
    }
}

@media screen and (max-width: 767px) {
    .faqs-page .blog-header {
        padding-bottom: 20rem;
    }

    .faqs-page .blog-title {
        font-size: 32rem;
        line-height: 38rem;
    }

    .faq-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12rem;
    }

    .faq-tabs {
        width: 100%;
    }

    /* Both labels stay on one line — Figma 4522:2264 is a 341 track inside a
       345 column, so the two tabs share the row rather than halving it. */
    .faq-tab {
        flex: 1 1 auto;
        padding: 10rem 12rem;
        text-align: center;
        white-space: nowrap;
    }

    .faq-search {
        width: 100%;
    }

    .item-top {
        align-items: flex-start;
        gap: 16rem;
        padding: 16rem 4rem;
    }

    .item-title {
        font-size: 16rem;
    }

    .full-content {
        padding-bottom: 16rem;
    }

    .faq-footnote {
        margin-top: 40rem;
        padding: 24rem 20rem;
        justify-content: center;
    }

    .faq-footnote p {
        flex-direction: column;
        align-items: center;
        gap: 8rem;
        text-align: center;
    }
}