/* ==========================================================================
   Cyber City · the questions page (page-faq.php)
   The search first, the questions asked most, then every question by topic.
   A phone and a tablet: the topics are cards, one open at a time. A wide screen: a rail of topics stays beside the
   whole list. Without the script every list is simply open.
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

.ecc-fqp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); align-items: start; }
.ecc-fqp > * { grid-column: 1 / -1; min-width: 0; }
.ecc-fqp__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }

/* ---- the question the page asks, and the search ---- */
.ecc-fqp__head { display: grid; align-content: end; min-height: calc(var(--ecc-s-9) * 4.5); padding-top: var(--ecc-s-7); padding-bottom: var(--ecc-s-6); }
.ecc-fqp__ask { margin: 0; font-size: var(--ecc-t-display); text-wrap: balance; }
.ecc-fqp__search { max-width: 44em; }
.ecc-fqp__search .ecc-input { min-height: calc(var(--ecc-hit) + var(--ecc-s-4)); font-size: var(--ecc-t-body-lg); }
.ecc-fqp__status { margin: 0; color: var(--ecc-ink-2); }
.ecc-fqp__status:empty { display: none; }

/* ---- asked most ---- */
.ecc-fqp__top { display: grid; gap: var(--ecc-s-4); }
.ecc-fqp__top[hidden] { display: none; }
.ecc-fqp__tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-s-2); margin: 0; padding: 0; list-style: none; }
.ecc-fqp__tile { display: flex; align-items: center; justify-content: space-between; gap: var(--ecc-s-3); min-height: calc(var(--ecc-hit) + var(--ecc-s-4)); padding: var(--ecc-s-3) var(--ecc-s-4); border: 1px solid var(--ecc-line-strong); border-radius: var(--ecc-r-sm); color: var(--ecc-ink); font-weight: var(--ecc-fw-strong); line-height: 1.3; text-decoration: none; }
.ecc-fqp__tile .ecc-icon { flex: none; color: var(--ecc-ink-2); }
@media (hover: hover) and (pointer: fine) { .ecc-fqp__tile:hover { background: var(--ecc-wash); border-color: var(--ecc-ink); } }

/* ---- the rail of topics (a wide screen only) ---- */
/* The rail and its list share one box: a sticky rail stops where its box ends, so it can never ride over the row
   that follows the list ("Ask a person"). */
.ecc-fqp__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); align-items: start; }
.ecc-fqp__main > * { grid-column: 1 / -1; min-width: 0; }
.ecc-fqp__rail { display: none; }
.ecc-fqp__topics { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ecc-fqp__topics li[hidden] { display: none; }
.ecc-fqp__topic { display: flex; align-items: center; justify-content: space-between; gap: var(--ecc-s-3); min-height: var(--ecc-hit); padding: 0 var(--ecc-s-3); border-left: 2px solid var(--ecc-line); color: var(--ecc-ink-2); font-weight: var(--ecc-fw-strong); text-decoration: none; }
.ecc-fqp__topic[aria-current="true"] { border-color: var(--ecc-spark); background: var(--ecc-wash); color: var(--ecc-ink); }
@media (hover: hover) and (pointer: fine) { .ecc-fqp__topic:hover { color: var(--ecc-ink); } }
.ecc-fqp__num { font-size: var(--ecc-t-h3); color: var(--ecc-ink); }

/* ---- the topics, each with its questions ---- */
.ecc-fqp__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-gap); align-items: start; }
.ecc-fqp__group { scroll-margin-top: var(--ecc-s-5); }
.ecc-fqp__group[hidden] { display: none; }
.ecc-fqp__gh { margin: 0; }
.ecc-fqp__ghb { display: grid; gap: var(--ecc-s-3); width: 100%; padding: var(--ecc-s-5) var(--ecc-s-5) var(--ecc-s-3); border: 0; border-radius: var(--ecc-r); background: none; color: inherit; font: inherit; text-align: left; pointer-events: none; }
.ecc-fqp__ghtop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ecc-s-3); }
.ecc-fqp__teasers, .ecc-fqp__open { display: none; }
.ecc-fqp__list { padding: 0 var(--ecc-s-5) var(--ecc-s-5); }

