/* ═══════════════════════════════════════════════════════════════
   NAVIGATION — Barra de navegação fixa, mega menu, dropdown, mobile
   A navegação é renderizada pelo partial _Navigation.cshtml
   ═══════════════════════════════════════════════════════════════ */


/* ─── SITE HEADER ────────────────────────────────────────────────── */
/* Barra de topo fixa com efeito de vidro (glassmorphism) */
.site-header {
  position: fixed;               /* fica sempre no topo durante o scroll */
  top: 0; left: 0; right: 0;    /* ocupa toda a largura */
  z-index: 1000;                 /* acima de todo o conteúdo da página */
  height: var(--nav-height);     /* 80px — mesma altura usada nos paddings dos heróis */
  background: rgba(13,13,13,0.3);          /* fundo semi-transparente inicial */
  backdrop-filter: blur(16px);             /* desfoca o conteúdo por baixo (glassmorphism) */
  -webkit-backdrop-filter: blur(16px);     /* prefixo para Safari */
  transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
}

/* após scroll — o JS adiciona .is-scrolled via site.js */
.site-header.is-scrolled {
  background: rgba(13,13,13,0.92);  /* fundo quase opaco ao fazer scroll */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(0,0,0,0.25); /* sombra subtil para separar do conteúdo */
}


/* ─── NAV CONTAINER ──────────────────────────────────────────────── */
/* Linha interior da nav: logo | links | CTA — centrado e com padding responsivo */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;          /* logo à esquerda, links à direita */
  height: 100%;                            /* ocupa a altura total do site-header */
  max-width: var(--container-max);
  margin-inline: auto;                     /* centrado horizontalmente */
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}


/* ─── NAV LOGO ───────────────────────────────────────────────────── */
.nav-logo,
.footer-logo { text-decoration: none; }    /* remove sublinhado do link do logo */

.nav-logo__img {
  height: 90px;                            /* ligeiramente maior que a nav — sobrepõe-se propositadamente */
  width: auto;                             /* mantém proporções */
  display: block;                          /* elimina espaço extra em baixo */
}


/* ─── NAV MENU ───────────────────────────────────────────────────── */
/* Lista de links de navegação — esconde-se em tablet/mobile */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;          /* espaço mínimo entre itens — o padding dos links cria o espaço visual */
  list-style: none;
}
@media (max-width: 1024px) { .nav-menu { display: none; } } /* esconde em tablet → aparece hamburger */

/* cada link de navegação */
.nav-link {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);   /* branco ligeiramente transparente */
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
  display: flex;
  align-items: center;
  gap: 0.3rem;                     /* espaço entre texto e seta do dropdown */
  white-space: nowrap;             /* impede quebra de linha nos links */
}
.nav-link:hover { color: var(--color-white); }

/* link CTA "Fale Connosco" — pill laranja destacado */
.nav-link--cta {
  background: var(--color-accent);
  color: #ffffff !important;       /* !important garante cor branca mesmo com especificidade baixa */
  margin-left: 0.5rem;             /* afasta ligeiramente do resto dos links */
  border-radius: var(--radius-full); /* forma de pill */
  padding: 0.5rem 1.2rem;
}
.nav-link--cta:hover { background: #c9621a; color: #ffffff !important; } /* laranja mais escuro ao hover */

/* seta que roda ao abrir o dropdown/mega menu */
.nav-arrow { transition: transform var(--transition); }
.has-dropdown:hover .nav-arrow,
.has-dropdown:focus-within .nav-arrow { transform: rotate(180deg); } /* roda 180° quando aberto */


/* ─── MEGA MENU ──────────────────────────────────────────────────── */
/* Painel full-width que abre ao hover nos itens com submenu (ex: Soluções)
   Ativado por CSS puro com :hover e :focus-within — sem JavaScript */
.mega-menu {
  position: absolute;               /* posicionado relativamente ao .has-dropdown */
  top: var(--nav-height);           /* imediatamente abaixo da nav */
  left: 0; right: 0;               /* ocupa toda a largura do viewport */
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(16px);      /* glassmorphism */
  border-top: 1px solid var(--color-border-light); /* linha separadora */
  opacity: 0;                       /* invisível por defeito */
  visibility: hidden;               /* removido do fluxo de tab quando fechado */
  transform: translateY(-12px);     /* começa ligeiramente acima */
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 999;                     /* abaixo do site-header (1000) */
}
/* abre com hover ou focus (teclado) no item pai */
.has-dropdown:hover .mega-menu,
.has-dropdown:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);         /* desce para a posição correcta */
}

/* grelha interior do mega menu: coluna de overview + grelha de itens */
.mega-menu__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 2.5rem clamp(1.25rem, 5vw, 3rem);
  display: grid;
  grid-template-columns: 280px 1fr; /* coluna de descrição fixa + grelha de links */
  gap: var(--space-xl);
}

/* rótulo "SOLUÇÕES" em laranja na coluna de overview */
.mega-menu__overview .mega-menu__label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  display: block;
}
/* descrição curta da categoria */
.mega-menu__overview p { color: rgba(255,255,255,0.6); font-size: 0.9rem; margin-bottom: 1.25rem; }

