/* ── FAQ accordion block ─────────────────────────────────────────────────── */

.wp-block-formasuisse-faq {
  padding: clamp(72px, 9vw, 120px) 0;
  background: var(--color-paper, #ffffff);
}

.wp-block-formasuisse-faq .faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(40px, 5vw, 80px);
}

@media (max-width: 820px) {
  .wp-block-formasuisse-faq .faq-grid {
    grid-template-columns: 1fr;
  }
}

/* Band head is now editorial InnerBlocks (section-head self-styles itself).
   These rules only touch direct core heading/paragraph children — e.g. a plain
   intro paragraph — so they don't fight section-head's own typography. */
.wp-block-formasuisse-faq .faq-head > h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: 0 0 16px;
}

.wp-block-formasuisse-faq .faq-head > p {
  font-size: 1.05rem;
  color: var(--color-text-sub);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* section-head as the FAQ band head: its standalone spacing (large bottom
   margin + 640px cap) is meant for a header above a card grid. In the FAQ head
   column it should hug the intro/CTA below it and fill the column. */
.wp-block-formasuisse-faq .faq-head .wp-block-formasuisse-section-head {
  margin-bottom: 16px;
  max-width: none;
}
/* Its inner .wrapper sits inside the FAQ's own gutter-padded wrapper — don't
   double the <1200px gutter (from both blocks' .wrapper padding rules). */
.wp-block-formasuisse-faq .faq-head .wp-block-formasuisse-section-head .wrapper {
  padding: 0;
}

.wp-block-formasuisse-faq .faq-list details {
  border-top: 1px solid var(--color-rule, #d8dde3);
  padding: 20px 0;
}

.wp-block-formasuisse-faq .faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  font-family: var(--font-title);
  font-weight: 600;
  color: var(--color-primary);
  font-size: 1.08rem;
}

.wp-block-formasuisse-faq .faq-list summary::-webkit-details-marker {
  display: none;
}

.wp-block-formasuisse-faq .faq-list summary::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--color-primary);
  transition: transform 200ms ease-out;
  flex: 0 0 auto;
  line-height: 1;
}

.wp-block-formasuisse-faq .faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.wp-block-formasuisse-faq .faq-list p {
  margin: 14px 0 0;
  font-size: 0.95rem;
  color: var(--color-text-sub);
  line-height: 1.65;
}

/* ── Course (inline) variant ─────────────────────────────────────────────── */
/* Single content-width column (the block sits inside the ~720px course main
   column). No full-bleed band padding / white background, a red "+" marker and
   red links, and an optional tinted / navy panel (bg = soft | navy). */
.wp-block-formasuisse-faq[data-layout="inline"] {
  padding: 0;
  background: transparent;
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-inline > h2 {
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  margin: 0 0 12px;
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-inline > p {
  font-size: 1rem;
  color: var(--color-text-sub);
  line-height: 1.6;
  margin: 0 0 16px;
  max-width: 720px;
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-list details {
  padding: 16px 0;
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-list summary {
  font-size: 1rem;
  line-height: 1.4;
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-list summary::after {
  color: var(--color-cta);
  font-size: 1.4rem;
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-list p {
  font-size: 0.92rem;
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-list a {
  color: var(--color-cta);
  font-weight: 500;
  text-decoration: underline;
}

/* Panel backgrounds — wrap the accordion so it reads as its own block. */
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel {
  padding: clamp(24px, 4vw, 40px);
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="soft"] {
  background: var(--color-surface-pill, #f0f3f7);
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="navy"] {
  background: var(--color-primary, #062343);
}
/* Navy panel: flip text and rules to light. */
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="navy"] > h2,
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="navy"] .faq-list summary {
  color: #fff;
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="navy"] > p,
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="navy"] .faq-list p {
  color: rgba(255, 255, 255, 0.72);
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="navy"] .faq-list details {
  border-top-color: rgba(255, 255, 255, 0.18);
}
.wp-block-formasuisse-faq[data-layout="inline"]
  .faq-panel[data-bg="navy"]
  .faq-list
  details:last-of-type {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="navy"] .faq-list summary::after,
.wp-block-formasuisse-faq[data-layout="inline"] .faq-panel[data-bg="navy"] .faq-list a {
  color: var(--color-accent, #328efe);
}

/* Side gutter below .wrapper's 1200px centering (theme .wrapper has no
   horizontal padding) — matches the design --gutter. */
@media (max-width: 1199px) {
  .wp-block-formasuisse-faq .wrapper {
    padding: 0 clamp(20px, 4vw, 56px);
  }
}

/* Print: script.js opens every <details> before printing (CSS alone can't
   reveal a closed one); just keep each Q&A from splitting across a page break.
   Also drop the block's / panel's side padding so the FAQ runs full width. */
@media print {
  .wp-block-formasuisse-faq details {
    break-inside: avoid;
  }
  .wp-block-formasuisse-faq,
  .wp-block-formasuisse-faq[data-layout="inline"] .faq-panel {
    padding-left: 0;
    padding-right: 0;
  }
  /* Every answer is force-opened for print, turning the +/× toggle into a red
     "close" glyph on each row — pointless on paper, so drop the marker. */
  .wp-block-formasuisse-faq .faq-list summary::after {
    display: none;
  }
  /* The FAQ reads too small in print: bring the question/answer up to normal
     body size, and match the section title to the other section headings. */
  .wp-block-formasuisse-faq[data-layout="inline"] .faq-list summary,
  .wp-block-formasuisse-faq[data-layout="inline"] .faq-list p,
  .wp-block-formasuisse-faq .faq-list summary,
  .wp-block-formasuisse-faq .faq-list p {
    font-size: 1rem;
  }
  /* Same size as the standard h2 (e.g. the session-details print title). */
  .wp-block-formasuisse-faq[data-layout="inline"] .faq-inline > h2,
  .wp-block-formasuisse-faq .faq-head > h2,
  .wp-block-formasuisse-faq .wp-block-formasuisse-section-head .fs-sh__title {
    font-size: 1.3rem;
  }
}