/* 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;
}

/* 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;
}

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