/* ---------------------------------------------------------------
   FAQ Section
   Typography (family, size, weight) is intentionally NOT set here
   so the theme's own heading/body styles apply. Only color,
   spacing and layout are handled in this file.
   Custom properties prefixed --cfq- are written inline in
   module.html from the module's color, padding and radius fields.

   The accordion is native <details>/<summary>: no JavaScript, and
   the disclosure state is handled by the browser. The default
   marker triangle is removed and replaced with the chevron in the
   markup so it can be colored from a field.
   --------------------------------------------------------------- */

.cs-faq {
  --cfq-max-width: 1240px;
  --cfq-gutter: clamp(1rem, 4vw, 2.5rem);

  position: relative;
  width: 100%;
  padding-top: var(--cfq-top-padding, 100px);
  padding-bottom: var(--cfq-bottom-padding, 100px);
  overflow-x: clip;
}

.cs-faq,
.cs-faq *,
.cs-faq *::before,
.cs-faq *::after {
  box-sizing: border-box;
}

.cs-faq--bg-color {
  background-color: var(--cfq-background, transparent);
}

/* ---------------------------- Background ---------------------------- */

.cs-faq__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 0;
  pointer-events: none;
}

.cs-faq__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cfq-image-position, center);
}

.cs-faq__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--cfq-overlay, transparent);
  pointer-events: none;
}

/* ------------------------------ Layout ------------------------------ */

.cs-faq__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, var(--cfq-copy-width, 35%)) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 5rem);
  width: min(100%, var(--cfq-max-width));
  margin: 0 auto;
  padding-left: var(--cfq-gutter);
  padding-right: var(--cfq-gutter);
}

/* Full width drops the container cap; the gutters stay so nothing
   touches the viewport edge. */
.cs-faq--align-full .cs-faq__inner {
  width: 100%;
  max-width: none;
}

/* The intro copy is always first in the source so it reads first on
   mobile and to a screen reader. Putting the accordion on the left is a
   visual reorder only, and the column widths swap with it. */
.cs-faq--accordion-left .cs-faq__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--cfq-copy-width, 35%));
}

.cs-faq--accordion-left .cs-faq__copy {
  grid-column: 2;
  grid-row: 1;
}

.cs-faq--accordion-left .cs-faq__list {
  grid-column: 1;
  grid-row: 1;
}

/* ------------------------------ Intro ------------------------------ */

