/* Team Saint — FAQ page.
   Tokens, page chrome (header, hero, footer) and pills are shared: see site.css,
   which must be loaded before this file. */

.section {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(8px, 2vw, 24px) var(--gutter) clamp(64px, 10vw, 120px);
}

.section-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(8px, 1.4vw, 16px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.section-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, var(--signal), var(--blue));
  box-shadow: 0 0 10px rgba(115, 144, 255, .5);
}

.section-index { font: 500 10px var(--mono); letter-spacing: .2em; color: var(--signal); }
.section-title { margin: 0; font: 400 clamp(20px, 2.4vw, 28px) / 1.1 var(--serif); letter-spacing: .2em; text-transform: uppercase; }
.section-count { margin-left: auto; font: 500 9px var(--mono); letter-spacing: .22em; color: var(--dim); white-space: nowrap; }

/* ---------- Questions ---------- */

.faq-list { max-width: 860px; }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(18px, 2.2vw, 26px) 0;
  list-style: none;
  cursor: pointer;
  font: 400 clamp(18px, 2vw, 23px) / 1.3 var(--serif);
  letter-spacing: .06em;
  transition: color .2s;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline-offset: 4px; }

/* The plus turns into a minus when the question is open. */
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  color: var(--muted);
  transition: transform .25s var(--ease), color .2s, background-size .25s var(--ease);
}

.faq-item[open] summary::after { color: var(--accent); background-size: 100% 1.5px, 1.5px 0; transform: rotate(180deg); }

.faq-answer {
  max-width: 62ch;
  padding: 0 0 clamp(20px, 2.4vw, 28px);
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.8;
}

/* ---------- Related pages ---------- */

.faq-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(28px, 4vw, 44px); }

@media (max-width: 560px) {
  .section-head { gap: 12px; }
  .section-title { letter-spacing: .14em; }
  .faq-item summary { gap: 16px; letter-spacing: .03em; }
  .faq-links .pill { flex: 1 1 auto; }
}