/* PromptLab v3 - estilo profissional */
/* Use Tailwind util classes primarily; este arquivo contém ajustes finos */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&display=swap');

:root{
  --glass: rgba(255,255,255,0.04);
  --accent: #4f8ff7;
}
body { font-family: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
img { display:block; }

.bg-gradient-hero{
  background: radial-gradient(1000px 400px at 10% 10%, rgba(79,143,247,0.08), transparent 10%),
              radial-gradient(600px 300px at 90% 80%, rgba(79,143,247,0.04), transparent 8%);
}

/* card focus */
a:focus, button:focus, input:focus, textarea:focus{ outline: none; box-shadow: 0 0 0 4px rgba(79,143,247,0.12); border-color: rgba(79,143,247,0.6); }


/* ========================================================= */
/* ESTILOS BASE (APLICAM-SE A TODAS AS TELAS) */
/* ========================================================= */

/* Esconde o ícone do menu no desktop */
.menu {
  color: white;
  display: none;
}

/* Garante que o menu de navegação siga o fluxo normal no desktop */
#navv {
    position: static; 
    /* Garante que a cor de fundo não persista no desktop se for definida em mobile */
    background-color: transparent; 
}

@media (min-width: 770px) {
  #navv{
    display: flex;
  }
}
/* ========================================================= */
/* MEDIA QUERY PARA TELAS PEQUENAS (MOBILE) */
/* ========================================================= */

@media (max-width: 768px) {
    
    /* 1. Torna o ícone do menu visível no mobile */
    .menu {
        display: block;
        /* Adicione um cursor para indicar que é clicável (melhor no HTML, mas funciona aqui) */
        cursor: pointer;
    }
    
    /* 2. Menu de Navegação: Flutua e Ocupa a Tela */
    #navv {

        position: absolute;
        top: 100px;   
        right: 0;
        width: 100%; 
        z-index: 50; 
        display: none; 
        flex-direction: column;
        gap: 3px;
        
        /* Tema (Usei as cores do seu tema escuro) */
        background-color: #071025; 
        padding: 1rem 0; /* Adiciona padding vertical */
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4); 
    }
    
    /* 3. Ajuste nos Links: Faz com que os links ocupem a largura total do menu flutuante */
    #navv a {
        width: 100%;
        text-align: right; /* Alinha o texto do link à direita */
        padding: 0.5rem 1.5rem; /* Ajusta o padding para melhor toque */
    }
    
    /* 4. Ocultar: O seu JS cuidará disso (adicionando/removendo a classe 'hidden') */
    /* NÃO use 'display: none;' fixo aqui */
}