/*
==================================================
MENU.CSS — D&A GIRALDES
==================================================

REGRAS DE OURO

1. Este arquivo é AUTOSSUFICIENTE
   → Não depende do style.css
   → Não sobrescreve regras globais fora do menu

2. Desktop e Mobile NÃO compartilham layout
   → Desktop: flex / grid
   → Mobile: fluxo vertical forçado

3. Temas (blue / light) só alteram VISUAL
   → Nunca estrutura
   → Nunca comportamento

4. Ordem do arquivo = ordem da cascata
   → Estrutura → Desktop → Mobile → Temas
*/

/* ==================================================
   1. TOKENS / VARIÁVEIS
================================================== */
:root {
  --brand-blue: #0B2E6B;
  --brand-green: #1B8E4B;
  --ease-ui: cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* ==================================================
   2. RESET LOCAL (MENU)
================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Inter, Arial, sans-serif;
  background: #fff;
  color: #1a1a1a;
}

/* ==================================================
   3. HEADER (ESTRUTURA — CLS ZERO)
================================================== */
.site-header {
  position: relative;
  z-index: 1000;
  background: var(--brand-blue);
}

.header-inner {
  height: 72px;
  /* CLS zero */
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
}

/* ==================================================
   4. NAVEGAÇÃO DESKTOP (NÍVEL 1)
================================================== */
.nav-desktop ul {
  list-style: none;
  display: flex;
  gap: 40px;
}

.nav-desktop a {
  position: relative;
  padding: 6px 0;

  text-decoration: none;
  color: #fff;
}

/* Sublinhado ativo */
.nav-item>.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;

  width: 100%;
  height: 3px;
  background: var(--brand-green);

  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms var(--ease-ui);
}

.nav-item.active>.nav-link::after {
  transform: scaleX(1);
}

/* ==================================================
   5. MEGA MENU (DESKTOP)
================================================== */
.mega-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  background: #fff;
  padding: 48px 24px;
  display: flex;
  gap: 48px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;

  transition:
    opacity 220ms var(--ease-ui),
    transform 220ms var(--ease-ui);
}

.nav-item.show>.mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-item.has-mega.show .mega-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* .nav-item.active>.nav-link::after {
  transform: scaleX(1);
} */

/* Conteúdo interno */
.mega-intro {
  max-width: 320px;
}

.mega-intro h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.mega-intro p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.mega-intro .cta {
  font-weight: 600;
  color: var(--brand-green);
  text-decoration: none;
}

.mega-intro .cta::after {
  content: "→";
  margin-left: 6px;
  transition: transform 180ms var(--ease-ui);
}

.mega-intro .cta:hover::after {
  transform: translateX(4px);
}

.mega-cols {
  display: flex;
  gap: 64px;
}

.mega-col h4 {
  font-size: 13px;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 12px;
}

.mega-col a {
  display: block;
  margin-bottom: 10px;

  text-decoration: none;
  color: var(--brand-blue);

  transition: color 150ms var(--ease-ui);
}

.mega-col a:hover {
  color: var(--brand-green);
}

/* DESKTOP — CONTROLE DO MEGA MENU (HOVER + ACTIVE) */
@media (min-width: 1024px) {

  .nav-item.has-mega .mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
  }

  .nav-item.has-mega.show .mega-menu,
  .nav-item.has-mega.active .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
  }
}

/* ==================================================
   6. MENU MOBILE (BASE)
================================================== */
.menu-toggle {
  display: none;
  font-size: 26px;

  background: none;
  border: none;
  color: #fff;
}

.nav-mobile {
  display: none;
  position: fixed;
  inset: 72px 0 0 0;
  background: #fff;
  padding: 24px;
  overflow-y: auto;
  z-index: 3000; /* 🔑 garante que o menu fique acima do conteúdo */
}

.nav-mobile ul {
  list-style: none;
}

/* ==================================================
   6.1 MOBILE — LINKS NÍVEL 1
   (Home / Contato / Botões principais)
================================================== */
.nav-mobile>ul>li>a,
.nav-mobile button {
  display: block;
  width: 100%;
  padding: 16px 0;

  font-size: 16px;
  font-weight: 600;
  text-align: left;

  background: none;
  border: none;
  text-decoration: none;
  color: var(--brand-blue);
}

/* Feedback de toque */
.nav-mobile a:active,
.nav-mobile button:active {
  opacity: 0.75;
}

