/* clone.css — camada vanilla do clone garda.com
   Tudo aqui complementa (nunca substitui) os CSS Modules originais em assets/css/.
   1) fallback no-JS   2) vídeo hero   3) mega-menu reconstruído
   4) collapsibles mobile   5) acessibilidade de foco   6) count-up   */

/* 1 — Sem JS o conteúdo tem de ficar visível (o original depende de React p/ animar) */
html.no-js .AnimatedContainer_container__EyevB { opacity: 1; }

/* 2 — Vídeo hero (o wrapper original espera um <video> montado pelo player React) */
.VideoPlayer_wrapper__W5MLG video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 3 — Mega-menu desktop (Radix viewport vazia no SSR; painéis injetados pelo build) */
.clone-viewport {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  pointer-events: none;
}
.clone-viewport[data-state="open"] { pointer-events: auto; }
.clone-menu-panel {
  display: none;
  background-color: var(--color-red-1); /* #d52b1e — token original */
  color: var(--color-white);
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
}
.clone-menu-panel.clone-open { display: block; }
.clone-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg, 24px) var(--spacing-xl, 40px);
  max-width: var(--container-max-width, 1440px);
  margin: 0 auto;
  padding: var(--spacing-lg, 24px) var(--container-gutter, 40px) var(--spacing-xl, 40px);
}
.clone-menu-grid .Link_external__gqXka .Link_icon__PtGsQ path { fill: var(--color-white); }
.clone-menu-grid .Link_link__C_PGU:hover .Link_label__Z0pwM { text-decoration: underline; }

/* 4 — Collapsibles (mobile menu + footer): conteúdo clonado dos painéis desktop */
.clone-collapsible-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-in-out;
}
.clone-collapsible-content > div { overflow: hidden; }
.Collapsible_collapsible__bJI4N[data-state="open"] .clone-collapsible-content {
  grid-template-rows: 1fr;
}
.clone-collapsible-content .clone-menu-grid {
  grid-template-columns: 1fr;
  gap: var(--spacing-xs, 12px);
  padding: 0 0 var(--spacing-sm, 16px);
}

/* 5 — Foco visível (o original usa outline:none; garantimos anel só em navegação por teclado) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* 6 — Stats count-up: mantém tabular para o dígito não saltar durante a animação */
[data-count-to] { font-variant-numeric: tabular-nums; }

/* Marquee — o token --duration vem do wrapper AnimatedGallery no original */
.AnimatedGallery_animatedGallery__bmSVQ { --duration: 40s; }

/* 7 · Locale switcher do footer (menu de idiomas, painel escuro do redesign) */
.clone-locale-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background-color: rgb(20, 20, 22);
  border: 1px solid rgba(245, 245, 242, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  padding: 10px var(--spacing-sm, 16px);
  z-index: 60;
}
.clone-locale-menu.clone-open { display: flex; flex-direction: column; }
.clone-locale-menu a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px;
  text-decoration: none;
  color: var(--color-white);
}
.clone-locale-menu a .clone-locale-code { font-weight: 700; }
.clone-locale-menu a .clone-locale-name { color: rgba(245, 245, 242, 0.62); }
.clone-locale-menu a.clone-active .clone-locale-code { color: var(--sn-yellow, #F9F811); }
.clone-locale-menu a.clone-active .clone-locale-name { color: var(--color-white); }
.clone-locale-menu a:not(.clone-active):hover .clone-locale-code,
.clone-locale-menu a:not(.clone-active):hover .clone-locale-name {
  color: var(--sn-yellow, #F9F811);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* menu mobile aberto: trava o scroll da página, como o pane fixo do original */
body.clone-mobile-open { overflow: hidden; }