/* ==========================================================================
   Menu — painel azul que entra pela direita
   Animação: a do botão "Contact us" de pioniq-technologies.com. O painel
   inteiro desliza da direita para a esquerda (translateX 100% → 0) em 0.6s,
   com a curva cubic-bezier(0.19, 1, 0.22, 1) (expo out: rápido no começo,
   assentando devagar), e sai pelo mesmo caminho. O conteúdo vem junto com o
   painel, sem entrada própria.

   Layout: o painel não cobre a tela toda. No desktop, sobra à esquerda uma
   faixa da página (a margem e as duas primeiras colunas do grid de 12, 298px
   no frame de 1512, quase os 5/26 da referência), onde continua visível o
   logo do header. Clicar nessa faixa fecha o menu (camada .menu-backdrop,
   criada pelo menu.js). No tablet a faixa é de 15vw; no celular o painel
   ocupa a tela inteira, como na referência.

   Dentro do painel: fundo azul (--c-blue), links à direita em faixas
   separadas por linhas de 1px e, à esquerda, a frase no topo e as
   informações de contato na base. Sobre o azul, o vermelho tem pouco
   contraste (2.5:1), então hover, setas e ícones usam o vinho; os números,
   o grafite.

   Versão anterior (campo creme em tela cheia, painel descendo do topo e
   nomes subindo em sequência): versoes-anteriores/menu-v1-creme-tela-cheia.*
   Movimento reduzido: abre e fecha sem animação.
   ========================================================================== */

.menu {
  --menu-bar: calc(130 * var(--fp)); /* faixa do topo do painel (Fechar) */
  --menu-offset: calc(298 * var(--fp)); /* faixa da página que sobra à esquerda */
  --menu-dur: 0.6s; /* entrada e saída (a referência usa o mesmo tempo nas duas) */
  --menu-ease: cubic-bezier(0.19, 1, 0.22, 1);
  --menu-gap: calc(24 * var(--fp)); /* espaço entre colunas do grid */
  --menu-rule: rgba(7, 0, 0, 0.16);
  --menu-muted: var(--c-graphite);
  --menu-accent: var(--c-wine); /* hover, setas e ícones (o vermelho some no azul) */
  --menu-top: calc(48 * var(--fp)); /* topo da frase da esquerda e da lista de links */
  --menu-phrase: max(18px, calc(22 * var(--fp))); /* corpo da frase da esquerda */
  /* Desce a lista até o alto das letras da frase (folga da linha + topo das maiúsculas) */
  --menu-align: calc(var(--menu-phrase) * 0.27);
  --menu-items: 6; /* número de links do menu (ajusta a altura das faixas em telas baixas) */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--menu-offset);
  z-index: 60;
  overflow: hidden;
  background: var(--c-blue);
  color: var(--c-ink);
  visibility: hidden;
  transform: translateX(100%);
  will-change: transform;
  transition:
    transform var(--menu-dur) var(--menu-ease),
    visibility 0s linear var(--menu-dur);
}
html.menu-open .menu {
  visibility: visible;
  transform: none;
  transition: transform var(--menu-dur) var(--menu-ease), visibility 0s;
}

/* Faixa da página que sobra à esquerda: transparente; o clique fecha o menu */
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 59;
  visibility: hidden;
  cursor: pointer;
  transition: visibility 0s linear var(--menu-dur, 0.6s);
}
html.menu-open .menu-backdrop {
  visibility: visible;
  transition: none;
}

/* ---------- Faixa do topo: Fechar (e o logo, só no celular) ---------- */
.menu__bar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  height: var(--nav-h); /* igual ao header: Fechar na altura do ícone do menu */
  padding: 0 var(--pad);
}

/* Logo do painel (09/11/2026, a pedido): em todas as larguras, no alto à
   esquerda do painel, levando à home (com a transição de página, menu.js).
   Até então, só no celular: no desktop e no tablet contava-se com o logo do
   header na faixa da esquerda, que some quando a página já rolou. Só em
   vinho: sobre o azul, o vermelho do logo não tem contraste (2.5:1), como
   já acontece com os hovers e as setas do menu. */
.menu__logo {
  display: flex;
  flex: none;
  align-items: center;
  width: 66px;
  height: 50px;
  margin-right: auto;
  text-decoration: none;
}
.menu__logo .iona-logo {
  --logo-fg: var(--c-wine);
  --logo-accent: var(--c-wine);
  display: block;
  width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  .menu__logo {
    transition: opacity 0.3s ease;
  }
  .menu__logo:hover {
    opacity: 0.6;
  }
}
/* Com o painel aberto, o logo do header (à mostra na faixa da esquerda quando
   a página está no topo) some, para não haver dois logos lado a lado */
.nav__logo {
  transition: opacity 0.3s ease;
}
html.menu-open .nav__logo {
  opacity: 0;
}

.menu__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  margin-right: -6px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu__close-icon {
  position: relative;
  width: 20px;
  height: 20px;
}
.menu__close-icon span {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  background: currentColor;
  transform: rotate(45deg);
  transition: transform 0.4s var(--menu-ease);
}
.menu__close-icon span:last-child {
  transform: rotate(-45deg);
}
/* Hover: o X gira um quarto de volta */
@media (hover: hover) and (pointer: fine) {
  .menu__close:hover .menu__close-icon span:first-child {
    transform: rotate(135deg);
  }
  .menu__close:hover .menu__close-icon span:last-child {
    transform: rotate(45deg);
  }
}

