/* Dragspel (details/summary): animation + tydlig hierarki. Endast CSS, inget JS.
   Ligger sist bland sidans stilmallar och åsidosätter pages.css / priser.css. */
:root { interpolate-size: allow-keywords; --acc-dur: .3s; --acc-ease: cubic-bezier(.22, .61, .36, 1); }

.faq details, .price-group {
  --acc-rule: transparent;
  box-shadow: inset 3px 0 0 var(--acc-rule);
  transition: box-shadow var(--acc-dur) var(--acc-ease), background-color var(--acc-dur) var(--acc-ease);
}
.faq details[open], .price-group[open] { --acc-rule: var(--logo); background: var(--blush-50); }

/* Fråga = klickbar rubrik */
.faq summary, .price-group summary {
  min-height: 56px; padding: 18px 20px; gap: 16px; font-weight: 600;
  color: var(--fg-strong); transition: color var(--acc-dur) var(--acc-ease);
}
.faq summary:hover, .price-group summary:hover { color: var(--accent-ink, var(--blush-700)); }
.faq details[open] > summary, .price-group[open] > summary { color: var(--accent-ink, var(--blush-700)); }
.faq summary:focus-visible, .price-group summary:focus-visible { outline: 2px solid var(--logo); outline-offset: -2px; }

/* Svar = underordnad brödtext: indragen, dämpad, smalare */
.faq .answer { max-width: 40em; padding: 0 44px 24px 20px; color: var(--fg); font-weight: 400; font-size: var(--fs-body); }
.price-group table { margin: 0 20px var(--space-5); width: calc(100% - 40px); }

/* Plus -> minus i takt med öppningen */
.faq .pm::before, .faq .pm::after, .price-group .pm::before, .price-group .pm::after {
  transition: transform var(--acc-dur) var(--acc-ease), background-color var(--acc-dur) var(--acc-ease);
}
.faq details[open] .pm::before, .faq details[open] .pm::after,
.price-group[open] .pm::before, .price-group[open] .pm::after { background: var(--logo); }
.faq details[open] .pm::after, .price-group[open] .pm::after { transform: rotate(90deg) scaleX(0); }

/* Höjdanimation (Chromium 131+); övriga webbläsare öppnar direkt */
@supports selector(::details-content) {
  .faq details::details-content, .price-group::details-content {
    block-size: 0; opacity: 0; overflow: clip; transform: translateY(-6px);
    transition: block-size var(--acc-dur) var(--acc-ease), opacity var(--acc-dur) var(--acc-ease),
      transform var(--acc-dur) var(--acc-ease), content-visibility var(--acc-dur) allow-discrete;
  }
  .faq details[open]::details-content, .price-group[open]::details-content {
    block-size: auto; opacity: 1; transform: none;
  }
}

@media (max-width: 600px) {
  .faq summary, .price-group summary { padding: 16px 16px; }
  .faq .answer { padding: 0 16px 20px 16px; }
  .price-group table { margin: 0 16px var(--space-5); width: calc(100% - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .faq details, .price-group, .faq summary, .price-group summary,
  .faq .pm::before, .faq .pm::after, .price-group .pm::before, .price-group .pm::after,
  .faq details::details-content, .price-group::details-content { transition: none !important; }
  .faq details::details-content, .price-group::details-content { transform: none; }
}