/* ════════════════════════════════════════════════════════════════════
   Site Frame — FAQ Accordion
   Modular, self-contained stylesheet.

   ╔══════════════════════════════════════════════════════════════╗
   ║  COLOR PALETTE — edit ONLY this block to retheme the FAQ    ║
   ║  Every color used anywhere in this file is declared below.  ║
   ╚══════════════════════════════════════════════════════════════╝

   IDLE STATE (card at rest)
     --faq-card-bg          card background
     --faq-card-border      card border
     --faq-card-radius      corner radius (shared across all states)
     --faq-q-color          question text
     --faq-icon-color       chevron icon foreground
     --faq-icon-bg          chevron icon bubble background

   HOVER STATE (mouse over closed card)
     --faq-hover-bg         card background tint
     --faq-hover-border     card border
     --faq-hover-shadow     card box-shadow
     --faq-hover-q-color    question text
     --faq-hover-icon-color chevron icon foreground
     --faq-hover-icon-bg    chevron icon bubble background

   OPEN / ACTIVE STATE (expanded card)
     --faq-open-bg          card background
     --faq-open-border      card border
     --faq-open-shadow      card box-shadow
     --faq-open-q-color     question text
     --faq-open-icon-color  chevron icon foreground (rotated 180°)
     --faq-open-icon-bg     chevron icon bubble background

   ANSWER AREA
     --faq-answer-color     answer body text
     --faq-answer-border    separator line between question and answer

   KEYBOARD FOCUS
     --faq-focus-ring       outline color shown on :focus-visible

   LAYOUT / TYPOGRAPHY (not colors — change sparingly)
     --faq-gap              vertical gap between cards
     --faq-q-size           question font-size
     --faq-q-weight         question font-weight
     --faq-a-size           answer font-size
     --faq-padding-h        horizontal padding inside cards
     --faq-padding-v        vertical padding on question button
     --faq-icon-size        diameter of the chevron bubble

════════════════════════════════════════════════════════════════════ */

.faqp-wrap {

  /* ── Idle ──────────────────────────────────────────────────── */
  --faq-card-bg:           var(--sf-surface);
  --faq-card-border:       var(--sf-border);
  --faq-card-radius:       10px;
  --faq-q-color:           var(--sf-text);
  --faq-icon-color:        var(--sf-muted);
  --faq-icon-bg:           rgba(var(--sf-accent-r),var(--sf-accent-g),var(--sf-accent-b),.08);

  /* ── Hover ─────────────────────────────────────────────────── */
  --faq-hover-bg:          rgba(var(--sf-accent-r),var(--sf-accent-g),var(--sf-accent-b),.04);
  --faq-hover-border:      var(--sf-accent2);
  --faq-hover-shadow:      rgba(var(--sf-accent-r),var(--sf-accent-g),var(--sf-accent-b),.12);
  --faq-hover-q-color:     var(--sf-accent);
  --faq-hover-icon-color:  var(--sf-accent);
  --faq-hover-icon-bg:     rgba(var(--sf-accent-r),var(--sf-accent-g),var(--sf-accent-b),.14);

  /* ── Open ──────────────────────────────────────────────────── */
  --faq-open-bg:           var(--sf-surface);
  --faq-open-border:       var(--sf-accent);
  --faq-open-shadow:       rgba(var(--sf-accent-r),var(--sf-accent-g),var(--sf-accent-b),.10);
  --faq-open-q-color:      var(--sf-accent);
  --faq-open-icon-color:   var(--sf-accent);
  --faq-open-icon-bg:      rgba(var(--sf-accent-r),var(--sf-accent-g),var(--sf-accent-b),.14);

  /* ── Answer area ────────────────────────────────────────────── */
  --faq-answer-color:      var(--sf-muted);
  --faq-answer-border:     var(--sf-border);

  /* ── Focus (keyboard nav only) ─────────────────────────────── */
  --faq-focus-ring:        var(--sf-accent2);

  /* ── Layout / typography ────────────────────────────────────── */
  --faq-gap:               6px;
  --faq-q-size:            16px;
  --faq-q-weight:          600;
  --faq-a-size:            15px;
  --faq-padding-h:         22px;
  --faq-padding-v:         18px;
  --faq-icon-size:         28px;
}


