/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
    --primary-app-color: #0d6efd; /* Cor primária Bootstrap */
    --secondary-app-color: #6f42c1; /* Roxo suave como secundário */
    --light-bg-app: #f8f9fa;
    --card-bg-app: #ffffff;
    --text-dark-app: #212529;
    --text-muted-app: #6c757d;
    --card-shadow: rgba(0, 0, 0, 0.1);
    --card-hover-shadow: rgba(0, 0, 0, 0.2);
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--light-bg-app);
    /* Usando flex para centralizar o conteúdo principal */
    min-height: 100vh;
    /* d-flex align-items-center justify-content-center são aplicados via classe Bootstrap */
    color: var(--text-dark-app);
}

.main-title {
    font-weight: 700;
    color: var(--primary-app-color);
    /* color: var(--secondary-app-color); */ /* Alternativa de cor */
}

.menu-card {
    display: block; /* Garante que o link ocupe o espaço do card */
    background-color: var(--card-bg-app);
    border: none; /* Remove a borda padrão do card Bootstrap */
    border-radius: 15px; /* Bordas mais arredondadas */
    text-decoration: none; /* Remove sublinhado do link */
    color: var(--text-dark-app); /* Cor padrão do texto dentro do card */
    padding: 1.5rem; /* Espaçamento interno generoso */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-left 0.3s ease; /* Transições suaves */
    overflow: hidden; /* Garante que elementos filhos não "vazem" visualmente */
    border-left: 5px solid transparent; /* Borda inicial transparente para animar no hover */
    min-height: 200px; /* Altura mínima para garantir tamanho mesmo com pouco texto */
}

.menu-card .card-body {
     padding: 1rem; /* Ajusta o padding interno do card-body se necessário */
     min-height: 150px; /* Garante que o conteúdo flex ocupe espaço */
}


.menu-card:hover {
    transform: translateY(-8px); /* Efeito sutil de elevação */
    box-shadow: 0 0.8rem 1.5rem var(--card-hover-shadow); /* Sombra mais pronunciada */
    /* color: var(--primary-app-color); */ /* Opcional: Mudar cor do texto no hover */
    border-left: 5px solid var(--primary-app-color); /* Destaca a borda esquerda */
}

.menu-card .card-title {
    font-weight: 600;
    margin-bottom: 0.5rem; /* Espaço abaixo do título */
     color: var(--primary-app-color); /* Cor do título */
}

.menu-card .card-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Ícones (se adicionados) */
.menu-card i {
    color: var(--primary-app-color);
    /* color: var(--secondary-app-color); */
    opacity: 0.8;
}

/* Ajustes Responsivos */
@media (max-width: 767.98px) { /* Abaixo do breakpoint 'md' do Bootstrap */
    .main-title {
        font-size: 1.8rem; /* Reduz tamanho do título principal */
        margin-bottom: 2rem !important; /* Reduz margem inferior */
    }

    .menu-card {
        min-height: 160px; /* Reduz altura mínima em telas menores */
        padding: 1rem;
    }

     .menu-card .card-body {
        min-height: 120px;
    }

    .menu-card .card-title {
        font-size: 1.1rem; /* Ajusta tamanho do título do card */
    }

     .menu-card .card-text {
        font-size: 0.8rem;
    }

     .container {
         padding-left: 1rem; /* Garante algum padding lateral */
         padding-right: 1rem;
     }
}

@media (max-width: 576px) {
     .row > * { /* Seleciona todas as colunas diretas da row */
         padding-left: 0.5rem; /* Reduz gutter (espaço entre colunas) em telas muito pequenas */
         padding-right: 0.5rem;
     }
      .main-title {
        font-size: 1.6rem;
    }
}