/* Copyright (c) 2026 Web Upp Limited. Licensed under the GPL-2.0-or-later; see LICENSE. */
:where(.wu-faq .wu-head) {
  max-width: var(--wu-faq-head-width);
}

.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));
}

/* The eyebrow's slots (3.17.0): --wu-label-gap and the rule's
   --wu-label-rule-length, -width (its thickness), -radius, --wu-label-rule
   (its colour) and -opacity. sections.css reads them with the values drawn
   before; here, of no weight and with no fallback, they reach a site that
   dequeues sections.css and draws the eyebrow itself, wherever its own
   rules leave these properties unset (unset, each is as if absent; the
   rule's span is empty, so flex none changes no box). Every block
   stylesheet that draws an eyebrow carries this rule. */
:where(.wu-label) {
  gap: var(--wu-label-gap);
}

:where(.wu-label__rule) {
  flex: none;
  width: var(--wu-label-rule-length);
  height: var(--wu-label-rule-width);
  border-radius: var(--wu-label-rule-radius);
  background: var(--wu-label-rule);
  opacity: var(--wu-label-rule-opacity);
}