/* ==================================================
   6.2 MOBILE — ACCORDION / SUBMENU
================================================== */
.accordion button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion button::after {
  content: "›";
  transition: transform 200ms var(--ease-ui);
}

.accordion.open button::after {
  transform: rotate(90deg);
}

.panel {
  max-height: 0;
  overflow: hidden;
  padding-left: 16px;
  transition: max-height 260ms var(--ease-ui);
}

/* Submenu — nível 2 */
.nav-mobile .panel a {
  display: block;
  width: 100%;
  padding: 12px 0;

  font-size: 15px;
  font-weight: 500;

  text-decoration: none;
  color: var(--brand-blue);
}

/* Garante que mobile nunca herde grid do mega */
.nav-mobile .mega-cols {
  display: block;
}

@media (max-width: 1023px) {

  .nav-mobile .nav-item.show .panel {
    max-height: 1000px;
    /* valor alto seguro */
  }

  .nav-mobile .nav-item.show {
    margin-bottom: 8px;
  }

  /* Indicador de submenu (seta) */
  .nav-mobile .nav-item.has-mega>.nav-link {
    position: relative;
    padding-right: 2.5rem;
  }

  .nav-mobile .nav-item.has-mega>.nav-link::before {
    content: "›";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 1.4rem;
    transition: transform 0.25s ease;
  }

  /* Seta gira quando aberto */
  .nav-mobile .nav-item.show>.nav-link::before {
    transform: translateY(-50%) rotate(90deg);
  }

  /* ===============================
     RESET DE ESTADOS VISUAIS DESKTOP
     NO MENU MOBILE
  =============================== */

  .nav-mobile .nav-link {
    border: none !important;
    box-shadow: none !important;
  }

  /* REMOVE COMPLETAMENTE O UNDERLINE (DESKTOP) NO MOBILE */
  .nav-mobile .nav-link::after {
    content: none !important;
    display: none !important;
  }

  .nav-mobile .nav-link::before,
  .nav-mobile .nav-link::after {
    box-shadow: none !important;
  }

  /* Remove underline / linha verde */
  .nav-mobile .nav-item.active>.nav-link,
  .nav-mobile .nav-item.show>.nav-link {
    border-bottom: none !important;
  }

  /* Remove linha lateral verde herdada */
  .nav-mobile .nav-item {
    border-left: none !important;
  }
}

/* ==================================================
   7. RESPONSIVO
================================================== */
@media (max-width: 900px) {
  .nav-desktop {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .nav-mobile.active {
    display: block;
  }
}

/* DESKTOP — Mega menu visível */
/* @media (min-width: 1024px) {

  .nav-item.has-mega.show>.mega-menu,
  .nav-item.has-mega.active>.mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
} */

/* @media (min-width: 1024px) {
  .nav-item.has-mega>.mega-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
  }
} */

@media (min-width: 1024px) {

  /*   .nav-link:hover {
    text-decoration: underline;
  }
  } */
  .nav-link:hover {
    color: var(--brand-green);
  }

  /* ==================================================
   8. TEMAS (EXTENSÃO VISUAL)
  ================================================== */

  /* ---------- TEMA BLUE ---------- */
  .site-header.theme-blue {
    background: var(--brand-blue);
  }

  .site-header.theme-blue .logo,
  .site-header.theme-blue .nav-desktop a,
  .site-header.theme-blue .menu-toggle {
    color: #fff;
  }

  .site-header.theme-blue .mega-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 32px 48px rgba(0, 0, 0, 0.18);
  }

  /* ---------- TEMA LIGHT ---------- */
  .site-header.theme-light {
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
  }

  .site-header.theme-light .logo,
  .site-header.theme-light .nav-desktop a,
  .site-header.theme-light .menu-toggle {
    color: var(--brand-blue);
  }

  .site-header.theme-light .nav-item>.nav-link::after {
    background: var(--brand-green);
  }

  .site-header.theme-light .mega-menu {
    border: 1px solid rgba(11, 46, 107, 0.12);
    border-radius: 12px;
    margin-top: 12px;
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.08);
  }

  /* ===== ACESSIBILIDADE — FOCO ===== */

  .nav-link:focus-visible,
  .menu-toggle:focus-visible,
  .accordion button:focus-visible,
  .nav-mobile a:focus-visible {
    outline: 2px solid var(--brand-blue, #0B2E6B);
    outline-offset: 4px;
  }
}