/* ── Structure ─────────────────────────────────────────────────────── */
.faqp-wrap { width: 100% }
.faqp-list  { display: flex; flex-direction: column; gap: var(--faq-gap) }

/* ── Card — idle ───────────────────────────────────────────────────── */
.faqp-item {
  background:    var(--faq-card-bg)     !important;
  border:        1.5px solid var(--faq-card-border) !important;
  border-radius: var(--faq-card-radius) !important;
  overflow:      hidden                 !important;
  transition:    border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

/* ── Card — hover ──────────────────────────────────────────────────── */
.faqp-item:hover {
  background:  var(--faq-hover-bg)     !important;
  border-color: var(--faq-hover-border) !important;
  box-shadow:  0 2px 12px var(--faq-hover-shadow) !important;
}

/* ── Card — open ───────────────────────────────────────────────────── */
.faqp-item.faqp-open {
  background:  var(--faq-open-bg)     !important;
  border-color: var(--faq-open-border) !important;
  box-shadow:  0 4px 16px var(--faq-open-shadow) !important;
}

/* ── Button reset (overrides Astra / WP / browser defaults) ─────────── */
.faqp-q {
  width:         100%          !important;
  display:       flex          !important;
  align-items:   center        !important;
  justify-content: space-between !important;
  gap:           16px          !important;
  padding:       var(--faq-padding-v) var(--faq-padding-h) !important;
  border:        none          !important;
  border-radius: 0             !important;
  background:    none          !important;
  box-shadow:    none          !important;
  cursor:        pointer       !important;
  text-align:    left          !important;
  font-family:   inherit       !important;
  color:         inherit       !important;
  outline:       none          !important;
}
/* keyboard-only focus ring */
.faqp-q:focus-visible {
  outline:        2px solid var(--faq-focus-ring) !important;
  outline-offset: 2px !important;
}

/* ── Question text ─────────────────────────────────────────────────── */
.faqp-q-text {
  font-size:   var(--faq-q-size)   !important;
  font-weight: var(--faq-q-weight) !important;
  color:       var(--faq-q-color)  !important;
  line-height: 1.4                 !important;
  flex:        1                   !important;
  transition:  color .2s           !important;
}
.faqp-item:hover     .faqp-q-text { color: var(--faq-hover-q-color) !important }
.faqp-item.faqp-open .faqp-q-text { color: var(--faq-open-q-color)  !important }

/* ── Chevron icon bubble ───────────────────────────────────────────── */
.faqp-icon {
  flex-shrink:  0                        !important;
  width:        var(--faq-icon-size)     !important;
  height:       var(--faq-icon-size)     !important;
  display:      flex                     !important;
  align-items:  center                   !important;
  justify-content: center               !important;
  color:        var(--faq-icon-color)    !important;
  background:   var(--faq-icon-bg)       !important;
  border-radius: 50%                     !important;
  transition:   transform .25s ease, color .2s, background .2s !important;
}
.faqp-item:hover .faqp-icon {
  color:      var(--faq-hover-icon-color) !important;
  background: var(--faq-hover-icon-bg)    !important;
}
.faqp-item.faqp-open .faqp-icon {
  transform:  rotate(180deg)             !important;
  color:      var(--faq-open-icon-color) !important;
  background: var(--faq-open-icon-bg)    !important;
}

/* ── Answer area ───────────────────────────────────────────────────── */
.faqp-a          { overflow: hidden }
.faqp-a[hidden]  { display: none !important }
.faqp-a-inner {
  padding:     0 var(--faq-padding-h) 20px !important;
  padding-top: 16px                        !important;
  font-size:   var(--faq-a-size)           !important;
  line-height: 1.75                        !important;
  color:       var(--faq-answer-color)     !important;
  border-top:  1px solid var(--faq-answer-border) !important;
}
.faqp-a-inner p                { margin: 0 0 10px }
.faqp-a-inner p:last-child     { margin-bottom: 0 }

/* cards style variant (border-radius already set on .faqp-item) */
.faqp-style-cards .faqp-item   { border-radius: var(--faq-card-radius) !important }