/* ╔══════════════════════════════════════════════════════════════════════╗
   ║ 🎨 /public/includes/menuSuperior.css – Barra superior de navegação   ║
   ║ CONSART • versão final com ajuste de distância dos submenus          ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

:root{
  --menu-bg:#fcfcfd;
  --menu-text:#0b1b2b;
  --menu-text-hover:#ffffff;
  --menu-accent:#0ea5e9;
  --menu-border:#e7eef7;
  --menu-height:80px;         /* altura visível da barra */
  --menu-label-size:120px;    /* altura dos rótulos com imagem */
  --submenu-gap:6px;          /* distância entre item e dropdown */

  /* paleta Consart (3D) */
  --consart-azul-claro:#27b3ff;
  --consart-azul:#0ea5e9;
  --consart-azul-med:#0b78c4;
  --consart-azul-esc:#085a93;
}

/* ====================================================================== */
/* WRAPPER / HEADER                                                        */
/* ====================================================================== */
.menu-superior{
  background:var(--menu-bg);
  color:var(--menu-text);
  font-family:"Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  height:var(--menu-height);
  width:100%;
  border-bottom:1px solid var(--menu-border);
  box-shadow:0 1px 8px rgba(10,35,65,.05);
  position:sticky;
  top:0;
  z-index:1000;
}
.menu-container{
  max-width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.5rem;
  position:relative;
}

/* ====================================================================== */
/* LOGO                                                                    */
/* ====================================================================== */
.menu-logo{ display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.menu-logo img{ height:270px; width:auto; }   /* logo grande, fora do fluxo visual */
.menu-brand{ font-weight:600; font-size:1.2rem; color:var(--menu-text); }

/* ====================================================================== */
/* NAVEGAÇÃO                                                               */
/* ====================================================================== */
.menu-nav{ position:relative; margin:0 auto; display:flex; align-items:center; }
.menu-nav .menu-level{ list-style:none; margin:0; padding:0; }
.menu-nav .menu-level-0{ display:flex; gap:16px; align-items:center; }

/* itens de topo */
.menu-item{ position:relative; }
.menu-link{
  display:inline-flex; align-items:center; padding:10px 12px; text-decoration:none;
}
.menu-link,.dropbtn{
  color:var(--menu-text);
  background:none; border:0; cursor:pointer;
  font-size:5.05rem;            /* mantém seu destaque atual */
  font-weight:700; letter-spacing:.01em;
  padding:.4rem 0;
  transition:color .15s, transform .15s, text-shadow .15s, filter .15s;
}
.menu-link:hover,.dropbtn:hover,.menu-link.active{ color:var(--menu-accent); }

/* ====================================================================== */
/* 3D no texto dos itens de topo                                           */
/* ====================================================================== */
.menu-3d .menu-level-0 > .menu-item > .menu-link{
  background-image:linear-gradient(
    180deg,
    var(--consart-azul-claro) 0%,
    var(--consart-azul) 40%,
    var(--consart-azul-med) 72%,
    var(--consart-azul-esc) 100%
  );
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:900; letter-spacing:.02em;
  text-shadow:
    0 -1px 0 rgba(255,255,255,.18),
    0 1px 0 rgba(0,0,0,.05),
    0 2px 0 rgba(0,0,0,.06),
    0 3px 1px rgba(0,0,0,.08),
    0 6px 8px rgba(0,0,0,.12);
}
.menu-3d .menu-level-0 > .menu-item > .menu-link:hover,
.menu-3d .menu-level-0 > .menu-item > .menu-link:focus,
.menu-3d .menu-level-0 > .menu-item.active > .menu-link{
  transform:translateY(-1px);
  filter:brightness(1.06) saturate(1.03);
  text-shadow:
    0 -1px 0 rgba(255,255,255,.22),
    0 1px 0 rgba(0,0,0,.05),
    0 3px 1px rgba(0,0,0,.10),
    0 8px 12px rgba(0,0,0,.16);
}

/* ====================================================================== */
/* RÓTULO COM IMAGEM (Opção A)                                             */
/* ====================================================================== */
.menu-link.has-img{ padding:6px 10px; font-size:0; } /* zera espaço do texto no desktop */
.menu-link.has-img .menu-text{ display:none !important; }
.menu-img{
  display:inline-block; height:var(--menu-label-size); width:auto; vertical-align:middle;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
  transition:filter .15s, transform .15s;
}
.menu-item > .menu-link.has-img:hover .menu-img,
.menu-item.active > .menu-link.has-img .menu-img{
  transform:translateY(-1px);
  filter:brightness(1.06) drop-shadow(0 4px 10px rgba(0,0,0,.18));
}

/* Mobile: mostra texto e esconde imagem */
@media (max-width:900px){
  .menu-link.has-img{ font-size:inherit; }
  .menu-link.has-img .menu-text{ display:inline !important; color:var(--menu-text); }
  .menu-link.has-img .menu-img{ display:none; }
}

/* caret visual ao lado do item */
.menu-item.has-children > .menu-link::after{
  content:"";
  display:inline-block; margin-left:8px;
  border:6px solid transparent;
  border-top-color: color-mix(in oklab, var(--menu-text) 72%, white);
  transform:translateY(2px);
  transition:transform .18s, border-top-color .18s;
}
.menu-item.has-children.open > .menu-link::after{ transform:translateY(-1px) rotate(180deg); }

/* ====================================================================== */
/* BOTÃO DE TOGGLE (mobile)                                                */
/* ====================================================================== */
@media (min-width:901px){ .menu-item.has-children > .submenu-toggle{ display:none !important; } }
@media (max-width:900px){
  .menu-item.has-children > .menu-link::after{ display:none; }
  .menu-item.has-children > .submenu-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer; padding:0 8px; line-height:1;
    font-size:14px; color:var(--menu-text);
  }
  .menu-item.has-children.open > .submenu-toggle .submenu-caret{ transform:rotate(180deg); }
  .menu-item.has-children .submenu-caret{ display:inline-block; transition:transform .18s ease; }
}

