/*
Theme Name: Alma Cultura
Theme URI: https://www.almacultura.com
Author: Smart Sites
Description: Tema de bloques de Alma Cultura. Espiritualidad desde el arte, la historia y la ciencia.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
Version: 0.2.0
License: GNU General Public License v2 or later
Text Domain: almacultura
*/

/* =========================================================================
   Presupuesto de CSS no expresable como control de bloque.
   Regla del metodo: aqui va SOLO lo que ningun bloque expone. Si esto crece,
   el diseno se esta apoyando en CSS que el cliente no puede editar.

   Los breakpoints y sus valores NO son derivados: salen de responsive.css
   del comp aprobado (1180 / 1024 / 720 / 420).
   ========================================================================= */

img, svg, video { max-width: 100%; }

/* --- Emparejamiento tamano / interlineado ---------------------------------
   theme.json no empareja tamano e interlineado: va por clase de preset.      */

.has-display-alto-font-size,
.has-display-font-size,
.has-display-bajo-font-size { line-height: var(--wp--custom--line-height--display); }

.has-titulo-mayor-font-size,
.has-titulo-font-size,
.has-titulo-menor-font-size { line-height: var(--wp--custom--line-height--titulo); }

.has-subtitulo-font-size,
.has-subtitulo-menor-font-size,
.has-rotulo-font-size,
.has-rotulo-menor-font-size { line-height: var(--wp--custom--line-height--subtitulo); }

.has-cuerpo-grande-font-size,
.has-cuerpo-font-size,
.has-cuerpo-chico-font-size { line-height: var(--wp--custom--line-height--cuerpo); }

.has-auxiliar-font-size,
.has-auxiliar-chico-font-size,
.has-meta-font-size { line-height: var(--wp--custom--line-height--compacto); }

/* Antetitulo: siempre en versal con su tracking propio. */
.has-antetitulo-font-size {
  line-height: var(--wp--custom--line-height--compacto);
  letter-spacing: var(--wp--custom--tracking--antetitulo);
  text-transform: uppercase;
}

/* --- Logo: la imagen en linea suma la caja del interlineado ---------------- */
.logo a,
.logo img,
.wp-block-site-logo img { display: block; }

/* --- Cabecera pegajosa ----------------------------------------------------
   En la parte de plantilla, no en el grupo interior: pegada al grupo no se
   despega del envoltorio, que mide lo mismo.                                 */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--wp--custom--velo-header);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wp--preset--color--borde-tenue);
}

/* --- Empujar un hijo de una fila flex (el grupo no expone margen lateral) -- */
.empuja-derecha { margin-left: auto; }

/* --- Columnas iguales: el hijo «fill» del core solo pone flex-grow --------- */
.columnas-iguales > * { flex-basis: 0%; }

/* --- Estados que el editor no modela -------------------------------------- */
.wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--texto-navegacion);
}
.current-menu-item .wp-block-navigation-item__content.wp-block-navigation-item__content {
  color: var(--wp--preset--color--brand-terracota);
}
:where(a, button):focus-visible {
  outline: 2px solid var(--wp--preset--color--brand-terracota);
  outline-offset: 3px;
}

/* --- Anchos de lectura y alto minimo de boton ----------------------------- */
.ancho-lectura { max-width: 62ch; }
.wp-block-button__link { min-height: 44px; }

/* --- Color por tema editorial --------------------------------------------
   El plugin pone la clase tema-<slug> en cada entrada (filtro post_class) y
   aqui se resuelve el color: el markup declara el tema, el CSS elige.        */
.tema-astrologia { --tema-actual: var(--wp--preset--color--tema-astrologia); }
.tema-oraculos   { --tema-actual: var(--wp--preset--color--tema-oraculos); }
.tema-historia   { --tema-actual: var(--wp--preset--color--tema-historia); }
.tema-personajes { --tema-actual: var(--wp--preset--color--tema-personajes); }
.tema-arte       { --tema-actual: var(--wp--preset--color--tema-arte); }
.tema-ciencia    { --tema-actual: var(--wp--preset--color--tema-ciencia); }

