/* =============================================================================
   FAQ Section Styles — Divi Child Theme
   =============================================================================
   Extracted from FAQ.html inline <style>.
   body { background-color } is intentionally omitted — background is provided
   by the child theme (style.css). All other body-shell and card/surface
   backgrounds are preserved.

   Design tokens (:root --clr-*, --radius-card, --ease-smooth, etc.) are
   expected from fase7-styles.css which is enqueued on the same page.
   Fallback values are provided via CSS var() second arguments for use on
   pages where fase7-styles.css is not loaded.
   ============================================================================= */

/* ── Body shell (no background) ──────────────────────────── */
body {
  margin: 0;
  color: var(--clr-text-base, hsl(220, 20%, 90%));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── FAQ Section (Inner Wrapper) ──────────────────────────────────────────── */
.faq {
  padding-block: var(--sp-section-y, clamp(4rem, 8vw, 7rem));
  position: relative;
  overflow: hidden;
}

/* Divi Section Override: Zorg dat de omliggende sectie 100% the tactile background meeneemt */
.et_pb_section:has(.faq) {
    background-color: #050505 !important;
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Radiale teal glow — omgezet naar Ellipse the transparent edge om naad the voorkomen */
.et_pb_section:has(.faq)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(ellipse at 50% 50%,
          hsla(178, 62%, 82%, 0.08) 0%,
          hsla(178, 62%, 82%, 0.03) 40%,
          transparent 80%);
  pointer-events: none;
  z-index: 0;
}

/* Vederlichte SVG noise grain — zorgt voor de 'tactile' textuur op sectie-niveau */
.et_pb_section:has(.faq)::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}

.faq__inner {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
  position: relative;
  z-index: 1;
}

/* ── Header ───────────────────────────────────────────────── */
.faq__header {
  text-align: center;
  margin-block-end: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
}

.faq__header::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(700px, 100%);
  height: 220px;
  background: radial-gradient(ellipse at center, hsla(168, 72%, 52%, 0.09) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.faq__header>* {
  position: relative;
  z-index: 1;
}

.faq__title {
  font-size: var(--fs-section-title, clamp(2rem, 3.5vw + 0.5rem, 3.25rem));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0 0 0.75rem;
  background: linear-gradient(135deg,
      var(--clr-text-base, hsl(220, 20%, 90%)) 30%,
      var(--clr-accent, hsl(168, 72%, 52%)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq__title-accent {
  /* inherits gradient from parent */
}

.faq__subtitle {
  font-size: var(--fs-section-sub, clamp(0.95rem, 1vw + 0.4rem, 1.15rem));
  color: var(--clr-text-muted, hsl(220, 12%, 60%));
  margin: 0;
  line-height: 1.6;
  max-width: 52ch;
  margin-inline: auto;
}

/* ── List ─────────────────────────────────────────────────── */
/* !important overrides Divi's default ul { padding-left / list-style } */
.faq__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
}

.faq__list .faq__item {
  list-style: none !important;
  width: 100%;
}

/* ── Item — pricing card border technique ─────────────────── */
/*
   Same as .pricing__card in fase7-styles.css:
   padding: 1px acts as the 1px border (background = border colour).
   ::after is the flashlight spotlight driven by --mouse-x / --mouse-y.
   .faq__item-surface is the inner content surface.
*/
.faq__item {
  --mouse-x: 50%;
  --mouse-y: 0%;

  position: relative;
  border-radius: var(--radius-card, 18px);
  background: var(--clr-border, hsl(222, 16%, 20%));
  padding: 1px;
  transition:
    transform 0.3s var(--ease-smooth, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
    box-shadow 0.3s var(--ease-smooth, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

/* Flashlight / spotlight border — follows mouse position */
.faq__item::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-card, 18px) + 1px);
  background: radial-gradient(420px circle at var(--mouse-x) var(--mouse-y),
      hsla(168, 72%, 52%, 0.45),
      transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-smooth, cubic-bezier(0.25, 0.46, 0.45, 0.94));
  pointer-events: none;
  z-index: 0;
}

/* Inner content surface */
.faq__item-surface {
  position: relative;
  z-index: 1;
  background: linear-gradient(160deg,
      var(--clr-surface, hsl(222, 18%, 11%)) 0%,
      hsl(222, 20%, 12.5%) 100%);
  border-radius: calc(var(--radius-card, 18px) - 1px);
  overflow: hidden;
}

/* Show spotlight on hover */
@media (hover: hover) and (pointer: fine) {
  .faq__item:hover {
    transform: translateY(-2px);
    box-shadow:
      0 8px 28px hsla(222, 22%, 4%, 0.40),
      0 2px 8px hsla(222, 22%, 4%, 0.25);
  }

  .faq__item:hover::after {
    opacity: 1;
  }
}

/* Show spotlight on active/open item */
.faq__item:has([aria-expanded="true"])::after {
  opacity: 1;
}

/* ── Toggle button ────────────────────────────────────────── */
.faq__question {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

.faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.875rem 2.5rem;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: clamp(1rem, 1.1vw + 0.5rem, 1.175rem);
  font-weight: 600;
  color: var(--clr-text-base, hsl(220, 20%, 90%));
  text-align: left;
  cursor: pointer;
  /* No color transition — text stays white on hover */
}

/* Icon accent colour on hover, no background change */
@media (hover: hover) and (pointer: fine) {
  .faq__toggle:hover .faq__icon {
    color: var(--clr-accent, hsl(168, 72%, 52%));
  }
}

.faq__toggle:focus-visible {
  outline: 2px solid var(--clr-accent, hsl(168, 72%, 52%));
  outline-offset: -2px;
  border-radius: var(--radius-card, 18px);
}

/* ── Plus icon — no background, just the character ─────────── */
.faq__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--clr-accent, hsl(168, 72%, 52%));
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  user-select: none;
  transition:
    transform 0.38s var(--ease-smooth, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
    color 0.25s var(--ease-smooth, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

/* Rotate + on expand — no background */
.faq__toggle[aria-expanded="true"] .faq__icon {
  transform: rotate(45deg);
  color: var(--clr-accent, hsl(168, 72%, 52%));
}

/* ── Body / Answer ────────────────────────────────────────── */
.faq__body {
  overflow: hidden;
  /* GSAP manages height/visibility; overflow hidden is always needed */
}

.faq__answer {
  padding: 1.5rem 2.5rem 2.25rem;
  font-size: clamp(0.92rem, 0.9vw + 0.4rem, 1.05rem);
  color: var(--clr-text-muted, hsl(220, 12%, 60%));
  line-height: 1.8;
  border-top: 1px solid hsl(222, 16%, 18%);
}

.faq__answer p {
  margin: 0;
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 640px) {
  .faq__toggle {
    padding: 1.375rem 1.375rem;
  }

  .faq__answer {
    padding: 1.25rem 1.375rem 1.75rem;
  }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .faq__toggle,
  .faq__icon,
  .faq__item {
    transition: none !important;
    animation: none !important;
  }
}