/* ============================================================
   WUAI GlobalHub — Menu principal (compartilhado)
   Usado em: index.html, marcas.html, marcas/*.html
   Depende de: assets/js/menu.js
   ============================================================ */

/* Tokens usados pelo menu (mesmos valores do tema do site) */
:root{
  --ink:#0B1D4D;
  --ink-2:#2B3F66;
  --muted:#4A5E80;
  --blue-900:#0A1B4A;
  --blue-600:#2A56C6;
  --blue-500:#3D6FE0;
  --blue-100:#DCE5F8;
  --blue-grad:linear-gradient(135deg,#3D6FE0 0%,#2A56C6 45%,#0A1B4A 100%);
  --display:"Inter Tight","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1240px;
  --pad:clamp(20px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Estrutura ---------- */
.site-header{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:60;padding-top:18px;pointer-events:none;font-family:var(--body)}
.site-header *,.site-header *::before,.site-header *::after{box-sizing:border-box}
.site-header .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);position:relative;pointer-events:auto}
.site-header a{color:inherit;text-decoration:none}
.site-header :focus-visible{outline:2px solid var(--blue-600);outline-offset:3px;border-radius:12px}

.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 8px 8px 24px;border-radius:999px;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 20px 60px rgba(30,50,75,.12);
  transition:background-color .4s ease,box-shadow .4s ease}
.nav.scrolled{background:rgba(255,255,255,.62);box-shadow:inset 0 1px 0 #fff,0 18px 50px rgba(30,50,75,.16)}

.nav .logo{display:flex;align-items:center;color:var(--blue-900)}
.nav .logo img{display:block;width:64px;height:auto}

/* ---------- Links ---------- */
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-links > li{position:relative}
.nav-links a,
.nav-sub-toggle{display:flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;font:400 14px/1.6 var(--body);color:var(--ink-2);transition:background-color .25s ease,color .25s ease}
.nav-links a:hover,
.nav-sub-toggle:hover{background:rgba(255,255,255,.6)}
.nav-links a[aria-current="page"],
.nav-has-sub.is-current > .nav-sub-toggle{background:rgba(255,255,255,.85);color:var(--blue-600)}

/* ---------- Submenu "Marcas" ---------- */
.nav-sub-toggle{border:0;background:none;cursor:pointer}
.nav-sub-toggle .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nav-has-sub.open > .nav-sub-toggle .chev{transform:rotate(180deg)}

.nav-sub{list-style:none;margin:0;padding:8px}
.nav-sub a{justify-content:space-between;border-radius:14px;padding:10px 14px}
.nav-sub a::after{content:"";width:6px;height:6px;border-radius:999px;background:var(--blue-grad);opacity:0;transition:opacity .25s ease}
.nav-sub a[aria-current="page"]::after,
.nav-sub a:hover::after{opacity:1}
.nav-sub .nav-sub-all{margin-top:4px;padding-top:6px;border-top:1px solid rgba(15,27,41,.1)}
.nav-sub .nav-sub-all a{color:var(--blue-600);font-weight:500}
.nav-sub .nav-sub-all a::after{display:none}

/* ---------- Botão de contato ---------- */
.nav .btn{display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:0 8px 0 20px;border:0;border-radius:999px;cursor:pointer;
  font:500 14px/1 var(--body);color:#fff;background:var(--blue-grad);
  box-shadow:0 14px 40px rgba(42,86,198,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .3s var(--ease),box-shadow .3s ease}
.nav .btn:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(42,86,198,.45),inset 0 1px 0 rgba(255,255,255,.25)}
.nav .btn-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:#fff;flex:none;transition:transform .3s var(--ease)}
.nav .btn:hover .btn-icon{transform:rotate(45deg)}
.nav .btn-icon svg{width:14px;height:14px;fill:none;stroke:var(--blue-600);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Botão hambúrguer ---------- */
.menu-toggle{display:none;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.5);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.menu-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;transition:transform .3s var(--ease)}
.nav.open .menu-toggle svg{transform:rotate(90deg)}

/* ---------- Desktop ---------- */
@media (min-width:961px){
  .nav-menu{display:flex;align-items:center;gap:16px;flex:1;justify-content:space-between;padding-left:28px}
  .nav-sub{position:absolute;left:0;top:calc(100% + 12px);min-width:240px;border-radius:22px;
    background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
    box-shadow:inset 0 1px 0 #fff,0 24px 60px rgba(30,50,75,.18);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .25s ease,transform .3s var(--ease),visibility 0s linear .3s}
  /* ponte invisível para o hover não "cair" no espaço entre o botão e o painel */
  .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .nav-has-sub.open > .nav-sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s var(--ease),visibility 0s}
  @media (hover:hover){
    .nav-has-sub:hover > .nav-sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s var(--ease),visibility 0s}
    .nav-has-sub:hover > .nav-sub-toggle .chev{transform:rotate(180deg)}
  }
}

/* ---------- Mobile / tablet ---------- */
@media (max-width:960px){
  .menu-toggle{display:inline-flex}
  .nav{flex-wrap:wrap;border-radius:28px}
  .nav.open{background:rgba(255,255,255,.86)}
  .nav-menu{display:none;width:100%;flex-direction:column;align-items:stretch;gap:8px;padding:8px 8px 12px 0;max-height:calc(100svh - 120px);}
  .nav.open .nav-menu{display:flex}
  .nav-links{flex-direction:column;align-items:stretch}
  .nav-links a,.nav-sub-toggle{width:100%;padding:14px 16px}
  .nav-sub-toggle{justify-content:space-between}
  .nav-sub{display:none;padding:0 0 6px 12px}
  .nav-has-sub.open > .nav-sub{display:block}
  .nav-sub a{padding:12px 16px}
  .nav .btn{justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  .site-header *{transition:none!important}
}