/* custom.css — FOMO Creativo. Ajustes aditivos sobre el CSS del tema (gutenberg/theme).
   No rompe el layout del tema (bloques wp-block-* conservan su centrado). */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { margin: 0; -webkit-font-smoothing: antialiased; }

.wp-site-blocks { max-width: 100%; }

/* Imágenes responsive dentro del contenido */
.wp-block-image img, .entry-content img, .wp-block-post-content img { height: auto; max-width: 100%; }

/* --- Videos de YouTube: ocupan el ancho completo del contenedor (no el width fijo del HTML) --- */
.wp-block-embed__wrapper > iframe,
.wp-block-embed iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
}

/* --------------------------------------------------------------------------
   ANCHO DE LECTURA EN LAS PAGINAS DE EPISODIO
   --------------------------------------------------------------------------
   Los posts (body.fomo-post) no traen el wrapper del tema que limita el ancho
   de lectura: el contenido del volcado es un fragmento suelto. Sin esto, el
   video y el texto ocupan los 1440px del viewport mientras el resto del sitio
   se limita a 740px.

   OJO: el limite va SOLO en body.fomo-post. Aplicarlo al layout general le
   metia padding a TODAS las paginas (home, noticias, recursos, etc.), que ya
   vienen con su propio contenedor del tema.
   -------------------------------------------------------------------------- */
body.fomo-post .wp-block-embed,
body.fomo-post .wp-block-image,
body.fomo-post > .wp-site-blocks > #contenido > p,
body.fomo-post .fomo-articulo,
body.fomo-post .fomo-puntos-clave {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/* El video necesita ademas un tope propio: el iframe se estira al 100% de su
   figure, y el figure ya esta limitado arriba. */
body.fomo-post .wp-block-embed__wrapper {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/* Videos verticales (Shorts / Reels): conservan su formato 9:16 en vez de
   deformarse al 16:9 de la regla anterior.
   OJO: el limite de ancho debe aplicarse SOLO a los verticales. Un selector
   generico tipo `:has(> iframe[width][height])` matchea TODOS los embeds de
   YouTube (todos llevan width/height) y los encogia a 420px. */
.wp-block-embed.wp-embed-aspect-9-16 iframe,
.wp-block-embed.is-type-video.wp-embed-aspect-9-16 iframe {
  aspect-ratio: 9 / 16;
  width: 100% !important;
  max-width: min(100%, 420px);
  margin-left: auto;
  margin-right: auto;
}

/* Tablas con scroll horizontal */
.wp-block-table { overflow-x: auto; }

/* skip-link */
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 1000; background: #fff; padding: 8px 12px; color: #222; }
.skip-link:focus { left: 8px; }

/* ==========================================================================
   NAVEGACIÓN DEL TEMA (ajustes)
   ========================================================================== */

/* ==========================================================================
   SUBMENÚ: evita el "hueco" entre el enlace y el desplegable al hacer hover.
   (solo escritorio: el prefijo :not(.is-menu-open) lo mantiene fuera del móvil)
   ========================================================================== */
.wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__submenu-container {
  margin-top: 0;
  padding-top: 8px;               /* zona para no perder el hover al bajar el mouse */
}
.wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* --------------------------------------------------------------------------
   SUBMENÚ CERRADO POR DEFECTO (arreglo importante)
   --------------------------------------------------------------------------
   Orden de hojas en nuestra build:  gutenberg.css  →  theme.css  →  custom.css
   `theme.css` es el CSS "core" de Gutenberg (wp-block-library) e incluye:
     .wp-block-navigation .has-child .wp-block-navigation__submenu-container{
        ... display:flex; flex-direction:column; opacity:0; position:absolute; z-index:2}
   Como theme.css va DESPUÉS de gutenberg.css, ese display:flex gana sobre el
   `display:none` que define Ollie en gutenberg.css:
     .wp-block-navigation .has-child .wp-block-navigation__submenu-container{display:none}
   Resultado: en MÓVIL el submenú de "Recursos" aparecía siempre desplegado
   (Entrevistas / Libros / Casos a la vista) en vez de quedar detrás de la
   flecha, y en ESCRITORIO el :hover no lo abría porque ya estaba en flex y
   con opacity:0.
   Reponemos el display:none con la MISMA especificidad que la regla del core y
   con la misma que la del tema, y lo abrimos con las dos vías que usa Ollie:
   el toggle con aria-expanded y el hover/focus del item padre.
   -------------------------------------------------------------------------- */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  display: none;
}

.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation-submenu,
.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  display: flex;
}

