/* ===== PROSA DEL CONTENIDO =====
 * Estilos de lo que escribe el editor: encabezados, parrafos, listas,
 * enlaces, imagenes, bloques de codigo, citas y tablas.
 *
 * Hoja compartida porque la misma prosa sale en dos vistas que cargan hojas
 * distintas: la entrada individual (single.css) y la pagina (page.css).
 *
 * El prefijo con :is() conserva la especificidad EXACTA del selector original
 * --un elemento mas tres clases-- porque :is() toma la de su argumento mas
 * especifico. Esa especificidad no es decorativa: vence al Kit de Fuentes
 * Globales de Elementor, que declara .elementor-kit-2014 a { font-family: Inter }
 * y se encola despues del tema.
 *
 * La clase .fz-prose la llevan el contenido de la entrada y el de la pagina.
 * Las reglas de MAQUETA se quedan en su hoja: .fz-single__content conserva su
 * orden y su min-width en movil, que son del sidebar y no de la prosa.
 *
 * Los tokens siguen llamandose --fz-single-*: se declararon para la entrada y
 * ahora los comparten las dos vistas. Renombrarlos es un cambio mecanico
 * aparte, no de esta hoja. */

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose {
  color: var(--fz-text);
  font-family: var(--fz-font-body);
  font-size: var(--fz-single-copy-size);
  font-weight: var(--fz-font-weight-regular);
  line-height: var(--fz-single-copy-line);
  overflow-wrap: anywhere;
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :not(.elementor) {
  margin-top: 0;
  margin-bottom: var(--fz-single-stack-gap);
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :last-child {
  margin-bottom: 0;
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > .elementor {
  margin: 0;
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :where(h2, h3, h4, h5, h6),
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose :where(.wp-block-heading) {
  color: var(--fz-blue);
  font-family: var(--fz-font);
  font-size: var(--fz-single-heading-size);
  font-weight: var(--fz-font-weight-semibold);
  line-height: var(--fz-single-heading-line);
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :where(h3, h4, h5, h6) {
  font-size: var(--fz-font-size-xl);
  line-height: var(--fz-line-height-xl);
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :where(p, ul, ol),
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose :where(.wp-block-list) {
  color: var(--fz-text);
  font: inherit;
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :where(ul, ol),
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose :where(.wp-block-list) {
  padding-left: var(--fz-single-list-indent);
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose li + li {
  margin-top: var(--fz-control-column-gap);
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose strong,
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose b {
  font-weight: var(--fz-font-weight-semibold);
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose a {
  color: var(--fz-blue);
  text-decoration-thickness: var(--fz-control-border);
  text-underline-offset: var(--fz-focus-offset);
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose :where(img, video, iframe) {
  max-width: 100%;
  height: auto;
}

/* Bloques de codigo: 3 entradas los llevan y desbordarian igual que las tablas. */
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose :where(pre) {
  max-width: 100%;
  overflow-x: auto;
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :where(blockquote, .wp-block-quote, .wp-block-pullquote) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fz-single-stack-gap);
  padding: var(--fz-single-callout-padding);
  border: 0;
  border-radius: var(--fz-radius-3xl);
  background: var(--fz-blue-soft);
  text-align: center;
}

/*
 * La comilla va por CSS y no en el marcado porque estas citas las escribe
 * quien redacta en el editor: un <blockquote> suelto tiene que salir ya con
 * ella sin que nadie anade nada dentro.
 */
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :where(blockquote, .wp-block-quote, .wp-block-pullquote)::before {
  content: "";
  width: var(--fz-quote-mark-width);
  height: var(--fz-quote-mark-height);
  background: url("../images/single/quote.svg") center / contain no-repeat;
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose > :where(blockquote, .wp-block-quote, .wp-block-pullquote) > :last-child {
  margin-bottom: 0;
}

/*
 * El desplazamiento va en la envoltura que anade inc/content.php, NO en la
 * tabla: el ancho minimo y el overflow no pueden vivir en el mismo elemento,
 * porque nada se desplaza dentro de su propio ancho forzado. Aplica en todos
 * los anchos; en escritorio la tabla cabe y el desplazamiento no aparece.
 */
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose :where(.wp-block-table, .fz-table-scroll) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose .fz-table-scroll > table {
  min-width: var(--fz-single-table-min);
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  color: var(--fz-text);
  font: inherit;
}

/*
 * Cabecera de la tabla: la fila de titulos entera en negrita sobre el azul
 * oscuro de marca. No se alterna por columna.
 */
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose thead th,
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose tr:first-child th {
  padding: var(--fz-single-table-head-padding);
  border: 0;
  background: var(--fz-blue-dark);
  color: var(--fz-text-inverse);
  font-family: var(--fz-font);
  font-weight: var(--fz-font-weight-semibold);
  text-align: left;
}

/*
 * Primera columna en negrita y con fondo SOLO cuando la celda es <th>. Si la
 * tabla usa <td> en esa columna se queda como una celda normal, que es lo
 * acordado: el editor decide marcandola como encabezado de fila.
 */
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose tbody th {
  padding: var(--fz-single-table-cell-padding);
  border: 0;
  border-bottom: var(--fz-control-border) solid var(--fz-field-border);
  background: var(--fz-table-surface-alt);
  color: var(--fz-heading);
  font-family: var(--fz-font);
  font-weight: var(--fz-font-weight-semibold);
  text-align: left;
  vertical-align: top;
}

body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose td {
  padding: var(--fz-single-table-cell-padding);
  border: 0;
  border-bottom: var(--fz-control-border) solid var(--fz-field-border);
  background: var(--fz-chip-surface);
  vertical-align: top;
}

/* Las filas se alternan, no las columnas. */
body:is(.single-post, .page) :is(.fz-single, .fz-page, .fz-author) .fz-prose tbody tr:nth-child(even) td {
  background: var(--fz-table-surface-alt);
}