/* FAQ LAYOUT MODULE — accordion / Q&A styles.
   Every color is driven through the vendor's theme via the --faq-* palette
   variables (set by the consumer: the gallery canvas here, the dashboard sample,
   or the public page) so the color swatch themes them.

   Markup: `.faqs.fq-<layout>` > `.faq-head` (eyebrow + title) + `.faq-items` >
   one `<details.faq-item>` per question. Each item carries the SAME slots — an
   index numeral, the question, a marker (chevron + a CSS-drawn plus/minus), and
   the answer. Layouts show/hide the index and swap the marker, but the markup is
   identical, so a block switches look by changing ONE class. Native <details>
   drives open/close — no JS. Same discipline as pricing_layouts.css and
   contact_forms.css.

   TYPE: Zulli Typography Kit v1.0, matching service_layouts.css /
   pricing_layouts.css — fixed px rather than cqi, the question at --type-h3 in
   the vendor's display face, the answer at --type-body because it is genuine
   running prose (not card copy), and the index in mono as data. --c-r follows
   the vendor's corner_style instead of a hardcoded 12px. */

.faqs{
  container-type: inline-size;
  font-family: var(--faq-bf, 'Inter', system-ui, sans-serif);
  color: rgba(var(--faq-ink-rgb), .72);
  max-width: 720px;
  margin-inline: auto;
  /* Design tokens — all derived from the theme palette. */
  --c-ink: var(--faq-ink);
/* Secondary text now comes from the derived --*-muted role (see
   _muted_text in style_templates.py) instead of a hardcoded alpha. A fixed
   fade put 43 of 72 themes under AA; the derived value mutes as far as each
   palette allows and stops there. Fallback keeps the old look off-theme. */
  --c-muted: var(--faq-muted, rgba(var(--faq-ink-rgb), .56));
  --c-soft: rgba(var(--faq-ink-rgb), .74);
  --c-line: rgba(var(--faq-ink-rgb), .15);
  --c-line-soft: rgba(var(--faq-ink-rgb), .08);
  --c-surface: color-mix(in srgb, var(--faq-ink) 4%, var(--faq-bg));
  --c-accent: var(--faq-primary);
  /* Only for a solid fill with --c-accent-ink painted on top (see the same
     split in link_layouts.css: --lk-primary vs --lk-primary-fill). */
  --c-accent-fill: var(--faq-primary-fill, var(--faq-primary));
  --c-accent-ink: var(--faq-on-primary);
  --c-accent-text: var(--faq-primary-text, var(--faq-primary));
  --c-accent-soft: color-mix(in srgb, var(--faq-primary) 12%, var(--faq-bg));
  --c-accent-line: color-mix(in srgb, var(--faq-primary) 40%, var(--faq-bg));
  --c-shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 8px 18px -10px rgba(0,0,0,.20);
  --c-r: var(--faq-radius, 6px);
  --c-row: var(--space-sm, clamp(12px, 1.4vw, 16px));
}

