/**
 * FAQ accordion — restyles Yoast SEO FAQ blocks (.schema-faq) into a
 * theme-matched accordion. Behaviour parity with the "Turn Yoast SEO FAQ Block
 * to Accordion" plugin, restyled to the site's calculator palette.
 *
 * Open/close state is driven entirely by the question button's [aria-expanded]
 * attribute (single accessible source of truth) — no extra state class needed.
 * The reveal is a pure-CSS grid-rows transition (no JS animation).
 */

.schema-faq {
  /* Inherit the calculator palette when present on the page, otherwise fall back. */
  --faq-brand: var(--plaskuri-brand, #6e3dea);
  --faq-brand-dark: var(--plaskuri-brand-dark, #5a2fd0);
  --faq-brand-light: var(--plaskuri-brand-light, #f3f0ff);
  --faq-text: var(--plaskuri-text, #1a1a2e);
  --faq-border: var(--plaskuri-border, #e8e5f0);
  --faq-radius: var(--plaskuri-radius-sm, 8px);
  --faq-shadow: var(--plaskuri-shadow, 0 2px 12px rgba(110, 61, 234, 0.08));
}

.schema-faq .schema-faq-section {
  margin-block-end: 12px;
  background: #fff;
  border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius);
  /* Clip the panel to the rounded corners while it animates open. */
  overflow: clip;
  transition: box-shadow 0.15s ease;
}

.schema-faq .schema-faq-section:has(.schema-faq-question[aria-expanded="true"]) {
  box-shadow: var(--faq-shadow);
}

/* The question is transformed from Yoast's <strong> into a real <button>. */
.schema-faq button.schema-faq-question {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
  color: var(--faq-text);
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.schema-faq button.schema-faq-question:hover,
.schema-faq button.schema-faq-question[aria-expanded="true"] {
  color: var(--faq-brand-dark);
  background: var(--faq-brand-light);
}

.schema-faq button.schema-faq-question:focus-visible {
  outline: 2px solid var(--faq-brand);
  outline-offset: -2px;
}

/* Chevron indicator (replaces the plugin's +/-). Rotates on open. */
.schema-faq button.schema-faq-question::after {
  flex: none;
  width: 9px;
  height: 9px;
  content: "";
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.schema-faq button.schema-faq-question[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

/*
 * Smooth reveal via grid-template-rows 0fr -> 1fr. The panel wrapper is added
 * by the JS around Yoast's <p class="schema-faq-answer">. Supported in all
 * evergreen browsers (Chrome 107+, Firefox 66+, Safari 16+).
 */
.schema-faq .schema-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.schema-faq .schema-faq-question[aria-expanded="true"] + .schema-faq-panel {
  grid-template-rows: 1fr;
}

/*
 * The inner clipper is the collapsing grid child: it must be free of padding and
 * border so it can shrink to exactly 0 when the row is 0fr. min-height:0 lets the
 * grid track collapse; overflow:hidden clips the padded answer inside it.
 */
.schema-faq .schema-faq-panel > .schema-faq-panel-inner {
  min-height: 0;
  overflow: hidden;
}

.schema-faq .schema-faq-answer {
  margin: 0;
  padding: 14px 18px 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--faq-text);
  border-top: 1px solid var(--faq-border);
}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
  .schema-faq .schema-faq-panel,
  .schema-faq button.schema-faq-question,
  .schema-faq button.schema-faq-question::after {
    transition: none;
  }
}