/* a phone and a tablet, with the script: a topic is a card that opens */
@media (max-width: 1180px) {
  .ecc-js .ecc-fqp__ghb { padding-bottom: var(--ecc-s-5); pointer-events: auto; cursor: pointer; }
  .ecc-js .ecc-fqp__group.is-shut .ecc-fqp__list { display: none; }
  .ecc-js .ecc-fqp__group.is-shut .ecc-fqp__teasers { display: grid; gap: var(--ecc-s-1); color: var(--ecc-ink-2); font-size: var(--ecc-t-small); font-weight: var(--ecc-fw-text); line-height: 1.4; }
  .ecc-js .ecc-fqp__teasers > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .ecc-js .ecc-fqp__open { display: flex; align-items: center; gap: var(--ecc-s-2); color: var(--ecc-ink); }
  .ecc-js .ecc-fqp__open .ecc-icon { transition: transform var(--ecc-d-fast) var(--ecc-ease-out); }
  .ecc-js .ecc-fqp__group.is-shut .ecc-fqp__open [data-close], .ecc-js .ecc-fqp__group:not(.is-shut) .ecc-fqp__open [data-open] { display: none; }
  .ecc-js .ecc-fqp__group:not(.is-shut) .ecc-fqp__open .ecc-icon { transform: rotate(180deg); }
  .ecc-js .ecc-fqp__group:not(.is-shut) .ecc-fqp__ghb { padding-bottom: var(--ecc-s-3); }
}

/* ---- a question ---- */
.ecc-fq { scroll-margin-top: var(--ecc-s-8); }
.ecc-fq[hidden] { display: none; }
.ecc-fq > summary { gap: var(--ecc-s-4); }
.ecc-fq__q { margin: 0; font-size: var(--ecc-t-body-lg); font-weight: var(--ecc-fw-strong); line-height: 1.3; text-wrap: balance; }
.ecc-fq .ecc-acc__body { max-width: 36em; }
.ecc-fq .ecc-acc__body p { color: var(--ecc-ink); }
.ecc-fq .ecc-acc__body .ecc-link { white-space: nowrap; }
.ecc-fq .ecc-acc__body .ecc-fq__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--ecc-s-5); margin-top: var(--ecc-s-2); }
.ecc-fq__more > * { display: inline-flex; align-items: center; min-height: var(--ecc-hit); }
.ecc-fq__copy { padding: 0; border: 0; background: none; color: var(--ecc-ink-2); font: inherit; font-size: var(--ecc-t-small); text-decoration: underline; text-underline-offset: var(--ecc-s-1); cursor: pointer; }
html:not(.ecc-js) .ecc-fq__copy { display: none; }
.ecc-fq.is-hit > summary { background: var(--ecc-wash); }

/* ---- nothing found, and the way to a person ---- */
.ecc-fqp__none { display: grid; gap: var(--ecc-s-3); justify-items: start; }
.ecc-fqp__none[hidden] { display: none; }
.ecc-fqp__none p { margin: 0; }
.ecc-fqp__end { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ecc-gap); align-items: start; }
.ecc-fqp__help { display: grid; gap: var(--ecc-s-5); align-content: start; }
.ecc-fqp__help .ecc-fqp__label { margin-bottom: var(--ecc-s-3); }
.ecc-fqp__help .ecc-lead { margin-top: var(--ecc-s-2); }
.ecc-fqp__helpacts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-3); }

@media (min-width: 761px) {
  .ecc-fqp__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-fqp__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-fqp__body--one, html:not(.ecc-js) .ecc-fqp__body { grid-template-columns: minmax(0, 1fr); }
  .ecc-js .ecc-fqp__group:not(.is-shut), .ecc-fqp__none { grid-column: 1 / -1; }
  .ecc-fqp__end { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .ecc-fqp__end > :only-child { grid-column: 1 / -1; }
}
@media (min-width: 1181px) {
  .ecc-fqp__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ecc-fqp__rail { display: block; grid-column: 1 / span 3; position: sticky; top: var(--ecc-gap); }
  .ecc-fqp__rail + .ecc-fqp__body { grid-column: 4 / -1; }
  .ecc-fqp__body { grid-template-columns: minmax(0, 1fr); }
}