/* Apertura en escritorio por hover/focus del item padre.
   Estas reglas llevan obligatoriamente el prefijo :not(.is-menu-open) para que
   NO se apliquen nunca dentro del menú móvil abierto (allí el submenú lo
   controla el toggle con aria-expanded). */
.wp-block-navigation__responsive-container:not(.is-menu-open)
  .has-child.open-on-hover-click:hover > .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container:not(.is-menu-open)
  .has-child.open-on-hover-click:focus-within > .wp-block-navigation__submenu-container {
  display: flex;
  visibility: visible;
  opacity: 1;
}

/* ==========================================================================
   PADDING RAÍZ
   El tema NO usa --wp--style--root--padding (no existe en gutenberg/theme.css):
   el espaciado lateral ya lo aporta cada bloque via "has-global-padding" +
   padding: var(--wp--preset--spacing--medium). Por eso el wrapper de página
   NO debe añadir padding propio: si lo añade, comprime el contenido
   (las columnas quedan más angostas y el texto salta de línea) y la página
   crece en altura respecto al original.
   ========================================================================== */
.fomo-page-wrap {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   HEADER: separación logo <-> menú
   ========================================================================== */
.site-header.wp-block-template-part { padding: 0; }
header.wp-block-group.alignfull.has-base-color { min-height: 0; }

/* En las secciones el <header> (logo + menú) viene envuelto en un
   <div class="wp-block-cover alignfull"> que no declara min-height. El CSS de
   gutenberg.css aplica `.wp-block-cover:not(.has-aspect-ratio){min-height:430px
   !important}` y ese cover se comía 430px de alto solo para el menú.
   Anulamos el min-height únicamente en los covers que contienen un header. */
.wp-block-cover:has(> .wp-block-cover__inner-container > header) {
  min-height: 0 !important;
}

/* Header en UNA sola fila: logo + links + botones.
   Estructura real (los botones van DENTRO del nav, no como hermanos):
     header > div.space-between (flex)
                ├── .wp-block-site-logo
                └── nav.wp-block-navigation
                      └── .responsive-container
                            └── .responsive-container-content (flex fila)
                                  ├── ul.wp-block-navigation__container  (links)
                                  └── .wp-block-buttons                   (botones)
   Por eso NO hay que tocar el nav: el reparto lo hacen el flex del header
   (logo -> nav) y el flex interno de container-content (links + botones, gap 32px).
   Forzar margin-left:auto en el nav rompia ese reparto. */
header.wp-block-group .is-content-justification-space-between {
  flex-wrap: nowrap;
  align-items: center;
}

/* ==========================================================================
   MENÚ RESPONSIVE ABIERTO (móvil)
   ========================================================================== */
/* Geometría medida sobre el sitio original (fomocreativo.com) con el menú
   abierto a viewport CSS de 489px:
     .responsive-container          padding 24px, ocupa todo el ancho
     .responsive-dialog             x=24  w=441  (= 489 - 24 - 24)
       .responsive-container-content  padding-top 56px (el botón cerrar flota encima)
         ul.wp-block-navigation__container  x=24  w=441  padding 0, sin sangría
   El padding lateral de 24px (= --wp--preset--spacing--medium) se aplica UNA
   sola vez, en el contenedor raíz. Los niveles internos quedan a 0: si además
   el <ul> añade sangría propia, los enlaces de primer nivel se desalinean
   respecto a los de segundo nivel y al botón de cerrar. */
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
  padding: var(--wp--preset--spacing--medium, 24px);
}
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open.has-modal-open .wp-block-navigation__container {
  padding-left: 0;
  padding-right: 0;
}

