/* Copyright (c) 2026 Web Upp Limited. Licensed under the GPL-2.0-or-later; see LICENSE. */
.wu-faq__body > * {
  max-width: var(--wu-faq-measure, 860px);
}

.wu-faq__group + .wu-faq__group {
  margin-top: var(--wu-faq-group-gap, 48px);
}

.wu-faq__title {
  margin: 0 0 var(--wu-faq-title-gap, 16px);
  color: var(--wu-faq-title-colour, var(--wu-text));
  font: var(--wu-faq-title-font, 700 20px/1.3 var(--wu-display));
}

.wu-faq__items {
  border-top: var(--wu-faq-rule, 1px solid var(--wu-line));
}

.wu-faq__item {
  border-bottom: var(--wu-faq-rule, 1px solid var(--wu-line));
}

.wu-faq__q {
  margin: 0;
  color: var(--wu-faq-q-colour, var(--wu-text));
  font: var(--wu-faq-q-font, 600 18px/1.35 var(--wu-body));
}

.wu-faq--accordion .wu-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: var(--wu-faq-q-pad, 18px 0);
  cursor: pointer;
  list-style: none;
}
.wu-faq--accordion .wu-faq__q::-webkit-details-marker {
  display: none;
}

.wu-faq__icon {
  display: inline-flex;
  flex: none;
  color: var(--wu-faq-icon-colour, var(--wu-accent));
  transition: transform 0.2s var(--wu-ease);
}
.wu-faq__icon svg {
  width: var(--wu-faq-icon-size, 22px);
  height: var(--wu-faq-icon-size, 22px);
}

.wu-faq__item[open] .wu-faq__icon {
  transform: rotate(45deg);
}

.wu-faq--open .wu-faq__q {
  padding: var(--wu-faq-q-pad, 18px 0 8px);
}

.wu-faq__a {
  padding: var(--wu-faq-a-pad, 0 0 20px);
  color: var(--wu-faq-a-colour, inherit);
  font: var(--wu-faq-a-font, inherit);
}
.wu-faq__a p {
  max-width: 64ch;
  margin: 0;
}
.wu-faq__a p + p {
  margin-top: 12px;
}

.wu-faq.wu-ground--inverse {
  --wu-faq-rule: 1px solid var(--wu-faq-inverse-line, color-mix(in srgb, var(--wu-inverse-text) 24%, transparent));
}
.wu-faq.wu-ground--inverse .wu-faq__q,
.wu-faq.wu-ground--inverse .wu-faq__title,
.wu-faq.wu-ground--inverse .wu-faq__icon {
  color: var(--wu-inverse-text);
}

@media (prefers-reduced-motion: reduce) {
  .wu-faq__icon {
    transition: none;
  }
}
.wu-faq.wu-ground--inverse :is(.wu-eyebrow, .wu-label),
.wu-faq.wu-ground--inverse .wu-standfirst {
  color: var(--wu-faq-inverse-muted, var(--wu-inverse-text));
}