/* ---- shared item primitives ---- */
.faq-items{ display:grid; }
.faq-item summary{ display:flex; align-items:center; gap:14px; cursor:pointer; list-style:none;
  outline:none; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:focus-visible{ outline:2px solid var(--c-accent); outline-offset:3px; border-radius:var(--c-r); }
/* Weight is deliberately NOT set: a question is a full-width row label, not a
   card title, and the original design kept it at the inherited 400 on purpose.
   Bolding it to --faq-tw made the widest line on the page the heaviest too.
   .fq-minimal still opts up to 500 for its own look.

   Size scales between two kit steps (--type-h4 16 -> --type-h3 18) rather than
   sitting fixed: this column runs ~612px on desktop and ~350px on a phone, so a
   frozen 18px read oversized on mobile. Fixed px is right for card type, which
   lives in a roughly constant column; this is not that. */
.faq-q{ flex:1; min-width:0; font-family:var(--faq-hf, 'Fraunces', serif);
  font-size:clamp(16px, 3.4cqi, 18px); line-height:1.36;
  letter-spacing:-.008em; color:var(--c-ink); }
.faq-index{ display:none; }
.faq-marker{ flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:var(--c-muted); transition:transform .25s ease, color .2s, background .2s; }
/* Inline icon: sized in em so it tracks the question it sits beside, per the
   kit's "never px beside text" rule. The template's width/height attributes are
   a pre-CSS fallback; these win. */
.faq-chevron{ display:block; width:var(--icon-inline, 1.15em); height:var(--icon-inline, 1.15em);
  stroke-width:var(--icon-stroke, 1.5); }
.faq-pm{ display:none; }
.faq-item[open] > summary .faq-marker{ transform:rotate(180deg); color:var(--c-accent-text); }
.faqs summary:hover .faq-marker{ color:var(--c-accent-text); }
.faq-a{ color:var(--c-soft); }
/* --type-body — an answer is running prose, so it takes the body step, not
   the small card register the service/package descriptions use. */
.faq-a p{ margin:0; font-size:15px; line-height:1.6; max-width:var(--measure-body, 68ch); }
.faq-item[open] > .faq-a{ animation: faqReveal .28s ease; }
@keyframes faqReveal{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }

/* CSS-drawn plus/minus marker — used by the fq-plus layout instead of the
   chevron. The vertical bar rotates away on open, leaving a minus. */
/* --icon-sm. CSS-drawn, so it stays on the icon scale in px rather than em —
   the bars below are absolute to this box. */
.faq-pm{ position:relative; width:var(--icon-sm, 16px); height:var(--icon-sm, 16px); }
.faq-pm::before, .faq-pm::after{ content:""; position:absolute; background:currentColor; border-radius:2px; }
.faq-pm::before{ left:0; top:50%; width:100%; height:2px; transform:translateY(-50%); }
.faq-pm::after{ top:0; left:50%; width:2px; height:100%; transform:translateX(-50%);
  transition:transform .25s ease, opacity .2s; }

/* ============================================================ */
/* Named layouts                                                */
/* ============================================================ */

/* 01 · Accordion — each question its own bordered, rounded card; the active
   card lifts with an accent border + soft shadow. The default, safe look. */
.fq-accordion .faq-items{ gap:var(--c-row); }
.fq-accordion .faq-item{ background:var(--c-surface); border:1px solid var(--c-line);
  border-radius:var(--c-r); transition:border-color .2s, box-shadow .2s; }
.fq-accordion .faq-item:hover{ border-color:var(--c-accent-line); }
.fq-accordion .faq-item[open]{ border-color:var(--c-accent-line); box-shadow:var(--c-shadow-sm); }
.fq-accordion summary{ padding:16px 18px; }
.fq-accordion .faq-a{ padding:0 18px 16px; }

/* 02 · Boxed — filled tinted cards, no border, rounder; the marker sits in an
   accent chip. Friendly and modern, pairs well with sans/cursive faces. */
.fq-boxed .faq-items{ gap:var(--space-xs, clamp(8px, 1vw, 12px)); }
.fq-boxed .faq-item{ background:var(--c-accent-soft); border-radius:var(--c-r); transition:background .2s; }
.fq-boxed .faq-item[open]{ background:color-mix(in srgb, var(--faq-primary) 17%, var(--faq-bg)); }
.fq-boxed summary{ padding:15px 16px; }
.fq-boxed .faq-marker{ width:27px; height:27px; border-radius:var(--c-r); color:var(--c-accent-text);
  background:color-mix(in srgb, var(--faq-primary) 24%, var(--faq-bg)); }
.fq-boxed .faq-a{ padding:0 16px 15px; }

/* 03 · Underline — no cards; hairline rules top and bottom of each row. Quiet
   and editorial, suits mono and serif type. */
.fq-underline .faq-item{ border-bottom:1px solid var(--c-line); }
.fq-underline .faq-item:first-child{ border-top:1px solid var(--c-line); }
.fq-underline summary{ padding:17px 2px; }
.fq-underline .faq-a{ padding:0 2px 17px; }

/* 04 · Plus / Minus — borderless with a thin divider and a drawn +/− toggle
   instead of a chevron. Generous vertical rhythm. */
.fq-plus .faq-item{ border-bottom:1px solid var(--c-line-soft); }
.fq-plus summary{ padding:18px 0; }
.fq-plus .faq-chevron{ display:none; }
.fq-plus .faq-pm{ display:block; }
.fq-plus .faq-item[open] > summary .faq-marker{ transform:none; color:var(--c-accent-text); }
.fq-plus .faq-item[open] .faq-pm::after{ opacity:0; transform:translateX(-50%) rotate(90deg); }
.fq-plus .faq-a{ padding:0 34px 18px 0; }

/* 05 · Numbered — a big accent numeral leads each question; the answer aligns
   under the question, past the numeral. Magazine feel. */
.fq-numbered .faq-items{ gap:2px; }
/* --type-data, matching .sc-numbered: an index is data, not display. This is a
   visible change to the "magazine" feel of this layout — the numeral used to be
   21px of the display face. */
.fq-numbered .faq-index{ display:flex; align-items:center; justify-content:flex-start; flex-shrink:0;
  width:26px; font-family:var(--faq-mf, ui-monospace, monospace); font-weight:500;
  font-size:13px; line-height:1.4; letter-spacing:.08em; color:var(--c-accent-text); font-variant-numeric:tabular-nums; }
.fq-numbered .faq-item{ border-bottom:1px solid var(--c-line-soft); }
.fq-numbered summary{ padding:16px 2px; gap:12px; }
.fq-numbered .faq-a{ padding:0 2px 18px 38px; }

/* 06 · Framed panel — one bordered container wraps every item with internal
   dividers; the active row tints. Tidy, contained, structured. */
.fq-framed .faq-items{ border:1px solid var(--c-line); border-radius:var(--c-r);
  overflow:hidden; background:var(--c-surface); }
.fq-framed .faq-item + .faq-item{ border-top:1px solid var(--c-line); }
.fq-framed .faq-item[open]{ background:color-mix(in srgb, var(--faq-ink) 3%, var(--faq-bg)); }
.fq-framed summary{ padding:16px 20px; }
.fq-framed .faq-a{ padding:0 20px 16px; }

/* 07 · Pill headers — each question is a rounded pill that fills with the accent
   when open, its text flipping to the on-accent color. Playful, high-contrast. */
.fq-pill .faq-items{ gap:var(--c-row); }
.fq-pill summary{ padding:13px 18px; border-radius:999px; background:var(--c-accent-soft);
  transition:background .2s; }
.fq-pill summary:hover{ background:color-mix(in srgb, var(--faq-primary) 18%, var(--faq-bg)); }
.fq-pill .faq-item[open] > summary{ background:var(--c-accent-fill); }
.fq-pill .faq-item[open] > summary .faq-q,
.fq-pill .faq-item[open] > summary .faq-marker{ color:var(--c-accent-ink); }
.fq-pill .faq-a{ padding:12px 20px 4px; }

/* 08 · Accent rail — a vertical line runs down the left; each item gets a marker
   dot that fills with the accent when open. Timeline-like. */
.fq-rail .faq-items{ border-left:2px solid var(--c-line); padding-left:24px; }
.fq-rail .faq-item{ position:relative; }
.fq-rail .faq-item + .faq-item{ border-top:1px solid var(--c-line-soft); }
.fq-rail .faq-item::before{ content:""; position:absolute; left:-31px; top:20px; width:9px; height:9px;
  border-radius:50%; background:var(--faq-bg); border:2px solid var(--c-line);
  transition:border-color .2s, background .2s; }
.fq-rail .faq-item[open]::before{ border-color:var(--c-accent); background:var(--c-accent); }
.fq-rail summary{ padding:15px 2px; }
.fq-rail .faq-a{ padding:0 2px 15px; }

/* 09 · Minimal — ultra-clean: light-weight questions, a small chevron, no rules,
   just breathing room. Lets busy type systems stay calm. */
.fq-minimal .faq-items{ gap:var(--space-2xs, clamp(6px, .7vw, 8px)); }
.fq-minimal summary{ padding:11px 0; }
.fq-minimal .faq-q{ font-weight:500; }
.fq-minimal .faq-chevron{ width:1em; height:1em; }
.fq-minimal .faq-a{ padding:0 0 12px; }

/* 10 · Callout — a tinted surface with an accent bar down the left edge that
   lights up when the item opens. Draws the eye without heavy borders. */
.fq-callout .faq-items{ gap:var(--c-row); }
.fq-callout .faq-item{ background:var(--c-surface); border-left:3px solid var(--c-line);
  border-radius:0 var(--c-r) var(--c-r) 0; transition:border-color .2s; }
.fq-callout .faq-item[open]{ border-left-color:var(--c-accent); }
.fq-callout summary{ padding:15px 18px; }
.fq-callout .faq-a{ padding:0 18px 15px; }

@media (prefers-reduced-motion: reduce){
  .faq-marker, .faq-pm::after, .faq-item[open] > .faq-a{ transition:none; animation:none; }
}