/* ==========================================================================
   FAQ Accordion — Full CSS
   Works with markup from [faq_accordion] shortcode and JS toggle snippet.
   Accessible, themeable, microdata-friendly.
   ========================================================================== */

/* ---------- Theme Variables ---------- */
:root {
  --faq-max-width: 900px;
  --faq-item-gap-y: 0;
  --faq-radius: 12px;

  --faq-q-weight: 700;
  --faq-q-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --faq-a-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.0625rem);
  --faq-line-height: 1.6;

  --faq-text: inherit;
  --faq-muted: rgba(0,0,0,.6);
  --faq-border: rgba(0,0,0,.12);
  --faq-bg: transparent;
  --faq-row-hover: rgba(0,0,0,.035);
  --faq-accent: var(--color-cerulean, #1fbcd6);
  --faq-focus: #4c9ffe;

  --faq-icon-size: 1rem;
  --faq-icon-weight: 2px;

  --faq-anim-speed: .28s;
  --faq-anim-ease: ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --faq-border: rgba(255,255,255,.18);
    --faq-row-hover: rgba(255,255,255,.06);
    --faq-muted: rgba(255,255,255,.75);
  }
}

/* ---------- Core Wrapper ---------- */
.faq-accordion {
  max-width: var(--faq-max-width);
  margin-inline: auto;
  color: var(--faq-text);
  background: var(--faq-bg);
}
.faq-accordion--boxed {
  border: 1px solid var(--faq-border);
  border-radius: var(--faq-radius);
  overflow: hidden;
  background: var(--faq-bg, #fff);
}
.faq-accordion, .faq-accordion * { box-sizing: border-box; }

/* ---------- Item ---------- */
.faq-item {
  border-bottom: 1px solid var(--faq-border);
  padding-block: var(--faq-item-gap-y);
}
.faq-accordion--boxed .faq-item:last-child { border-bottom: 0; }

/* ---------- Question Row ---------- */
.faq-question { margin: 0; font-weight: var(--faq-q-weight); font-size: var(--faq-q-size); line-height: 1.25; }
.faq-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 1rem 0;
  margin: 0;
  font: inherit; color: inherit;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem;
  cursor: pointer; text-align: left;
  border-radius: calc(var(--faq-radius) - 4px);
  transition: background-color .15s linear;
}
.faq-trigger:hover { background-color: var(--faq-row-hover); }
.faq-trigger:active { transform: translateY(0.5px); }
.faq-trigger:focus-visible { outline: 2px solid var(--faq-focus); outline-offset: 2px; }
.faq-q-text { display: inline-block; }

/* ---------- Plus / Minus Icon ---------- */
.faq-icon { width: var(--faq-icon-size); height: var(--faq-icon-size); position: relative; color: currentColor; }
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor; height: var(--faq-icon-weight); width: 100%;
  transform-origin: 50% 50%; transition: transform .2s ease, opacity .2s ease;
}
.faq-icon::after { transform: rotate(90deg); }          /* vertical bar for + */
.faq-trigger[aria-expanded="true"] .faq-icon::after {   /* becomes – when open */
  transform: rotate(0deg); opacity: 0;
}

/* ---------- Answer (animated with max-height) ---------- */
.faq-answer {
  overflow: hidden;
  transition: max-height var(--faq-anim-speed) var(--faq-anim-ease);
  will-change: max-height;
}
.faq-answer__inner {
  padding: 0 0 1rem 0;
  font-size: var(--faq-a-size);
  line-height: var(--faq-line-height);
  color: var(--faq-text);
}

/* Tidy content */
.faq-answer__inner > :first-child { margin-top: 0; }
.faq-answer__inner > :last-child { margin-bottom: 0; }
.faq-answer__inner p { margin: 0 0 .75rem 0; }
.faq-answer__inner ul, .faq-answer__inner ol { margin: .5rem 0 .75rem 1.25rem; }
html[dir="rtl"] .faq-answer__inner ul,
html[dir="rtl"] .faq-answer__inner ol { margin: .5rem 1.25rem .75rem 0; }
.faq-answer__inner a { color: var(--faq-accent); text-decoration: underline; }
.faq-answer__inner small, .faq-answer__inner .muted { color: var(--faq-muted); }

/* ---------- Variants ---------- */
.faq-accordion.is-compact .faq-trigger { padding: .75rem 0; }
.faq-accordion.is-compact .faq-answer__inner { padding-bottom: .75rem; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  :root { --faq-icon-size: 0.9rem; }
  .faq-trigger { gap: .5rem; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .faq-answer { transition: none !important; }
  .faq-trigger, .faq-icon::before, .faq-icon::after { transition: none !important; }
}

/* ---------- Forced Colors ---------- */
@media (forced-colors: active) {
  .faq-trigger:focus-visible { outline: 1px solid ButtonText; }
  .faq-icon::before, .faq-icon::after { background: ButtonText; }
}

/* ---------- Print ---------- */
@media print {
  .faq-trigger { pointer-events: none; }
  .faq-answer { max-height: none !important; overflow: visible !important; }
  .faq-item { border-bottom: 0; }
}

/* ---------- Plain list wrapper (microdata mode) ---------- */
.faqpage-wrapper { max-width: var(--faq-max-width); margin-inline: auto; }
.faq-list .faq-item { padding: .25rem 0; }

/* ---------- Helper ---------- */
.faq-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}