/* faq — this component's own styles, put in the head by the renderer where it is drawn.
   Colours and sizes only through var(--*), so the design drives these too. */

/* ---------- FAQ (sections/faq) ---------- */
.faq-list { display: grid; gap: .6rem; }

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-small);
  padding: 0 1.3rem;
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.05rem 0;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-right: 2rem;
}


.faq-item summary::-webkit-details-marker { display: none; }


.faq-item summary::after {
  content: '+';
  position: absolute;
  right: .2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--mark, var(--primary));
  transition: transform .2s ease;
}


.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq-item p { margin: 0; padding: 0 0 1.2rem; color: var(--body-text); font-size: .96rem; }

/* columns — everything expanded in two columns. The template also renders the
   `open` attribute for this variant: a closed <details> cannot be forced open
   from CSS, and faking it with height tricks breaks the built-in semantics
   screen readers rely on. */
.faq-list--columns {
  /* A block, not the list's grid: columns do nothing on a grid container,
     and two columns came out as one. */
  display: block;
  columns: 2;
  column-gap: 2.4rem;
}


.faq-list--columns .faq-item {
  break-inside: avoid;
  margin-bottom: 1.4rem;
}


.faq-list--columns .faq-item summary { cursor: default; list-style: none; pointer-events: none; }


.faq-list--columns .faq-item summary::-webkit-details-marker { display: none; }


.faq-list--columns .faq-item summary::after { content: none; }

@media (max-width: 640px) {
    .faq-list--columns { columns: 1; }
}

/* Questions read best in a narrow column, wherever the page puts them. */
.faq { max-width: 860px; margin-inline: auto; }