/* = menu.css = */
/* 1) Deja que el sidebar y su contenedor interno sean 100% de la altura del viewport */
#sidebar .inner {
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* === RESET Y ESTILO BÁSICO DE LOS OPENERS === */
nav#menu button.menu-opener {
  all: unset;
  display: block;
  width: 100%;
  padding: 0.5em 0;
  margin: 0;
  text-align: left;
  font-family: "Roboto Slab", serif;
  font-weight: 400;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: #3d4449 !important;
  cursor: pointer;
  font-size: 0.9em !important;
  position: relative;
  padding-right: 1.5em; /* espacio para la flecha */
  transition: color 0.2s ease;
}

/* Hover / estado activo en rojo */
nav#menu button.menu-opener:hover,
nav#menu button.menu-opener.active {
  color: #E01010 !important;
}

/* Sólo mostrar outline al navegar con teclado */
nav#menu button.menu-opener:focus-visible,
nav#menu li a:focus-visible {
  outline: 2px dashed #E01010 !important;
  outline-offset: 2px !important;
}

/* Hover / focus en TODOS los enlaces del menú */
nav#menu li a:hover,
nav#menu li a:focus-visible {
  color: #E01010 !important;
}

/* === FLECHAS DE DESPLEGABLES === */
/* Dibujar la flecha ▼ con bordes */
nav#menu button.menu-opener[aria-haspopup="true"]::after {
  content: "";
  position: absolute;
  right: 0.75em;
  top: 50%;
  width: 0.6em;
  height: 0.6em;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center center;
  transition: transform 0.2s ease-in-out;
  pointer-events: none;
}

/* Cuando esté abierto (aria-expanded="true"), gira la flecha ▲ */
nav#menu button.menu-opener[aria-haspopup="true"][aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(135deg);
}

/* Nivel 1 de sub-menú: Foundation, Pedro Pascual, … */
#menu > ul > li > ul > button.opener {
    /* aquí tus reglas */
  font-size: 0.85em !important;
  opacity: 0.8;
}


/* Nivel 2: primer nivel de anidado */
#menu ul ul > li > button.opener,
#menu ul ul > li > a {
  font-size: 0.85em;
  /* cualquier otra propiedad que quieras cambiar */
}

/* Nivel 3: segundo nivel de anidado */
#menu ul ul ul > li > button.opener,
#menu ul ul ul > li > a {
  font-style: normal;
  font-size: 0.85em;
  opacity: 0.8;
}