/* ==========================================================================
   Castillo Lynch — menu.css
   La barra de navegación: el botón de celular, el menú desplegable y el
   submenú de habitantes.

   Va en un archivo aparte y se carga DESPUÉS de kernel.css y de la hoja de
   cada sección, a propósito: así el menú se ve igual en todas las páginas sin
   depender de qué otra hoja cargue cada una.
   ========================================================================== */

/* El interruptor del menú de celular. Está escondido a la vista pero sigue
   siendo un control real: se puede enfocar con el teclado y abre con Enter.
   Todo el menú funciona con CSS, sin depender de que cargue el JavaScript. */
.menu__interruptor{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.menu__boton{
  display:none; width:44px; height:44px;
  border:1.5px solid var(--linea-fuerte);
  background:transparent; cursor:pointer; padding:0;
  clip-path:var(--chaflan);
}
.menu__boton span,
.menu__boton span::before,
.menu__boton span::after{
  content:""; display:block; width:16px; height:1.5px; background:var(--arena);
  margin-inline:auto;
  transition:transform .22s ease, background-color .22s ease;
}
.menu__boton span{ margin-top:21px; }
.menu__boton span::before{ transform:translateY(-6.5px); }
.menu__boton span::after{ transform:translateY(5px); }

/* Abierto: las tres líneas se vuelven una cruz. */
.menu__interruptor:checked + .menu__boton span{ background:transparent; }
.menu__interruptor:checked + .menu__boton span::before{ transform:rotate(45deg); }
.menu__interruptor:checked + .menu__boton span::after{ transform:translateY(-1.5px) rotate(-45deg); }
.menu__interruptor:focus-visible + .menu__boton{ outline:2px solid var(--rojo); outline-offset:3px; }

/* Submenú de habitantes --------------------------------------------------- */
.menu__con-hijos{ position:relative; }
/* La casilla y el botón del submenú son solo para el celular. */
.submenu__interruptor{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.submenu__boton{ display:none; }
.menu__con-hijos > a::after{
  content:""; display:inline-block; margin-left:.45rem;
  width:5px; height:5px; vertical-align:middle;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.submenu{
  position:absolute; top:100%; left:0; z-index:70;
  display:none; flex-direction:column;
  min-width:16rem; margin:0; padding:.4rem;
  list-style:none;
  background:color-mix(in srgb, var(--noche) 97%, transparent);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--linea-fuerte), 0 18px 40px -18px rgba(0,0,0,.9);
}
.menu__con-hijos:hover > .submenu,
.menu__con-hijos:focus-within > .submenu{ display:flex; }
.submenu a{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.6rem .8rem; font-size:.85rem;
}
.submenu__marca{
  font-size:.62rem; letter-spacing:.08em;
  color:var(--rojo-claro);
  border:1px solid color-mix(in srgb, var(--rojo) 45%, transparent);
  padding:.15rem .45rem;
}
.submenu__todos{ color:var(--tenue); border-top:1px solid var(--linea); margin-top:.2rem; }

@media (max-width: 980px){
  .menu__boton{ display:block; }
  .menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:.15rem;
    background:color-mix(in srgb, var(--noche) 97%, transparent);
    backdrop-filter:blur(14px);
    padding:.9rem clamp(1.25rem,5vw,3rem) 1.5rem;
    max-height:calc(100vh - 4.6rem); overflow-y:auto;
    display:none;
  }
  .menu__interruptor:checked ~ .menu{ display:flex; }
  .menu a{ padding:.85rem 1rem; font-size:.95rem; }

  /* Acá no hay mouse: el submenú se abre y se cierra tocando la flechita. */
  .menu__con-hijos{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .menu__con-hijos > a::after{ display:none; }

  .submenu__boton{
    display:grid; place-items:center;
    width:3rem; height:3rem;
    cursor:pointer;
    border-left:1px solid var(--linea);
  }
  /* La flechita, dibujada con dos bordes */
  .submenu__boton::after{
    content:""; display:block;
    width:8px; height:8px;
    border-right:1.5px solid var(--arena);
    border-bottom:1.5px solid var(--arena);
    transform:translateY(-2px) rotate(45deg);
    transition:transform .22s ease;
  }
  .submenu__interruptor:checked ~ .submenu__boton::after{
    transform:translateY(2px) rotate(-135deg);
  }
  .submenu__interruptor:focus-visible ~ .submenu__boton{
    outline:2px solid var(--rojo); outline-offset:-4px;
  }

  .submenu{
    position:static; min-width:0;
    grid-column:1 / -1;
    display:none;
    margin:.1rem 0 .5rem .9rem; padding:0;
    background:transparent; backdrop-filter:none; box-shadow:none;
    border-left:1px solid var(--linea);
  }
  .submenu__interruptor:checked ~ .submenu{ display:flex; }
  .submenu a{ padding:.65rem 1rem; font-size:.88rem; color:var(--tenue); }

  /* Al estar dentro del menú desplegado, el hover del escritorio no aplica. */
  .menu__con-hijos:hover > .submenu,
  .menu__con-hijos:focus-within > .submenu{ display:none; }
  .submenu__interruptor:checked ~ .submenu{ display:flex; }
}