/**
 * Versana Pro — FAQ Block — style.css
 * Loaded on frontend AND in the block editor.
 *
 * Four visual styles: bordered | filled | minimal | card
 * Three icon styles:  chevron | plus | arrow  (rotated via CSS + JS)
 * Smooth open/close animation via max-height (JS handles the values)
 * Full dark mode + prefers-reduced-motion support
 * Accessible focus-visible outlines
 */

/* ─────────────────────────────────────────────────────────────────────────
   CSS custom properties (all override-able per block via inline style)
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq {
    --versana-faq-accent:       #7C3AED;
    --versana-faq-radius:       8px;
    --versana-faq-gap:          0px;
    --versana-faq-q-size:       1rem;
    --versana-faq-q-weight:     600;
    --versana-faq-a-size:       0.95rem;
    --versana-faq-padding-v:    18px;
    --versana-faq-padding-h:    20px;
    display: flex;
    flex-direction: column;
    gap: var( --versana-faq-gap );
}

/* ─────────────────────────────────────────────────────────────────────────
   Each item — built on native <details> for progressive enhancement
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq__item {
    box-sizing: border-box;
    list-style: none;
}

/* Remove default browser disclosure triangle */
.versana-faq__item > summary {
    list-style: none;
}
.versana-faq__item > summary::-webkit-details-marker { display: none; }

/* ─────────────────────────────────────────────────────────────────────────
   Summary / question trigger
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: var( --versana-faq-padding-v ) var( --versana-faq-padding-h );
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.versana-faq__question:focus-visible {
    outline: 2px solid var( --versana-faq-accent );
    outline-offset: -2px;
    border-radius: var( --versana-faq-radius );
}

.versana-faq__question-text {
    margin: 0;
    font-size: var( --versana-faq-q-size );
    font-weight: var( --versana-faq-q-weight );
    line-height: 1.4;
    flex: 1;
    /* Inherit colour from theme — don't hardcode */
}

/* ─────────────────────────────────────────────────────────────────────────
   Answer panel
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq__answer {
    overflow: hidden;
    max-height: 0;         /* JS animates this */
}

/* When open via native attribute (no-JS fallback) */
details[open] .versana-faq__answer {
    max-height: none;
}

/* When JS has confirmed it open */
.versana-faq__item--open .versana-faq__answer {
    max-height: none;
}

.versana-faq__answer-inner {
    padding: 0 var( --versana-faq-padding-h ) var( --versana-faq-padding-v );
    font-size: var( --versana-faq-a-size );
    line-height: 1.7;
    color: inherit;
    opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────────────────────
   Icon
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq__icon-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: var( --versana-faq-accent );
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.versana-faq__icon-h {
    transition: opacity 0.18s ease;
}

.versana-faq__icon-svg {
    display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   Style: BORDERED (default)
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq--bordered {
    --versana-faq-gap: 0px;
}

.versana-faq--bordered .versana-faq__item {
    border: 1.5px solid #E5E7EB;
    border-radius: var( --versana-faq-radius );
    margin-bottom: 8px;
    transition: border-color 0.15s ease;
}

.versana-faq--bordered .versana-faq__item--open,
.versana-faq--bordered details[open] {
    border-color: var( --versana-faq-accent );
}

@media (prefers-color-scheme: dark) {
    .versana-faq--bordered .versana-faq__item {
        border-color: rgba(255,255,255,0.12);
    }
    .versana-faq--bordered .versana-faq__item--open,
    .versana-faq--bordered details[open] {
        border-color: var( --versana-faq-accent );
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Style: FILLED
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq--filled {
    --versana-faq-gap: 6px;
}

.versana-faq--filled .versana-faq__item {
    background: #F9FAFB;
    border-radius: var( --versana-faq-radius );
    transition: background 0.15s ease;
}

.versana-faq--filled .versana-faq__item--open,
.versana-faq--filled details[open] {
    background: #EDE9FE;
}

@media (prefers-color-scheme: dark) {
    .versana-faq--filled .versana-faq__item          { background: #1F2937; }
    .versana-faq--filled .versana-faq__item--open,
    .versana-faq--filled details[open]               { background: #2D1F4E; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Style: MINIMAL
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq--minimal {
    --versana-faq-gap: 0px;
}

.versana-faq--minimal .versana-faq__item {
    border-bottom: 1.5px solid #E5E7EB;
}

.versana-faq--minimal .versana-faq__item:first-child {
    border-top: 1.5px solid #E5E7EB;
}

.versana-faq--minimal .versana-faq__question {
    padding-left: 0;
    padding-right: 0;
}

.versana-faq--minimal .versana-faq__answer-inner {
    padding-left: 0;
    padding-right: 0;
}

@media (prefers-color-scheme: dark) {
    .versana-faq--minimal .versana-faq__item,
    .versana-faq--minimal .versana-faq__item:first-child {
        border-color: rgba(255,255,255,0.1);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Style: CARD (shadow)
   ───────────────────────────────────────────────────────────────────────── */
.versana-faq--card {
    --versana-faq-gap: 12px;
}

.versana-faq--card .versana-faq__item {
    border-radius: var( --versana-faq-radius );
    box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    background: #ffffff;
    transition: box-shadow 0.18s ease;
}

.versana-faq--card .versana-faq__item--open,
.versana-faq--card details[open] {
    box-shadow: 0 4px 20px rgba(124,58,237,0.15), 0 1px 3px rgba(0,0,0,0.06);
}

@media (prefers-color-scheme: dark) {
    .versana-faq--card .versana-faq__item {
        background: #1F2937;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }
    .versana-faq--card .versana-faq__item--open,
    .versana-faq--card details[open] {
        box-shadow: 0 4px 20px rgba(124,58,237,0.3);
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   Reduced motion — disable all transitions
   ───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .versana-faq__answer,
    .versana-faq__icon-wrap,
    .versana-faq__icon-h,
    .versana-faq--bordered .versana-faq__item,
    .versana-faq--filled   .versana-faq__item,
    .versana-faq--card     .versana-faq__item {
        transition: none !important;
    }
}