/* =============================================================================
   FAQ — Yoast FAQ block restyled as a native <details> accordion
   Markup transformed in inc/faq.php; conditionally loaded via inc/setup.php
   All values reference tokens from style.css :root
   ============================================================================= */

.mfc-faq {
  display: grid;
  gap: var(--mfc-space-3);
}


/* =============================================================================
   ITEM — one Q&A card
   ============================================================================= */

.mfc-faq__item {
  background: var(--mfc-bg-tertiary);
  border: 1px solid var(--mfc-border);
  border-radius: var(--mfc-radius-lg);
  overflow: hidden;
}

.mfc-faq__item[open] {
  border-color: var(--mfc-border-strong);
}


/* =============================================================================
   QUESTION — the <summary> row
   ============================================================================= */

.mfc-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mfc-space-4);
  padding: var(--mfc-space-4) var(--mfc-space-5);
  font-size: var(--mfc-text-base);
  font-weight: 700;
  line-height: 1.4;
  color: var(--mfc-text);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

/* Hide the native disclosure triangle */
.mfc-faq__question::-webkit-details-marker { display: none; }
.mfc-faq__question::marker { content: none; }

.mfc-faq__question:hover { color: var(--mfc-electric-dark); }

.mfc-faq__question:focus-visible {
  outline: 2px solid var(--mfc-electric);
  outline-offset: -2px;
  border-radius: var(--mfc-radius-lg);
}

.mfc-faq__q-text { min-width: 0; }


/* =============================================================================
   ICON — sage circle, + rotates to −
   ============================================================================= */

.mfc-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: var(--mfc-electric-surface);
  border-radius: var(--mfc-radius-full);
}

.mfc-faq__icon::before,
.mfc-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--mfc-electric-dark);
  border-radius: 1px;
  transition: transform 0.25s ease;
}

.mfc-faq__icon::before { transform: translate(-50%, -50%); }
.mfc-faq__icon::after  { transform: translate(-50%, -50%) rotate(90deg); }

/* Open: the vertical bar folds into the horizontal one → minus */
.mfc-faq__item[open] .mfc-faq__icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}


/* =============================================================================
   ANSWER
   ============================================================================= */

.mfc-faq__answer {
  padding: 0 var(--mfc-space-5) var(--mfc-space-5);
  color: var(--mfc-text-secondary);
  line-height: 1.6;
}

.mfc-faq__answer > * + * { margin-top: var(--mfc-space-3); }
.mfc-faq__answer p { margin: 0; }

.mfc-faq__answer a {
  color: var(--mfc-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mfc-faq__answer a:hover { color: var(--mfc-electric-dark); }

.mfc-faq__answer img {
  max-width: 100%;
  height: auto;
  border-radius: var(--mfc-radius-md);
}


/* =============================================================================
   SMOOTH EXPAND — progressive enhancement (Chromium 131+)
   Older browsers open instantly, which is fine.
   ============================================================================= */

@supports (interpolate-size: allow-keywords) {

  .mfc-faq__item {
    interpolate-size: allow-keywords;
  }

  .mfc-faq__item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }

  .mfc-faq__item[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {

  .mfc-faq__question,
  .mfc-faq__icon::before,
  .mfc-faq__icon::after {
    transition: none;
  }

  @supports (interpolate-size: allow-keywords) {
    .mfc-faq__item::details-content { transition: none; }
  }
}


/* =============================================================================
   MOBILE
   ============================================================================= */

@media (max-width: 640px) {

  .mfc-faq__question {
    padding: var(--mfc-space-4);
    gap: var(--mfc-space-3);
  }

  .mfc-faq__answer {
    padding: 0 var(--mfc-space-4) var(--mfc-space-4);
  }

  .mfc-faq__icon {
    width: 24px;
    height: 24px;
  }

  .mfc-faq__icon::before,
  .mfc-faq__icon::after { width: 10px; }
}