/* link "Ver todas as soluções →" com animação de gap ao hover */
.mega-menu__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-accent);
  transition: gap var(--transition);  /* anima o espaço entre texto e seta */
}
.mega-menu__cta:hover { gap: 0.75rem; } /* seta afasta-se do texto ao hover */

/* cada item: ícone emoji (Retirei) + título + descrição */
.mega-menu__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius-md);
  transition: background var(--transition);
}
.mega-menu__item:hover { background: rgba(255, 255, 255, 0.345); } /* fundo subtil ao hover */
.mega-menu__item strong { display: block; color: var(--color-white); font-size: 0.92rem; margin-bottom: 0.2rem; }
.mega-menu__item span   { color: rgba(255,255,255,0.5); font-size: 0.82rem; }


/* ─── DROPDOWN MENU ──────────────────────────────────────────────── */
/* Dropdown pequeno (ex: selector de idioma) — mais compacto que o mega menu */
.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);             /* 8px abaixo do link pai */                     /* âncora mais simétrica com o link*/
  min-width: 200px;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
  z-index: 999;
}
/* abre com hover ou focus */
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
}

/* cada item do dropdown */
.dropdown-item {
  display: block;
  padding: 0.5rem 0.85rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  border-radius: var(--radius-sm);
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.dropdown-item:hover       { background: rgba(255, 255, 255, 0.345); color: var(--color-white); }

/* ─── HAMBURGER ──────────────────────────────────────────────────── */
/* Botão de menu mobile — as 3 linhas animam para um X quando .is-open */
.nav-hamburger {
  display: none;           /* escondido em desktop */
  flex-direction: column;
  gap: 5px;                /* espaço entre as 3 linhas */
  padding: 8px;            /* área de clique maior que o ícone */
}
@media (max-width: 1024px) { .nav-hamburger { display: flex; } } /* visível em tablet/mobile */

.nav-hamburger span {
  width: 24px; height: 2px;             /* cada linha do hambúrguer */
  background: var(--color-white);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
/* linha 1: roda +45° e desce para formar o braço superior do X */
.nav-hamburger.is-open span:nth-child(1) { transform: rotate(45deg) translateY(5px) translateX(3px); }
/* linha 2: desaparece — não é necessária no X */
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
/* linha 3: roda -45° e sobe para formar o braço inferior do X */
.nav-hamburger.is-open span:nth-child(3) { transform: rotate(-45deg) translateY(-5px) translateX(3px); }


/* ─── MOBILE MENU ────────────────────────────────────────────────── */
/* Painel full-screen que desliza da direita em ecrãs < 1024px */
.mobile-menu {
  display: none;           /* o display:block é dado pelo @media abaixo */
  position: fixed;
  top: var(--nav-height);  /* começa imediatamente abaixo da nav */
  left: 0; right: 0; bottom: 0; /* ocupa o resto do ecrã */
  background: var(--color-dark);
  overflow-y: auto;        /* scroll se o conteúdo for maior que o ecrã */
  padding: var(--space-lg);
  transform: translateX(100%);     /* começa fora do ecrã à direita */
  transition: transform var(--transition-slow); /* animação de entrada/saída */
  z-index: 998;            /* abaixo do site-header (1000) e do mega menu (999) */
}
@media (max-width: 1024px) { .mobile-menu { display: block; } }
.mobile-menu.is-open { transform: translateX(0); } /* o JS adiciona .is-open ao hamburger click */

/* lista de links no menu mobile — coluna vertical com separadores */
.mobile-menu__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.mobile-menu__list a {
  display: block;               /* ocupa a linha inteira — área de clique maior */
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-white);
  padding: 1rem 0;              /* espaço confortável para toque */
  border-bottom: 1px solid var(--color-border-light); /* linha separadora */
}

/* botão CTA "Fale Connosco" dentro do menu mobile — pill laranja */
.mobile-cta {
  display: inline-block;
  background: var(--color-accent) !important; /* !important sobrepõe o estilo do a acima */
  color: var(--color-dark) !important;        /* texto escuro em fundo laranja */
  padding: 1rem 2rem !important;
  border-radius: var(--radius-full) !important; /* pill */
  margin-top: 0.5rem;
  border-bottom: none !important;            /* remove o separador do link normal */
}

/* linha de idioma no fundo do menu mobile */
.mobile-lang       { padding: 1.5rem 0; color: rgba(255,255,255,0.5); font-size: 0.9rem; }
.mobile-lang a     { display: inline; padding: 0; border: none; font-size: 0.9rem; } /* sem o estilo dos outros links */

/* secção expansível (<details>/<summary>) dentro do menu mobile */
.mobile-accordion summary {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-white);
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  list-style: none;            /* remove o triângulo padrão do <summary> */
}
.mobile-accordion ul       { padding: 0.5rem 0 0.5rem 1rem; } /* sub-itens indentados */
.mobile-accordion ul a     { font-size: 1rem; color: rgba(255,255,255,0.7); padding: 0.5rem 0; }