/**
 * Netseg HD Ipesca — Mega Menu
 * v2.0.0
 *
 * 4 estilos partilham paleta e tipografia. Diferem só na forma como o item
 * activo e os estados (hover, com-painel) são destacados.
 *
 * Variáveis (geridas pelo widget Elementor):
 *   --nhdi-bg       fundo do widget
 *   --nhdi-accent   cor de destaque (laranja Netseg por defeito)
 *   --nhdi-height   altura do widget
 *   --nhdi-radius   raio dos cantos
 */

.nhdi-root{
  --nhdi-bg-night: #0d2235;
  --nhdi-bg-day:   #ffffff;
  --nhdi-bg:       var(--nhdi-bg-night);
  --nhdi-accent:   #f08c00;
  --nhdi-height:   64px;
  --nhdi-radius:   10px;
  --nhdi-border-w: 1px;

  position: relative;
  background: var(--nhdi-bg);
  border-radius: var(--nhdi-radius);
  border: var(--nhdi-border-w) solid currentColor;
  min-height: var(--nhdi-height);
  font-family: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  width: 100%;
  box-sizing: border-box;
  color: rgba(255,255,255,.85);
}
/* Em Dia, currentColor (e logo a cor da borda) fica escura. */
.nhdi-root.nhdi-theme-day{
  color: rgba(13,34,53,.85);
}

.nhdi-root *,
.nhdi-root *::before,
.nhdi-root *::after { box-sizing: border-box; }

/* ─── Barra (container dos items) ─── */
.nhdi-bar{
  display: flex;
  align-items: center;
  height: var(--nhdi-height);
  padding: 0 20px;
  gap: 24px;
}

/* ─── Item base (comum aos 4 estilos) ─── */
.nhdi-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
  flex-shrink: 0;
  position: relative;
  white-space: nowrap;
}