.tarjeta-tema .icono-tema,
.pastilla-tema { color: var(--tema-actual, var(--wp--preset--color--brand-terracota)); }

/* Pastillas de core/post-terms: el bloque estiliza el contenedor, no el item. */
.pastillas a { color: var(--tema-actual, var(--wp--preset--color--brand-terracota)); }
.pastillas .wp-block-post-terms__separator { display: none; }

/* =========================================================================
   Breakpoints — valores del comp aprobado (responsive.css del diseno).
   ========================================================================= */

/* ---------- Tablet grande: 1180 ---------- */
@media (max-width: 1180px) {
  .rejilla-temas .wp-block-post-template,
  .rejilla-temas .wp-block-term-template { --columnas: 3; }
  .nav-principal { gap: 12px; font-size: var(--wp--preset--font-size--auxiliar); }
}

/* ---------- Tablet: 1024 ---------- */
@media (max-width: 1024px) {
  html:root body {
    --wp--style--root--padding-left: 30px;
    --wp--style--root--padding-right: 30px;
    --wp--custom--section-gap: 64px;
  }

  /* El buscador se cae; la navegacion se vuelve deslizable, no hamburguesa. */
  .cabecera-busqueda { display: none; }
  .nav-principal .wp-block-navigation__container {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav-principal .wp-block-navigation__container::-webkit-scrollbar { display: none; }

  /* Dos columnas pasan a una, y lo pegajoso deja de serlo. */
  .cols-2 { flex-direction: column; }
  .aside { position: static; top: auto; }

  h1, .has-display-alto-font-size, .has-display-font-size, .has-display-bajo-font-size {
    font-size: clamp(38px, 6vw, 60px);
  }
  h2, .has-titulo-mayor-font-size, .has-titulo-font-size {
    font-size: clamp(26px, 3.6vw, 38px);
  }
}

/* ---------- Movil: 720 ---------- */
@media (max-width: 720px) {
  html:root body {
    --wp--style--root--padding-left: 20px;
    --wp--style--root--padding-right: 20px;
    --wp--custom--section-gap: 48px;
  }

  /* La barra de avisos deja solo las redes, centradas. */
  .barra-avisos .aviso-texto { display: none; }
  .barra-avisos { justify-content: center; }

  /* La navegacion baja a una fila propia, a ancho completo. */
  header.wp-block-template-part .cabecera { flex-wrap: wrap; row-gap: 12px; }
  .nav-principal { order: 3; width: 100%; padding-bottom: 4px; gap: 18px; }

  /* Todo lo que era rejilla pasa a una columna. */
  .rejilla-temas .wp-block-post-template,
  .rejilla-temas .wp-block-term-template,
  .listado .wp-block-post-template { --columnas: 1; }

  /* Las filas de listado apilan su contenido. */
  .fila-articulo, .fila-agenda { flex-direction: column; align-items: flex-start; row-gap: 8px; }
  .fila-articulo .wp-block-post-featured-image,
  .miniatura { width: 100%; height: 180px; }

  h1, .has-display-alto-font-size, .has-display-font-size, .has-display-bajo-font-size {
    font-size: clamp(32px, 9vw, 42px);
  }
  h2, .has-titulo-mayor-font-size, .has-titulo-font-size {
    font-size: clamp(24px, 6.5vw, 30px);
  }
  h3, .has-titulo-menor-font-size, .has-subtitulo-font-size {
    font-size: clamp(19px, 5vw, 22px);
  }

  .campo-correo { flex-wrap: wrap; row-gap: 8px; padding: 12px; }
  .campo-correo .wp-block-button { width: 100%; }
}

/* ---------- Movil pequeno: 420 ---------- */
@media (max-width: 420px) {
  .wp-block-site-title { font-size: 22px; }
  .cabecera-cta .wp-block-button__link {
    padding: 9px 14px;
    font-size: var(--wp--preset--font-size--meta);
  }
}