@import url(fonts.css);

/* tipografía del contenido de los insights, la misma en la web (views/insight.php) y en el editor del admin */
/* cargar después de los css de quill: el prefijo .contenido-wrapper.ql-editor gana a .ql-editor y a .ql-snow .ql-editor */

.contenido-wrapper.ql-editor {
  font-family: var(--main-font), system-ui, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--main-font-size);
  line-height: 1em;
  letter-spacing: 0.5px;
  color: var(--font-color);
  min-height: 700px;
}

.ql-toolbar {
  position: sticky;
  top: 0;
  background-color: white;
  z-index: 99;
}

.contenido-wrapper.ql-editor h1,
.contenido-wrapper.ql-editor h2,
.contenido-wrapper.ql-editor h3 {
  color: inherit;
  line-height: 1em;
  margin: 0;
}

.contenido-wrapper.ql-editor h1 {
  font-family: var(--h1-font), system-ui, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(2em, 6vw, 2.5em);
  letter-spacing: 0.01em;
}

.contenido-wrapper.ql-editor h2 {
  font-family: 'awesome', system-ui, Arial, sans-serif;
  font-weight: bold;
  font-size: var(--h2-font-size);
}

.contenido-wrapper.ql-editor h3 {
  font-family: 'awesome', system-ui, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--h3-font-size);
}

.contenido-wrapper.ql-editor strong {
  font-weight: bold;
  color: inherit;
}

.contenido-wrapper.ql-editor a {
  color: inherit;
  text-decoration: none;
}

.ql-editor .ql-size-small {
  line-height: 1em;
}

/* los videos siempre a todo el ancho del contenido (o de su celda si están en el grid), en 16:9 */
.contenido-wrapper.ql-editor .ql-video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media only screen and (max-width: 600px) {
  .contenido-wrapper.ql-editor {
    font-size: var(--main-small-font-size);
  }

  .contenido-wrapper.ql-editor h2 {
    font-size: var(--h2-small-font-size);
  }

  .contenido-wrapper.ql-editor h3 {
    font-size: var(--h3-small-font-size);
  }
}