/* ====================================================================== */
/* SUBMENUS (desktop)                                                      */
/* ====================================================================== */
.menu-level-1{
  position:absolute; top:calc(100% - 2px); left:0; z-index:1200;
  background:rgba(255,255,255,.92);
  border:1px solid var(--menu-border); border-radius:12px;
  min-width:280px; padding:8px;
  box-shadow:0 12px 28px rgba(10,35,65,.14), 0 2px 0 rgba(10,35,65,.03);
  backdrop-filter:saturate(140%) blur(8px);
  opacity:0; visibility:hidden; pointer-events:none;
  transform-origin:top left; transform:translateY(4px) scale(.985);
  transition:opacity .16s, transform .16s, box-shadow .18s;
}
.menu-level-1[hidden]{ opacity:0; visibility:hidden; pointer-events:none; }
.menu-item.has-children.open > .menu-level-1{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateY(8px) scale(1);
  box-shadow:0 14px 32px rgba(10,35,65,.18), 0 4px 0 rgba(10,35,65,.04);
}
.menu-item.has-children.open > .menu-level-1::before{
  content:""; position:absolute; top:-8px; left:22px;
  border-width:8px; border-style:solid;
  border-color:transparent transparent rgba(255,255,255,.92) transparent;
  filter:drop-shadow(0 -1px 0 var(--menu-border));
  pointer-events:none;
}

/* itens dentro do dropdown */
.menu-level-1 > .menu-item + .menu-item{ margin-top:4px; }
.menu-level-1 > .menu-item > .menu-link{
  display:block; padding:12px 10px; border-radius:10px;
  color:var(--menu-text); font-weight:700; font-size:.95rem;
}
.menu-level-1 > .menu-item > .menu-link:hover{
  background: color-mix(in oklab, var(--menu-accent) 14%, white);
  color:var(--consart-azul-esc);
}

/* ponte anti-gap para hover estável */
.menu-item.has-children.open::after{
  content:""; position:absolute; left:0; top:100%;
  width:100%; height:16px; background:transparent; pointer-events:auto;
}

/* ====================================================================== */
/* MOBILE (acordeão)                                                       */
/* ====================================================================== */
.menu-toggle{ display:none; font-size:1.6rem; background:none; border:none; color:var(--menu-text); cursor:pointer; }
@media (max-width:900px){
  .menu-toggle{ display:block; }
  .menu-nav{
    position:fixed; top:var(--menu-height); left:0; right:0;
    background:var(--menu-bg); display:none; flex-direction:column;
    border-top:1px solid var(--menu-border);
    box-shadow:0 8px 18px rgba(10,35,65,.06);
  }
  .menu-nav.open{ display:flex; }
  .menu-level-0{ flex-direction:column; align-items:stretch; }
  .menu-item{ width:100%; text-align:center; border-bottom:1px solid var(--menu-border); }
  .menu-link,.dropbtn{ display:block; width:100%; padding:1rem 0; }

  .menu-item.has-children > .menu-level-1{
    position:static; margin-left:12px; min-width:auto; box-shadow:none; border:0; backdrop-filter:none;
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
  }
  .menu-item.has-children.open > .menu-level-1::before{ display:none; }
}

/* ====================================================================== */
/* ACESSIBILIDADE / UTILIDADE                                              */
/* ====================================================================== */
.menu-link:focus,.submenu-toggle:focus{
  outline:2px solid color-mix(in oklab, var(--menu-accent) 40%, white);
  outline-offset:2px; border-radius:8px;
}
html{ scroll-behavior:smooth; }

/* WhatsApp flutuante */
.whatsapp-float{
  position:fixed; top:14px; right:24px; z-index:1300;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(145deg,#25d366,#128c7e);
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
  transition:transform .2s, box-shadow .2s, filter .2s;
}
.whatsapp-float:hover{
  transform:translateY(-2px) scale(1.07);
  box-shadow:0 6px 14px rgba(37,211,102,.45);
  filter:brightness(1.08);
}
@media (max-width:900px){
  .whatsapp-float{ top:auto; right:18px; bottom:18px; }
}

/* ====================================================================== */
/* 🔧 FIX – SUBMENU COLADO AO ITEM MESMO COM RÓTULO EM IMAGEM              */
/* Explicação: quando o item usa imagem alta (menu-label-size), o dropdown
   não deve descer toda essa altura. Subtraímos o excesso para alinhar ao
   topo real da barra (menu-height) e aplicamos um gap curto controlável.   */
/* ====================================================================== */
:root{
  --submenu-fix: calc(var(--menu-label-size) - var(--menu-height));
}

/* aplica somente para itens do nível 0 que usam imagem */
.menu-level-0 > .menu-item > .menu-link.has-img ~ .menu-level-1{
  top: calc(100% - var(--submenu-fix) + var(--submenu-gap));
  transform: translateY(0) scale(1);
}
.menu-item.has-children.open > .menu-link.has-img ~ .menu-level-1{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translateY(2px) scale(1);
}
/* ajusta a setinha do balão */
.menu-item.has-children.open > .menu-link.has-img ~ .menu-level-1::before{
  top: calc(-8px - var(--submenu-fix) + var(--submenu-gap));
}
/* ponte anti-gap menor para hover estável e colado */
.menu-item.has-children.open::after{ height:8px; }