.wpc-faq-wrap {
  width: 100% !important;
  max-width: 1300px !important;
  margin-inline: auto !important;
  font-family: 'Oak Sans', 'Segoe UI', Arial, sans-serif !important;
  background: var(--wpcf-section-bg, transparent) !important;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 24px) !important;
  border-radius: var(--wpcf-section-radius, 1.5rem) !important;
}

.wpc-faq-wrap,
.wpc-faq-wrap *,
.wpc-faq-wrap *::before,
.wpc-faq-wrap *::after {
  box-sizing: border-box !important;
}

.wpc-faq-heading {
  font-family: 'Tropiline', 'Oak Sans', serif !important;
  font-weight: 700 !important;
  font-size: clamp(26px, 3.4vw, 38px) !important;
  line-height: 1.25 !important;
  text-align: center !important;
  color: var(--wpcf-heading-color, #00335E) !important;
  max-width: 24ch !important;
  margin: 0 auto clamp(28px, 4vw, 40px) !important;
  overflow-wrap: break-word !important;
}

/* ── Layout: FAQ column + optional image column ──
   min-width:0 on every grid item here is required — grid/flex items
   default to min-width:auto, which refuses to shrink below the widest
   unwrapped question text and busts the layout out of the viewport.
   This is the same bug class fixed on .wpc-faq-question-text; it has
   to be re-applied at each new nesting level, including this one. */
.wpc-faq-layout {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  min-width: 0 !important;
}

.wpc-faq-layout.has-image {
  grid-template-columns: 7fr 3fr !important;
  align-items: stretch !important;
  gap: var(--wpcf-layout-gap, 32px) !important;
}

.wpc-faq-layout.has-image.image-left .wpc-faq-main {
  order: 2 !important;
}

.wpc-faq-layout.has-image.image-left .wpc-faq-image {
  order: 1 !important;
}

.wpc-faq-main {
  min-width: 0 !important;
  width: 100% !important;
}

.wpc-faq-image {
  min-width: 0 !important;
  align-self: stretch !important;
}

.wpc-faq-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 260px !important;
  object-fit: cover !important;
  border-radius: var(--wpcf-image-radius, 1.5rem) !important;
}

.wpc-faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(12px, 2vw, 16px) !important;
}

.wpc-faq-item {
  background: var(--wpcf-card-bg, #ffffff) !important;
  border: 1px solid var(--wpcf-card-border, #eceff2) !important;
  border-radius: var(--wpcf-card-radius, 1.1rem) !important;
  box-shadow: 0 10px 24px -20px rgba(0, 51, 94, 0.25) !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.wpc-faq-item:hover {
  box-shadow: 0 16px 32px -18px rgba(0, 51, 94, 0.3) !important;
}

.wpc-faq-item.is-open {
  border-color: var(--wpcf-card-border-open, #cfe0ec) !important;
}

/* The <button> itself is deliberately NOT the flex container. Some
   mobile/WebKit browsers compute a <button>'s intrinsic width from its
   unwrapped content regardless of min-width:0 on descendants, which
   busts the layout out of the card. Keeping the button a plain block
   and doing the actual flex layout on an inner <span> sidesteps that
   button-specific sizing quirk entirely. */
.wpc-faq-question {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  text-align: left !important;
  cursor: pointer !important;
  padding: clamp(16px, 2.4vw, 22px) clamp(18px, 3vw, 28px) !important;
  font-family: inherit !important;
}

.wpc-faq-question:focus-visible {
  outline: 2px solid var(--wpcf-icon-color, #00335E) !important;
  outline-offset: -2px !important;
  border-radius: var(--wpcf-card-radius, 1.1rem) !important;
}

.wpc-faq-question-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(12px, 2vw, 20px) !important;
  width: 100% !important;
  min-width: 0 !important;
}

.wpc-faq-question-text {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  font-family: 'Tropiline', 'Oak Sans', serif !important;
  font-weight: 700 !important;
  font-size: clamp(15px, 1.7vw, 18px) !important;
  line-height: 1.4 !important;
  color: var(--wpcf-question-color, #00335E) !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.wpc-faq-icon {
  position: relative !important;
  width: clamp(24px, 2.6vw, 28px) !important;
  height: clamp(24px, 2.6vw, 28px) !important;
  border-radius: 50% !important;
  border: 1.5px solid var(--wpcf-icon-color, #00335E) !important;
  flex-shrink: 0 !important;
}

.wpc-faq-icon::before,
.wpc-faq-icon::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  background: var(--wpcf-icon-color, #00335E) !important;
  transition: opacity 0.2s ease !important;
}

.wpc-faq-icon::before {
  width: 40% !important;
  height: 1.5px !important;
  transform: translate(-50%, -50%) !important;
}

.wpc-faq-icon::after {
  width: 1.5px !important;
  height: 40% !important;
  transform: translate(-50%, -50%) !important;
}

.wpc-faq-item.is-open .wpc-faq-icon::after {
  opacity: 0 !important;
}

.wpc-faq-answer-wrap {
  display: grid !important;
  grid-template-rows: 0fr !important;
  transition: grid-template-rows 0.3s ease !important;
}

.wpc-faq-item.is-open .wpc-faq-answer-wrap {
  grid-template-rows: 1fr !important;
}

.wpc-faq-answer-inner {
  min-height: 0 !important;
  overflow: hidden !important;
}

.wpc-faq-answer {
  padding: 0 clamp(18px, 3vw, 28px) clamp(16px, 2.4vw, 22px) !important;
  font-size: clamp(13px, 1.4vw, 14.5px) !important;
  line-height: 1.7 !important;
  color: var(--wpcf-answer-color, #5b6b78) !important;
  overflow-wrap: break-word !important;
}

.wpc-faq-answer p {
  margin: 0 0 0.8em 0 !important;
}

.wpc-faq-answer p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .wpc-faq-layout.has-image {
    grid-template-columns: 1fr !important;
  }

  .wpc-faq-layout.has-image.image-left .wpc-faq-main,
  .wpc-faq-layout.has-image.image-left .wpc-faq-image {
    order: initial !important;
  }

  .wpc-faq-image img {
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .wpc-faq-question-text {
    font-size: 14.5px !important;
  }

  .wpc-faq-image img {
    aspect-ratio: 4 / 3 !important;
  }
}