/* Page-owned styles for /faq/ */

#faq-main {
  --faq-content-columns: 8;
  --faq-content-max: calc(var(--container-max) * (var(--faq-content-columns) / 12));
  --faq-measure-narrow: 65ch;
  --faq-measure-standard: 70ch;
}

.faq-reading-progress {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background-color: transparent;
  z-index: 9990;
  pointer-events: none;
}

.faq-reading-progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 120ms linear;
}

.faq-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.faq-content-column {
  width: 100%;
  max-width: var(--faq-content-max);
  margin-inline: auto;
}

.faq-section {
  padding-block: var(--section-spacing);
}

.faq-section + .faq-section {
  border-block-start: var(--rule-thickness) solid var(--color-rule-light);
}

.faq-kicker {
  margin-block-end: var(--space-3);
}

.faq-intro__title {
  margin-block-end: var(--space-5);
}

.faq-intro__lead {
  max-width: var(--faq-measure-narrow);
  margin-inline: auto;
  text-align: left;
  margin-block-end: var(--space-6);
}

.faq-intro__lead.drop-cap::first-letter {
  font-size: 3.2em;
  line-height: 0.85;
  float: inline-start;
  padding-inline-end: var(--space-2);
  padding-block-start: 4px;
  color: var(--color-accent);
}

.faq-intro__topics {
  margin-block-end: var(--space-5);
}

.faq-intro__contact {
  max-width: var(--faq-measure-narrow);
  margin-inline: 0;
  text-align: left;
}

.faq-index-section {
  padding-block: var(--space-8);
}

.faq-index {
  width: 100%;
}

.faq-index__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  counter-reset: faq-index;
}

.faq-index__item {
  counter-increment: faq-index;
  padding-block: var(--space-4);
  border-block-end: var(--rule-thickness) solid var(--color-rule-light);
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
}

.faq-index__item:first-child {
  padding-block-start: 0;
}

.faq-index__item:last-child {
  border-block-end: none;
  padding-block-end: 0;
}

.faq-index__item::before {
  content: counter(faq-index, decimal-leading-zero);
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-leading);
  color: var(--color-accent);
  flex: 0 0 auto;
  min-width: 2ch;
}

.faq-index__item a {
  font-family: var(--font-heading);
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-leading);
  color: var(--color-ink-strong);
  text-decoration: none;
  transition: color var(--transition-fast);
  min-width: 0;
  overflow-wrap: break-word;
}

.faq-index__item a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-section__title {
  margin-block-end: var(--space-6);
}

.faq-item {
  padding-block: var(--space-5);
  border-block-end: var(--rule-thickness) solid var(--color-rule-light);
}

.faq-item:first-of-type {
  padding-block-start: 0;
}

.faq-item:last-of-type {
  border-block-end: none;
  padding-block-end: 0;
}

.faq-item__question {
  margin-block-end: var(--space-3);
}

.faq-item__answer {
  max-width: var(--faq-measure-standard);
  margin-inline: 0;
  text-align: left;
  margin-block-end: var(--space-4);
}

.faq-item__list {
  max-width: var(--faq-measure-standard);
  margin-inline: 0;
  margin-block-end: var(--space-4);
  padding-inline-start: var(--space-5);
}

.faq-figure {
  max-width: calc(var(--faq-content-max) * 0.75);
  margin-inline: 0;
  margin-block: var(--space-5) var(--space-6);
}

.faq-figure__media {
  overflow: hidden;
  border-radius: 0;
}

.faq-figure__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.faq-figure:hover .faq-figure__media img {
  transform: scale(1.02);
}

.faq-figure figcaption {
  margin-block-start: var(--space-2);
}

.faq-note {
  max-width: var(--faq-measure-standard);
  margin-inline: 0;
  margin-block-start: var(--space-4);
  background-color: var(--color-paper-alt);
  border-inline-start: 3px solid var(--color-rule);
  padding: var(--panel-padding);
}

.faq-note--featured {
  margin-block-start: var(--space-5);
}

.faq-note__label {
  margin-block-end: var(--space-2);
  color: var(--color-ink-strong);
}

.faq-note__line {
  margin-block-end: var(--space-2);
}

.faq-note__line:last-child {
  margin-block-end: 0;
}

.faq-note__text {
  margin-block-end: 0;
}

.faq-still-questions__lead {
  max-width: var(--faq-measure-narrow);
  margin-inline: 0;
  text-align: left;
  margin-block-end: var(--space-5);
}

.faq-note--contact {
  max-width: 100%;
}

@media (min-width: 768px) {
  .faq-index {
    position: sticky;
    inset-block-start: 80px;
  }
}

@media (max-width: 767px) {
  #faq-main {
    --faq-content-columns: 12;
  }

  .faq-section {
    padding-block: var(--space-8);
  }

  .faq-intro__lead,
  .faq-intro__contact,
  .faq-item__answer,
  .faq-item__list,
  .faq-note,
  .faq-still-questions__lead {
    max-width: 100%;
    margin-inline: 0;
  }

  .faq-figure {
    max-width: 100%;
  }

  .faq-index {
    position: static;
  }

  .faq-index__item {
    flex-direction: column;
    gap: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-reading-progress__fill {
    transition: none;
  }

  .faq-figure__media img {
    transition: none;
  }
}