/* --- Navegacion --- */
.catedra-unesco-nav {
  width: 100%;
  max-width: 100%;
}
.catedra-unesco-nav.is-sticky {
  position: sticky;
  top: 0;
  z-index: var(--wp--custom--header--z-index);
}
.catedra-unesco-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--wp--custom--header--gap);
  min-height: var(--wp--custom--header--row-min-height);
  margin-inline: auto;
  padding-inline: var(--wp--style--root--padding-left, 20px);
  background-color: inherit;
}
/* El tema puede estrechar el header con custom.header.contentSize. */
.catedra-unesco-nav.is-width-content .catedra-unesco-nav__inner { max-width: var(--wp--custom--header--content-size, var(--wp--style--global--content-size)); }
.catedra-unesco-nav.is-width-full .catedra-unesco-nav__inner { max-width: none; }

/* Logo: lo dimensiona el tema, no el control de ancho del bloque. */
.catedra-unesco-nav .wp-block-site-logo { flex: 0 0 auto; margin: 0; }
.catedra-unesco-nav .wp-block-site-logo img {
  height: var(--wp--custom--header--logo-height);
  width: auto;
  max-width: none;
}

/* Dos logos: linea vertical fina entre ellos. */
.catedra-unesco-nav .wp-block-group > .wp-block-image { margin: 0; }
.catedra-unesco-nav .wp-block-group > .wp-block-image + .wp-block-image {
  padding-left: var(--wp--custom--header--gap);
  border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

/* Menu: hereda color y fondo para que el overlay movil salga igual. */
.catedra-unesco-nav .wp-block-navigation {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  background-color: inherit;
}
.catedra-unesco-nav .wp-block-navigation__container { gap: var(--wp--custom--header--menu-gap, var(--wp--custom--header--gap)); }

/* El <ul> del menu cuelga cuatro divs por debajo del <nav> (responsive-container
   > responsive-close > responsive-dialog > responsive-container-content) y lee
   justify-content de la custom property --navigation-layout-justify. Usamos esa
   variable de core en lugar de apuntar al <ul>: llega a cualquier profundidad y
   gana (0,3,0) a la regla que core emite cuando el propio bloque de navegacion
   trae justificacion propia (0,2,0). El <nav> es flex:1, asi que el reparto
   ocurre en el hueco entre el logo y el CTA, sin margenes ni posiciones. */
.catedra-unesco-nav.is-nav-left   .wp-block-navigation { --navigation-layout-justify: flex-start; }
.catedra-unesco-nav.is-nav-center .wp-block-navigation { --navigation-layout-justify: center; }
.catedra-unesco-nav.is-nav-right  .wp-block-navigation { --navigation-layout-justify: flex-end; }

/* Logo al final: [menu][buscador] ... [LOGO]. El menu deja de estirarse para
   que el buscador quede pegado a el y el hueco sobrante lo tome el logo. */
.catedra-unesco-nav__inner:has(> .wp-block-site-logo:last-child) .wp-block-navigation { flex-grow: 0; }
.catedra-unesco-nav__inner > .wp-block-site-logo:last-child { margin-left: auto; }

/* Color de los enlaces: una sola fuente para todos los estados.
   render.php escribe --catedra-unesco-nav-color desde textColor y --catedra-unesco-nav-hover-color
   desde hoverColor; sin ellos valen los defaults de aqui, asi que ningun estado
   cae nunca en un color del navegador.

   Los selectores repiten clase para ganarle a core, que fuerza #000 en submenus
   y en el overlay movil cuando el <nav> no lleva has-text-color: nuestro color
   vive en el div contenedor, no en el <nav>, asi que esa negacion siempre acierta.
     core submenu  .wp-block-navigation:not(.has-text-color) .__submenu-container  (0,3,0)
     core overlay  ...__responsive-container.is-menu-open:not(.disable-...)        (0,5,0)
   Y a :visited del navegador le gana cualquier regla de autor, sea cual sea. */
.catedra-unesco-nav {
  --catedra-unesco-nav-color: currentColor;
  --catedra-unesco-nav-hover-color: var(--catedra-unesco-nav-color);
}

/* Normal y visitado: identicos. */
.catedra-unesco-nav .wp-block-navigation a,
.catedra-unesco-nav .wp-block-navigation a:visited,
.catedra-unesco-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content,
.catedra-unesco-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:visited {
  color: var(--catedra-unesco-nav-color);
}

/* Submenus y overlay movil: los dos sitios donde core mete #000. */
.catedra-unesco-nav .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
.catedra-unesco-nav .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open {
  color: var(--catedra-unesco-nav-color);
}

/* Si el bloque define fondo, submenu y overlay lo toman de --catedra-unesco-nav-bg
   (render.php) en vez del blanco que core impone cuando el <nav> no lleva
   has-background. No sirve inherit: el submenu cuelga de un <li> transparente
   y saldria transparente sobre lo que haya debajo del header. Sin fondo
   definido se queda el blanco de core. El overlay necesita 0,6,0 para ganarle a
   .wp-block-navigation:not(.has-background) ...is-menu-open:not(.disable-...) */
.catedra-unesco-nav.has-background .wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container,
.catedra-unesco-nav.has-background .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.is-menu-open.is-menu-open {
  background-color: var(--catedra-unesco-nav-bg, inherit);
}

/* Hover y foco. Sin hoverColor, --catedra-unesco-nav-hover-color iguala al normal. */
.catedra-unesco-nav .wp-block-navigation a:hover,
.catedra-unesco-nav .wp-block-navigation a:focus,
.catedra-unesco-nav .wp-block-navigation a:focus-visible,
.catedra-unesco-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.catedra-unesco-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus,
.catedra-unesco-nav .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
  color: var(--catedra-unesco-nav-hover-color);
}

