/* ==========================================================================
   MENU DE TELA CHEIA v3 — proposta de 12/09
   A v2 (10/08, bloco "MENU DE TELA CHEIA v2" em components.css) foi desenhada
   no modelo do menu da Dinamite Criativa: lista centralizada sobre a pagina
   borrada, pilulas em fila, idioma e contato centrados embaixo. Em 12/09 o
   Eduardo achou que ficou "a cara que copiamos a Dinamite".

   Esta versao sai da gramatica da propria Novren em vez de outra referencia:
   - o fundo e o preto do hero com a mesma onda de dithering (menu-v3.js), no
     lugar do vidro borrado;
   - lista alinhada a esquerda, numerada 01-06 como a navegacao do rodape da
     proposta V3, com filete entre as linhas — regua, nao pilha;
   - o Electric so aparece no hover, preenchido: o circulo com a seta;
   - acoes, idioma e contato numa coluna a direita, ancorada no pe.

   Nenhuma marcacao mudou: o numero vem de `counter()`, a coluna de grid-area.
   Para voltar a v2, basta tirar o <link> deste arquivo e o <script> do
   menu-v3.js das paginas.
   ========================================================================== */
.menu {
  align-items: end;
  padding-block: calc(120 * var(--px)) calc(56 * var(--px));
  background: #000;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.menu__fundo {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  display: block;
  opacity: .4;
  pointer-events: none;
}
.menu__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(400 * var(--px));
  grid-template-rows: 1fr auto auto auto;
  grid-template-areas:
    "links ."
    "links acoes"
    "links idioma"
    "links pe";
  column-gap: calc(140 * var(--px));
  row-gap: calc(28 * var(--px));
  align-items: end;
  text-align: left;
}

/* ---------- Lista ---------- */
.menu__links {
  grid-area: links;
  align-items: stretch;
  gap: 0;
  counter-reset: item;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.menu__links a {
  counter-increment: item;
  position: relative;
  display: grid;
  grid-template-columns: calc(88 * var(--px)) minmax(0, 1fr) auto;
  align-items: center;
  padding-block: calc(16 * var(--px));
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: calc(64 * var(--px)); line-height: 1.05;
}
.menu__links a::before {
  content: counter(item, decimal-leading-zero);
  font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: calc(14 * var(--px)); font-weight: 400; letter-spacing: .06em;
  color: var(--c-cinza-70);
  transition: color var(--dur) var(--ease);
}
/* A seta: circulo Electric preenchido, rotulo branco. So existe no hover e no
   foco de teclado — em repouso a pagina e preto e cinza. */
.menu__links a::after {
  content: '';
  width: calc(56 * var(--px)); height: calc(56 * var(--px));
  border-radius: 50%;
  background: var(--destaque) no-repeat center / 42% auto
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(.6) rotate(-45deg);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.menu__links a:hover, .menu__links a:focus-visible { color: var(--c-branco); }
.menu__links a:hover::before, .menu__links a:focus-visible::before { color: var(--c-cinza-20); }
.menu__links a:hover::after, .menu__links a:focus-visible::after { opacity: 1; transform: none; }

/* ---------- Coluna da direita ---------- */
.menu__acoes {
  grid-area: acoes;
  flex-direction: column; flex-wrap: nowrap;
  align-items: stretch; justify-content: flex-start;
  gap: calc(10 * var(--px));
}
.menu__acoes .btn { justify-content: center; width: 100%; }
.menu__idioma {
  grid-area: idioma;
  justify-self: stretch;
  padding-top: calc(22 * var(--px));
  border-top-color: rgba(255, 255, 255, .16);
}
.menu__pe {
  grid-area: pe;
  flex-direction: column; gap: calc(6 * var(--px));
}

@media (prefers-reduced-motion: reduce) {
  .menu__links a::after, .menu__links a::before { transition: none; }
}

/* ---------- Abaixo de 1280: uma coluna so ---------- */
@media (max-width: 1280px) {
  .menu { padding-block: 104px 36px; }
  .menu__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "links" "acoes" "idioma" "pe";
    row-gap: 24px;
  }
  .menu__links { gap: 0; }
  .menu__links a {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    padding-block: 12px;
    font-size: clamp(30px, 8vw, 52px); line-height: 1.08;
  }
  .menu__links a::before { font-size: 12px; }
  .menu__links a::after { width: 40px; height: 40px; }
  .menu__acoes { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .menu__acoes .btn { width: auto; flex: 1 1 auto; }
}