/* ==========================================================================
   Yoast SEO FAQ block – accordion skin
   Pairs with yoast-faq.js (it adds .faq-ready to the block and .is-open /
   .is-collapsing to the sections). Fonts are left to the theme.
   ========================================================================== */

.schema-faq {
  --faq-bg: #f0f5fe;            /* closed card */
  --faq-bg-open: #ffffff;       /* open card */
  --faq-border-open: #e7edfe;   /* open card outline */
  --faq-question: #000000;
  --faq-answer: #000000;
  --faq-preview: #b1c3e3;       /* trimmed first line of a closed answer */
  --faq-radius: 10px;
  --faq-pad: 18px 36px 28px;    /* open card */
  --faq-pad-closed: 18px 36px 20px;
  --faq-space: 20px;            /* between cards */
  --faq-gap: 10px;              /* question -> answer (open) */
  --faq-gap-closed: 4px;        /* question -> preview line (closed) */
  --faq-duration: .3s;          /* also read by the JS for the height animation */

  display: flex;
  flex-direction: column;
  gap: var(--faq-space);
  margin-bottom: 1.7rem;
}

/* ---- Card (open look is the default) ----------------------------------- */

.schema-faq .schema-faq-section {
  margin: 0;
  padding: var(--faq-pad);
  background: var(--faq-bg-open);
  border: 2px solid var(--faq-border-open);
  border-radius: var(--faq-radius);
  transition: background-color var(--faq-duration) ease,
              border-color var(--faq-duration) ease,
              padding var(--faq-duration) ease;
}

.schema-faq .schema-faq-question {
  position: relative;
  display: block;
  margin: 0;
  padding-right: 44px;          /* room for the chevron */
  color: var(--faq-question);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.schema-faq .schema-faq-question:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Chevron: points up when open, down when closed */
.schema-faq .schema-faq-question::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 18px;
  height: 11px;
  margin-top: -5.5px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M1.75 1.75 9 9l7.25-7.25' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 11'%3E%3Cpath d='M1.75 1.75 9 9l7.25-7.25' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(180deg);
  transition: transform var(--faq-duration) ease;
}

.schema-faq .schema-faq-answer {
  margin: var(--faq-gap) 0 0;
  color: var(--faq-answer);
  transition: color var(--faq-duration) ease,
              margin-top var(--faq-duration) ease;
}

.schema-faq .schema-faq-answer img {
  max-width: 100%;
  height: auto;
}

/* ---- Closed state --------------------------------------------------------
   With JS: every section without .is-open.
   Before JS has run: every section but the first, so nothing jumps on load. */

.schema-faq.faq-ready .schema-faq-section:not(.is-open),
.schema-faq:not(.faq-ready) .schema-faq-section + .schema-faq-section {
  padding: var(--faq-pad-closed);
  background: var(--faq-bg);
  border-color: var(--faq-bg);
  cursor: pointer;
}

.schema-faq.faq-ready .schema-faq-section:not(.is-open) .schema-faq-question::after,
.schema-faq:not(.faq-ready) .schema-faq-section + .schema-faq-section .schema-faq-question::after {
  transform: none;
}

.schema-faq.faq-ready .schema-faq-section:not(.is-open) .schema-faq-answer,
.schema-faq:not(.faq-ready) .schema-faq-section + .schema-faq-section .schema-faq-answer {
  margin-top: var(--faq-gap-closed);
  color: var(--faq-preview);
}

/* Links in the preview: same faded colour, and a click opens the card instead */
.schema-faq.faq-ready .schema-faq-section:not(.is-open) .schema-faq-answer a,
.schema-faq:not(.faq-ready) .schema-faq-section + .schema-faq-section .schema-faq-answer a {
  color: inherit;
  pointer-events: none;
}

/* First line only, cut with "…" (released while the card animates shut) */
.schema-faq.faq-ready .schema-faq-section:not(.is-open):not(.is-collapsing) .schema-faq-answer,
.schema-faq:not(.faq-ready) .schema-faq-section + .schema-faq-section .schema-faq-answer {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}

.schema-faq.faq-ready .schema-faq-section:not(.is-open):not(.is-collapsing) .schema-faq-answer img,
.schema-faq:not(.faq-ready) .schema-faq-section + .schema-faq-section .schema-faq-answer img {
  display: none;
}

/* ---- Small screens / reduced motion ------------------------------------ */

@media (max-width: 600px) {
  .schema-faq {
    --faq-pad: 16px 20px 22px;
    --faq-pad-closed: 16px 20px 16px;
    --faq-space: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .schema-faq {
    --faq-duration: 0s;
  }
}