/* =========================================================
   FAQ / Accordion — Expressive Material 3 (structure unchanged)
   Works for:
   .faq details / .entry-content details / Elementor widget details
   ========================================================= */

/* ---- MD3 token fallbacks (use your globals if already set) ---- */
:root{
  --it-purple:#4a154b; --it-blue:#64c3eb;

  --md-surface:#fafbfc;
  --md-surface-bright:#ffffff;
  --md-surface-container:#edf0f5;
  --md-on-surface:#111316;
  --md-on-surface-variant:#3e424a;
  --md-outline:#c3c8d1;
  --md-outline-variant:#dbe0e8;

  --md-primary: var(--it-purple);
  --md-primary-container:#EADDFF;
  --md-on-primary-container:#21005D;

  --elev-0: none;
  --elev-1: 0 2px 4px rgba(0,0,0,.10), 0 1px 1px rgba(0,0,0,.04);

  --state-hover:.10; --state-focus:.16;
}

/* Add inner padding so the summary “chip” breathes (outer card stays intact) */
.faq details,
.entry-content details,
.elementor .elementor-widget-container details{
  padding:6px;            /* keep outer white card, inner colored summary */
  background:transparent; /* don’t paint the container */
  border:0;               /* structure unchanged: no outer border here */
}

/* -------- QUESTION ROW (summary) -------- */
/* Chip-like, tonal container with subtle gradient + outline + elevation */
.faq summary,
.entry-content details>summary,
.elementor .elementor-widget-container details>summary{
  margin:0;
  padding:12px 14px;
  border-radius:18px;
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; gap:.6rem;
  min-height:44px; /* comfortable tap target */

  /* MD3: tonal container with expressive (very soft) brand mix */
  background:
    linear-gradient(100deg,
      color-mix(in oklab, var(--md-primary-container) 85%, #fff 15%) 0%,
      color-mix(in oklab, var(--md-primary-container) 75%, var(--md-primary) 10%) 100%);
  border:1px solid var(--md-outline-variant);
  box-shadow: var(--elev-1);

  color: var(--md-on-surface);
  transition: background .18s cubic-bezier(.2,0,.2,1),
             border-color .18s cubic-bezier(.2,0,.2,1),
             box-shadow .18s cubic-bezier(.2,0,.2,1),
             transform .18s cubic-bezier(.2,0,0,1);
  -webkit-tap-highlight-color: transparent;
}

/* Hover = slight state layer + tiny lift (expressive but restrained) */
.faq summary:hover,
.entry-content details>summary:hover,
.elementor .elementor-widget-container details>summary:hover{
  background:
    linear-gradient(100deg,
      color-mix(in oklab, var(--md-primary-container) calc((.85 + var(--state-hover)) * 100%), #fff 10%) 0%,
      color-mix(in oklab, var(--md-primary-container) calc((.75 + var(--state-hover)) * 100%), var(--md-primary) 12%) 100%);
  border-color: var(--md-outline);
  transform: translateY(-1px);
}

/* Focus ring for keyboard users */
.faq summary:focus-visible,
.entry-content details>summary:focus-visible,
.elementor .elementor-widget-container details>summary:focus-visible{
  outline:3px solid var(--md-primary-container);
  outline-offset:2px;
}

/* Open state = a touch stronger + remove “divider” feel */
.faq details[open] summary,
.entry-content details[open]>summary,
.elementor .elementor-widget-container details[open]>summary{
  background:
    linear-gradient(100deg,
      color-mix(in oklab, var(--md-primary-container) 70%, var(--md-primary) 14%) 0%,
      color-mix(in oklab, var(--md-primary-container) 60%, var(--md-primary) 20%) 100%);
  border-color: var(--md-outline);
  box-shadow: var(--elev-1);
}

/* Keep native/added chevrons readable on tinted background */
.faq summary::after,
.entry-content details>summary::after,
.elementor .elementor-widget-container details>summary::after{
  color: currentColor;
  filter: drop-shadow(0 1px 0 rgba(14,15,18,.06));
}
/* If the browser shows the default marker, don’t double it */
.faq summary::-webkit-details-marker,
.entry-content details>summary::-webkit-details-marker,
.elementor .elementor-widget-container details>summary::-webkit-details-marker{
  display:none;
}

/* -------- ANSWER PANEL -------- */
/* Keep content block on a bright surface for readability */
.faq details>*:not(summary),
.entry-content details>*:not(summary),
.elementor .elementor-widget-container details>*:not(summary){
  background: var(--md-surface-bright);
  border:1px solid var(--md-outline-variant);
  border-radius:16px;
  box-shadow: var(--elev-0);
  color: var(--md-on-surface);
}

/* Uniform inner padding for paragraphs (structure unchanged) */
.faq details > p,
.entry-content details > p,
.elementor .elementor-widget-container details > p{
  padding:14px 16px 14px 20px;
  margin:0;
  color: var(--md-on-surface-variant);
  font-family:"Fields Light", system-ui, -apple-system, sans-serif;
  line-height:1.6;
}

/* Reduced motion: keep interactions snappy without transforms */
@media (prefers-reduced-motion: reduce){
  .faq summary,
  .entry-content details>summary,
  .elementor .elementor-widget-container details>summary{
    transition: none !important;
    transform: none !important;
  }
}