/* ============================================================
   navbar.css — Estilos do menu responsivo | CM Serviços
   ============================================================ */

/* ── Mobile: esconder menu desktop ────────────────────────── */
@media (max-width: 1179px) {
    .mobile-hidden { display: none !important; }
  
    #mobile-menu {
      flex-direction: column;
      width: 100%;
      background: rgba(12, 30, 74, .97);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      padding: .5rem 0 1rem;
      border-top: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 8px 32px rgba(0,0,0,.3);
    }
  
    #mobile-menu a {
      display: flex;
      align-items: center;
      gap: .75rem;
      width: 100%;
      padding: 13px 20px;
      color: #e2e8f0;
      font-size: 15px;
      font-weight: 500;
      text-decoration: none;
      border-left: 3px solid transparent;
      transition: all .2s ease;
    }
  
    #mobile-menu a:hover,
    #mobile-menu a:focus {
      background: rgba(59,130,246,.12);
      border-left-color: #3b82f6;
      color: #fff;
    }

    #mobile-menu .site-btn-contato,
    #mobile-menu .site-btn-parceiro {
      justify-content: center;
      min-height: 44px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 999px;
      color: #fff;
      font-weight: 600;
    }

    #mobile-menu .site-btn-contato { background: #2563eb; }

    #mobile-menu .site-btn-contato:hover,
    #mobile-menu .site-btn-contato:focus { background: #3b82f6; }

    #mobile-menu .site-btn-parceiro { border-color: rgba(255,255,255,.35); }

    #mobile-menu .site-btn-parceiro:hover,
    #mobile-menu .site-btn-parceiro:focus {
      background: rgba(255,255,255,.12);
      border-color: rgba(255,255,255,.35);
    }

    .site-nav-toggle {
      align-items: center;
      justify-content: center;
      min-width: 44px;
      min-height: 44px;
    }
  }
  
  /* ── Desktop: esconder botão mobile ───────────────────────── */
  @media (min-width: 1180px) {
    .desktop-hidden    { display: none !important; }
    #mobile-menu-btn   { display: none !important; }
    #mobile-menu       { display: none !important; }
    .desktop-menu      { display: flex !important; }
  }
  
  /* ── Animações de entrada/saída do menu mobile ─────────────── */
  #mobile-menu.animate-fade-in-down {
    animation: mobileMenuIn .22s ease-out;
  }
  
  @keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  /* ── Menu oculto por padrão ────────────────────────────────── */
  .mobile-menu-hidden { display: none !important; }