@charset "utf-8";
/* ═══ GoodWay home · section 8 · QUESTIONS ═══════════════════════════════
   The questions the owner picked for the home page in the dash, each
   answer folded under its question, then a link to the FAQ page when it
   has more and the shop's number for the question that is not there.
   On the page it comes before section 7 (Visit us): the questions first,
   then the way to the shop. White, with a hairline under it, so it parts
   from section 7's paper ground.
   The list is the kit's accordion (.tq-accordion, .tq-acc, .tq-acc__btn,
   .tq-acc__sign in tq.site.css): its look, its sign, its hover. What this
   file adds is how a folded answer is kept: Scripts/gw.sec8.js gives each
   question its button and folds the answer with the hidden attribute, so
   a folded answer is hidden from a screen reader too, and where the
   browser knows hidden="until-found" its find still reaches it (below,
   the one place the kit's [hidden] rule gives way). Without the script,
   every answer is simply there under its question.
   Motion only answers the visitor: an answer unfolds and folds (the
   script), the sign turns (the kit). Nothing moves on its own.
   Drawn by Services/HomeFaq.vb. Mobile first: the phone, then 640 (the
   number beside the panel's words), 1024 (the title beside the list,
   staying in view while the answers scroll).
   ═════════════════════════════════════════════════════════════════════════ */

.gw-s8 {
  position: relative;
  padding-block: var(--tq-section);
  border-block-end: 1px solid var(--tq-line);
  background: var(--tq-surface);
  color: var(--tq-text-body);
}
.gw-s8__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--tq-sp-10);
}

/* ── the words ────────────────────────────────────────────────────────── */
.gw-s8__head { display: flex; flex-direction: column; align-items: flex-start; }
.gw-s8__eyebrow { margin: 0 0 var(--tq-sp-6); }
.gw-s8__title { max-inline-size: 14ch; }
.gw-s8__lead {
  margin: var(--tq-sp-6) 0 0;
  max-inline-size: 40ch;
  font-size: var(--tq-fs-lg);
  line-height: var(--tq-lh-lead);
  color: var(--tq-text-muted);
  text-wrap: pretty;
}

/* ── the questions ────────────────────────────────────────────────────── */
.gw-s8__list { margin: 0; }
/* As the page comes: the question as the kit's button sets its words, the
   answer open under it. Once the script has made the button, the button
   carries the spacing (.tq-acc__btn) and the heading only holds it. */
.gw-s8__q {
  margin: 0;
  padding: var(--tq-sp-6) var(--tq-sp-2) var(--tq-sp-4);
  font-size: var(--tq-fs-lg);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.35;
  color: var(--tq-text-strong);
  overflow-wrap: anywhere;
}
.gw-s8.is-ready .gw-s8__q { padding: 0; }
.gw-s8__qt { min-inline-size: 0; }

/* the answer: its box has no spacing of its own, so folded it is nothing */
.gw-s8__a { overflow: hidden; }
.gw-s8__in {
  max-inline-size: 72ch;
  padding: 0 var(--tq-sp-2) var(--tq-sp-8);
  font-size: var(--tq-fs-md);
  line-height: 1.65;
  color: var(--tq-text-body);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.gw-s8__in > * + * { margin-block-start: var(--tq-sp-5); }
.gw-s8__in > h4 {
  font-size: var(--tq-fs-md);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.45;
  color: var(--tq-text-strong);
}
.gw-s8__in > * + h4 { margin-block-start: var(--tq-sp-7); }
.gw-s8__in > ul { display: grid; gap: var(--tq-sp-3); margin-inline: 0; padding: 0; list-style: none; }
.gw-s8__in > ul > li { position: relative; padding-inline-start: var(--tq-sp-7); }
.gw-s8__in > ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--tq-sp-2);
  inset-block-start: .7em;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--tq-text-subtle);
}

/* A folded answer the browser's find may open. The kit hides every
   [hidden] outright (display: none, tq.base.css), which find cannot see
   into; here the browser hides it its own way (content-visibility), and
   the script adds .is-findable only where the browser knows the value. */
.gw-s8.is-findable .gw-s8__a[hidden="until-found"] {
  display: block !important;
  content-visibility: hidden;
}

/* ── every question, on the FAQ page ──────────────────────────────────── */
.gw-s8__more { margin: var(--tq-sp-7) 0 0; }
.gw-s8__all {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-3);
  min-block-size: 44px;
  font-weight: var(--tq-fw-semibold);
  color: var(--tq-accent-text);
  text-decoration: none;
}
.gw-s8__all:hover { text-decoration: underline; }
.gw-s8__all .tq-i { flex: none; inline-size: 18px; block-size: 18px; transition: transform var(--tq-d-fast) var(--tq-ease); }
.gw-s8__all:hover .tq-i { transform: translateX(3px); }

/* ── the question that is not there ───────────────────────────────────── */
.gw-s8__ask {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--tq-sp-7);
  margin-block-start: var(--tq-sp-10);
  padding: var(--tq-sp-8);
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-lg);
  background: var(--tq-bg);
}
.gw-s8__ask-words { min-inline-size: 0; }
.gw-s8__ask-title {
  font-size: var(--tq-fs-xl);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.28;
  color: var(--tq-text-strong);
  text-wrap: balance;
}
.gw-s8__ask-text { margin-block-start: var(--tq-sp-3); line-height: var(--tq-lh-body); color: var(--tq-text-muted); text-wrap: pretty; }
.gw-s8__call { justify-content: center; }

/* ── 640: the number beside the panel's words ─────────────────────────── */
@media (min-width: 640px) {
  .gw-s8__ask { flex-direction: row; align-items: center; justify-content: space-between; }
  .gw-s8__call { flex: none; }
}

/* ── 1024: the title beside the list, in view while the answers scroll ── */
@media (min-width: 1024px) {
  .gw-s8__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--tq-sp-13);
    align-items: start;
  }
  .gw-s8__head {
    position: sticky;
    inset-block-start: calc(var(--tq-header-h) + var(--tq-sp-10));
  }
}

/* ── less motion: the kit's tokens already stop its own moves ──────────── */
@media (prefers-reduced-motion: reduce) {
  .gw-s8__all .tq-i { transition: none; }
  .gw-s8__all:hover .tq-i { transform: none; }
}

/* ── print: every answer, no signs ────────────────────────────────────── */
@media print {
  .gw-s8 { padding-block: 24px; border: 0; background: none; }
  .gw-s8__head { position: static; }
  .gw-s8 .gw-s8__a[hidden] { display: block !important; content-visibility: visible !important; }
  .gw-s8 .tq-acc__sign, .gw-s8__all .tq-i, .gw-s8__call .tq-i { display: none; }
  .gw-s8__ask { border: 1px solid #000; background: none; }
}

/* ── forced colours: the panel and the bullets keep their edges ────────── */
@media (forced-colors: active) {
  .gw-s8__ask { border: 1px solid CanvasText; }
  .gw-s8 .tq-acc__sign { border: 1px solid ButtonText; }
  .gw-s8__in > ul > li::before { background: CanvasText; }
}