/**
 * FaqQuestion (Old) — single accordion item, ported 1:1 from the legacy
 * creditas-site `sections/Faq/components/Accordion` styled-components.
 * Plain semantic CSS with every design token resolved from
 * @creditas-ui/themes (standard). No injected legacy CSS.
 *
 * Class naming: single-class, no BEM `__` separator; element rules are
 * nested under the `.faq-question` block (applied to the root <li>).
 *
 * Resolved tokens:
 *   colors.neutral.15  = #d6dcd9   (question divider)
 *   colors.neutral.90  = #292929   (question text, chevron, answer text)
 *   colors.primary.60  = #4f9e00   (redirect link + answer links)
 *   breakpoints.5xl    = 1024px
 *   typography.body.xl (Light 300)   → 20px / 28px / 0.5px / Helvetica Now Display
 *   typography.body.md (Regular 400) → 16px / 24px / 0.3px / Helvetica Now Display
 *   typography.body.md (Medium 500)  → 16px / 24px / 0.3px / Helvetica Now Display
 */

/* Legacy-parity font smoothing: must live on :host so it inherits into the
   shadow tree (the property does not cross the shadow boundary). */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
}

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

/* ----- root list item (legacy Container `li`) --------------------- */
.faq-question {
  list-style: none;
  width: 100%;

  /* ----- question toggle (legacy Header `button`) ------------------- */
  .toggle {
    cursor: pointer;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 0;
    background-color: transparent;
    border: none;
    outline: none;
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #d6dcd9;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

    @media (min-width: 1024px) {
      padding: 48px 0;
      height: 124px;
    }

    &:hover {
      text-decoration: underline;
    }

    &:focus > * {
      font-weight: 700;
    }

    &[aria-expanded='true'] .text {
      font-weight: 700;
    }

    &[aria-expanded='true'] .icon {
      transform: rotate(-180deg);
    }
  }

  /* ----- question label (legacy Title, bodyXLLight) ---------------- */
  .text {
    text-align: left;
    color: #292929;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
  }

  /* ----- chevron (legacy Icon, ArrowDownIcon) ---------------------- */
  .icon {
    display: block;
    margin-right: 24px;
    height: 24px;
    width: 24px;
    flex-shrink: 0;
    color: #292929;
    transform: rotate(0deg);
    transition: all 0.3s ease-in 50ms;

    @media (min-width: 1024px) {
      height: 32px;
      width: 32px;
    }
  }

  /* ----- collapsible panel (legacy Body motion.div) ---------------- */
  .panel {
    overflow: hidden;
    text-align: left;
    transition: height 0.3s ease-in 50ms;
  }

  /* ----- answer body (legacy Text RichText, bodyMdRegular) --------- */
  .answer {
    margin: 32px 24px 40px;
    color: #292929;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;

    p:not(:empty) + p {
      margin-top: 24px;
    }

    ul,
    ol {
      margin-top: 24px;
      padding-left: 32px;
    }

    hr {
      margin-top: 24px;
    }

    a {
      color: #4f9e00;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  }

  /* ----- redirect link (legacy Link, bodyMdMedium) ---------------- */
  .redirect {
    display: flex;
    align-items: center;
    margin: 0 24px 32px;
    color: #4f9e00;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }

    .redirect-icon {
      margin-left: 8px;
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      color: #4f9e00;
    }
  }
}