/* Orli v3 site · FAQ, grouped by who's asking
   ---------------------------------------------------------------------------
   The old orli.health FAQ (FaqV2 / .sv3-faq-*), which the client likes,
   rebuilt on the v2 system tokens:

     group     a white card, 2px ink edge, the hard ink pop below and right,
               a bold title and a round mint chevron button with an ink edge.
               It's pressable, so it carries the pop (RULES 5). Closed groups
               lift on hover and keyboard focus like every printed sticker.
     question  as live: a small static pill with a mint edge and lip
               (.sv3-faq-q), a heading, not a button. Every answer in an
               open group shows right under its question.
     answer    Nunito Sans, secondary ink, one measure wide.

   Everything is scoped to [data-faq], so the home page's older .faq /
   .faq__list markup isn't restyled before it's replaced.
   Opt-in data-faq-mode="nested" (very long lists): each question is its own
   disclosure as well (a pill button with a small chevron).

   Needs tokens.css (or shell.css). Markup and API: README in faq.js.
   Reduced and Still motion: everything is instant.
   ------------------------------------------------------------------------- */

[data-faq] {
  --faq-pad: var(--o-space-5);
  --faq-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.6 1.8c2.1 2 4.1 4.3 6.5 6.4 2.2-2.3 4.2-4.3 6.3-6.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  display: grid; gap: var(--o-space-5);
  margin: 0; padding: 0; list-style: none;
}
@media (max-width: 599.98px) { [data-faq] { --faq-pad: var(--o-space-4); gap: var(--o-space-4); } }

/* ------------------------------------------------------------------ group */
[data-faq] .faq__group {
  position: relative;
  background: var(--o-surface); color: var(--o-ink);
  border: 2px solid var(--o-ink); border-radius: var(--o-r-card);
  box-shadow: var(--o-pop);
  translate: 0 0;
  transition: translate var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
[data-faq] .faq__group-title { margin: 0; font: inherit; }
[data-faq] .faq__group-button {
  display: flex; align-items: center; justify-content: space-between; gap: var(--o-space-4);
  width: 100%; min-height: 76px; margin: 0;
  padding: var(--o-space-4) var(--faq-pad);
  border: 0; border-radius: calc(var(--o-r-card) - 2px);
  background: none; color: inherit; text-align: start; cursor: pointer;
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* Focus: closed, the ring belongs to the card, like a link card's (RULES 5).
   Open, it sits inside the header only (with the card's top corners), so
   it doesn't wrap the whole open card and doesn't merge with the ink edge. */
[data-faq] .faq__group-button:focus-visible { outline: none; }
[data-faq] .faq__group:not([data-open]):has(> .faq__group-title .faq__group-button:focus-visible) {
  outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset);
}
[data-faq] .faq__group[data-open] > .faq__group-title .faq__group-button { border-radius: calc(var(--o-r-card) - 2px) calc(var(--o-r-card) - 2px) 0 0; }
[data-faq] .faq__group[data-open] > .faq__group-title .faq__group-button:focus-visible {
  outline: var(--o-focus-ring); outline-offset: -6px;
}

/* The round mint button with an ink edge and its own little pop. */
[data-faq] .faq__chevron {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--o-mint); color: var(--o-ink);
  border: 2px solid var(--o-ink);
  box-shadow: 2px 2px 0 0 var(--o-ink);
  transition: translate var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
[data-faq] .faq__chevron::before {
  content: ""; width: 14px; height: 9px; translate: 0 1px;
  background: currentColor;
  -webkit-mask: var(--faq-chevron) center / contain no-repeat;
          mask: var(--faq-chevron) center / contain no-repeat;
  transition: rotate var(--o-t-enter) var(--o-ease);
}

/* Closed: lifts like a sticker under a mouse or keyboard focus. The shadow
   grows by the lift, so it stays on the same spot of the page. */
@media (hover: hover) and (pointer: fine) {
  [data-faq] .faq__group:not([data-open]):has(> .faq__group-title .faq__group-button:hover) {
    translate: var(--o-lift-x) var(--o-lift-y);
    box-shadow: calc(4px - var(--o-lift-x)) calc(5px - var(--o-lift-y)) 0 0 var(--o-ink);
  }
  [data-faq] .faq__group[data-open]:has(> .faq__group-title .faq__group-button:hover) .faq__chevron { background: color-mix(in srgb, var(--o-mint) 80%, var(--o-ink)); }
}
[data-faq] .faq__group:not([data-open]):has(> .faq__group-title .faq__group-button:focus-visible) {
  translate: var(--o-lift-x) var(--o-lift-y);
  box-shadow: calc(4px - var(--o-lift-x)) calc(5px - var(--o-lift-y)) 0 0 var(--o-ink);
}
[data-faq] .faq__group:has(> .faq__group-title .faq__group-button:active) {
  translate: 0 0; box-shadow: var(--o-pop); transition-duration: var(--o-t-press);
}
/* Open: the chevron button is pressed in and points up. */
[data-faq] .faq__group[data-open] .faq__chevron { translate: 2px 2px; box-shadow: 0 0 0 0 var(--o-ink); }
[data-faq] .faq__group[data-open] .faq__chevron::before { rotate: 180deg; }

/* --------------------------------------------------------- disclosure body
   Closed panels are hidden="until-found": find-in-page still reaches the
   words and opens the group. (The shell's [hidden] rule leaves until-found
   alone.) Where until-found isn't supported, faq.js uses plain hidden.
   Padding lives on the inner box, so a closed panel takes no room. */
[data-faq] .faq__panel { overflow: clip; }
[data-faq] .faq__panel-in {
  margin-inline: var(--faq-pad);
  padding-block: var(--o-space-5) var(--faq-pad);
  border-block-start: 1.5px dashed color-mix(in srgb, var(--o-ink) 24%, transparent);
}
[data-faq] .faq__list { display: grid; gap: var(--o-space-5); margin: 0; padding: 0; list-style: none; }
[data-faq] .faq__item { display: grid; justify-items: start; gap: var(--o-space-2); }

/* ---------------------------------------------------------------- question
   The live pill: a heading, mint edge and lip, nothing to press. */
[data-faq] .faq__q {
  margin: 0; max-width: 100%;
  padding: 6px var(--o-space-4) 7px;
  border: 1.5px solid var(--o-mint); border-radius: var(--o-r-pill);
  background: var(--o-surface); color: var(--o-ink);
  box-shadow: 0 2px 0 0 color-mix(in srgb, var(--o-mint) 55%, transparent);
  font: var(--o-weight-ui) var(--o-text-body) / 1.35 var(--o-font-ui); letter-spacing: -.005em;
  text-wrap: balance;
}
/* Older nested markup before faq.js flattens it (or without script): the
   button is just the words inside the pill. */
[data-faq]:not([data-faq-mode="nested"]) .faq__q-button {
  all: unset; display: inline; cursor: text;
}
[data-faq]:not([data-faq-mode="nested"]) .faq__q-button:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); border-radius: 4px; }

