/* ==========================================================================
   FAQ accordion
   Colours are taken from the logo: #016CA4 is its dominant ink, #3289B6 the
   lighter tone inside the mark. Scoped under .faq so nothing leaks out.
   ========================================================================== */

.faq {
  --faq-brand: #016ca4;
  --faq-brand-dark: #01527d;
  --faq-brand-soft: #3289b6;
  --faq-tint: #f1f8fc;
  --faq-line: #d7e6ef;
  --faq-ink: #2b3946;

  display: block;
  margin: 34px 0 10px;
  color: var(--faq-ink);
}

.faq *,
.faq *::before,
.faq *::after {
  box-sizing: border-box;
}

.faq__list {
  border: 1px solid var(--faq-line);
  border-radius: 4px;
  overflow: hidden;
}

.faq__item + .faq__item {
  border-top: 1px solid var(--faq-line);
}

/* The global sheet forces capitalize + CaviarDreamsBold on every h3, which
   would re-case the question text. Reset both here. */
.faq h3.faq__q {
  margin: 0;
  padding: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: inherit;
  font-weight: normal;
  line-height: normal;
  text-transform: none;
  color: inherit;
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 18px 22px;
  background: #fff;
  border: 0;
  border-left: 3px solid transparent;
  color: var(--faq-ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-left-color 0.25s ease;
}

.faq__trigger:hover,
.faq__trigger:focus-visible {
  background: var(--faq-tint);
  color: var(--faq-brand);
}

.faq__trigger:focus-visible {
  outline: 2px solid var(--faq-brand);
  outline-offset: -2px;
}

.faq__item.is-open .faq__trigger {
  background: var(--faq-tint);
  border-left-color: var(--faq-brand);
  color: var(--faq-brand);
}

/* Chevron */
.faq__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 3px;
  background: rgba(1, 108, 164, 0.1);
  color: var(--faq-brand);
  font-size: 13px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.3s ease;
}

.faq__item.is-open .faq__icon {
  background: var(--faq-brand);
  color: #fff;
  transform: rotate(180deg);
}

/* Panel — max-height is set from the script so it can animate to real height */
.faq__panel {
  max-height: 0;
  overflow: hidden;
  background: #fff;
  transition: max-height 0.35s ease;
}

.faq__answer {
  margin: 0;
  padding: 4px 22px 22px 25px;
  border-left: 3px solid var(--faq-brand-soft);
  font-size: 15px;
  line-height: 1.75;
  text-align: justify;
}

/* Without JS every panel stays open rather than being unreachable */
.faq:not(.faq--ready) .faq__panel {
  max-height: none;
}

@media screen and (max-width: 600px) {
  .faq__trigger {
    padding: 15px 16px;
    font-size: 15px;
  }

  .faq__icon {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .faq__answer {
    padding: 4px 16px 18px 19px;
    font-size: 14px;
    text-align: left;
  }
}

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

  .faq__trigger,
  .faq__icon,
  .faq__panel {
    transition: none !important;
  }
}