/*
Theme Name: Umivale Headless
Theme URI: https://umivale.peninsula.co
Author: Peninsula
Description: Tema mínimo para uso headless. La UI vive en apps/frontend (Nuxt). Este tema solo expone bloques y endpoints REST/GraphQL.
Version: 0.1.0
Requires at least: 6.4
Requires PHP: 8.2
License: MIT
Text Domain: umivale
*/

/* --------------------------------------------------------------------------
 * Estilos base del tema (PoC Gutenberg).
 * Mantener mínimo: la mayor parte del estilo vive en cada bloque.
 * -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--wp--preset--font-family--lato, "Lato", system-ui, sans-serif);
  color: #3C4858;
  line-height: 1.6;
}

a { color: #124D91; }

/* NOTA: el chrome del tema (header + footer) vive en assets/css/theme.css. */

/* --- Contenido / anchos --------------------------------------------------- */
/* Sin padding inferior: el espacio antes del footer lo controla el footer. */
.site-content { padding-bottom: 0; }

.page__header {
  max-width: 1024px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 0;
}
.page__title {
  color: #124D91;
  font-size: 2.25em;
  font-weight: 700;
  text-align: center;
  margin: 0;
}

/* the_content() emite los bloques de nivel superior aquí. Los bloques sin
 * alineación quedan acotados a contentSize; alignwide/alignfull se ensanchan. */
.page__content > * {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.page__content > .alignwide {
  max-width: 1380px;
}
.page__content > .alignfull {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* WordPress no encola wp-includes/css/classic-themes.css (que trae el float
   de .alignleft/.alignright) cuando el tema tiene theme.json — caso de este
   tema. Sin esto, las imágenes con align izquierda/derecha (core/image,
   incluidas las generadas por uv_richtext_blocks() para el cuerpo de
   artículos) no flotan junto al texto. Reglas mínimas equivalentes. */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* El padding lateral de ".page__content > *" es para bloques de ancho
   completo (texto/headings); en una imagen flotante solo agranda su caja
   sin motivo. */
.page__content > .alignleft,
.page__content > .alignright {
  padding-left: 0;
  padding-right: 0;
}

/* ── Mismo ancho de contenido dentro del editor (canvas de Gutenberg) ──────
 * theme.json declara contentSize/wideSize, pero el editor solo aplica ese
 * ancho automáticamente en temas de bloques (FSE, con <!-- wp:post-content -->);
 * este es un tema clásico (page.php + the_content()), así que sin esto el
 * área de edición ocupa el ancho completo de la columna del admin.
 *
 * A diferencia de ".page__content > *" (que centra cada HIJO individualmente
 * vía margin:auto, dejando que .alignfull se extienda a ancho completo), aquí
 * el padding/ancho van en el CONTENEDOR mismo: "margin:auto" no centra
 * elementos flotados (regla estándar de CSS) — un <img align left/right>
 * dentro de un hijo centrado individualmente igual queda pegado al borde
 * real del contenedor padre, no al borde "centrado". Poniendo el límite en el
 * contenedor, el float se posiciona contra ese borde ya correcto.
 * Contrapartida aceptada: dentro del editor (no en el frontend, que no usa
 * esta regla) alignwide/alignfull no se extienden más allá de 1024px — no
 * afecta el caso de uso real (cuerpos de artículo con imágenes flotantes). */
.editor-styles-wrapper .is-root-container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* <mark class="has-inline-color"> hereda el fondo amarillo por defecto del
   navegador — mismo reset que el frontend (assets/css/theme.css), pero este
   archivo es el editor style (add_editor_style()) y corre dentro del iframe
   del editor, un stylesheet aparte que no incluye theme.css. Sin body class
   acá: el editor no tiene body.page-bare__content, solo el iframe del canvas. */
mark.has-inline-color { background: none; }