/* TrustUs — /faqs/ -------------------------------------------------------------
   Fifty questions in five groups. The accordion itself is tu-faq.css; this is
   the page around it. Pairs with page-faqs.php and assets/faqs.js. */

/* The section links jump to their group. The browser's own jump is a cut, and
   a cut halfway down a page of fifty questions loses the reader — nothing tells
   them they moved down the page rather than to a different one. The scroll
   itself is the thing that says it. Global selector, but this file loads on
   this page and no other, so it reaches nothing else. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The tint the head used to carry, kept: it arrives at the top of the page and
   is gone by the time the questions start. */
.faq-body {
  padding-top: calc(var(--hd-float-h) + clamp(var(--sp-6), 5vw, var(--sp-8)));
  padding-bottom: clamp(var(--sp-8), 7vw, var(--sp-9));
  background:
    radial-gradient(120% 60% at 78% 0%,
      rgba(167, 0, 30, .075) 0%,
      rgba(167, 0, 30, .028) 45%,
      rgba(167, 0, 30, 0) 78%);
}

/* Everything that is not a question on one side, the questions on the other. */
.faq-body__in {
  display: grid;
  grid-template-columns: clamp(300px, 27vw, 370px) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4.5vw, var(--sp-8));
  align-items: start;
}

/* Sticky, so the heading, the five sections and the way to ask us are all still
   there at question forty. Its own scrollbar only if the viewport is too short
   to hold it — otherwise a short screen would pin the top of the column and
   hide the button at its bottom for the whole page. */
/* The grid starts its items at the top, which sizes this one to its content —
   and a sticky child can only stay put for as long as its parent is on screen,
   so the column scrolled away after 800px. It is told to fill the row instead:
   the same height as the fifty questions, which is what "stays" means. */
.faq-side { align-self: stretch; }

.faq-side__in {
  position: sticky;
  top: calc(var(--hd-float-h, 88px) + 20px);
  max-height: calc(100vh - var(--hd-float-h, 88px) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  /* Room for the scrollbar when there is one, so it never sits on the text. */
  padding-inline-end: 2px;
}

.faq-side .tst-crumb { margin-bottom: var(--sp-5); }
.faq-side .hp-eyebrow { display: inline-flex; align-items: center; }

.hp .faq-title {
  margin: var(--sp-4) 0 0;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.15;
  font-weight: 800;
  color: var(--red);
}

.faq-side__body { margin-top: var(--sp-4); color: var(--muted); }
.hp .faq-side__body p { margin: 0 0 var(--sp-3); line-height: 1.9; font-size: var(--fs-caption); }
.hp .faq-side__body p:last-child { margin-bottom: 0; }

/* The five sections ------------------------------------------------------- */
/* A list of names in a narrow column read as five loose lines of text with
   nothing to say they were the way anywhere. A numbered list of rows, each
   carrying how many questions are under it, says both what they are and that
   they are in an order — and the one being read is lit as the page moves. */
.faq-nav { margin-top: clamp(var(--sp-6), 3vw, var(--sp-7)); }
.hp .faq-nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.faq-nav li { border-bottom: 1px solid var(--line); }

.faq-nav a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px 10px;
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.5;
  /* The bar that marks the section being read, drawn on the side the page
     starts from and held at zero width until it is. */
  box-shadow: inset 0 0 0 0 var(--red);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.faq-nav__n {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--wash);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  transition: background-color .2s ease, color .2s ease;
}
.faq-nav__l { min-width: 0; }
.faq-nav__c {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  font-feature-settings: "tnum";
}

.faq-nav a:hover { background: var(--red-tint); color: var(--red); }
.faq-nav a:hover .faq-nav__n { background: #fff; color: var(--red); }

.faq-nav a.is-current {
  background: var(--red-tint);
  color: var(--red);
  box-shadow: inset 3px 0 0 0 var(--red);
}
.faq-nav a.is-current .faq-nav__n { background: var(--red); color: #fff; }
.faq-nav a.is-current .faq-nav__c { color: var(--red); }
/* The bar is drawn from the side the reading starts on. */
[dir="rtl"] .faq-nav a.is-current { box-shadow: inset -3px 0 0 0 var(--red); }

/* The way out, at the foot of the column rather than at the foot of fifty
   questions — which is fifty questions after the moment somebody wants it. */
.faq-still {
  margin-top: clamp(var(--sp-6), 3vw, var(--sp-7));
  padding: clamp(var(--sp-5), 2vw, var(--sp-6));
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  text-align: center;
}
.hp .faq-still h2 {
  margin: 0 0 var(--sp-4);
  color: var(--ink);
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 800;
}

/* The questions ----------------------------------------------------------- */
.faq-group + .faq-group { margin-top: clamp(var(--sp-7), 5vw, var(--sp-8)); }
/* The anchors land under the floating header, not behind it. */
.faq-group { scroll-margin-top: calc(var(--hd-float-h, 88px) + 24px); }

.hp .faq-group__h {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  padding-bottom: var(--sp-4);
  /* No rule of its own. The question list draws one across its own top, and a
     heading that draws a second one a few pixels above it gives every group a
     double line. */
  color: var(--red);
  font-size: clamp(20px, 2vw, 25px);
  font-weight: 800;
  line-height: 1.4;
}
.faq-group__n {
  flex: 0 0 auto;
  display: grid; place-items: center;
  min-width: 30px; height: 30px;
  padding: 0 8px;
  border-radius: var(--r-pill, 999px);
  background: var(--red-tint);
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* One column: a 300px column beside a full-width accordion is a column of
     two-line labels. Nothing sticks — there is nothing beside it to stay with.

     Stacked whole, though, the column put its heading, its five sections AND
     the card asking whether you found your answer in front of the first
     question — and being asked that before reading anything is the wrong
     order. `display: contents` drops the two wrappers out of the box tree so
     every piece becomes a child of this column and can be placed on its own:
     the heading and the sections above the questions, the card after them. */
  /* align-items: start is right for the two grid columns and wrong for one
     flex column: in a column it stops being "top" and becomes "as wide as your
     content", which took 200px off the questions. */
  .faq-body__in {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .faq-side,
  .faq-side__in { display: contents; }

  .faq-side .tst-crumb   { order: 1; }
  .faq-side .hp-eyebrow  { order: 2; }
  .hp .faq-title         { order: 3; }
  .faq-side__body        { order: 4; }
  .faq-nav               { order: 5; }
  .faq-groups            { order: 6; }
  .faq-still             { order: 7; }

  .faq-side .tst-crumb,
  .hp .faq-title,
  .faq-side__body { text-align: center; }
  .faq-side .tst-crumb { text-align: start; }
  .faq-side .tst-crumb ol { justify-content: flex-start; }
  .faq-side .hp-eyebrow { justify-content: center; }
  .faq-side__body { margin-inline: auto; max-width: 66ch; }

  .faq-nav { margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-7)); }
  .hp .faq-nav ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    border-top: 0;
  }
  .faq-nav li { border-bottom: 0; }
  .faq-nav a {
    grid-template-columns: auto auto;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill, 999px);
    font-size: 13px;
    box-shadow: none;
  }
  .faq-nav__n { display: none; }
  .faq-nav a.is-current,
  [dir="rtl"] .faq-nav a.is-current { box-shadow: none; border-color: var(--red); }

  .faq-still {
    max-width: 560px;
    margin-inline: auto;
    margin-top: clamp(var(--sp-7), 5vw, var(--sp-8));
    width: 100%;
  }
}

@media (max-width: 560px) {
  .hp .faq-title { font-size: clamp(27px, 8vw, 34px); }
}