/*
Theme Name: Gazeta do Balão
Author URI: http://www.gazetadobalao.com.br
Description: Gazeta do Balão
Author: Gazeta do Balão
Version: 2026
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
*,
*::before,
*::after{
    box-sizing:border-box;
}

*{
    margin:0;
    padding:0;
}
body{
    font-family:"Roboto Condensed",sans-serif;
    background:#191919;
    color:#FFF;
    line-height:1.4;
}
a{
    color:#FFF;
    text-decoration:none;
    transition:color .2s;
}
/* ==================================================
   HEADER
================================================== */

header{
    position:sticky;
    top:0;
    width:100%;
    background:#202020;
    box-shadow:0 4px 6px rgba(0,0,0,.1);
    z-index:1000;
    overflow:visible;
}

body.admin-bar header{
    top:32px;
}

.container{
    position:relative;

    max-width:1366px;
    margin:0 auto;
    padding:10px 20px;

    display:flex;
    align-items:center;
    gap:20px;
}

.logo{
    width:auto;
    height:auto;
    max-height:40px;
    flex-shrink:0;
}

/* ==================================================
   BUSCA
================================================== */

.search-bar{
    flex:1;
    position:relative;
    display:flex;
    align-items:center;
}

.search-bar input{
    width:100%;
    height:40px;

    padding:10px 20px 10px 50px;

    border:0;
    border-radius:30px;

    background:#191919;
    color:#FFF;

    font-size:15px;
    outline:none;
    transition:border-color .2s;
}
.search-bar input:focus{
    outline:none;
    box-shadow:0 0 0 2px rgba(75,119,187,.35);
}
.search-button{
    position:absolute;
    left:20px;

    background:none;
    border:0;

    cursor:pointer;
}

.search-button i{
    color:#4B77BB;
}

/* ==================================================
   MENU
================================================== */
.menu-toggle{

    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    padding:0;
    margin:0;

    background:none;
    border:0;

    color:#FFF;

    font-size:22px;

    cursor:pointer;

    flex-shrink:0;

}
.menu-toggle:hover{
    color:#4B77BB;
}

.menu-popup{

    display:none;

    position:absolute;

    top:100%;
    left:0;

    width:100%;

    padding:15px;

    background:#191919;

    border-top:1px solid #2d2d2d;
    border-bottom:1px solid #2d2d2d;

    z-index:1100;

}
.menu-popup.active{
    display:block;
}

.menu-popup ul{

    list-style:none;

    display:grid;

    grid-template-rows:repeat(5,auto);
    grid-auto-flow:column;
    grid-auto-columns:minmax(120px,1fr);

    gap:6px 12px;
    padding:0;
    margin:0;
}

.menu-popup li{
    margin:0;
}

.menu-popup a{

    display:block;

    padding:5px 8px;

    border-radius:4px;

    font-size:12px;

}

.menu-popup a:hover{

    background:#2b2b2b;

    color:#4B77BB;

}
/* ==================================================
   CONTEÚDO
================================================== */

main{
    min-height:1000px;
    padding-top:40px;
    background:#171717;
}

.conteudo{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

/* ==================================================
   TÍTULOS
================================================== */

h1,
h2,
h3,
h4{
    width:100%;
    text-align:center;
}

h1{
    padding:15px 0 50px;
    font-size:28px;
    font-weight:100;
    line-height:1.8em;
}

h2{
    margin:5px 0;
    padding-top:10px;
    font-size:12px;
    font-weight:300;
    line-height:18px;
}

h3{
    margin:5px 0;
    padding-top:10px;
    font-size:11px;
}

h4{
    padding-top:30px;
    font-size:22px;
    font-weight:100;
    line-height:1.5em;
}

/* ==================================================
   CARDS
================================================== */

.box{

    display:flex;
    flex-direction:column;
    align-items:center;
    transition:transform .2s;
    width:250px;

    margin:10px;
    padding:10px;

    background:#000;

    border-radius:8px;

    overflow:hidden;

    text-align:center;

}
/* ==================================================
   IMAGENS (Com proteção anti-download)
================================================== */

.imagem {
    position: relative;
    width: 100%;
    aspect-ratio: 2/3;
    overflow: hidden;
    border-radius: 4px;
    
    /* Impede a seleção e o arrastar nativo do navegador */
    -webkit-user-drag: none;
    user-select: none;
}

/* O Overlay Invisível (A Película Protetora) */
.imagem::after {
    content: "";
    position: absolute;
    inset: 0;
    
    /* Um GIF transparente de 1px embutido em Base64 */
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7') repeat;
    
    /* Garante que ele fique acima das tags <img> para protegê-las, mas sem bloquear cliques */
    z-index: 10; 
    
    /* Impede o arrastar do mouse */
    pointer-events: auto; 
}

.capa,
.segunda-capa {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity .3s ease;
    
    /* Garante que o navegador não permita arrastar a tag img por baixo da película */
    -webkit-user-drag: none;
    pointer-events: none; 
}

.capa{
    z-index: 2;
}

.segunda-capa{
    opacity: 0;
    z-index: 1;
}

/* Apenas quando existe segunda imagem */

.imagem.com-segunda-imagem{
    cursor:pointer;
}

.imagem.com-segunda-imagem.clicked .capa{
    opacity:0;
    z-index:1;
}

.imagem.com-segunda-imagem.clicked .segunda-capa{
    opacity:1;
    z-index:2;
}
/* ==================================================
   TAG CLOUD
================================================== */

.tag-cloud{
    margin:20px 0;
    text-align:center;
}

.tag-cloud a{

    display:inline-block;

    margin:5px;
    padding:5px 20px;

    background:#000;

    color:#FFF;

    font-size:14px !important;

    transition:color .2s;

}

.tag-cloud a:hover{
    color:#0073aa;
}

/* ==================================================
   TAGS DOS POSTS
================================================== */

.tags{
    margin-top:5px;
}

.tags .tag{

    display:inline-block;

    margin:2px;
    padding:5px 10px;

    background:#191919;

    border-radius:5px;

    color:#FFF;

    font-size:11px;

    transition:.2s;

}

.tags .tag:hover{

    background:#DDD;

    color:#000;

}
/* ==================================================
   FOOTER
================================================== */

#footer{
    background:#191919;
    text-align:center;
    font-size:12px;
    line-height:50px;
}

/* ==================================================
   RESPONSIVO
================================================== */

@media (max-width:782px){

    body.admin-bar header{
        top:46px;
    }

    .container{
        padding:10px;
        gap:10px;
    }

    .logo{
        max-height:32px;
    }

    .search-bar input{
        padding:10px 15px 10px 40px;
        font-size:13px;
    }

    .menu-popup{
        padding:10px;
    }

    .menu-popup ul{
         grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
        grid-template-rows:none;
        grid-auto-flow:row;
        gap:4px;
    }

    .menu-popup a{
        padding:8px;
        text-align:center;
    }

    .box{
        width:220px;
    }

}