/*
 * Navegación: el marcado es el del bloque Navigation del núcleo (menús editables en
 * Apariencia → Editor → Navegación) y lleva además las clases de B3 (inc/menus.php),
 * así que el CSS aprobado se aplica tal cual. Aquí solo se neutralizan las reglas del
 * núcleo que ganan en especificidad a las de B3, con los mismos valores de B3.
 */

/* ---------- Cabecera ---------- */
.b3 .b3-nav .b3-nav__list {
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(0.25rem, 1.1vw, 1.25rem);
}

.b3 .b3-nav .b3-nav__link {
  display: inline-flex;
}

/* Services: el núcleo pone el chevron fuera del botón; se coloca dentro, como en B3. */
.b3 .b3-nav .wp-block-navigation-submenu__toggle.b3-nav__link {
  padding: 0 calc(0.7rem + 16px + 0.35rem) 0 0.7rem;
  font-size: 0.9375rem;
  font-weight: 550;
  letter-spacing: 0.02em;
}

.b3 .b3-nav .b3-nav__item > .wp-block-navigation__submenu-icon {
  position: absolute;
  top: 50%;
  right: 0.7rem;
  width: 16px;
  height: 16px;
  margin: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.b3 .b3-nav .wp-block-navigation__submenu-icon .b3-nav__chevron {
  margin: 0;
  transition: transform 450ms var(--b3-ease);
}

.b3 .b3-nav .has-child .b3-subnav {
  min-width: 0; /* plegado: sin ancho, como hace el núcleo */
  top: calc(100% + 1.1rem);
  left: -0.5rem;
  padding: 0.6rem;
  background: var(--b3-white);
  border: 1px solid var(--b3-line);
  box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.45);
  color: var(--b3-ink);
}

.b3 .b3-nav .has-child .wp-block-navigation-submenu__toggle[aria-expanded='true'] ~ .b3-subnav {
  min-width: 16rem;
}

.b3 .b3-nav .has-child .b3-subnav > .wp-block-navigation-item > .b3-subnav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.85rem;
}

.b3 .b3-nav .b3-subnav .b3-subnav__link:hover {
  background: var(--b3-ivory);
  color: var(--b3-champagne-deep);
}

/* B3 oculta la navegación completa por debajo de 1280 px; el núcleo la mostraría. */
@media (max-width: 1279px) {
  .b3 .b3-header .b3-nav {
    display: none;
  }
}

@media (max-width: 1239px) {
  .b3 .b3-nav .b3-nav__list {
    gap: 0;
  }

  .b3 .b3-nav .wp-block-navigation-submenu__toggle.b3-nav__link {
    padding: 0 calc(0.5rem + 16px + 0.35rem) 0 0.5rem;
  }

  .b3 .b3-nav .b3-nav__item > .wp-block-navigation__submenu-icon {
    right: 0.5rem;
  }
}

/* ---------- Menú móvil ---------- */
.b3 .b3-mobile-menu .pkb3-menu--movil,
.b3 .b3-mobile-menu .pkb3-menu--movil .b3-mobile-menu__list {
  display: block;
}

.b3 .b3-mobile-menu .b3-mobile-menu__list > .wp-block-navigation-item {
  display: block;
}

.b3 .b3-mobile-menu .pkb3-menu--movil .b3-mobile-menu__link {
  display: flex;
  color: var(--b3-ink);
}

.b3 .b3-mobile-menu .has-child.open-always .b3-mobile-menu__sublist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0;
  padding: 0 0 0.75rem;
}

.b3 .b3-mobile-menu .has-child .b3-mobile-menu__sublist > .wp-block-navigation-item > .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--b3-ink-muted);
}

/* ---------- Pie ---------- */
.b3 .b3-footer .wp-block-navigation .b3-footer__list {
  display: grid;
  gap: 0;
}

.b3 .b3-footer .wp-block-navigation .b3-footer__link {
  display: inline-flex;
  color: var(--b3-on-night);
}

.b3 .b3-footer .wp-block-navigation .b3-footer__link:hover {
  color: var(--b3-champagne);
}

.b3 .b3-footer .wp-block-navigation .b3-pendiente {
  color: var(--b3-on-night-muted);
}

.b3 .b3-footer__legal .wp-block-navigation__container {
  flex-wrap: nowrap;
  gap: 1.5rem;
}

.b3 .b3-footer .wp-block-navigation .b3-social {
  display: grid;
  color: var(--b3-on-night);
}

.b3 .b3-footer .wp-block-navigation .b3-social:hover {
  color: var(--b3-champagne);
}

/* Con «Watches» el menú principal pasó de cinco elementos a seis, y entre 1240 y 1599 px el ritmo
   ancho dejó de caber: «Contact» se metía debajo del conmutador de idioma. La captura lo enseñó;
   la medida del contenedor no, porque la lista desborda su columna sin que crezca su caja.
   Aquí se aprieta solo el espaciado. El texto no se encoge y el área táctil sigue en 44 px. */
@media (min-width: 1240px) and (max-width: 1599px) {
  .b3 .b3-nav .b3-nav__list {
    gap: 0.125rem;
  }

  .b3 .b3-nav .b3-nav__link {
    padding: 0 0.45rem;
  }

  .b3 .b3-nav .b3-nav__link::after {
    left: 0.45rem;
    right: 0.45rem;
  }

  .b3 .b3-nav .wp-block-navigation-submenu__toggle.b3-nav__link {
    padding: 0 calc(0.45rem + 16px + 0.35rem) 0 0.45rem;
  }

  .b3 .b3-nav .b3-nav__item > .wp-block-navigation__submenu-icon {
    right: 0.45rem;
  }
}

/* Por encima de 1600 px cabía, pero con 1,3 px de holgura a 1920: cualquier tipografía de reserva
   o una etiqueta más larga volvería a solaparlo. Ritmo intermedio, con margen de verdad. */
@media (min-width: 1600px) {
  .b3 .b3-nav .b3-nav__list {
    gap: 0.5rem;
  }

  .b3 .b3-nav .b3-nav__link {
    padding: 0 0.55rem;
  }

  .b3 .b3-nav .b3-nav__link::after {
    left: 0.55rem;
    right: 0.55rem;
  }

  .b3 .b3-nav .wp-block-navigation-submenu__toggle.b3-nav__link {
    padding: 0 calc(0.55rem + 16px + 0.35rem) 0 0.55rem;
  }

  .b3 .b3-nav .b3-nav__item > .wp-block-navigation__submenu-icon {
    right: 0.55rem;
  }
}