/* FAQ: a tinted help-desk card with the owner's mascot scene, beside a native
   <details> accordion in one white card. Works without scripts; faq.js adds the height
   animation. */
.s-faq {
  --faq-pad-x: var(--space-xl);
  --faq-row-pad: var(--space-lg);
  --chevron-size: 24px;
  --ico-size: 44px;
  --ico-glyph: 24px;
  --ico-gap: var(--space-md);
  --scene-size: 184px;
  --focus-inset: 6px;
  --ico-light: #8fb0ff;
  --ico-hover: #dde5ff;
  /* Answers line up with the question text, past the icon. */
  --answer-indent: calc(var(--faq-pad-x) + var(--ico-size) + var(--ico-gap));
  padding-block: calc(var(--section-gap) / 2);
  /* Linked to from the header: the help desk lands just below the sticky header. */
  scroll-margin-top: calc(var(--space-xxxl) * -1);
}

.s-faq .wrap {
  display: grid;
  gap: var(--space-xl);
}

/* Help desk: tinted so the white parts of the mascot stay visible.
   Phones stack it and centre it: headline, mascot, button. */
.s-faq .faq-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-md);
  padding: var(--space-xxl) var(--space-xl);
  background: var(--jet-tint);
  border-radius: var(--radius-card-large);
  text-align: center;
}

.s-faq .faq-desk-text {
  display: grid;
  gap: var(--space-md);
}

.s-faq .faq-label {
  font-weight: 700;
  color: var(--jet);
}

.s-faq .faq-title {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--jet-ink);
}

.s-faq .faq-scene {
  width: var(--scene-size);
  height: var(--scene-size);
  /* The drawing has clear space above and below it: close most of it, never all. */
  margin-block: calc(var(--scene-size) * -0.2) calc(var(--scene-size) * -0.04);
}

.s-faq .faq-mail,
.s-faq .faq-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.s-faq .faq-mail {
  /* Shown after the mascot on phones; it stays before it for the keyboard. */
  order: 1;
  min-height: 48px;
  padding-inline: var(--space-lg) var(--space-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--jet-ink);
}

.s-faq .faq-mail-ico,
.s-faq .faq-link-ico {
  flex: none;
  background: center / contain no-repeat;
}

.s-faq .faq-mail-ico {
  width: var(--ico-glyph);
  height: var(--ico-glyph);
  background-image: url("/assets/icons/icon-chat.svg");
}

.s-faq .faq {
  padding: var(--space-xs) 0;
  border-radius: var(--radius-card-large);
}

.s-faq .faq-item {
  position: relative;
}

/* Hairline between rows, inset to the text edge. */
.s-faq .faq-item + .faq-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--answer-indent);
  right: var(--faq-pad-x);
  height: 1px;
  background: var(--hairline);
}

.s-faq .faq-summary {
  display: flex;
  align-items: center;
  gap: var(--ico-gap);
  min-height: 64px;
  padding: var(--faq-row-pad) var(--faq-pad-x);
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.s-faq .faq-summary::-webkit-details-marker {
  display: none;
}

.s-faq .faq-summary:focus-visible {
  outline-offset: calc(var(--focus-inset) * -1);
  border-radius: calc(var(--radius-card-large) - var(--focus-inset) - var(--space-xs));
}

/* An open item takes the focus ring around the question and its answer together. */
@supports selector(:has(*)) {
  .s-faq .faq-item[open] .faq-summary:focus-visible {
    outline: none;
  }

  .s-faq .faq-item[open]:has(.faq-summary:focus-visible) {
    outline: 2px solid var(--jet);
    outline-offset: calc(var(--focus-inset) * -1);
    border-radius: calc(var(--radius-card-large) - var(--focus-inset) - var(--space-xs));
  }

  /* The ring replaces the divider under the focused row, so the two never cross. */
  .s-faq .faq-item:has(.faq-summary:focus-visible) + .faq-item::before {
    opacity: 0;
  }
}

/* Round tinted badge holding one icon. All six are drawn the same way:
   brand blue, a lighter blue, and white. */
.s-faq .faq-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--ico-size);
  height: var(--ico-size);
  border-radius: 50%;
  background: var(--jet-tint);
  transition: transform var(--duration-snappy) var(--ease-snappy);
}

.s-faq .faq-ico svg {
  width: var(--ico-glyph);
  height: var(--ico-glyph);
}

