/* Vanliga frågor — native <details>, no JavaScript.
 *
 * Collapsed by default so the question list stays scannable; every answer is
 * still in the DOM, which is what crawlers and language models actually read.
 *
 * Note: this section renders as a sibling of the template's .sg-band wrappers,
 * so it does NOT inherit has-global-padding or is-layout-constrained. It has to
 * carry its own gutter and measure — without that it runs edge-to-edge on
 * mobile. The measure matches .sg-band--prose so the left edge lines up as you
 * scroll past.
 */

/* The parent is .is-layout-constrained, which caps every child at content-size
   (42rem) before our own max-inline-size below can apply — that made the FAQ the
   narrowest thing on the page. Release the cap here, then set the measure on the
   inner elements. */
.vg-faq.vg-faq {
  max-width: none;
}

.vg-faq {
  padding-inline: var(--wp--style--root--padding-left, clamp(1.25rem, 4vw, 4rem));
  margin-block: var(--wp--preset--spacing--60, 3.5rem);
  scroll-margin-block-start: 2rem;
}

.vg-faq__eyebrow,
.vg-faq__heading,
.vg-faq__list {
  max-inline-size: var(--vg-measure, 46rem);
  margin-inline: auto;
}

.vg-faq__eyebrow {
  font-size: var(--wp--preset--font-size--x-small, 0.75rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-block-end: 0.5rem;
}

.vg-faq__heading {
  margin-block-end: 1rem;
}

.vg-faq__list {
  border-block-start: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

.vg-faq__item {
  border-block-end: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}

/* The whole row is the hit area — large target, keyboard focusable by default. */
.vg-faq__summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 1rem;
  min-block-size: 44px;
}

.vg-faq__summary::-webkit-details-marker { display: none; }

/* Chevron in text colour so a vibe change re-skins it. */
.vg-faq__summary::after {
  content: "";
  inline-size: 0.55em;
  block-size: 0.55em;
  margin-inline-start: auto;
  flex: none;
  align-self: center;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 150ms ease;
  opacity: 0.6;
}

.vg-faq__item[open] .vg-faq__summary::after { transform: rotate(-135deg); }

.vg-faq__summary:hover::after { opacity: 1; }

.vg-faq__summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.vg-faq__q {
  margin: 0;
  font-size: var(--wp--preset--font-size--medium, 1.05rem);
  line-height: 1.35;
}

.vg-faq__a {
  padding-block-end: 1.25rem;
  max-inline-size: 68ch;
}

.vg-faq__a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .vg-faq__summary::after { transition: none; }
}