/**
 * Faq.css — port 1:1 de `mx-cms/src/components/FAQList/styles.ts`.
 *
 * CSS anidado nativo, sin BEM. El aislamiento lo da el shadow root del island,
 * no la convención de nombres: adentro de `.faq` nadie más puede pisar
 * `.title` ni `.cta`, así que los nombres largos tipo `faq__cta-label` no
 * aportan nada. La única clase "larga" es la raíz, que sirve para reconocer el
 * componente en devtools.
 *
 * Variantes por `data-*` en vez de clases modificadoras — consistente con el
 * `data-open` que ya usa el acordeón.
 *
 * Cada valor sale del legacy. Los tokens del tema `standard` están resueltos a
 * su literal (ver shared/TOKENS.md): adentro del shadow root no hay
 * `selectTheme()` en runtime.
 *
 * Breakpoints (tokens.breakpoints): 4xl 880 · 5xl 1024 · 7xl 1366 · 8xl 1440.
 * `media.down(bp)` = max-width del breakpoint SIGUIENTE menos 0.02px:
 *   media.down('4xl')          -> max-width: 1023.98px
 *   media.between('5xl','8xl') -> min-width: 1024px and max-width: 1439.98px
 */

/* Paridad de render de texto con el legacy: el sitio viejo setea
 * -webkit-font-smoothing: antialiased global, que en macOS renderiza la
 * tipografía más liviana. Los Code Components viven en shadow roots aislados,
 * así que hay que declararlo por componente en :host para que herede al shadow
 * tree — la propiedad NO cruza el límite. Sin esto, Blink usa subpixel
 * smoothing y el mismo texto en 400 se ve más pesado que en el sitio actual. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* @slot-layout: stack — las preguntas del acordeón se apilan a ancho completo */
.faq {
  /* La cadena necesita el nombre con espacios Y el alias de una palabra que
     autogenera Webflow al subir la fuente. Sin el alias, la fuente carga en
     local y falla en producción. */
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  width: 100%;
  box-sizing: border-box;

  /* Defaults del legacy: backgroundColorFaq ?? neutral[0], textColor ?? neutral[90] */
  background-color: #ffffff; /* neutral[0] */
  color: #292929; /* neutral[90] */

  &[data-bg='gray'] {
    background-color: #f1f3f2; /* neutral[10] */
  }

  /* FaqContainer */
  .container {
    margin-inline: auto;
    padding: 48px 0;
    max-width: 1366px; /* = breakpoint 7xl */
    box-sizing: border-box;

    /* media.between('5xl', '8xl') */
    @media (min-width: 1024px) and (max-width: 1439.98px) {
      margin-inline: 71px;
    }

    /* media.down('4xl') */
    @media (max-width: 1023.98px) {
      padding: 96px 20px 56px;
    }
  }

  /* Contenedor de las preguntas del slot. Es un wrapper propio para poder
     aplanar el `<div slot>` que inserta Webflow. */
  .list {
    display: flex;
    flex-direction: column;

    /* ⚠️ EL QUIRK. Webflow envuelve TODOS los hijos del slot en un único
       `<div slot="...">`. Aunque acá se apilen, sin aplanar ese wrapper el gap y
       los bordes entre hermanos no maquetan: el contenedor ve un solo hijo.
       Brasil lo aplica igual en contenedores apilados (el `.list` del Faq). */
    ::slotted(*) {
      display: contents;
    }
  }

  /* TitleContainer */
  .title-wrap {
    padding-bottom: 40px;
    border-bottom: 4px solid #292929; /* selectTheme('colors.neutral.90') */
  }

  /* Typography variant="bodyMdBold" as="h2" color={neutral[80]}
     body.md = fontSize md 16px · letterSpacing xs 0.3 · lineHeight md 24px
     bold    = fontWeight lg 700
     `applyTagSelectors: true` en el declareComponent es lo que permite que esto
     le gane al reset de Webflow para h1–h6. */
  .title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 24px;
    color: #3b4540; /* neutral[80] — fijo en el legacy, no sigue a textColor */
  }

  /* CallToAction — styled(Inlinelink) */
  .cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 32px;
    padding: 16px 16px 16px 0;
    text-decoration: none;

    /* CallToActionContent */
    .content {
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    /* Typography variant="bodyLgBold" color={primary[60]}
       body.lg = 18px · ls xs 0.3 · lh lg 26px · bold 700 */
    .label {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.3px;
      line-height: 26px;
      color: #4f9e00; /* primary[60] */
    }

    /* ArrowContainer: 32x32, padding-left 8px, padding-top 3px */
    .arrow {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 32px;
      height: 32px;
      padding-left: 8px;
      padding-top: 3px;
      box-sizing: content-box;
      color: #4f9e00; /* primary[60] — el svg usa currentColor */
    }
  }
}

/* Reset de box-sizing scopeado al componente. El reset de Webflow no llega
   adentro del shadow root, así que cada componente declara el suyo. */
.faq,
.faq *,
.faq *::before,
.faq *::after {
  box-sizing: border-box;
}