/* =========================================================================
   Miramar Brewing: nav and mobile menu
   Fixed pill nav, the language switch, burger, the phone menu.
   ========================================================================= */

/* =========================================================================
   Nav
   ========================================================================= */
.nav {
  position: fixed; top: var(--frame); left: var(--frame); right: var(--frame); z-index: 100;
  /* Three columns, the outer two equal: the links sit on the page's true center no matter how
     wide the logo and the language switch are (flex space-between centered them between the two). */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: var(--s-2);
  pointer-events: none;
  transition: translate .8s var(--ease-out);
}
.nav > * { pointer-events: auto; }
.nav.is-hidden { translate: 0 calc(-100% - var(--frame) - 4px); }
.is-loading .nav { translate: 0 calc(-100% - var(--frame) - 4px); }

.nav__logo {
  grid-column: 1; justify-self: start;
  display: flex; align-items: center; gap: 12px;
  height: var(--bar); padding: 0 20px 0 16px;
  border-radius: 99px; background: var(--page-2);
}
.nav__iso { height: 28px; width: auto; color: var(--mar); transition: rotate .8s var(--ease-spring); }
.nav__word { height: 14px; width: auto; color: var(--on-page); }
.nav__logo:hover .nav__iso { rotate: -12deg; }

.nav__links {
  grid-column: 2;
  position: relative; display: flex;
  padding: 6px; border-radius: 99px; background: var(--page-2);
}
.nav__links a {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  height: 44px; padding: 0 18px; border-radius: 99px;
  font-weight: 700; font-size: 15px;
  transition: color .35s var(--ease-out);
}
.nav__links a.is-hot { color: var(--ink); }
.nav__blob {
  position: absolute; left: 0; top: 6px; height: 44px;
  width: var(--bw, 0px); translate: var(--bx, 0px) 0;
  border-radius: 99px; background: var(--bc, var(--inv));
  opacity: 0;
  transition: translate .95s var(--ease-cream), width .95s var(--ease-cream), background-color .5s, opacity .4s;
}
.nav__links.has-blob .nav__blob { opacity: 1; }

.nav__right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

/* The language, ES/EN with a light-blue knob sliding to the one in use (from 1024px; the burger's
   sheet has it below). Back 2026-10-26: the three bars' card (Motion Library M26) held the language
   and the page's light or dark, and the client keeps the dark page only. */
.lang {
  position: relative; display: flex;
  height: var(--bar); padding: 6px; border-radius: 99px; background: var(--page-2);
  font: 700 13px/1 var(--f-mono); letter-spacing: .06em;
}
.lang span { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 44px; border-radius: 99px; transition: color .4s; }
.lang__knob {
  position: absolute; left: 6px; top: 6px; width: 46px; height: 44px; border-radius: 99px;
  background: var(--cielo);
  transition: translate .7s var(--ease-spring);
}
html[lang='es'] .lang [data-l='es'], html[lang='en'] .lang [data-l='en'] { color: var(--ink); }
html[lang='en'] .lang__knob { translate: 46px 0; }

.burger { display: none; width: var(--bar); height: var(--bar); border-radius: 50%; background: var(--inv); color: var(--on-inv); place-items: center; }
.burger__lines { position: relative; width: 22px; height: 12px; }
.burger__lines i { position: absolute; left: 0; width: 100%; height: 3px; border-radius: 3px; background: currentColor; transition: translate .5s var(--ease-out), rotate .5s var(--ease-out); }
.burger__lines i:first-child { top: 0; }
.burger__lines i:last-child { bottom: 0; }
.menu-open .burger__lines i:first-child { translate: 0 4.5px; rotate: 45deg; }
.menu-open .burger__lines i:last-child { translate: 0 -4.5px; rotate: -45deg; }

/* ---- The phone menu (Miguel's mock, 2026-10-15): a sheet of color that opens out of the burger,
   the links as rows like the Dónde spots (a 2px rule between them, the row going black as you
   touch it; the arrows at their ends came off 2026-10-16), and at the foot the language switch (on phones
   it lives here, not in the bar) and three of his shapes in black, the flag's star cut out to the
   sheet. The sheet's color, --menu-c, changes each time it opens (js/ui.js initMenu). ---- */
.menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + var(--s-3)) var(--frame) var(--frame);
  background: var(--menu-c, var(--parcha)); color: var(--ink);
  overflow-y: auto; overscroll-behavior: contain;   /* a phone on its side: 694px of menu in 390 */
  clip-path: circle(0% at calc(100% - var(--frame) - var(--bar) / 2) calc(var(--frame) + var(--bar) / 2));
  transition: clip-path .9s var(--ease-io), background-color .5s var(--ease-out);
  visibility: hidden;
}
.menu-open .menu { clip-path: circle(150% at calc(100% - var(--frame) - var(--bar) / 2) calc(var(--frame) + var(--bar) / 2)); visibility: visible; }
.menu-open .burger { background: var(--ink); color: var(--menu-c, var(--parcha)); }
.burger { transition: background-color .5s var(--ease-out), color .5s var(--ease-out); }

.menu__links { display: flex; flex-direction: column; margin: auto 0; }
.menu__links a {
  display: block;
  padding: var(--s-2) var(--s-1);
  font: 800 var(--t-2)/1.1 var(--f-text); letter-spacing: -.01em;
  translate: 0 var(--s-5); opacity: 0;
  transition: translate .8s var(--ease-out), opacity .5s, background-color .4s var(--ease-out), color .4s var(--ease-out);
}
.menu__links a + a { border-top: 2px solid var(--ink); }
/* A row goes black under a finger, a mouse or the keyboard; no arrows since 2026-10-16 (Miguel:
   "Remove the arrows too"; they turned from ↗ to →). Hover only where there is one: a phone's tap
   left :hover stuck on the row it opened, so it showed chosen the next time the menu opened */
.menu__links a:active, .menu__links a:focus-visible { background: var(--ink); color: var(--menu-c, var(--parcha)); }
@media (hover: hover) { .menu__links a:hover { background: var(--ink); color: var(--menu-c, var(--parcha)); } }
.menu:focus { outline: none; }   /* it takes the focus when it opens (js/ui.js); the links show theirs */
.menu-open .menu__links a { translate: 0 0; opacity: 1; }
.menu-open .menu__links a:nth-child(1) { transition-delay: .18s, .18s, 0s, 0s; }
.menu-open .menu__links a:nth-child(2) { transition-delay: .23s, .23s, 0s, 0s; }
.menu-open .menu__links a:nth-child(3) { transition-delay: .28s, .28s, 0s, 0s; }
.menu-open .menu__links a:nth-child(4) { transition-delay: .33s, .33s, 0s, 0s; }
.menu-open .menu__links a:nth-child(5) { transition-delay: .38s, .38s, 0s, 0s; }

.menu__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-5); }
/* The language, as the other one's name and nothing else (Miguel, 2026-10-15, after Locomotive's
   menu: "no shape here whatsoever. Only the word written in small copy"; the pill switch's EN was
   black on black on the sheet). In Spanish it says English, in English Español. */
.menu__lang {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 var(--t-0)/1 var(--f-text); color: var(--ink);
  text-decoration: underline 2px transparent; text-underline-offset: .25em;
  transition: text-decoration-color .3s;
}
.menu__lang:focus-visible { text-decoration-color: currentColor; }
@media (hover: hover) { .menu__lang:hover { text-decoration-color: currentColor; } }   /* no underline stuck on after a tap */
.menu__lang:focus-visible { outline-color: var(--ink); }
html[lang='es'] .menu__lang [lang='es'], html[lang='en'] .menu__lang [lang='en'] { display: none; }
.menu__prefs { display: flex; align-items: flex-end; opacity: 0; transition: opacity .6s var(--ease-out) .4s; }   /* the sun and moon under it went with the light page (2026-10-26) */
.menu-open .menu__prefs { opacity: 1; }
.menu__shapes { display: flex; align-items: center; gap: var(--s-1); }
.menu__shapes i {
  display: block; height: var(--s-5); background: var(--ink);
  scale: 0; transition: scale .8s var(--ease-spring);
}
.menu__seal { aspect-ratio: 1; clip-path: url(#gs-scallop); }
.menu__can { aspect-ratio: 100 / 236; clip-path: url(#gs-can); }
.menu__flag { aspect-ratio: 1; clip-path: url(#gs-flag); }
.menu-open .menu__shapes i { scale: 1; }
.menu-open .menu__shapes i:nth-child(1) { transition-delay: .45s; }
.menu-open .menu__shapes i:nth-child(2) { transition-delay: .52s; }
.menu-open .menu__shapes i:nth-child(3) { transition-delay: .59s; }

@media (max-width: 1180px) {
  .nav__links a { padding: 0 13px; font-size: 14px; }
}
@media (max-width: 1023px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  .nav .lang { display: none; }   /* with the burger, the language switch is in the menu (Miguel's mock) */
}
@media (max-width: 639px) {
  .nav__logo { padding: 0 16px 0 14px; }
  .nav__word { display: none; }
}