@charset "UTF-8";
/**
 * CAI Accordion / FAQ — styles for the cai_accordion widget.
 *
 * Built on native <details>/<summary>; reuses the design tokens from main.css.
 */
.cai-accordion {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cai-accordion__item {
  border-bottom: 1px solid var(--cai-color-border, #dee2e6);
}

.cai-accordion__item:first-child {
  border-top: 1px solid var(--cai-color-border, #dee2e6);
}

/* Question row (the clickable summary). */
.cai-accordion__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-size: var(--cai-fs-h4);
  font-weight: 400;
  line-height: 1.25;
  color: var(--cai-color-ink, #141414);
}
.cai-accordion__q:hover {
  color: var(--cai-color-blue-brand, #0085ca);
}

.cai-accordion__item[open] .cai-accordion__q {
  color: var(--cai-color-blue-brand, #0085ca);
}

/* Hide the default disclosure triangle across browsers. */
.cai-accordion__q::-webkit-details-marker {
  display: none;
}

.cai-accordion__q::marker {
  content: "";
}

.cai-accordion__q-text {
  flex: 1;
}

/* Summary icon — plus (closed) that rotates into a minus (open).
 *
 * On open the whole 24x24 box turns a quarter turn while the horizontal bar
 * fades out, so the vertical bar finishes the rotation lying flat: a minus.
 * The fade is deliberately shorter than the rotation so the bar is gone before
 * the turn completes, rather than both bars visibly swinging together.
 *
 * CHEVRON VARIANT: the previous chevron is kept commented out in three places
 * that must be swapped together —
 *   1. here (below),
 *   2. inc/widgets/cai-accordion-item.html.twig  (atomic widget markup),
 *   3. inc/widgets/class-cai-accordion-widget.php (classic widget markup).
 * assets/js/accordion.js needs no change either way; it never touches the icon.
 */
.cai-accordion__icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: inherit;
  transition: transform 0.3s ease;
}

/* Both bars are centred on the icon box; the translate is what centres them,
   so the rotation above pivots around the middle of the plus. */
.cai-accordion__plus-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: currentColor;
  border-radius: 1px;
}

.cai-accordion__plus-bar--h {
  width: 100%;
  height: 2px;
  transition: opacity 0.15s ease; /* Half the rotation — fades out mid-turn. */
}

.cai-accordion__plus-bar--v {
  width: 2px;
  height: 100%;
}

.cai-accordion__item[open] .cai-accordion__icon {
  transform: rotate(90deg);
}

.cai-accordion__item[open] .cai-accordion__plus-bar--h {
  opacity: 0;
}

/* Respect a reduced-motion preference: still swaps plus <-> minus, just
   without the spin. */
@media (prefers-reduced-motion: reduce) {
  .cai-accordion__icon,
  .cai-accordion__plus-bar--h {
    transition: none;
  }
}
/* Answer panel. */
.cai-accordion__a {
  padding: 0 0 20px;
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  font-size: var(--cai-fs-body-2, 16px);
  line-height: var(--cai-lh-body-2, 24px);
  color: var(--cai-color-body-muted, #606d7b);
}
.cai-accordion__a p {
  font-family: var(--cai-font-base, Arial, Helvetica, sans-serif);
  font-weight: 400;
  font-size: var(--cai-fs-body-1);
  line-height: var(--cai-lh-body-1);
  color: var(--cai-color-body-muted, #606d7b);
}
.cai-accordion__a a {
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: none;
}
.cai-accordion__a a:hover, .cai-accordion__a a:focus {
  text-decoration: underline;
}

.cai-accordion__a > *:first-child {
  margin-top: 0;
}

.cai-accordion__a > *:last-child {
  margin-bottom: 0;
}