/*
Theme Name: P Daily Theme
Author: Seu Nome
Description: Um tema de portal de notícias moderno e responsivo, ajustado para a paleta Moderno e Limpo.
Version: 1.3 (Blue Modern)
*/

/* Reset e Estilos Base - PALETA MODERNO E LIMPO */
body {
    background-color: #f3f4f6; /* Fundo Cinza Suave (Slate 100) */
    color: #1f2937; /* Texto Cinza Chumbo (Gray 800) */
    font-family: 'Inter', sans-serif;
}

/* Gradiente de Vinheta para as imagens (Mantido para legibilidade do título em cima de imagens) */
.vignette-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), transparent);
    z-index: 1;
}

.vignette-gradient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    z-index: 1;
}

/* Fonte customizada para os títulos */
.font-headline {
    font-family: 'DM Serif Text', serif;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

/* Ajustes de Proporção */
.news-image-aspect {
    aspect-ratio: 1056 / 1307;
}

.video-aspect-9-16 {
    aspect-ratio: 9 / 16;
    background-color: #000;
}

.video-post-wrapper {
    cursor: pointer;
}

.desktop-sidebar-area {
    display: none;
}

/* Ocultar barra de rolagem dos stories (CSS Cross-browser) */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* --- Estilo Específico para Desktop (>= 1024px) --- */
@media (min-width: 1024px) {
    
    .news-image-aspect {
        aspect-ratio: auto;
        width: 100%;
        height: 412px;
    }

    /* Ajuste para o Card não ficar muito largo no centro */
    .container.max-w-screen-md {
        max-width: 768px !important;
    }

    /* WIDGETS LATERAIS (Banners flutuantes) */
    .desktop-sidebar-area {
        display: block;
        position: absolute; 
        top: 0;
        width: 160px; 
        z-index: 10; 
        height: 100%;
    }

    .sidebar-left {
        right: calc(50% + 400px); /* Ajustado para dar respiro ao card */
        text-align: right;
        top: 180px; 
    }

    .sidebar-right {
        left: calc(50% + 400px);
        text-align: left;
        top: 180px;
    }

    .desktop-sidebar-area img {
        max-width: 100%;
        height: auto;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        border-radius: 0.75rem; /* Bordas arredondadas nos widgets também */
    }

    /* Layout do Vídeo no Desktop (Lado a lado se desejado, ou centrado) */
    .video-post-desktop-layout {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .video-post-desktop-layout video {
        max-height: 70vh;
        width: 100%;
        max-width: 100%;
        border-radius: 0.75rem;
    }

    .video-post-desktop-layout .video-info {
        margin-top: 1.5rem;
        text-align: left;
        width: 100%;
    }
}

/* Estilos de Texto e Cores da Paleta Nova (Overrides opcionais se não usar Tailwind) */
.text-brand-blue { color: #2563eb; }
.bg-brand-blue { background-color: #2563eb; }
.border-brand-blue { border-color: #2563eb; }

.hover\:text-brand-blue:hover { color: #1d4ed8; }
.hover\:bg-brand-blue:hover { background-color: #1d4ed8; }

/* Sobrescreve estilos antigos para garantir a consistência no Single Post */
#single-post-page .subtitle {
    color: #2563eb; /* Azul para subtítulos */
}

#single-post-page .entry-content p {
    color: #374151; /* Cinza escuro para texto */
}

#single-post-page .prose {
    --tw-prose-links: #2563eb;
}