/* ------------------------------------------------------------------ answer */
[data-faq] .faq__a { max-inline-size: var(--o-measure); padding-inline: var(--o-space-4); color: var(--o-ink-2); text-wrap: pretty; }
[data-faq] .faq__a > * + *, [data-faq] .faq__a-in > * + * { margin-block-start: var(--o-space-3); }
[data-faq] .faq__a a { color: var(--o-ink); text-decoration-thickness: 1.5px; text-underline-offset: .24em; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); border-radius: 4px; }
[data-faq] .faq__a a:hover { text-decoration-color: currentColor; }

/* --------------------------------------------- nested mode (opt-in only)
   data-faq-mode="nested": each question is a pill button that opens its
   own answer. For very long lists; the live style is the default above. */
[data-faq-mode="nested"] .faq__list { gap: var(--o-space-3); }
[data-faq-mode="nested"] .faq__q { padding: 0; border: 0; background: none; box-shadow: none; }
[data-faq-mode="nested"] .faq__q-button {
  display: inline-flex; align-items: center; gap: var(--o-space-3);
  max-width: 100%; min-height: var(--o-target); margin: 0;
  padding: var(--o-space-2) var(--o-space-4);
  border: 1.5px solid var(--o-mint); border-radius: var(--o-r-pill);
  background: var(--o-surface); color: var(--o-ink);
  box-shadow: 0 2px 0 0 color-mix(in srgb, var(--o-mint) 55%, transparent);
  font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); letter-spacing: -.005em;
  text-align: start; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  translate: 0 0;
  transition:
    translate var(--o-t-interact) var(--o-ease),
    box-shadow var(--o-t-interact) var(--o-ease),
    border-color var(--o-t-interact) var(--o-ease),
    background-color var(--o-t-interact) var(--o-ease);
}
[data-faq-mode="nested"] .faq__q-button::after {
  content: ""; flex: none; width: 12px; height: 8px; translate: 0 1px;
  background: var(--o-ink-2);
  -webkit-mask: var(--faq-chevron) center / contain no-repeat;
          mask: var(--faq-chevron) center / contain no-repeat;
  transition: rotate var(--o-t-enter) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) {
  [data-faq-mode="nested"] .faq__q-button:hover { border-color: var(--o-ink); box-shadow: 0 2px 0 0 var(--o-ink); }
}
[data-faq-mode="nested"] .faq__q-button:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); border-color: var(--o-ink); }
[data-faq-mode="nested"] .faq__q-button:active { translate: 0 2px; box-shadow: 0 0 0 0 var(--o-mint); transition-duration: var(--o-t-press); }
[data-faq-mode="nested"] .faq__q-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--o-mint) 20%, var(--o-surface));
  translate: 0 2px; box-shadow: 0 0 0 0 var(--o-mint);
}
[data-faq-mode="nested"] .faq__q-button[aria-expanded="true"]::after { rotate: 180deg; }
[data-faq-mode="nested"] .faq__a { overflow: clip; padding-inline: 0; }
[data-faq-mode="nested"] .faq__a-in { padding: var(--o-space-3) var(--o-space-4) var(--o-space-2); }