/* Foco visible: contorno en el color vigente, ningun color arbitrario. */
.catedra-unesco-nav .wp-block-navigation a:focus-visible,
.catedra-unesco-nav .wp-block-navigation button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Hamburguesa y flechas de submenu siguen al color de texto del bloque. */
.catedra-unesco-nav .wp-block-navigation__responsive-container-open,
.catedra-unesco-nav .wp-block-navigation__responsive-container-close { color: var(--catedra-unesco-nav-color); }
.catedra-unesco-nav .wp-block-navigation__submenu-icon svg { fill: currentColor; }


/* Buscador: pildora con la lupa dentro, en el color del menu.
   Se dobla la clase para ganarle al borde gris y al boton relleno que trae core
   (y a styles.elements.button del tema, que llega por .wp-element-button). */
.catedra-unesco-nav .wp-block-search { flex: 0 0 auto; margin: 0; }
.catedra-unesco-nav .wp-block-search .wp-block-search__inside-wrapper.wp-block-search__inside-wrapper {
  width: 176px;
  padding: 0 4px 0 14px;
  border: 1.5px solid var(--catedra-unesco-nav-color);
  border-radius: 999px;
  background: transparent;
  align-items: center;
}
/* El form hereda el font-size del bloque (20px): se fija al del menu. */
.catedra-unesco-nav .wp-block-search .wp-block-search__input.wp-block-search__input {
  min-width: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: var(--wp--custom--header--menu-font-size);
  line-height: 1.4;
}
:where(.catedra-unesco-nav .wp-block-search .wp-block-search__input) { font-family: inherit; }
.catedra-unesco-nav .wp-block-search .wp-block-search__input:focus { outline: none; }
.catedra-unesco-nav .wp-block-search .wp-block-search__inside-wrapper:focus-within {
  outline: 2px solid var(--catedra-unesco-nav-color);
  outline-offset: 2px;
}
.catedra-unesco-nav .wp-block-search .wp-block-search__button.wp-block-search__button {
  display: flex;
  margin: 0;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--catedra-unesco-nav-color);
  box-shadow: none;
}
.catedra-unesco-nav .wp-block-search .wp-block-search__button svg {
  width: 18px;
  height: 18px;
  min-width: 0;
  min-height: 0;
  fill: currentColor;
  stroke: currentColor; /* la lupa de core es muy fina; asi queda con trazo marcado */
  stroke-width: 1;
}

/* CTA */
.catedra-unesco-nav__cta { flex: 0 0 auto; }
.catedra-unesco-nav__cta .wp-element-button { display: inline-block; }
.catedra-unesco-nav.has-catedra-unesco-cta-color .catedra-unesco-nav__cta .wp-element-button { color: var(--catedra-unesco-cta-text); }

/* Movil: [LOGO] ... [hamburguesa]. El CTA se recoge, el menu lo abre core. */
@media (max-width: 599px) {
  .catedra-unesco-nav__inner {
    justify-content: space-between;
    min-height: auto;
    padding-block: 12px;
  }
  .catedra-unesco-nav .wp-block-site-logo img { height: var(--wp--custom--header--logo-height-mobile); }
  .catedra-unesco-nav .wp-block-navigation { flex: 0 0 auto; }
  .catedra-unesco-nav__cta { display: none; }
  .catedra-unesco-nav .wp-block-search { display: none; }
}