/* Ficheiro: css/style.css */
/* Este ficheiro contém estilos CSS customizados para o frontend do blog,
   complementando as classes do Tailwind CSS para um design mais polido e surpreendente. */

/* ------------------------------------------------------------------- */
/* 1. Reset Básico e Fontes */
/* Garante que o corpo da página ocupe a altura mínima da tela para o footer ficar no final */
html, body {
    height: 100%;
    scroll-behavior: smooth; /* Rolagem suave para âncoras */
}
body {
    display: flex;
    flex-direction: column;
    /* A fonte Inter já está definida no header.php via Tailwind, mas é bom ter um fallback */
    font-family: 'Inter', sans-serif;
    color: #333; /* Cor de texto padrão mais escura para melhor legibilidade */
}
main {
    flex: 1; /* Faz com que o conteúdo principal ocupe o espaço restante */
}

/* ------------------------------------------------------------------- */
/* 2. Estilos para Elementos Comuns (Complementando Tailwind) */

/* Links e Botões - Adicionado transição global para hover */
a, button {
    text-decoration: none; /* Remove sublinhado padrão dos links */
    transition: all 0.3s ease-in-out; /* Transição suave para todas as propriedades */
}
a:hover {
    /* Tailwind já cuida da maioria dos hovers, mas aqui pode ser um ajuste fino */
    /* text-decoration: underline; */
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Bold */
    line-height: 1.2;
}

/* Parágrafos */
p {
    margin-bottom: 1em; /* Espaçamento entre parágrafos */
}

/* Imagens */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Remove espaço extra abaixo da imagem */
}

/* Ajuste para imagens de capa dos cards - Tornar um pouco menos altas */
.grid img {
    height: 200px; /* Altura fixa para as imagens dos cards */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorção */
}

/* ------------------------------------------------------------------- */
/* 3. Efeitos Visuais e Animações Sutis */

/* Efeito de Sombra e Transição para Cards (já no Tailwind, mas reforçando) */
/* .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } */
/* .hover\:scale-105 { transform: scale(1.05); } */
/* .transition { transition-property: all; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } */

/* Animação de entrada para elementos (ex: posts, cards) */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0; /* Começa invisível */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação para a secção hero (texto a surgir de baixo para cima) */
.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-400 { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Atraso para múltiplos elementos (ex: cada card de post) */
.fade-in-delay-1 { animation-delay: 0.1s; }
.fade-in-delay-2 { animation-delay: 0.2s; }
.fade-in-delay-3 { animation-delay: 0.3s; }
/* ...adicione mais se tiver muitas colunas ou precisar de mais atrasos */

/* ------------------------------------------------------------------- */
/* 4. Estilos Específicos (Exemplos) */

/* Estilo para o conteúdo do post (prose) - Ajustes de tamanho de fonte */
.prose {
    font-size: 1rem; /* text-base (era text-lg) - um pouco menor para mais conforto */
    line-height: 1.6;   /* leading-relaxed - ajustado para melhor leitura */
    color: #374151;      /* text-gray-700 */
}
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #1a202c; /* text-gray-900 */
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-size: 1.875rem; /* text-3xl (era text-4xl para h1, etc.) - ajustado para hierarquia */
}
.prose h2 { font-size: 1.5rem; } /* text-2xl */
.prose h3 { font-size: 1.25rem; } /* text-xl */

.prose p {
    margin-bottom: 1em;
}
.prose ul, .prose ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}
.prose ul li {
    list-style-type: disc;
}
.prose ol li {
    list-style-type: decimal;
}
.prose a {
    color: #db2777; /* pink-600 */
    text-decoration: underline;
}
.prose a:hover {
    color: #be185d; /* pink-700 */
}
.prose strong {
    font-weight: 700;
    color: #1a202c;
}

/* Estilo para botões de ação ou destaque (ex: "Leia Mais") */
.btn-primary {
    background-color: #db2777; /* pink-600 */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-primary:hover {
    background-color: #be185d; /* pink-700 */
    transform: translateY(-2px);
}

/* ------------------------------------------------------------------- */
/* 5. Responsividade (Tailwind já faz a maior parte, mas aqui para ajustes) */

/* Exemplo: Ajustar margens em telas pequenas se necessário */
@media (max-width: 767px) { /* Para telas menores que md (768px) */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    /* Ajuste para o grid de posts em telas menores, se necessário */
    .grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Garante que os cards não fiquem muito pequenos */
    }
}

/* ------------------------------------------------------------------- */
/* 6. Estilos para Mensagens de Alerta (Sucesso/Erro) */
.alert {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.alert-success {
    background-color: #d1fae5; /* green-100 */
    border: 1px solid #34d399; /* green-400 */
    color: #065f46; /* green-700 */
}

.alert-error {
    background-color: #fee2e2; /* red-100 */
    border: 1px solid #f87171; /* red-400 */
    color: #b91c1c; /* red-700 */
}

/* ------------------------------------------------------------------- */
/* 7. Estilos para o Dropdown de Categorias no Header */
header nav ul li.group ul {
    overflow: hidden; /* Garante que os cantos arredondados sejam respeitados */
}

/* ------------------------------------------------------------------- */
/* 8. Estilos para Vídeos Responsivos */
.prose iframe,
.prose video {
    max-width: 100%;
    height: auto; /* Garante que a altura se ajuste à largura */
    display: block; /* Remove espaço extra */
    margin: 1.5em auto; /* Centraliza e adiciona margem vertical */
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

/* Para vídeos embedados de YouTube/Vimeo que usam iframes com proporção 16:9 */
.video-responsive-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
    border-radius: 0.75rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
}

.video-responsive-container iframe,
.video-responsive-container object,
.video-responsive-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}