/* Atelier Numen — mobile navigation toggle (menu + locale switch below 760px)
 *
 * Generic by design: works on top of whatever .site-header already contains on a given
 * page (nav links, locale toggle, enquire link) instead of requiring each page's header
 * markup to match. assets/mobile-nav.js moves everything but the brand lockup into
 * .site-header-menu and adds the toggle button; this file only handles the visual states.
 * See atelier-numen-chequeo-sistemas-precampana.md #2.1 en el proyecto de Claude.
 */
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .site-header { position: relative; }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-toggle-bars {
    position: relative;
    display: block;
    width: 1.35rem;
    height: 1.5px;
    background: var(--ink, #171715);
    transition: background .15s ease .05s;
  }
  .nav-toggle-bars::before,
  .nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
    width: 1.35rem;
    height: 1.5px;
    background: var(--ink, #171715);
    transition: transform .2s ease;
  }
  .nav-toggle-bars::before { top: -.42rem; }
  .nav-toggle-bars::after { top: .42rem; }
  .site-header[data-menu-open="true"] .nav-toggle-bars { background: transparent; }
  .site-header[data-menu-open="true"] .nav-toggle-bars::before { transform: translateY(.42rem) rotate(45deg); }
  .site-header[data-menu-open="true"] .nav-toggle-bars::after { transform: translateY(-.42rem) rotate(-45deg); }

  .site-header-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    background: var(--paper, #faf7f2);
    border-bottom: 1px solid var(--line, #e4ded2);
    box-shadow: 0 16px 32px rgba(23,23,21,.08);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease;
  }
  .site-header[data-menu-open="true"] .site-header-menu {
    max-height: 75vh;
    opacity: 1;
    overflow-y: auto;
  }
  .site-header-menu nav {
    display: flex;
    flex-direction: column;
  }
  .site-header-menu nav a {
    padding: 1rem var(--pad, 1.25rem);
    border-top: 1px solid var(--line, #e4ded2);
  }
  .site-header-menu nav:first-child a:first-child { border-top: 0; }
  .site-header-menu .locale-toggle {
    margin: 1rem var(--pad, 1.25rem);
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header-menu,
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: none; }
}