/* ----------------------------------------------------------- without script
   Every answer shows and the toggles step back: the page still reads. */
html:not(.js) [data-faq] [hidden="until-found"] { display: block !important; content-visibility: visible; }
html:not(.js) [data-faq] .faq__chevron,
html:not(.js) [data-faq] .faq__q-button::after { display: none; }
html:not(.js) [data-faq] :is(.faq__group-button, .faq__q-button) { cursor: default; }

/* ------------------------------------------------------------ motion levels
   Reduced and Still: no lift, no rotation travel, no height animation
   (faq.js skips it). The open state still reads from the chevron.
   (Pseudo-elements can't sit inside :is(), so each has its own selector.) */
html:is([data-motion="reduced"], [data-motion="still"]) [data-faq] .faq__group,
html:is([data-motion="reduced"], [data-motion="still"]) [data-faq] .faq__chevron,
html:is([data-motion="reduced"], [data-motion="still"]) [data-faq] .faq__chevron::before,
html:is([data-motion="reduced"], [data-motion="still"]) [data-faq] .faq__q-button,
html:is([data-motion="reduced"], [data-motion="still"]) [data-faq] .faq__q-button::after { transition: none !important; }
html:is([data-motion="reduced"], [data-motion="still"]) [data-faq] .faq__group { translate: none !important; box-shadow: var(--o-pop) !important; }
html:is([data-motion="reduced"], [data-motion="still"]) [data-faq] .faq__q-button { translate: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) [data-faq] .faq__group,
  html:not([data-motion]) [data-faq] .faq__chevron,
  html:not([data-motion]) [data-faq] .faq__chevron::before,
  html:not([data-motion]) [data-faq] .faq__q-button,
  html:not([data-motion]) [data-faq] .faq__q-button::after { transition: none !important; }
  html:not([data-motion]) [data-faq] .faq__group { translate: none !important; box-shadow: var(--o-pop) !important; }
  html:not([data-motion]) [data-faq] .faq__q-button { translate: none !important; }
}

/* ----------------------------------------------------------- forced colours */
@media (forced-colors: active) {
  [data-faq] .faq__group { border-color: CanvasText; box-shadow: none; }
  [data-faq] .faq__chevron { forced-color-adjust: none; background: Canvas; border-color: CanvasText; box-shadow: none; }
  [data-faq] .faq__chevron::before, [data-faq] .faq__q-button::after { background: CanvasText; }
  [data-faq] .faq__q, [data-faq-mode="nested"] .faq__q-button { border-color: CanvasText; box-shadow: none; }
  [data-faq-mode="nested"] .faq__q { border: 0; }
  [data-faq-mode="nested"] .faq__q-button[aria-expanded="true"] { border-width: 3px; }
  [data-faq] .faq__panel-in { border-block-start-color: CanvasText; }
}