/*
 * Ticket Help (/showtix/faq/) — skin only.
 *
 * theme.css does not define .qa / .qa__item / .qa__body (verified, not
 * assumed), so the accordion component lives here, scoped to the one route
 * that uses it. The disclosure technique — list-style:none plus the
 * -webkit-details-marker reset — matches header.php's own .nav-disclosure,
 * the one other <details> element in this theme, so a visitor who has
 * already opened the mobile menu meets a familiar control twice.
 *
 * Enqueued automatically by the theme's page-<slug>.css convention
 * (functions.php → showtix_assets()), so it loads on /faq/ only.
 */

.qa {
  margin: 0;
  border-top: 1px solid var(--rule-strong);
}

.qa__item {
  border-bottom: 1px solid var(--rule);
}

.qa__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.75rem;
  padding-block: 1rem;
  font-weight: 700;
  font-size: var(--step-0);
  letter-spacing: -0.008em;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}

.qa__item > summary::-webkit-details-marker { display: none; }

.qa__item > summary::after {
  content: "+";
  flex: none;
  width: 1.5rem;
  text-align: center;
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--ember);
}

.qa__item[open] > summary::after { content: "\2212"; }

.qa__body {
  padding-bottom: 1.15rem;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.qa__body p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ will call -- */

/*
 * The will-call timeline. Two windows and the boundary between them, which is
 * the only answer on this page the client states as a sequence with published
 * times. The bands sit above the two steps and are cut to the same halves the
 * step grid uses, so the drawing and the words line up at every width instead
 * of by coincidence; below 40rem the steps stack and the strip stays readable
 * as a two-part strip because it never carried the words in the first place.
 *
 * Every colour here is FIELD tier. The amber band is surface under nothing,
 * and the two step headings are --ember, the amber at text weight (5.56:1).
 */
.willcall {
  margin: 1.75rem 0 0;
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.willcall__caption {
  margin: 0 0 1rem;
  max-width: var(--measure);
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
}

.willcall__track {
  display: block;
  width: 100%;
  height: 1.5rem;
}

.willcall__band { fill: var(--rule); }
.willcall__band--venue { fill: var(--accent); }
.willcall__axis { fill: var(--rule-strong); }
.willcall__tick { fill: var(--ink); }

.willcall__steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.5rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.willcall__when {
  margin: 0 0 0.2rem;
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ember);          /* 5.56:1 on paper-raised — text tier */
  max-width: none;
}

.willcall__what {
  margin: 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: none;
}

@media (max-width: 40rem) {
  .willcall__steps { grid-template-columns: 1fr; }
}