/*
 * faq runtime stylesheet - the FAQ-owned layer on top of the reused accordion
 * disclosure DOM. See ./faq.md for design notes and the accordion coupling.
 *
 * Breakpoints: canonical 768 / 1024 / 1440. Tokens: --ll-* semantic.
 * accordion.css (loaded in-block as a dependency) supplies every
 * .accordion__* rule; this file only adds the FAQ band + two-column layout,
 * the intro heading, and the two scoped overrides (chevron color, question
 * type) that FAQ intentionally applies to its embedded accordion.
 */

/* Full-bleed color band (background only; text/chevron colors are fixed). */
.faq {
  padding-block: var(--ll-space-11, 48px);
}

.faq--bg-accent {
  background-color: var(--ll-color-bg-accent, #fef9ee);
}

.faq--bg-default {
  background-color: var(--ll-color-bg-default, #fff);
}

.faq--bg-secondary {
  background-color: var(--ll-color-bg-secondary, #fafafc);
}

.faq--bg-muted {
  background-color: var(--ll-color-bg-muted, #f8f8f7);
}

.faq--bg-accent-warm {
  background-color: var(--ll-color-bg-accent-warm, #e8e1cf);
}

.faq--bg-brand-lighter {
  background-color: var(--ll-color-bg-brand-light, #f7fbfc);
}

/* Content rail: heading stacked above the list on mobile, side-by-side on desktop. */
.faq__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ll-space-8, 32px);
}

.faq__intro {
  margin: 0;
}

.faq__heading {
  margin: 0;
  max-width: 303px;
  color: var(--ll-color-text-secondary, #161616);
  font-family: var(--ll-text-h3-family);

  /* Mobile: Figma PRIMARY/H4 (28/34); desktop steps up to H3 (44/52). Weight
   * stays medium (H3 weight) at both sizes per the mock. */
  font-size: var(--ll-text-h5-size);
  line-height: var(--ll-text-h5-line-height);
  letter-spacing: var(--ll-text-h5-letter-spacing);
  font-weight: var(--ll-text-h3-weight);
}

/* Question type override: Figma FAQ questions are H7 (20/26 desktop, 16 mobile),
 * smaller on mobile than the accordion trigger's fixed body-xl. Scoped to the
 * FAQ list so the base accordion is untouched. Intentional coupling - see
 * faq.md "Depends on". */
.faq__list .accordion__trigger {
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
}

/* Chevron is fixed brand teal in FAQ (accordion's default is text-tinted). */
.faq__list .accordion__icon {
  background-color: var(--ll-color-text-brand, #017a96);
}

/* Divider matches Figma Color/Border/tertiary (#e3e3e2 = --ll-color-border-default,
 * neutral-150) - a solid line, vs accordion's default #888887 @ 20%. Recolor only;
 * width/style inherit from accordion. Intentional coupling - see faq.md "Depends on". */
.faq__list .accordion__item {
  border-top-color: var(--ll-color-border-default, #e3e3e2);
}

/* Figma (desktop + mobile) closes the list with a divider beneath the last item.
 * The accordion draws top dividers only, so FAQ adds the closing bottom rule on
 * its last item, matching the tertiary divider color above. */
.faq__list .accordion__item:last-child {
  border-bottom: var(--ll-border-width-xs, 1px) solid
    var(--ll-color-border-default, #e3e3e2);
}

.accordion__item.is-open:not(:has(~ .accordion__item)):has(.faq) {
  border-bottom: 0;
}

/* Tablet+ */
@media (width >= 768px) {
  .faq__heading {
    max-width: 403px;
  }
}

@media (width >= 1024px) {
  .faq {
    padding-block: var(--ll-space-15, 80px);
  }

  .faq__inner {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ll-space-13, 64px);
    align-items: start;
  }

  .faq__heading {
    font-size: var(--ll-text-h3-size);
    line-height: var(--ll-text-h3-line-height);
    letter-spacing: var(--ll-text-h3-letter-spacing);
  }

  .faq__list .accordion__trigger {
    font-size: var(--ll-text-h7-size);
    line-height: var(--ll-text-h7-line-height);
    letter-spacing: var(--ll-text-h7-letter-spacing);
  }
}

/* Question is authored as richtext (to allow superscripts). faq.js flattens
 * the RTE <p> wrapper into the trigger's title span, but guard against any stray
 * block wrapper so the label stays inline inside the <button>. (<sup> keeps the
 * browser default: 75% size, line-height 0, so it never grows the row.) */
.faq__list .accordion__title p {
  margin: 0;
  display: inline;
}

.faq__list .accordion__panel-inner {
  color: var(--ll-color-text-secondary, #161616);
}

/* -------------------------------------------------------------------------
 * 1-column layout variant (faq--layout-1col)
 *
 * Used when the FAQ is a fragment inside an accordion item. Deltas vs the
 * default 2-column band:
 *  - no full-bleed color band, no content-rail cap: fills its container edge
 *    to edge (the host accordion panel controls width).
 *  - heading always stacked above a single-column list.
 *  - the disclosure toggle is a plus (collapsed) / minus (open) glyph on the
 *    LEFT of each row; the question + answer are bumped to its right so the
 *    answer aligns under the question, not under the icon.
 *  - type: heading H5 (mobile/stacked) -> H6 (>=1024, the constrained sticky
 *    column); question body-base/medium (mobile) -> body-lg/medium (>=1024).
 *
 * Type mapped to --ll-* semantic tokens by resolved pixel value (never the raw
 * Figma family). Structural values (24px item padding, 20px question->answer,
 * 40px heading->list, 24+12=36px content offset, 24px glyph) come from the
 * Figma frame tree (desktop 20536:55404, mobile 20657:14456). Verify against
 * THEME: LifeLock before final sign-off.
 * ------------------------------------------------------------------------- */
.faq--layout-1col {
  padding-block: 0;
}

.faq--layout-1col .faq__inner {
  grid-template-columns: 1fr;
  gap: var(--ll-space-9, 40px); /* heading -> list */
}

.faq--layout-1col .faq__heading {
  max-width: none;
  font-size: var(--ll-text-h6-size);
  line-height: var(--ll-text-h6-line-height);
  letter-spacing: var(--ll-text-h6-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
}

/* Toggle glyph on the LEFT; content bumped to its right. */
.faq--layout-1col .faq__list .accordion__trigger {
  justify-content: flex-start;
  gap: var(--ll-space-4, 12px); /* glyph -> question */

  /* Question: body-base/medium on mobile (the body-base token weight is
   * regular; Figma is medium). */
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
}

/* Plus (collapsed) / minus (open) toggle. The assets are pre-colored (green),
 * so they are painted as background *images* (not masks) to keep their authored
 * color - accordion's mask + background-color tint is disabled here. Served from
 * the repo-committed /icons/ tree (delivered verbatim by the EDS edge, 200 on
 * .aem.live/.aem.page); a raw /content/dam/... path only resolves on the author
 * host and 404s on the delivery edge, silently blanking the glyph. order:-1
 * moves the glyph before the title; transform:none disables accordion's chevron
 * rotation. */
.faq--layout-1col .faq__list .accordion__icon {
  order: -1;
  transform: none;
  background: url("/icons/arrows-navigation/simple-plus-green.svg") center / contain no-repeat;
  mask: none;

  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask longhand to clear the shorthand. */
  -webkit-mask: none;
}

.faq--layout-1col .faq__list .accordion__item.is-open > .accordion__heading > .accordion__trigger > .accordion__icon {
  transform: none;
  background-image: url("/icons/arrows-navigation/simple-minus-green.svg");
}

/* Answer aligns under the question (past the 24px glyph + 12px gap). */
.faq--layout-1col .faq__list .accordion__panel-inner {
  padding-inline-start: calc(var(--ll-space-7) + var(--ll-space-4)); /* 36px */
}

/* Item rhythm: 24px divider->question (trigger padding-top, inherited from
 * accordion); 20px question->answer when open; 24px answer->divider. */
.faq--layout-1col .faq__list .accordion__item.is-open .accordion__trigger {
  padding-bottom: var(--ll-space-6, 20px);
}

.faq--layout-1col .faq__list .accordion__item.is-open > .accordion__panel > .accordion__panel-inner {
  padding-bottom: var(--ll-space-7, 24px);
}

@media (width >= 1024px) {
  .faq--layout-1col .faq__list .accordion__trigger {
    font-size: var(--ll-text-body-lg-size);
    line-height: var(--ll-text-body-lg-line-height);
    letter-spacing: var(--ll-text-body-lg-letter-spacing);
  }

  .faq--layout-1col .faq__list .accordion__icon {
    width: 24px;
    height: 24px;
  }
}