/* Links del menú: color correcto (primario) en desktop */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item__label {
  color: var(--wp--preset--color--primary, #e93ea3);
}
.wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container .current-menu-item > a,
.wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--secondary, #3b5570) !important;
  font-weight: 600;
}

/* ==========================================================================
   HERO / COVER con video de fondo (home)
   El tema pintaba el overlay con el color "main" (amarillo #fff500) al 80%
   de opacidad, lo que tapaba casi por completo el video de fondo y dejaba
   un amarillo plano. Reducimos la opacidad para que se vea el video.
   Solo afecta a los covers que tienen un <video> de fondo (el hero de home).
   ========================================================================== */
.wp-block-cover:has(> video.wp-block-cover__video-background)
  > .wp-block-cover__background.has-background-dim-80 {
  opacity: 0.78;
}

/* Texto del hero: contraste sobre el video. Mantener la base (blanco) visible. */
.wp-block-cover:has(> video.wp-block-cover__video-background)
  .wp-block-cover__inner-container {
  color: var(--wp--preset--color--base, #fff);
}
.wp-block-cover:has(> video.wp-block-cover__video-background)
  .wp-block-cover__inner-container h1,
.wp-block-cover:has(> video.wp-block-cover__video-background)
  .wp-block-cover__inner-container h2,
.wp-block-cover:has(> video.wp-block-cover__video-background)
  .wp-block-cover__inner-container h3 {
  color: var(--wp--preset--color--base, #fff);
}

/* --------------------------------------------------------------------------
   "En Directo: Lunes, 18hs de Argentina (GMT -3)" en NEGRO (home y /programa/)
   --------------------------------------------------------------------------
   El hero es un cover amarillo (color "main") y el tema le pone
   `has-base-color` -> todo el inner-container hereda blanco. Sobre el amarillo
   #fff500 el blanco es ilegible, y asi salia esta linea.
   La forzamos a negro anclando por la clase del <body>: body.fomo-home en la
   home (index.astro) y body.page-programa en /programa/ ([slug].astro).
   El selector es acotado a proposito: no toca el resto del hero (ni el h1
   "Streaming", ni los botones, ni los iconos sociales).
   -------------------------------------------------------------------------- */
body.fomo-home .wp-block-cover .wp-block-cover__inner-container
  .wp-block-columns .wp-block-paragraph,
body.page-programa .wp-block-cover .wp-block-cover__inner-container
  .wp-block-columns .wp-block-paragraph {
  color: #000;
}
body.fomo-home .wp-block-cover .wp-block-cover__inner-container
  .wp-block-columns .wp-block-paragraph a,
body.page-programa .wp-block-cover .wp-block-cover__inner-container
  .wp-block-columns .wp-block-paragraph a {
  color: #000;
}

/* ==========================================================================
   FOOTER: enlaces en blanco
   El footer es rosa (primary) con texto base (blanco). Los <a> internos
   ("Política de Privacidad", "Contactar") heredaban el color de las reglas
   .wp-elements-N de cada pagina, quedando con poco contraste. Los forzamos a
   blanco, incluidos hover/focus/visited.
   ========================================================================== */
.site-footer a,
.site-footer a:link,
.site-footer a:visited,
.site-footer .wp-block-paragraph a {
  color: var(--wp--preset--color--base, #fff);
}
.site-footer a:hover,
.site-footer a:focus,
.site-footer .wp-block-paragraph a:hover,
.site-footer .wp-block-paragraph a:focus {
  color: var(--wp--preset--color--base, #fff);
  text-decoration: underline;
}

/* ==========================================================================
   BOTÓN "ABRIR MENÚ" (móvil, esquina superior derecha)
   El tema le da caja: padding 4px + border-radius 3px + fondo primary
   (rosa #e93ea3) y el icono en color "main" (amarillo). Medido sobre el
   original: caja 32x32, svg 24x24 amarillo.
   Nuestro gutenberg.css traía una segunda definición del mismo selector
   (background tertiary/color main) que ganaba por orden, y además el CSS que
   quedó del <style> inline de las páginas perdía frente a ella, así que el
   botón salía sin caja (24x24, fondo transparente) y con el icono en rosa.
   Restauramos aquí los valores medidos en el original. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  padding: 4px;
  border-radius: 3px;
  background: var(--wp--preset--color--primary, #e93ea3);
  color: var(--wp--preset--color--main, #fff500);
}
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
  fill: currentColor;
}

/* ==========================================================================
   PAGINACIÓN DE /programa/
   El listado muestra 5 programas por página (igual que el original) y usa el
   bloque de paginación del tema Ollie:
     nav.wp-block-query-pagination > .wp-block-query-pagination-numbers
   El CSS del tema ya define el layout flex, pero como el bloque llegaba vacío
   (la extracción no traía la paginación) nunca se estiló. Aquí damos el
   acabado: número activo en rosa, resto en gris, y hover subrayado.
   ========================================================================== */
.wp-block-query-pagination {
  margin-top: var(--wp--preset--spacing--large, 40px);
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.wp-block-query-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 5px;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small, 0.9rem);
  text-decoration: none;
  color: var(--wp--preset--color--secondary, #3b5570);
  transition: background-color .2s ease, color .2s ease;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination .page-numbers:focus {
  background: color-mix(in srgb, var(--wp--preset--color--primary, #e93ea3), transparent 88%);
  color: var(--wp--preset--color--primary, #e93ea3);
  text-decoration: none;
}

/* Página actual */
.wp-block-query-pagination .page-numbers.current {
  background: var(--wp--preset--color--primary, #e93ea3);
  color: var(--wp--preset--color--base, #fff);
  cursor: default;
}

/* Separador de rango (…) */
.wp-block-query-pagination .page-numbers.dots {
  min-width: 24px;
  background: transparent;
  color: var(--wp--preset--color--secondary, #3b5570);
  cursor: default;
}

/* Anterior / Siguiente */
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 5px;
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small, 0.9rem);
  text-decoration: none;
  color: var(--wp--preset--color--primary, #e93ea3);
  border: 2px solid var(--wp--preset--color--primary, #e93ea3);
  transition: background-color .2s ease, color .2s ease;
}

.wp-block-query-pagination .wp-block-query-pagination-previous:hover,
.wp-block-query-pagination .wp-block-query-pagination-next:hover,
.wp-block-query-pagination .wp-block-query-pagination-previous:focus,
.wp-block-query-pagination .wp-block-query-pagination-next:focus {
  background: var(--wp--preset--color--primary, #e93ea3);
  color: var(--wp--preset--color--base, #fff);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   INTERLINKING — seccion "Seguí leyendo" al pie de cada post
   --------------------------------------------------------------------------
   La genera [slug].astro con las paginas relacionadas por tema. Va fuera del
   contenido del volcado, asi que necesita su propio estilo.
   -------------------------------------------------------------------------- */
.fomo-relacionados {
  max-width: 1140px;
  margin: 48px auto 0;
  padding: 24px var(--wp--preset--spacing--medium, 24px) 0;
  border-top: 1px solid #DADEE3;
}

/* --------------------------------------------------------------------------
   SEPARACION CON EL FOOTER
   --------------------------------------------------------------------------
   El ultimo bloque de texto quedaba pegado al footer. Dos causas:
     1. el contenido del post no tiene margen inferior propio;
     2. el footer del tema no tiene padding superior.
   Se corrigen las dos, asi vale para todas las paginas y no solo para las que
   tienen articulo generado.
   -------------------------------------------------------------------------- */
.fomo-relacionados {
  margin-bottom: 72px;
}

/* Aireantes del articulo cuando es lo ultimo (paginas sin "Seguí leyendo"). */
.fomo-articulo:last-child,
.fomo-puntos-clave:last-child {
  margin-bottom: 72px;
}

/* El footer viene envuelto en <footer class="site-footer"><footer class=
   "wp-block-group">; el padding va en el interno, que es el que tiene fondo. */
footer.site-footer > .wp-block-group:first-child {
  padding-top: var(--wp--preset--spacing--large, 48px) !important;
}

.fomo-relacionados h2 {
  font-size: 22px;
  margin: 0 0 16px;
  color: var(--wp--preset--color--primary, #e93ea3);
}

.fomo-relacionados ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.fomo-relacionados li {
  border: 1px solid #DADEE3;
  border-radius: 5px;
  padding: 14px 16px;
  background: var(--wp--preset--color--base, #fff);
}

.fomo-relacionados li a {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  color: var(--wp--preset--color--secondary, #3b5570);
}

.fomo-relacionados li a:hover,
.fomo-relacionados li a:focus {
  color: var(--wp--preset--color--primary, #e93ea3);
  text-decoration: underline;
}

.fomo-relacionados .fomo-rel-desc {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #5b6b7c;
  /* recorta a 2 lineas para que las tarjetas queden parejas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   ARTICULO GENERADO — bloques de contenido ampliado (fomo-articulo,
   fomo-puntos-clave, fomo-resumen)
   --------------------------------------------------------------------------
   El fragmento del volcado NO trae contenedor propio: son elementos sueltos
   que Astro mete dentro del layout. Por eso hay que acotar el ancho a mano.

   OJO CON EL VALOR: el tema limita el texto de lectura a 740px, que es el
   ancho que ya tienen los parrafos originales del volcado. Si ponemos 1140px
   (el ancho "wide" que usa el header y "Seguí leyendo") el texto generado se
   ve mas ancho que el resto de la pagina. Se usa 740px para que coincida.
   -------------------------------------------------------------------------- */
.fomo-articulo,
.fomo-puntos-clave {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
  /* separacion con el contenido de arriba */
  margin-top: 40px;
}

/* El texto de estos bloques hereda el ancho del contenedor. En mobile el
   max-width no aplica y hay que evitar que toque los bordes. */
@media (max-width: 820px) {
  .fomo-articulo,
  .fomo-puntos-clave {
    padding-left: var(--wp--preset--spacing--medium, 24px);
    padding-right: var(--wp--preset--spacing--medium, 24px);
  }
}

.fomo-articulo h2,
.fomo-puntos-clave h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 36px 0 12px;
}

.fomo-articulo h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 22px 0 6px;
}

.fomo-articulo p,
.fomo-puntos-clave li {
  font-size: 17px;
  line-height: 1.65;
}

.fomo-articulo > h2:first-of-type {
  margin-top: 24px;
}

.fomo-puntos-clave {
  border-left: 4px solid var(--wp--preset--color--primary, #e93ea3);
  background: var(--wp--preset--color--tertiary, #F8F7F9);
  border-radius: 4px;
  padding: 18px 22px;
}

.fomo-puntos-clave h2 {
  margin-top: 0;
}

.fomo-puntos-clave ul {
  margin: 0;
  padding-left: 22px;
}

.fomo-puntos-clave li {
  margin-bottom: 8px;
}

.fomo-resumen {
  background: var(--wp--preset--color--tertiary, #F8F7F9);
  border-radius: 4px;
  padding: 14px 18px;
  font-size: 17px;
  line-height: 1.6;
}

@media print {
  .wp-site-blocks > *:last-child { border-top: none; }
  .fomo-relacionados { display: none; }
}