.nhdi-item:hover{ color: #fff; }
.nhdi-item:focus-visible{
  outline: 2px solid var(--nhdi-accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.nhdi-item__icon{
  font-size: 13px;
  line-height: 1;
}
.nhdi-item__chev{
  font-size: 9px;
  margin-left: 2px;
  opacity: .65;
  transition: transform .15s ease;
}
.nhdi-item[aria-expanded="true"] .nhdi-item__chev{
  transform: rotate(180deg);
}

/* ═══════════════════════════════════════════════════════
   ESTILO A — UNDERLINE
   Sublinhado accent só no item activo. Limpo e editorial.
   ═══════════════════════════════════════════════════════ */
.nhdi-style-underline .nhdi-item{
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  height: auto;
  align-self: center;
}
.nhdi-style-underline .nhdi-item--active{
  color: #fff;
  border-bottom-color: var(--nhdi-accent);
}
.nhdi-style-underline .nhdi-item:hover{
  color: #fff;
}

/* ═══════════════════════════════════════════════════════
   ESTILO B — PILL
   Item activo em pílula sólida accent. Items com painel
   ganham fundo subtil para indicar "tem mais".
   ═══════════════════════════════════════════════════════ */
.nhdi-style-pill .nhdi-bar{ gap: 6px; }
.nhdi-style-pill .nhdi-item{
  padding: 8px 14px;
  height: auto;
  border-radius: 6px;
}
.nhdi-style-pill .nhdi-item--has-panel{
  background: rgba(255,255,255,.06);
}
.nhdi-style-pill .nhdi-item--has-panel:hover{
  background: rgba(255,255,255,.12);
}
.nhdi-style-pill .nhdi-item--active{
  background: var(--nhdi-accent);
  color: #0d2235;
  font-weight: 600;
}
.nhdi-style-pill .nhdi-item--active:hover{
  background: var(--nhdi-accent);
  color: #0d2235;
  filter: brightness(1.05);
}

/* ═══════════════════════════════════════════════════════
   ESTILO C — STRIP
   Linha accent contínua na base do widget + sublinhado
   branco no item activo (assinatura visual Netseg).
   ═══════════════════════════════════════════════════════ */
.nhdi-style-strip{ overflow: hidden; }
.nhdi-style-strip::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--nhdi-accent);
}
.nhdi-style-strip .nhdi-item--active{
  color: #fff;
  font-weight: 600;
}
.nhdi-style-strip .nhdi-item--active::after{
  content: "";
  position: absolute;
  left: -8px; right: -8px;
  bottom: -8px;
  height: 3px;
  background: #fff;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════
   ESTILO D — DIVIDED
   Items distribuídos em colunas iguais com divisores
   verticais finos. Activo com fundo translúcido + borda
   superior accent.
   ═══════════════════════════════════════════════════════ */
.nhdi-style-divided .nhdi-bar{
  padding: 0;
  gap: 0;
}
.nhdi-style-divided .nhdi-item{
  flex: 1;
  justify-content: center;
  border-right: 1px solid rgba(255,255,255,.08);
  padding: 0 16px;
  border-top: 2px solid transparent;
}
.nhdi-style-divided .nhdi-item:last-child{
  border-right: 0;
}
.nhdi-style-divided .nhdi-item:hover{
  background: rgba(255,255,255,.04);
}
.nhdi-style-divided .nhdi-item--active{
  color: #fff;
  background: rgba(240,140,0,.18);
  border-top-color: var(--nhdi-accent);
}

/* ═══════════════════════════════════════════════════════
   PAINEL (modos click/hover)
   ═══════════════════════════════════════════════════════ */
.nhdi-panel{
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  color: #1f2937;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  z-index: 9999;
  animation: nhdi-panel-in .15s ease-out;
}
.nhdi-panel[hidden]{ display: none; }

@keyframes nhdi-panel-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.nhdi-panel__inner{
  padding: 24px 28px;
  max-width: 100%;
}

.nhdi-panel__links{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
}
.nhdi-panel__links li{ margin: 0; }
.nhdi-panel__links a{
  display: block;
  padding: 10px 14px;
  color: #1f2937;
  text-decoration: none;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.nhdi-panel__links a:hover{
  background: rgba(0,0,0,.05);
  color: var(--nhdi-accent);
}

.nhdi-panel__menu ul{
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
}
.nhdi-panel__menu li{ margin: 0; }
.nhdi-panel__menu a{
  display: block;
  padding: 10px 14px;
  color: #1f2937;
  text-decoration: none;
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
.nhdi-panel__menu a:hover{
  background: rgba(0,0,0,.05);
  color: var(--nhdi-accent);
}

.nhdi-panel__empty{
  margin: 0;
  color: #6b7280;
  font-size: 12px;
}

/* Tema Dia: widget claro */
.nhdi-root.nhdi-theme-day{
  --nhdi-bg: var(--nhdi-bg-day);
}
.nhdi-root.nhdi-theme-day .nhdi-item{
  color: rgba(0,0,0,.55);
}
.nhdi-root.nhdi-theme-day .nhdi-item:hover{
  color: #0d2235;
}
.nhdi-root.nhdi-theme-day .nhdi-style-underline .nhdi-item--active,
.nhdi-root.nhdi-theme-day .nhdi-style-strip .nhdi-item--active{
  color: #0d2235;
}
.nhdi-root.nhdi-theme-day .nhdi-style-strip .nhdi-item--active::after{
  background: #0d2235;
}
.nhdi-root.nhdi-theme-day .nhdi-style-pill .nhdi-item--has-panel{
  background: rgba(0,0,0,.04);
}
.nhdi-root.nhdi-theme-day .nhdi-style-pill .nhdi-item--has-panel:hover{
  background: rgba(0,0,0,.08);
}
.nhdi-root.nhdi-theme-day .nhdi-style-divided .nhdi-item{
  border-right-color: rgba(0,0,0,.08);
}
.nhdi-root.nhdi-theme-day .nhdi-style-divided .nhdi-item:hover{
  background: rgba(0,0,0,.04);
}

/* ─── Mobile ─── */
@media (max-width: 768px){
  .nhdi-bar{
    flex-wrap: wrap;
    height: auto;
    gap: 8px;
    padding: 12px 16px;
  }
  .nhdi-style-divided .nhdi-bar{ padding: 0; }
  .nhdi-style-divided .nhdi-item{
    flex: 1 1 33%;
    border-bottom: 1px solid rgba(255,255,255,.08);
    padding: 12px 8px;
  }
  .nhdi-panel__inner{ padding: 16px 18px; }
  .nhdi-panel__links,
  .nhdi-panel__menu ul{
    grid-template-columns: 1fr;
  }
}