.cs-faq .cs-faq__eyebrow {
  margin: 0 0 1rem;
  color: var(--cfq-eyebrow-color, inherit);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.cs-faq .cs-faq__heading {
  margin: 0 0 1.25rem;
  color: var(--cfq-heading-color, inherit);
}

/* Each line is its own block so the break holds without relying on a hard
   return in the editor's text. */
.cs-faq .cs-faq__heading-line {
  display: block;
}

.cs-faq .cs-faq__content {
  max-width: 42ch;
  color: var(--cfq-content-color, inherit);
}

.cs-faq .cs-faq__content p,
.cs-faq .cs-faq__content li,
.cs-faq .cs-faq__content span,
.cs-faq .cs-faq__content h1,
.cs-faq .cs-faq__content h2,
.cs-faq .cs-faq__content h3,
.cs-faq .cs-faq__content h4,
.cs-faq .cs-faq__content h5,
.cs-faq .cs-faq__content h6 {
  color: inherit;
}

.cs-faq .cs-faq__content > *:first-child {
  margin-top: 0;
}

.cs-faq .cs-faq__content > *:last-child {
  margin-bottom: 0;
}

.cs-faq .cs-faq__content a {
  color: inherit;
}

/* ------------------------------ Button ------------------------------ */

.cs-faq__actions {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* The rule only exists when the divider toggle is on, and it uses the same
   color and width as the accordion hairlines so the two columns line up
   visually. */
.cs-faq__actions--divided {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: var(--cfq-divider-width, 1px) solid var(--cfq-divider-color, rgba(255, 255, 255, 0.15));
}

.cs-faq .cs-faq__prompt {
  margin: 0 0 1rem;
  color: var(--cfq-prompt-color, inherit);
  font-weight: 700;
}

.cs-faq .cs-faq__button.cs-faq__button {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.9em 1.6em;
  border: 0;
  border-radius: var(--cfq-button-radius, 0px);
  color: var(--cfq-button-color, inherit);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease,
    color 200ms ease;
}

.cs-faq--button-outline .cs-faq__button.cs-faq__button {
  border: 1px solid var(--cfq-button-border-color, currentColor);
  background-color: transparent;
}

.cs-faq--button-filled .cs-faq__button.cs-faq__button {
  background-color: var(--cfq-button-bg, transparent);
}

/* Text only sits flush with the copy above it -- no box, so no padding. */
.cs-faq--button-text .cs-faq__button.cs-faq__button {
  padding: 0;
  background-color: transparent;
}

.cs-faq--button-text .cs-faq__button.cs-faq__button .cs-faq__button-text.cs-faq__button-text {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* Hover and keyboard focus share one state, so a keyboard user sees the
   same affordance a mouse user does. Each hover color falls back to its
   resting counterpart, so a hover field left alone means no change rather
   than a hard-coded white. */
.cs-faq .cs-faq__button.cs-faq__button:hover,
.cs-faq .cs-faq__button.cs-faq__button:focus {
  color: var(--cfq-button-hover-color, var(--cfq-button-color, inherit));
  text-decoration: none;
}

.cs-faq--button-outline .cs-faq__button.cs-faq__button:hover,
.cs-faq--button-outline .cs-faq__button.cs-faq__button:focus {
  background-color: var(--cfq-button-hover-bg, transparent);
  border-color: var(--cfq-button-hover-border-color, var(--cfq-button-border-color, currentColor));
}

.cs-faq--button-filled .cs-faq__button.cs-faq__button:hover,
.cs-faq--button-filled .cs-faq__button.cs-faq__button:focus {
  background-color: var(--cfq-button-hover-bg, var(--cfq-button-bg, transparent));
}

/* Text only has no box to fill, so the hover reads on the label itself. */
.cs-faq--button-text .cs-faq__button.cs-faq__button:hover,
.cs-faq--button-text .cs-faq__button.cs-faq__button:focus {
  background-color: transparent;
}

.cs-faq .cs-faq__button.cs-faq__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* The arrow nudges on hover; held back for reduced-motion users. */
.cs-faq__button-arrow.cs-faq__button-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

.cs-faq .cs-faq__button.cs-faq__button:hover .cs-faq__button-arrow.cs-faq__button-arrow,
.cs-faq .cs-faq__button.cs-faq__button:focus .cs-faq__button-arrow.cs-faq__button-arrow {
  transform: translateX(0.2em);
}

/* A button with no URL is inert: no pointer, no hover shift. */
.cs-faq .cs-faq__button--no-link.cs-faq__button--no-link {
  cursor: default;
}

.cs-faq .cs-faq__button--no-link.cs-faq__button--no-link:hover,
.cs-faq .cs-faq__button--no-link.cs-faq__button--no-link:focus {
  color: var(--cfq-button-color, inherit);
}

.cs-faq--button-outline .cs-faq__button--no-link.cs-faq__button--no-link:hover,
.cs-faq--button-outline .cs-faq__button--no-link.cs-faq__button--no-link:focus {
  background-color: transparent;
  border-color: var(--cfq-button-border-color, currentColor);
}

.cs-faq--button-filled .cs-faq__button--no-link.cs-faq__button--no-link:hover,
.cs-faq--button-filled .cs-faq__button--no-link.cs-faq__button--no-link:focus {
  background-color: var(--cfq-button-bg, transparent);
}

.cs-faq .cs-faq__button--no-link.cs-faq__button--no-link:hover .cs-faq__button-arrow.cs-faq__button-arrow {
  transform: none;
}

/* ---------------------------- Accordion ---------------------------- */

/* The list carries the top hairline; each row carries its own bottom one,
   so the rules stay even whatever the row count is. */
.cs-faq__list {
  border-top: var(--cfq-divider-width, 1px) solid var(--cfq-divider-color, rgba(255, 255, 255, 0.15));
}

.cs-faq__item {
  border-bottom: var(--cfq-divider-width, 1px) solid var(--cfq-divider-color, rgba(255, 255, 255, 0.15));
}

/* Row header. The default disclosure triangle is removed in both the
   standard and the WebKit-prefixed form; the chevron in the markup
   replaces it so its color can come from a field. */
.cs-faq__question-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  padding: clamp(1.1rem, 2vw, 1.5rem) 0;
  list-style: none;
  cursor: pointer;
  transition: background-color 200ms ease;
}

/* Without numbers the question starts at the left edge of the column. */
.cs-faq:not(.cs-faq--numbered) .cs-faq__question-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cs-faq__question-row::-webkit-details-marker {
  display: none;
}

.cs-faq__question-row::marker {
  content: "";
}

/* Row hover state. Every hover color falls back to its resting
   counterpart, so a hover field left alone changes nothing instead of
   defaulting to white. Keyboard focus gets the same treatment. */
.cs-faq__question-row:hover,
.cs-faq__question-row:focus-visible {
  background-color: var(--cfq-row-hover-bg, transparent);
}

.cs-faq__question-row:hover .cs-faq__number,
.cs-faq__question-row:focus-visible .cs-faq__number {
  color: var(--cfq-row-hover-number-color, var(--cfq-number-color, inherit));
}

.cs-faq__question-row:hover .cs-faq__question,
.cs-faq__question-row:focus-visible .cs-faq__question {
  color: var(--cfq-row-hover-question-color, var(--cfq-question-color, inherit));
}

.cs-faq__question-row:hover .cs-faq__icon,
.cs-faq__question-row:focus-visible .cs-faq__icon {
  color: var(--cfq-row-hover-icon-color, var(--cfq-icon-color, currentColor));
}

.cs-faq__question-row:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

.cs-faq .cs-faq__number {
  color: var(--cfq-number-color, inherit);
  transition: color 200ms ease;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  /* Sits with the first line of the question rather than the middle of
     the row, so a two-line question still reads as numbered. */
  line-height: inherit;
  white-space: nowrap;
}

.cs-faq .cs-faq__question {
  display: block;
  margin: 0;
  color: var(--cfq-question-color, inherit);
  transition: color 200ms ease;
}

/* Body text keeps the theme's paragraph size but reads heavier than the
   answer beneath it. */
.cs-faq--question-body .cs-faq__question {
  font-weight: 700;
}

/* Icon. Rotates rather than swapping glyphs, so there is nothing to
   preload and the transition is free. */
.cs-faq__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cfq-icon-color, currentColor);
  transition: transform 200ms ease, color 200ms ease;
}

