/**
 * FaqQuestion.css — port 1:1 de `mx-cms/src/components/Accordion/styles.ts`
 * más los estilos de rich text de `components/FAQList/styles.ts`
 * (Paragraph, ListContainer, Link, BoldText).
 *
 * CSS anidado nativo, sin BEM: el shadow root ya aísla, así que los nombres
 * cortos no colisionan con nada.
 *
 * Tipografía resuelta del tema `standard`:
 *   body.xl = 20px · letterSpacing sm 0.5 · lineHeight xl 28px
 *   body.lg = 18px · letterSpacing xs 0.3 · lineHeight lg 26px
 *   fontWeight: light 300 · regular 400 · medium 500 · bold 700
 */

/* 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;
}

/* AccordionContainer */
.faq-question {
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  display: block;
  /* Hex literal en el legacy — no es un token del tema. */
  border-bottom: 1px solid #dbe1dd;

  /* Tiempos del acordeón, declarados una vez y heredados por el título y el
     cuerpo para que los dos se muevan con la misma curva. Ver la nota larga de
     `.body`. La apertura dura más que el cierre a propósito: abrir es el gesto
     que uno mira, cerrar es el que quiere sacarse de encima. */
  --faq-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --faq-duration-open: 0.3s;
  --faq-duration-close: 0.22s;

  /* Title — Typography as="h3", variant bodyXlLight | bodyXlBold */
  .title {
    margin: 0;
    width: 100%;
    padding: 33px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;

    font-size: 20px; /* body.xl */
    letter-spacing: 0.5px;
    line-height: 28px;
    color: #292929; /* neutral[90] */

    /* Cerrado = bodyXlLight (300). Abierto = bodyXlBold (700). */
    font-weight: 300;

    /* El padding de abajo cae de 33px a 10px al abrir. Sin transición, la fila
       entera pega un salto de 23px en el mismo frame del click y el cuerpo
       recién después empieza a crecer: se lee como dos movimientos en vez de
       uno. Animarlo con la curva del cuerpo los une. Cerrando corre la duración
       de cierre, porque la transición que se aplica es la del estado DESTINO. */
    transition: padding-bottom var(--faq-duration-close) var(--faq-ease);

    /* El legacy usa `:hover` (no `&:hover`), que en emotion compila a un
       selector descendiente. En la práctica cubre toda la fila, así que acá se
       aplica al elemento. */
    &:hover {
      text-decoration: underline;
    }

    &[data-open='true'] {
      font-weight: 700; /* bodyXlBold */
      padding-bottom: 10px;
      transition: padding-bottom var(--faq-duration-open) var(--faq-ease);
    }

    /* El foco no existía en el legacy (el h3 no era focuseable). Se agrega
       junto con role/tabIndex, con el outline nativo para no inventar estilo. */
    &:focus-visible {
      outline: 2px solid #4f9e00; /* primary[60] */
      outline-offset: 2px;
    }

    /* Mismo criterio (y misma trampa de especificidad) que en `.body`: va al
       final para poder ganarle a `&[data-open='true']`. */
    @media (prefers-reduced-motion: reduce) {
      &,
      &[data-open='true'] {
        transition: none;
      }
    }
  }

  .copy {
    display: inline;
  }

  /* Arrow: caja 48x32, svg 48x48 (desborda a propósito, así está en el legacy) */
  .arrow {
    width: 48px;
    height: 32px;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    color: #292929; /* neutral[90] — el svg usa currentColor */

    .icon {
      width: 48px;
      height: 48px;
    }
  }

  /**
   * ChildrenContainer.
   *
   * `max-height` lo setea el componente inline, con la altura medida del
   * contenido. El legacy usaba `max-height: 1200px` fijo, y eso producía un
   * salto al cerrar: la altura visible es `min(contenido, max-height)`, así que
   * con una respuesta corta la transición recorría 1200 → 60px sin efecto
   * visual y recién colapsaba al final, de golpe. Además desaparece el recorte
   * de las respuestas de más de 1200px. Ver el comentario en FaqQuestion.jsx.
   *
   * CURVA Y DURACIÓN — lo que se percibía como "lento" no era la duración. El
   * legacy anima las tres propiedades con `0.2s ease-in`, y `ease-in` arranca
   * casi quieto: a la mitad del tiempo recorrió apenas ~25% del camino y remata
   * acelerando, justo al revés de lo que uno espera de algo que responde a un
   * click. Con la opacidad en la misma curva el texto queda casi invisible
   * durante la primera mitad, así que el ojo mide el gesto desde que ve algo y
   * no desde el click: 200ms reales se sienten como el doble. Se cambia por una
   * curva que sale rápido y frena suave, con la apertura en 300ms y el cierre
   * en 220ms — más tiempo total que el legacy y aun así más rápida de percibir,
   * y lejos del techo de 0.5s.
   *
   * POR QUÉ EL `padding-bottom` DE ACÁ NO SE ANIMA — y no es cuestión de gusto.
   * El alto lo mide el componente con `scrollHeight`, y `scrollHeight` INCLUYE
   * el padding de abajo. Si el padding se anima de 0 a 10px, el número medido
   * crece con él (93 → 103px, medido); el `ResizeObserver` observa el propio
   * `.body`, así que dispara en cada frame de la transición, y cada medición
   * nueva reescribe el `max-height` inline. Cambiar el destino de una
   * transición en curso NO la continúa: arranca otra, desde el valor actual y
   * con la duración completa. La apertura se reiniciaba nueve veces y avanzaba
   * a los tumbos: 22px de 93 a los 230ms, y seguía moviéndose a los 420ms.
   *
   * De ahí el "rebote": mientras el alto gateaba, el padding del título ya se
   * había comido sus 23px, así que el bloque entero PRIMERO se achicaba y
   * recién después crecía. Medido sobre el contenido de abajo: bajaba 6px,
   * subía 13px y volvía a bajar.
   *
   * Con el padding constante `scrollHeight` no se mueve, la medición siempre da
   * lo mismo, no hay reescritura, y la transición corre una sola vez de punta a
   * punta. El título sí puede animar su padding: no entra en la medición.
   */
  .body {
    overflow: hidden;

    /* Transición de APERTURA. `[data-open='true']` no la redeclara porque la
       hereda de acá, y la transición que corre es siempre la declarada en el
       estado DESTINO del cambio; la de cierre vive entonces en
       `[data-open='false']`, unos renglones más abajo. El retraso de 40ms en la
       opacidad es para que el texto aparezca cuando ya hay lugar donde ponerlo,
       en vez de encimarse al arranque del alto. */
    transition: max-height var(--faq-duration-open) var(--faq-ease),
      opacity 0.22s ease-out 0.04s;

    /* Los 10px de aire de abajo van como CONTENIDO, no como `padding-bottom`.
       Dos razones, las dos medidas:

       1. Con `padding-bottom` propio, `max-height: 0` NO llega a cerrar la
          caja: `box-sizing: border-box` la recorta hasta el padding y ahí se
          planta, así que cerrado quedaba un sobrante de 10px. Y al abrir, los
          primeros 10px de `max-height` no movían nada (la caja ya medía 10),
          o sea ~30ms de animación muerta justo al arranque.
       2. Puesto acá, en cambio, entra en `scrollHeight` como cualquier otro
          contenido y no cambia nunca — que es lo que la medición necesita.

       Un `::after` en vez de un div envoltorio para no tocar el árbol: el
       contenido de `.body` puede venir slotteado y no conviene meterle capas. */
    &::after {
      content: '';
      display: block;
      height: 10px;
    }

    &[data-open='false'] {
      /* Cierre. La opacidad se va rápido y sin retraso: el texto se apaga
         primero y el alto colapsa detrás, así el recorte del `overflow: hidden`
         no se ve pasar por encima de las líneas. */
      transition: max-height var(--faq-duration-close) var(--faq-ease),
        opacity 0.12s ease-in;

      opacity: 0;
      pointer-events: none;
    }

    &[data-open='true'] {
      opacity: 1;
      pointer-events: auto;
    }

    /* Va después de los dos estados a propósito: `&[data-open='false']` pesa
       más que `&` y las media queries no suman especificidad, así que la única
       forma de que este override gane es igualar el selector y llegar después
       en la hoja. */
    @media (prefers-reduced-motion: reduce) {
      &,
      &[data-open='false'] {
        transition: none;
      }
    }

    /* Rich text ------------------------------------------------------------
       Los selectores de TAG van con `&` explícito: el anidado de selectores de
       tipo sin `&` necesita "relaxed nesting", que llegó a los browsers después
       que el anidado de clases. Con `&` funciona en todas las versiones que
       soportan nesting. */

    /* Paragraph = styled(Typography) bodyLgLight, color neutral[90] */
    .paragraph,
    & p {
      margin: 0 0 15px;
      font-size: 18px; /* body.lg */
      font-weight: 300; /* light */
      letter-spacing: 0.3px;
      line-height: 26px;
      color: #292929; /* neutral[90] */
    }

    /* Links dentro de un párrafo (legacy: `Paragraph a`) */
    & p a {
      text-decoration: none;
      color: #1c4200; /* primary[90] */
      font-weight: 700;
    }

    /* Link suelto (INLINES.HYPERLINK a nivel de bloque). En el legacy no define
       color, así que hereda. */
    & a {
      white-space: normal;
      word-break: break-word;
      text-decoration: none;
      max-width: inherit;
    }

    /* MARKS.BOLD -> Typography as="span" variant bodyLgBold */
    & strong,
    & b {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.3px;
      line-height: 26px;
      color: #292929; /* neutral[90] */
    }

    /* ListContainer (ul/ol) */
    & ul,
    & ol {
      margin-left: 22px;
      margin-bottom: 15px;
      word-wrap: break-word;
    }

    /* li = Typography as="li" bodyLgLight neutral[90] */
    & li {
      font-size: 18px;
      font-weight: 300;
      letter-spacing: 0.3px;
      line-height: 26px;
      color: #292929;

      &::marker {
        font-size: 15px;
      }
    }
  }
}

/* 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-question,
.faq-question *,
.faq-question *::before,
.faq-question *::after {
  box-sizing: border-box;
}