/* =========================================================
   Submenús del menú principal (árbol heredado del WordPress).
   Fichero aparte de app.css a propósito: Felipe edita app.css en paralelo
   (misma razón que buscador.css y paginas.css). Fusionables cuando convenga.
   Sin JS: se abre con :hover y con :focus-within, así funciona con teclado.
   ========================================================= */

.nav-primary li {
  position: relative;
}

.nav-primary .tiene-hijos > a::after {
  content: "";
  display: inline-block;
  margin-left: .45em;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: currentColor transparent transparent transparent;
  vertical-align: middle;
  opacity: .8;
}

.nav-primary a.es-rama-activa {
  color: #fff;
}

.nav-primary .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 230px;
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: var(--burgundy-d);
  border-top: 2px solid var(--gold);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
}

.nav-primary .tiene-hijos:hover > .submenu,
.nav-primary .tiene-hijos:focus-within > .submenu {
  display: flex;
}

.nav-primary .submenu a {
  padding: 9px 18px;
  font-size: .95rem;
  font-weight: 500;
  border-bottom: 0;
  white-space: nowrap;
}

.nav-primary .submenu a:hover,
.nav-primary .submenu a:focus-visible {
  background: rgba(255, 255, 255, .1);
  color: #fff;
}

.nav-primary .submenu a[aria-current="page"] {
  color: #fff;
  box-shadow: inset 3px 0 0 var(--gold);
}

/* En móvil el menú ya es una columna: los submenús van desplegados y
   sangrados, que es más usable que un desplegable dentro de otro. */
@media (max-width: 760px) {
  .nav-primary .submenu {
    display: flex;
    position: static;
    min-width: 0;
    padding: 0;
    background: rgba(0, 0, 0, .18);
    border-top: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .nav-primary .submenu a {
    padding-left: 38px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    white-space: normal;
  }

  .nav-primary .tiene-hijos > a::after {
    display: none;
  }
}