.s-faq .i-a {
  fill: var(--jet);
}

.s-faq .i-b {
  fill: var(--ico-light);
}

.s-faq .i-w {
  fill: var(--surface);
}

.s-faq .i-sa,
.s-faq .i-sb {
  fill: none;
  stroke: var(--jet);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-faq .i-sb {
  stroke: var(--ico-light);
}

.s-faq .i-thin {
  stroke-width: 3.5;
}

.s-faq .i-edge {
  stroke: var(--jet);
  stroke-width: 2;
  stroke-linejoin: round;
}

.s-faq .faq-item[open]:not(.is-closing) .faq-ico {
  transform: scale(1.1);
}

.s-faq .faq-q {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--jet-ink);
}

.s-faq .faq-chevron {
  flex: none;
  width: var(--chevron-size);
  height: var(--chevron-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-tertiary);
  transition: transform var(--duration-standard) var(--ease-standard);
}

.s-faq .faq-item[open]:not(.is-closing) .faq-chevron {
  transform: rotate(180deg);
  color: var(--jet);
}

.s-faq .faq-panel.is-animating {
  overflow: hidden;
}

.s-faq .faq-a {
  max-width: var(--prose-width);
  padding: 0 var(--faq-pad-x) var(--space-xl) var(--answer-indent);
  margin-top: calc(var(--space-sm) * -1);
  font-size: 16px;
  color: var(--ink-secondary);
  text-wrap: pretty;
  box-sizing: content-box;
}

/* The one link in an answer is a small pill on its own line, at every width. */
.s-faq .faq-link {
  display: flex;
  width: fit-content;
  min-height: var(--tap-min);
  margin: calc(var(--space-md) * -1) var(--faq-pad-x) var(--space-xl) var(--answer-indent);
  padding-inline: var(--space-lg) var(--space-md);
  background: var(--jet-tint);
  color: var(--jet);
}

.s-faq .faq-link-ico {
  width: 16px;
  height: 16px;
  background-image: url("/assets/icons/icon-arrow-right.svg");
}

.s-faq .faq-mail:active,
.s-faq .faq-link:active {
  transform: scale(0.97);
}

/* Hover tints the badge. A blue chevron only ever means "open". */
@media (hover: hover) {
  .s-faq .faq-summary:hover .faq-ico,
  .s-faq .faq-link:hover {
    background-color: var(--ico-hover);
  }

  .s-faq .faq-mail:hover {
    color: var(--jet);
  }
}

/* Smallest phones: answers start at the card edge so each one fits on a
   single line and the card keeps its height as answers swap. */
@media (max-width: 359px) {
  .s-faq {
    --answer-indent: var(--faq-pad-x);
  }
}

@media (min-width: 640px) {
  .s-faq {
    --faq-pad-x: var(--space-xxxl);
    --faq-row-pad: var(--space-xl);
    --ico-size: 48px;
    --ico-glyph: 26px;
    --ico-gap: var(--space-lg);
    --scene-size: 248px;
  }

  /* Tablet: words and button on the left, mascot on the right, kept together
     in the middle of the card. */
  .s-faq .faq-desk {
    grid-template-columns: auto auto;
    grid-template-areas:
      "text scene"
      "mail scene";
    justify-content: center;
    justify-items: start;
    gap: var(--space-xl) var(--space-section);
    padding: var(--space-xl) var(--space-xxxl);
    text-align: start;
  }

  .s-faq .faq-desk-text {
    grid-area: text;
    align-self: end;
  }

  .s-faq .faq-mail {
    grid-area: mail;
    align-self: start;
  }

  .s-faq .faq-scene {
    grid-area: scene;
    margin-block: calc(var(--scene-size) * -0.08);
  }

  .s-faq .faq-q {
    font-size: 19px;
  }

  .s-faq .faq-a {
    font-size: 17px;
  }
}

@media (min-width: 1024px) {
  .s-faq .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
    gap: var(--space-xxxl);
    align-items: start;
  }

  /* Desktop: a sticky column. Headline, mascot, then the button. */
  .s-faq .faq-desk {
    position: sticky;
    top: 96px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "text"
      "scene"
      "mail";
    gap: var(--space-md);
    padding: var(--space-xxxl);
  }

  .s-faq .faq-scene {
    justify-self: center;
    margin-block: calc(var(--scene-size) * -0.2) calc(var(--scene-size) * -0.04);
  }
}