/* ==========================================================================
   MediaToBook — Menu "Soluções Editoriais" (Dropdown por clique)
   Acompanha o style.css principal. Não redefine .main-nav (evita conflito).
   Ativação por clique via JS (classe .open) — funciona em desktop, touch e mobile.
   ========================================================================== */

/* Container do dropdown */
.nav-item-dropdown { position: relative; display: inline-block; }

/* Botão "Soluções Editoriais" */
.dropdown-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; background: none; border: 0;
  font: inherit; color: inherit; padding: 0;
}
.dropdown-toggle .arrow {
  font-size: 0.62rem; transition: transform 0.25s ease; line-height: 1;
}
.nav-item-dropdown.open .dropdown-toggle .arrow { transform: rotate(180deg); }

/* Caixa do submenu — escondida por padrão */
.dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: #fff; min-width: 290px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
  border-radius: 8px; padding: 8px 0; margin-top: 12px;
  z-index: 1000; border: 1px solid #eef2f5;
}
/* Ponte invisível: evita "buraco" entre o botão e o menu */
.dropdown-menu::before {
  content: ''; position: absolute; top: -14px; left: 0;
  width: 100%; height: 14px;
}
/* Aberto via clique (JS adiciona .open) */
.nav-item-dropdown.open .dropdown-menu {
  display: block; animation: menuFadeIn 0.18s ease-out;
}

/* Itens do submenu */
.dropdown-menu a {
  color: #4a4a4a !important; padding: 11px 20px !important;
  display: block !important; font-size: 0.95rem !important;
  font-weight: 500 !important; text-align: left; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.dropdown-menu a::after { display: none !important; } /* remove sublinhado animado do base */
.dropdown-menu a:hover { background: #f4f7fa; color: var(--azul) !important; }
.dropdown-menu a.dropdown-highlight {
  border-top: 1px solid #edf2f7; margin-top: 4px;
  font-weight: 600 !important; color: var(--azul) !important;
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==========================================================================
   Mobile (dentro do menu hambúrguer): submenu em fluxo, recuado
   ========================================================================== */
@media (max-width: 900px) {
  .nav-item-dropdown { display: block; width: 100%; }
  .dropdown-toggle {
    width: 100%; justify-content: space-between;
    padding: 16px 28px !important; border-top: 1px solid var(--linha);
  }
  .dropdown-menu {
    position: static; transform: none; box-shadow: none; border: none;
    border-radius: 0; margin-top: 0; min-width: 0; width: 100%;
    padding: 0; background: #f7f9fb;
  }
  .dropdown-menu::before { display: none; }
  .nav-item-dropdown.open .dropdown-menu { animation: none; }
  .dropdown-menu a {
    padding: 14px 28px 14px 44px !important;
    border-top: 1px solid var(--linha);
  }
  /* o menu mobile precisa caber: liberamos a altura quando aberto */
  .nav-toggle:checked ~ .main-nav { max-height: 1200px; }
}