.cs-faq__icon svg {
  display: block;
  width: 1rem;
  height: 1rem;
}

.cs-faq__item[open] .cs-faq__icon {
  transform: rotate(180deg);
}

/* Answer. The indent lines the copy up under the question rather than
   under the number. */
.cs-faq__answer {
  padding-bottom: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--cfq-answer-color, inherit);
}

.cs-faq--numbered .cs-faq__answer-inner {
  /* Matches the number column plus the row gap. */
  padding-left: calc(2ch + clamp(0.75rem, 2vw, 1.75rem));
}

.cs-faq__answer-inner {
  max-width: 72ch;
}

.cs-faq .cs-faq__answer p,
.cs-faq .cs-faq__answer li,
.cs-faq .cs-faq__answer span,
.cs-faq .cs-faq__answer h1,
.cs-faq .cs-faq__answer h2,
.cs-faq .cs-faq__answer h3,
.cs-faq .cs-faq__answer h4,
.cs-faq .cs-faq__answer h5,
.cs-faq .cs-faq__answer h6 {
  color: inherit;
}

.cs-faq .cs-faq__answer > * > *:first-child {
  margin-top: 0;
}

.cs-faq .cs-faq__answer > * > *:last-child {
  margin-bottom: 0;
}

.cs-faq .cs-faq__answer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Progressive enhancement: browsers that can animate the disclosure
   content slide it open. Everywhere else it simply appears, which is the
   native behavior. */
@supports selector(::details-content) {
  /* Lets the open height animate from 0 to auto where the browser
     supports it; ignored everywhere else. */
  .cs-faq__item {
    interpolate-size: allow-keywords;
  }

  .cs-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition: content-visibility 250ms allow-discrete, block-size 250ms ease,
      opacity 250ms ease;
  }

  .cs-faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-faq__icon,
  .cs-faq__button.cs-faq__button,
  .cs-faq__button-arrow.cs-faq__button-arrow,
  .cs-faq__question-row,
  .cs-faq__number,
  .cs-faq__question {
    transition: none;
  }

  .cs-faq .cs-faq__button.cs-faq__button:hover .cs-faq__button-arrow.cs-faq__button-arrow,
  .cs-faq .cs-faq__button.cs-faq__button:focus .cs-faq__button-arrow.cs-faq__button-arrow {
    transform: none;
  }

  @supports selector(::details-content) {
    .cs-faq__item::details-content,
    .cs-faq__item[open]::details-content {
      transition: none;
    }
  }
}

/* ---------------------------- Responsive ---------------------------- */

@media (max-width: 899px) {
  /* The padding fields are set for desktop; below the tablet breakpoint
     they are scaled back so the row does not run long on a phone. */
  .cs-faq {
    padding-top: max(2rem, calc(var(--cfq-top-padding, 100px) * 0.7));
    padding-bottom: max(2rem, calc(var(--cfq-bottom-padding, 100px) * 0.7));
  }

  /* Two columns have nowhere to go, so the accordion drops under the
     intro -- including when it is set to the left, since reading order
     wins over visual order once they stack. */
  .cs-faq__inner,
  .cs-faq--accordion-left .cs-faq__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-faq--accordion-left .cs-faq__copy,
  .cs-faq--accordion-left .cs-faq__list {
    grid-column: 1;
    grid-row: auto;
  }

  .cs-faq .cs-faq__content {
    max-width: none;
  }
}

@media (max-width: 479px) {
  .cs-faq {
    padding-top: max(1.5rem, calc(var(--cfq-top-padding, 100px) * 0.55));
    padding-bottom: max(1.5rem, calc(var(--cfq-bottom-padding, 100px) * 0.55));
  }

  /* On a narrow screen the number moves above the question so the
     question itself keeps a readable measure. */
  .cs-faq--numbered .cs-faq__question-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cs-faq--numbered .cs-faq__number {
    grid-column: 1;
    grid-row: 1;
  }

  .cs-faq--numbered .cs-faq__question {
    grid-column: 1;
    grid-row: 2;
  }

  .cs-faq--numbered .cs-faq__icon {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
  }

  .cs-faq--numbered .cs-faq__answer-inner {
    padding-left: 0;
  }

  .cs-faq .cs-faq__button.cs-faq__button {
    width: 100%;
    justify-content: space-between;
  }
}


/* The theme styles visited links and their descendants
   (a:not(.atmc-btn):visited *). Keep inner labels and arrows on
   the button's own color once the link has been clicked. */
.cs-faq .cs-faq__button.cs-faq__button * {
  color: inherit;
}