/* Plus/Minus FAQ — accordion-item style variant.
   Same bordered/rounded white card as "Numbered FAQ", but with NO number
   counter and a circular +/- toggle button on the right (+ closed, - open).
   Apply to core/accordion-item.

   The +/- glyph is swapped purely via CSS state: core renders the toggle
   icon as a bare "+" text node inside .wp-block-accordion-heading__toggle-icon,
   so we collapse that text with font-size:0 and inject an Icon-Font glyph via
   ::after. Unlike Numbered FAQ (which rotates a chevron), this variant must
   NOT rotate — core's accordion-item/style.css rotates the icon 45deg on
   .is-open, so we neutralize that with transform:none !important. */

.is-style-plus-minus-faq {
  border: 1px solid var(--wp--preset--color--neutral-50, #b5b3b8);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  background: #fff;
  /* Rollover: the design's 2px persimmon rule, drawn as an OUTLINE.

     Same technique the card rollovers in css-framework.css use, and for the
     same reason: a border is part of the box, so thickening one on hover
     reflows the row and shifts its contents under the pointer. An outline is
     painted outside the box model and costs no layout, and `-2px` offset pulls
     it back inside the card edge so it reads as the border the design asks
     for.

     The resting state carries a TRANSPARENT outline of the same width so only
     the colour animates — transitioning from `none` pops in with no fade,
     which is the "no smooth animation" half of the report. */
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.2s ease;
}

/* Persimmon is the orange-100 preset (#FF6B35) — see the note in
   css-framework.css where the card rollovers name the same colour. */
.is-style-plus-minus-faq:hover {
  outline-color: var(--wp--preset--color--orange-100, #ff6b35);
}

@media (prefers-reduced-motion: reduce) {
  .is-style-plus-minus-faq {
    transition: none;
  }
}

.is-style-plus-minus-faq .wp-block-accordion-heading__toggle {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 24px;
  font-weight: 700;
  font-size: 20px;
  text-align: left;
}

.is-style-plus-minus-faq .wp-block-accordion-heading__toggle-title {
  flex: 1 0 0;
}

/* The circular +/- button — background lives on the icon box only,
   not the whole heading row (per Figma). */
.is-style-plus-minus-faq .wp-block-accordion-heading__toggle-icon {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--wp--preset--color--tomato-100, #fd4a33);
  /* Collapse core's default "+"/"-" text node (its own text content, not a
     pseudo-element) while keeping the box for layout/click target. */
  font-size: 0;
  line-height: 1;
}

/* Closed state glyph: "+" */
.is-style-plus-minus-faq .wp-block-accordion-heading__toggle-icon::after {
  content: '\e90f'; /* ic-btn-plus */
  font-family: 'Icon-Font';
  font-style: normal;
  font-weight: normal;
  color: #fff;
  font-size: 14px;
  line-height: 1;
}

/* Open state glyph: "-" (swap content only, NO rotation) */
.is-style-plus-minus-faq.is-open .wp-block-accordion-heading__toggle-icon::after {
  content: '\e915'; /* ic-btn-minus */
}

/* Neutralize core accordion-item's 45deg rotate on .is-open toggle-icon.
   !important because core/blocks/accordion-item/style.css loads after theme
   block styles (same convention as numbered-faq-accordion.css). */
.is-style-plus-minus-faq.is-open .wp-block-accordion-heading__toggle-icon {
  transform: none !important;
}

/* Off-palette on purpose — same case as the numbered FAQ panel, kept in sync
   with it. #525252 is the design's body grey and no palette token carries it;
   written as var(--wp--preset--color--neutral-70, #525252) the hex was only a
   fallback, and since neutral-70 is defined it never applied — the text
   rendered as the lighter #726E79. See numbered-faq-accordion.css. */
.is-style-plus-minus-faq .wp-block-accordion-panel {
  padding: 0 24px 24px 24px;
  color: #525252;
}