/*
 * Contenido del widget "Post Content" de Elementor (usado en la plantilla
 * Single de entradas nativas: Áreas y FAQs del Longevity Hub).
 *
 * El contenido de la entrada puede venir como HTML simple o, si la entrada
 * fue armada con Elementor, como su propio árbol de contenedores/widgets
 * anidado dentro de este mismo widget. Estas reglas igualan la tipografía
 * entre ambos casos (apuntan al tag, no a la clase de Elementor, así cubren
 * las dos formas) y quitan el padding que Elementor le agrega por defecto a
 * los contenedores del post individual.
 */

.elementor-widget-theme-post-content h2 {
    font-family: "Inter", sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 32px !important;
    line-height: 100% !important;
    letter-spacing: 0 !important;
    color: var(--color-zem-black) !important;
}

/* Subtítulos h3-h6: escala descendente por debajo del h2 (32px) y por encima
   o a la par del párrafo (24px), diferenciados por tamaño y peso. Excluye los
   títulos de componentes del theme (clase zem-*: zem-areas__title, etc.; el marcador zem-first-content-element no cuenta), que
   traen su propia tipografía. */
.elementor-widget-theme-post-content h3:not([class*="zem-"]:not(.zem-first-content-element)),
.elementor-widget-theme-post-content h4:not([class*="zem-"]:not(.zem-first-content-element)),
.elementor-widget-theme-post-content h5:not([class*="zem-"]:not(.zem-first-content-element)),
.elementor-widget-theme-post-content h6:not([class*="zem-"]:not(.zem-first-content-element)) {
    font-family: "Inter", sans-serif !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    color: var(--color-zem-black) !important;
    margin-bottom: 16px !important;
}

.elementor-widget-theme-post-content h3:not([class*="zem-"]:not(.zem-first-content-element)) {
    font-weight: 300 !important;
    font-size: 28px !important;
    line-height: 120% !important;
    margin-top: 40px !important;
}

.elementor-widget-theme-post-content h4:not([class*="zem-"]:not(.zem-first-content-element)) {
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 130% !important;
    margin-top: 32px !important;
}

.elementor-widget-theme-post-content h5:not([class*="zem-"]:not(.zem-first-content-element)) {
    font-weight: 500 !important;
    font-size: 20px !important;
    line-height: 130% !important;
    margin-top: 28px !important;
}

.elementor-widget-theme-post-content h6:not([class*="zem-"]:not(.zem-first-content-element)) {
    font-weight: 500 !important;
    font-size: 16px !important;
    line-height: 130% !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    margin-top: 24px !important;
}

.elementor-widget-theme-post-content h3.zem-first-content-element,
.elementor-widget-theme-post-content h4.zem-first-content-element,
.elementor-widget-theme-post-content h5.zem-first-content-element,
.elementor-widget-theme-post-content h6.zem-first-content-element {
    margin-top: 0 !important;
}

.elementor-widget-theme-post-content p {
    font-family: "Inter", sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 24px !important;
    line-height: 138% !important;
    letter-spacing: 0 !important;
    color: var(--color-zem-black) !important;
}

/* Entrada armada con Elementor: quita el padding lateral que Elementor le
   pone por defecto a cada contenedor (raíz e hijos) del post individual. */
.elementor-widget-theme-post-content [data-elementor-type="wp-post"] .e-con {
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
}

/* Entrada armada con Elementor: quita el padding superior del primer
   contenedor (queda pegado arriba del todo, igual que el HTML simple). */
.elementor-widget-theme-post-content [data-elementor-type="wp-post"] > .e-con > .e-con-inner {
    padding-block-start: 0 !important;
}

/* Separación arriba de cada título h2, salvo que sea el primer elemento del
   post (la excepción la marca single-content.js con esta clase, porque en
   contenido de Elementor el h2 puede estar anidado en distinta profundidad
   que el elemento anterior y no hay forma confiable de detectarlo solo con
   selectores CSS). */
.elementor-widget-theme-post-content h2 {
    margin-top: 60px !important;
}

.elementor-widget-theme-post-content h2.zem-first-content-element {
    margin-top: 0 !important;
}

/* Respaldo solo con CSS: primer h2 del post, sea un widget Heading que abre el
   primer contenedor de Elementor o un h2 que abre el HTML simple. Mayor
   especificidad que las reglas de margen de h2 (también las de los media
   queries), así no hace falta depender del JS. */