/* O ícone do header some quando o menu abre e volta depois que ele sai */
.nav__menu {
  transition: opacity 0.2s ease;
}
html.menu-open .nav__menu {
  opacity: 0;
}
html:not(.menu-open) .nav__menu {
  transition-delay: 0.3s;
}

/* ---------- Grid: links à direita, informações à esquerda ---------- */
/* 10 colunas dentro do painel (as colunas 3 a 12 do grid da página) */
.menu__inner {
  position: absolute;
  inset: var(--menu-bar) 0 0;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: var(--menu-gap);
  padding: 0 var(--pad) calc(56 * var(--fp));
}

.menu__nav {
  grid-column: 6 / -1;
  grid-row: 1;
  align-self: start;
  padding-top: calc(var(--menu-top) + var(--menu-align));
}

.menu__aside {
  grid-column: 1 / 5;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding-top: var(--menu-top);
}

/* ---------- Links ---------- */
.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--menu-rule);
}

.menu__item {
  border-top: 1px solid var(--menu-rule);
}

.menu__link {
  display: grid;
  grid-template-columns: calc(56 * var(--fp)) minmax(0, 1fr) calc(24 * var(--fp));
  align-items: center;
  column-gap: var(--menu-gap);
  /* altura da faixa: 104px no frame de 1512, menor em telas baixas
     (a altura livre dividida pelo número de itens, --menu-items) */
  height: min(calc(104 * var(--fp)), calc((100svh - var(--menu-bar) - 56 * var(--fp) - 72px) / var(--menu-items)));
  min-height: 60px;
  color: var(--c-ink);
  text-decoration: none;
}
.menu__link:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: -2px;
}

.menu__num {
  color: var(--menu-muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.4s ease;
}
/* Página atual: quadrado vermelho ao lado do número */
.menu__link[aria-current="page"] .menu__num::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 10px;
  vertical-align: 0.05em;
  background: var(--c-red);
}

.menu__name {
  display: block;
  overflow: clip;
  padding: 0.12em 0 0.16em;
  margin: -0.12em 0 -0.16em;
  font-family: var(--font-display);
  font-size: max(30px, calc(48 * var(--fp)));
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  transition: color 0.4s ease, translate 0.6s var(--ease-osmo);
}
.menu__name-inner {
  display: block;
}

.menu__arrow {
  justify-self: end;
  width: max(16px, calc(20 * var(--fp)));
  height: max(16px, calc(20 * var(--fp)));
  color: var(--menu-accent);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 0.35s ease, transform 0.5s var(--ease-osmo);
}
.menu__arrow svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.5;
}

@media (hover: hover) and (pointer: fine) {
  /* Hover e foco: o nome avança e fica vinho; a seta entra pela diagonal */
  .menu__link:is(:hover, :focus-visible) .menu__name {
    color: var(--menu-accent);
    translate: calc(16 * var(--fp)) 0;
  }
}
@media (hover: hover) and (pointer: fine) {
  .menu__link:is(:hover, :focus-visible) .menu__num {
    color: var(--menu-accent);
  }
}
@media (hover: hover) and (pointer: fine) {
  .menu__link:is(:hover, :focus-visible) .menu__arrow {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ---------- Bloco da esquerda: frase e informações (texto pequeno) ---------- */
.menu__phrase {
  max-width: calc(340 * var(--fp));
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--menu-phrase);
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -0.01em;
}

.menu__info {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(36 * var(--fp)) var(--menu-gap);
  align-content: end;
}

.menu__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.menu__label {
  margin: 0;
  color: var(--c-wine);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.menu__links {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__links--inline {
  display: flex;
  gap: 16px;
}
.menu__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  color: inherit;
  font-family: var(--font-display);
  font-size: max(15px, calc(17 * var(--fp)));
  font-weight: 400;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.menu__links a[aria-current="true"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.menu__links a:focus-visible,
.menu__logo:focus-visible,
.menu__close:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
}
.menu__ext {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--menu-accent);
}
.menu__ext svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 2;
}

/* ---------- Tablet: faixa de 15vw; links em cima, informações embaixo ---------- */
@media (max-width: 1199px) {
  .menu {
    --fp: 1px;
    --menu-offset: 15vw;
    --menu-bar: var(--nav-h);
    --menu-gap: 20px;
  }
  .menu__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px var(--pad) 40px;
  }
  .menu__nav {
    align-self: stretch;
    padding-top: 0;
  }
  .menu__link {
    grid-template-columns: 44px minmax(0, 1fr) 18px;
    height: 76px;
  }
  .menu__name {
    font-size: clamp(32px, 5vw, 48px);
  }
  .menu__aside {
    flex: none;
    gap: 32px;
    padding-top: 0;
  }
  .menu__phrase {
    display: none; /* sem espaço para ela; os links e o contato bastam */
  }
}

/* ---------- Celular: o painel cobre a tela toda (como na referência) ---------- */
@media (max-width: 767px) {
  .menu {
    --menu-offset: 0px;
  }
  .menu__bar {
    justify-content: space-between;
  }
  .menu__link {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    column-gap: 12px;
    height: 68px;
  }
  .menu__name {
    font-size: clamp(30px, 9vw, 38px);
  }
  .menu__info {
    gap: 28px 20px;
  }
  .menu__col:nth-child(2) {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* ---------- Fechar sem animação (com a tela coberta pela transição de página) ---------- */
html.menu-instant .menu,
html.menu-instant .menu *,
html.menu-instant .menu-backdrop,
html.menu-instant .nav__menu {
  transition: none !important;
}

/* ---------- Movimento reduzido: abre e fecha sem animação ---------- */
@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu *,
  .menu-backdrop,
  .nav__menu {
    transition: none !important;
  }
}