/*
 * FAQ / Accordion — block style for core/details (native HTML <details>/<summary>).
 * Reuse unit: block style. Consumes ONLY token CSS vars (no raw hex/px).
 *
 * Editorial compact style (redesigned to match the front-store tone): no card
 * boxes — each item is a hairline-divided row, tight padding, ~half the height
 * of the previous card treatment. Questions align to the container edge.
 *
 * Tokens read:
 *   semantic.color.divider.subtle · text.primary / secondary · accent.secondary
 *   typography.family.* · space.3 / space.4
 *   duration.base · easing.default
 */

/* --- Base — borderless row with a hairline divider ------------------------- */

details.wp-block-details.is-style-wpdl-faq {
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--wp--custom--semantic--color--divider--subtle);
  border-radius: 0;
  overflow: hidden;
}

details.wp-block-details.is-style-wpdl-faq + details.wp-block-details.is-style-wpdl-faq {
  margin-block-start: 0;
}

/* First item gets a top divider so the list reads as a bounded block. */
details.wp-block-details.is-style-wpdl-faq:first-of-type {
  border-block-start: 1px solid var(--wp--custom--semantic--color--divider--subtle);
}

/* --- Summary (question row) — compact, aligned to edge -------------------- */

details.wp-block-details.is-style-wpdl-faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wp--custom--space--4);
  min-block-size: 2.75rem; /* 44px touch target */
  padding-inline: 0;
  padding-block: var(--wp--custom--space--3);
  font-family: var(--wp--custom--typography--family--sans);
  font-size: var(--wp--custom--typography--size--base, 1rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--wp--custom--semantic--color--text--primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details.wp-block-details.is-style-wpdl-faq > summary::-webkit-details-marker {
  display: none;
}

/* Clean SVG chevron (masked, so it inherits a token colour). Points down when
   closed; flips 180deg when open. Crisper than the old border-trick caret. */
details.wp-block-details.is-style-wpdl-faq > summary::after {
  content: '';
  flex-shrink: 0;
  display: block;
  inline-size: 1.15em;
  block-size: 1.15em;
  background-color: var(--wp--custom--semantic--color--text--secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%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 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--default);
}

/* --- Answer body — tight, no card padding -------------------------------- */

details.wp-block-details.is-style-wpdl-faq > :not(summary) {
  padding-inline: 0;
  padding-block-end: var(--wp--custom--space--3);
  margin-block: 0;
}

details.wp-block-details.is-style-wpdl-faq > p,
details.wp-block-details.is-style-wpdl-faq > .wp-block-paragraph {
  font-family: var(--wp--custom--typography--family--sans);
  font-size: var(--wp--custom--typography--size--sm, 0.9375rem);
  line-height: 1.6;
  color: var(--wp--custom--semantic--color--text--secondary);
  margin-block: 0;
  max-inline-size: 46rem;
}

/* --- Open state — chevron flips up --------------------------------------- */

details.wp-block-details.is-style-wpdl-faq[open] > summary {
  color: var(--wp--custom--semantic--color--accent--primary);
}

details.wp-block-details.is-style-wpdl-faq[open] > summary::after {
  transform: rotate(180deg);
  background-color: var(--wp--custom--semantic--color--accent--primary);
}

/* --- Focus --------------------------------------------------------------- */

details.wp-block-details.is-style-wpdl-faq > summary:focus-visible {
  outline: 2px solid var(--wp--custom--semantic--color--focus--ring);
  outline-offset: 2px;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  details.wp-block-details.is-style-wpdl-faq > summary::after {
    transition: none;
  }
}

/* --- Section header (front-store tone: gold eyebrow + serif heading) ------ */
.wpdl-faq__eyebrow {
  margin: 0 0 var(--wp--custom--space--2);
  color: var(--wp--custom--semantic--color--accent--secondary);
  font-family: var(--wp--custom--typography--family--sans);
  font-size: var(--wp--custom--typography--size--sm, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.wpdl-faq__title {
  margin: 0 0 var(--wp--custom--space--4);
  font-family: var(--wp--custom--typography--family--serif, serif);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); /* compact ~30px */
  font-weight: 500;
  line-height: 1.15;
  color: var(--wp--custom--semantic--color--text--primary);
}