.elementor-widget-theme-post-content [data-elementor-type="wp-post"] > .e-con > .e-con-inner > .elementor-widget:first-child h2,
.elementor-widget-theme-post-content > .elementor-widget-container > h2:first-child {
    margin-top: 0 !important;
}

/* Listas: misma tipografía que el párrafo, con la viñeta dentro de la
   columna de texto (sin sangría, no sobresale a la izquierda) y separación
   entre ítems. */
.elementor-widget-theme-post-content ul,
.elementor-widget-theme-post-content ol {
    margin: 0 0 1.5em !important;
    padding-inline-start: 1.1em !important;
}

.elementor-widget-theme-post-content li {
    font-family: "Inter", sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: 24px !important;
    line-height: 138% !important;
    letter-spacing: 0 !important;
    color: var(--color-zem-black) !important;
    margin-bottom: 12px !important;
}

.elementor-widget-theme-post-content li:last-child {
    margin-bottom: 0 !important;
}

.elementor-widget-theme-post-content li::marker {
    color: var(--color-zem-black);
}

.elementor-widget-theme-post-content li strong,
.elementor-widget-theme-post-content li b {
    font-weight: 500 !important;
}

/* Tablet: escala tipográfica reducida respecto a escritorio. */
@media (max-width: 1024px) {
    .elementor-widget-theme-post-content h2 {
        font-size: 28px !important;
        margin-top: 48px !important;
    }

    .elementor-widget-theme-post-content h3:not([class*="zem-"]:not(.zem-first-content-element)) {
        font-size: 24px !important;
        margin-top: 32px !important;
    }

    .elementor-widget-theme-post-content h4:not([class*="zem-"]:not(.zem-first-content-element)) {
        font-size: 22px !important;
        margin-top: 28px !important;
    }

    .elementor-widget-theme-post-content h5:not([class*="zem-"]:not(.zem-first-content-element)) {
        font-size: 18px !important;
        margin-top: 24px !important;
    }

    .elementor-widget-theme-post-content h6:not([class*="zem-"]:not(.zem-first-content-element)) {
        font-size: 15px !important;
        margin-top: 20px !important;
    }

    .elementor-widget-theme-post-content p,
    .elementor-widget-theme-post-content li {
        font-size: 20px !important;
    }

    .elementor-widget-theme-post-content h2.zem-first-content-element,
    .elementor-widget-theme-post-content h3.zem-first-content-element,
    .elementor-widget-theme-post-content h4.zem-first-content-element,
    .elementor-widget-theme-post-content h5.zem-first-content-element,
    .elementor-widget-theme-post-content h6.zem-first-content-element {
        margin-top: 0 !important;
    }
}

/* Móvil: escala tipográfica compacta. */
@media (max-width: 768px) {
    .elementor-widget-theme-post-content h2 {
        font-size: 24px !important;
        line-height: 110% !important;
        margin-top: 40px !important;
    }

    .elementor-widget-theme-post-content h3:not([class*="zem-"]:not(.zem-first-content-element)) {
        font-size: 22px !important;
        margin-top: 28px !important;
    }

    .elementor-widget-theme-post-content h4:not([class*="zem-"]:not(.zem-first-content-element)) {
        font-size: 20px !important;
        margin-top: 24px !important;
    }

    .elementor-widget-theme-post-content h5:not([class*="zem-"]:not(.zem-first-content-element)) {
        font-size: 18px !important;
        margin-top: 20px !important;
    }

    .elementor-widget-theme-post-content h6:not([class*="zem-"]:not(.zem-first-content-element)) {
        font-size: 14px !important;
        margin-top: 18px !important;
    }

    .elementor-widget-theme-post-content p,
    .elementor-widget-theme-post-content li {
        font-size: 18px !important;
        line-height: 145% !important;
    }

    .elementor-widget-theme-post-content h2.zem-first-content-element,
    .elementor-widget-theme-post-content h3.zem-first-content-element,
    .elementor-widget-theme-post-content h4.zem-first-content-element,
    .elementor-widget-theme-post-content h5.zem-first-content-element,
    .elementor-widget-theme-post-content h6.zem-first-content-element {
        margin-top: 0 !important;
    }
}