/* Deve ser carregado após public.css: aparência configurável do menu. */
#main-nav{--menu-background:color-mix(in srgb,var(--surface) 94%,var(--primary));--menu-text:var(--text);--menu-border:color-mix(in srgb,var(--primary) 18%,var(--border));--menu-hover-background:var(--primary);--menu-hover-text:#fff;--menu-submenu-background:var(--surface);--menu-submenu-text:var(--text);--menu-submenu-hover:color-mix(in srgb,var(--primary) 9%,transparent);--menu-radius:999px;--menu-shadow-strength:18px;--menu-line-style:solid}
html[data-menu-style="classico"] #main-nav{--menu-background:#fff;--menu-text:#27313c;--menu-border:#cfd7df;--menu-hover-background:#354e68;--menu-submenu-background:#fff;--menu-submenu-text:#27313c;--menu-submenu-hover:#edf1f5;--menu-radius:8px;--menu-shadow-strength:12px}
html[data-menu-style="minimalista"] #main-nav{--menu-background:transparent;--menu-text:#30343a;--menu-border:#e5e7eb;--menu-hover-background:#171717;--menu-submenu-background:#fff;--menu-submenu-text:#30343a;--menu-submenu-hover:#f4f4f5;--menu-radius:4px;--menu-shadow-strength:4px}
html[data-menu-style="dourado"] #main-nav{--menu-background:#fffaf0;--menu-text:#3b3120;--menu-border:#e9c979;--menu-hover-background:#9b6c13;--menu-submenu-background:#fffdf8;--menu-submenu-text:#3b3120;--menu-submenu-hover:#fff0cd;--menu-radius:12px;--menu-shadow-strength:20px}
html[data-menu-style="noite"] #main-nav{--menu-background:#1d2939;--menu-text:#f2f7fb;--menu-border:#3c5067;--menu-hover-background:#426d9e;--menu-submenu-background:#223247;--menu-submenu-text:#f2f7fb;--menu-submenu-hover:#304b68;--menu-radius:10px;--menu-shadow-strength:24px}
html[data-menu-style="vidro"] #main-nav{--menu-background:color-mix(in srgb,#eaf5fc 76%,transparent);--menu-text:#203645;--menu-border:#aac7dc;--menu-hover-background:#4b7aa0;--menu-submenu-background:#f7fcff;--menu-submenu-text:#203645;--menu-submenu-hover:#e3f2f9;--menu-radius:18px;--menu-shadow-strength:16px}
html[data-menu-style="editorial"] #main-nav{--menu-background:#f8f5ef;--menu-text:#263238;--menu-border:#2c3e50;--menu-hover-background:#243b53;--menu-submenu-background:#fffcf7;--menu-submenu-text:#263238;--menu-submenu-hover:#f2e8d8;--menu-radius:0px;--menu-shadow-strength:10px}
html[data-menu-style="contorno"] #main-nav{--menu-background:#fff;--menu-text:#28415d;--menu-border:#3968af;--menu-hover-background:#fff;--menu-hover-text:#3968af;--menu-submenu-background:#fff;--menu-submenu-text:#28415d;--menu-submenu-hover:#eef5ff;--menu-radius:999px;--menu-shadow-strength:0px}
html[data-menu-style="suave"] #main-nav{--menu-background:#f4f6ff;--menu-text:#30334a;--menu-border:#c7d0f5;--menu-hover-background:#6677bd;--menu-submenu-background:#fbfbff;--menu-submenu-text:#30334a;--menu-submenu-hover:#eff0fc;--menu-radius:20px;--menu-shadow-strength:14px}
html[data-menu-style="compacto"] #main-nav{--menu-background:#f7f9fb;--menu-text:#263238;--menu-border:#b8c5d3;--menu-hover-background:#315b8f;--menu-submenu-background:#fff;--menu-submenu-text:#263238;--menu-submenu-hover:#eef4fa;--menu-radius:7px;--menu-shadow-strength:8px}
#main-nav{position:relative;z-index:20}#main-nav>ul{border-style:var(--menu-line-style);border-color:var(--menu-border);border-radius:var(--menu-radius);background:var(--menu-background);box-shadow:0 10px var(--menu-shadow-strength) rgb(18 37 63 / 14%)}
#main-nav .menu-item>a,#main-nav .menu-parent-toggle{color:var(--menu-text);border-radius:var(--menu-radius)}
#main-nav .menu-item>a:hover,#main-nav .menu-item>a:focus-visible,#main-nav .menu-parent-toggle:hover,#main-nav .menu-parent-toggle:focus-visible,#main-nav .has-children.is-open>.menu-parent-toggle{background:var(--menu-hover-background);color:var(--menu-hover-text);box-shadow:0 6px 15px color-mix(in srgb,var(--menu-hover-background) 26%,transparent)}
#main-nav .menu-group-label{border-style:var(--menu-line-style);border-color:var(--menu-border);border-radius:var(--menu-radius);background:color-mix(in srgb,var(--menu-background) 88%,transparent);color:var(--menu-text)}
#main-nav .submenu{border-style:var(--menu-line-style);border-color:var(--menu-border);border-radius:var(--menu-radius);background:var(--menu-submenu-background);box-shadow:0 var(--menu-shadow-strength) calc(var(--menu-shadow-strength) + 16px) rgb(18 37 63 / 18%)}
#main-nav .submenu::before{border-color:var(--menu-border);background:var(--menu-submenu-background)}#main-nav .submenu a{color:var(--menu-submenu-text);border-radius:var(--menu-radius)}#main-nav .submenu a:hover,#main-nav .submenu a:focus-visible{background:var(--menu-submenu-hover);color:var(--menu-text)}

/* Submenus extensos permanecem próximos ao item de origem, sem crescer sobre o conteúdo. */
#main-nav .submenu{border-radius:.85rem}
#main-nav .submenu a{border-radius:.5rem}
@media (min-width:761px){
  #main-nav .submenu{width:min(23rem,calc(100vw - 2rem));min-width:15rem;max-height:min(22rem,calc(100vh - 10rem));overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
  #main-nav .submenu a{white-space:normal}
}
@media (max-width:760px){#main-nav .submenu{max-height:50vh;overflow-y:auto;overscroll-behavior:contain}}
/* O Editor de camadas pode centralizar o bloco principal do menu. Essa
   preferência não deve vazar para os links internos do submenu. */
#main-nav .submenu {
  text-align:left !important;
  justify-items:start !important;
}
#main-nav .submenu > li {
  display:block !important;
  width:100% !important;
  text-align:left !important;
}
#main-nav .submenu > li > a {
  display:flex !important;
  justify-content:flex-start !important;
  width:100% !important;
  text-align:left !important;
}
#main-nav .has-children::after{position:absolute;z-index:19;top:100%;left:0;width:100%;height:.8rem;content:""}
html[data-menu-hover="underline"] #main-nav .menu-item>a:hover,html[data-menu-hover="underline"] #main-nav .menu-parent-toggle:hover{box-shadow:inset 0 -3px 0 var(--secondary);transform:none}html[data-menu-hover="soft"] #main-nav .menu-item>a:hover,html[data-menu-hover="soft"] #main-nav .menu-parent-toggle:hover{box-shadow:none;transform:none}html[data-menu-hover="solid"] #main-nav .menu-item>a:hover,html[data-menu-hover="solid"] #main-nav .menu-parent-toggle:hover{transform:none}
@media(max-width:760px){#main-nav .has-children::after{display:none}}
