/*
Theme Name: Tema Poços Já
Theme URI: https://pocosja.com.br
Description: Tema child customizado do GeneratePress para o portal de notícias Poços Já. Sistema híbrido mobile/desktop com otimização de performance, anúncios responsivos e design G1-inspired.
Author: Juliano Borges
Author URI: https://pocosja.com.br
Template: generatepress
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tema-pocos-ja
Tags: news, responsive, mobile-first, performance, ads-optimized

Tema Poços Já - Portal de Notícias de Poços de Caldas e Região
Desenvolvido por Juliano Borges
Todos os direitos reservados © 2025 Poços Já
*/

/* ==========================================
   INFORMAÇÕES DO TEMA
   ========================================== */
/*
Tema: Tema Poços Já
Desenvolvedor: Juliano Borges
Site: pocosja.com.br
Versão: 1.0.0
Data: Janeiro 2025
Tema Pai: GeneratePress
WordPress: 5.0+
PHP: 7.4+
*/

/* ==========================================
   FONTES LOCAIS (PERFORMANCE)
   ========================================== */

/* Open Sans - Corpo do texto */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/opensans-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/opensans-semibold.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/opensans-bold.woff2') format('woff2');
}

/* Roboto - Títulos e ênfases */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/roboto-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/roboto-medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/roboto-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('assets/fonts/roboto-black.woff2') format('woff2');
}

/* ==========================================
   RESET E BASE
   ========================================== */

/* Remove margin e padding padrão do GeneratePress */
.generate-columns-container > .inside-article,
.generate-columns-container > .inside-top-bar,
.generate-columns-container > .inside-header {
    padding: 0;
}

/* Desativa container padrão em páginas customizadas */
body.pj-mobile-view .site,
body.pj-desktop-view .site {
    max-width: 100%;
}

/* ==========================================
   TIPOGRAFIA GLOBAL
   ========================================== */

body {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Títulos */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

h1 { font-size: 32px; font-weight: 800; }
h2 { font-size: 26px; font-weight: 700; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 500; }
h5, h6 { font-size: 18px; font-weight: 400; }

/* Links */
a {
    color: #003482;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #001f4d;
}

/* Negrito */
strong, b {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700;
}

/* Botões e menus */
button, .menu, .navbar, .btn {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700;
}

/* ==========================================
   VARIÁVEIS CSS (CORES DO TEMA)
   ========================================== */

:root {
    /* Cores principais */
    --pj-primary: #003482;
    --pj-primary-dark: #001f4d;
    --pj-primary-light: #0052cc;
    
    /* Cores secundárias */
    --pj-secondary: #c41e3a;
    --pj-accent: #ff6b00;
    
    /* Tons de cinza */
    --pj-gray-100: #f8f9fa;
    --pj-gray-200: #e9ecef;
    --pj-gray-300: #dee2e6;
    --pj-gray-400: #ced4da;
    --pj-gray-500: #adb5bd;
    --pj-gray-600: #6c757d;
    --pj-gray-700: #495057;
    --pj-gray-800: #343a40;
    --pj-gray-900: #212529;
    
    /* Cores de texto */
    --pj-text-primary: #1a1a1a;
    --pj-text-secondary: #666;
    --pj-text-muted: #999;
    
    /* Backgrounds */
    --pj-bg-body: #fff;
    --pj-bg-gray: #f5f5f5;
    
    /* Espaçamentos */
    --pj-spacing-xs: 8px;
    --pj-spacing-sm: 12px;
    --pj-spacing-md: 20px;
    --pj-spacing-lg: 30px;
    --pj-spacing-xl: 40px;
    
    /* Bordas */
    --pj-border-radius: 4px;
    --pj-border-color: #e0e0e0;
    
    /* Sombras */
    --pj-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --pj-shadow-md: 0 2px 8px rgba(0,0,0,0.15);
    --pj-shadow-lg: 0 4px 16px rgba(0,0,0,0.2);
    
    /* Transições */
    --pj-transition: all 0.3s ease;
}

/* ==========================================
   CORES DE CATEGORIAS
   ========================================== */

.cat-politica { --cat-color: #c41e3a; }
.cat-economia { --cat-color: #00a86b; }
.cat-esportes { --cat-color: #ff6b00; }
.cat-cultura { --cat-color: #8b00ff; }
.cat-saude { --cat-color: #0088cc; }
.cat-educacao { --cat-color: #ffc107; }

/* ==========================================
   UTILIDADES
   ========================================== */

/* Container centralizado */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Ocultar visualmente mas manter acessível */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link para acessibilidade */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--pj-primary);
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================
   SIDEBAR GENERATEPRESS
   ========================================== */

/* Container da sidebar */
.sidebar.widget-area {
    width: 100%;
    max-width: 360px;
}

/* Widgets individuais */
.sidebar .widget {
    background: #fff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: var(--pj-border-radius);
    box-shadow: var(--pj-shadow-sm);
}

/* Títulos dos widgets */
.sidebar .widget-title {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--pj-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--pj-primary);
}

/* Links dentro dos widgets */
.sidebar .widget a {
    color: var(--pj-text-primary);
    text-decoration: none;
    transition: var(--pj-transition);
}

.sidebar .widget a:hover {
    color: var(--pj-primary);
}

/* Listas dentro dos widgets */
.sidebar .widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid var(--pj-gray-200);
}

.sidebar .widget ul li:last-child {
    border-bottom: none;
}

/* Sticky sidebar (desktop) */
@media (min-width: 1024px) {
    .sidebar.widget-area {
        position: -webkit-sticky;
        position: sticky;
        top: 120px;
        z-index: 100;
        align-self: flex-start;
    }
}

/* ==========================================
   OTIMIZAÇÕES DE PERFORMANCE
   ========================================== */

/* Lazy loading de imagens */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Previne layout shift */
img {
    height: auto;
    max-width: 100%;
}

/* ==========================================
   RESPONSIVIDADE
   ========================================== */

/* Mobile first */
@media (max-width: 767px) {
    :root {
        --pj-spacing-md: 15px;
        --pj-spacing-lg: 20px;
    }
    
    h1 { font-size: 26px; }
    h2 { font-size: 22px; }
    h3 { font-size: 20px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .container {
        padding: 0 30px;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .container {
        padding: 0 40px;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    /* Oculta elementos desnecessários */
    .sidebar,
    .publicidade-container,
    .social-share,
    header,
    footer,
    .menu {
        display: none !important;
    }
    
    /* Otimiza para impressão */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
}

/* ==========================================
   ACESSIBILIDADE
   ========================================== */

/* Foco visível para navegação por teclado */
*:focus {
    outline: 2px solid var(--pj-primary);
    outline-offset: 2px;
}

/* Remove outline em cliques do mouse */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Contraste mínimo para textos */
.text-low-contrast {
    color: var(--pj-gray-700);
}

/* ==========================================
   FIM DO STYLE.CSS
   ========================================== */

/*
Tema Poços Já - Desenvolvido por Juliano Borges
Todos os direitos reservados © 2025
pocosja.com.br
*/