*{
    margin:0;
    padding:0;
    box-sizing:border-box;

}

html,
body{
    width:100%;
    height:100%;
    scrollbar-width: none;
    background:#08111b;
    font-family:Arial,sans-serif;
}

#map-wrapper{
    position:fixed;
    top:0;
    right:0;
    width:25vw;
    height:220px;
    z-index:400;
    background:#08111b;
}

#map{
    width:100%;
    height:100%;
}

#map svg{
    width:100%;
    height:100%;
}

@media(max-width:768px){

    #map-wrapper{
        position:relative;
        width:100%;
        height:180px;
        top:auto;
        right:auto;
    }

}

.country{
    stroke:#ffffff55;
    stroke-width:.4;
    transition:.2s;
}

.country:not(.highlight){
    fill:#ccc;
    opacity:.25;
}

.highlight{
    opacity:1;
    stroke:#fff;
    stroke-width:1.2;
}

.country:hover{
    opacity:1;
    filter:brightness(1.2);
}

#tooltip{
    position:fixed;
    display:none;
    pointer-events:none;

    background:#000d;
    color:white;

    padding:10px 14px;
    border-radius:10px;

    font-size:12px;
    line-height:1.4;

    z-index:9999;
}

#legend{
    position:absolute;

    right:20px;
    top:20px;

    background:#000c;

    color:#fff;

    padding:16px;

    border-radius:14px;

    z-index:100;
}

.legend-item{
    display:flex;
    align-items:center;
    gap:8px;
    margin:8px 0;
}

.legend-color{
    width:18px;
    height:18px;
    border-radius:4px;
}

#resetView{



border:0;
border-radius:10px;

background:#2563eb;
color:white;

padding:12px 16px;

cursor:pointer;

font-weight:600;
}

#resetView:hover{
background:#1d4ed8;
}

#resetSearch{



    border:0;
    border-radius:10px;
    
    background:#2563eb;
    color:white;
    
    padding:12px 16px;
    
    cursor:pointer;
    
    font-weight:600;
    }
    
    #resetSearch:hover{
    background:#1d4ed8;
    }

.selected-country{

stroke:#ffff00;
stroke-width:3;

filter:
    drop-shadow(
        0 0 10px #ffff00
    );
}

#journal-header{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:220px;

    display:flex;

    backdrop-filter:blur(10px);
    background:rgba(5,20,35,.85);
}




/* 2. Ativa o scroll apenas quando o rato está por cima (Hover) */
#journal-header:hover {
  overflow-x: auto; /* Permite o scroll vertical com o rato */
}

/* 3. Esconde a barra de scroll visual em todos os navegadores modernos */
#journal-header::-webkit-scrollbar {
  display: none; /* Chrome, Safari e novas versões do Edge */
}

#journal-header {
  -ms-overflow-style: none;  /* IE e Edge antigo */
  scrollbar-width: none;  /* Firefox */
}


#year-grid{

height:220px;

display:flex;
gap:12px;

padding:12px;

}

.mag-card{


  /* Defina o tamanho final que você deseja para o recorte */
  width:80px;
min-width:80px;

height:200px;  


background:transparent;

border-radius:12px;

overflow:hidden;

cursor:pointer;



box-shadow:
    0 3px 12px rgba(0,0,0,.35);
}



.mag-cover{

width:100%;
height:120px;

  /* Faz a mágica do recorte mantendo a proporção */
  object-fit: cover;
  
  /* Opcional: Define para onde focar o corte (padrão é 'center') */
  object-position: center; 


display:block;
}

.mag-info{

padding:8px;
}

.mag-title{

color:white;

font-size:11px;
font-weight:700;

line-height:1.2;

height:30px;

overflow:hidden;
}

.mag-meta{

margin-top:4px;

font-size:16px;

color:#94a3b8;
}

.mag-cover-info{
    width: 100%;
}


.mag-cover-info i{
    margin-top:4px;

font-size:14px;

color:#94a3b8;
}

/* .overlay-info{
    background-color: wheat;
    margin-top: -80px;
} */



@media(max-width:768px){

#journal-header{
    height:140px;
}

#year-grid{
    height:140px;
}

.mag-card{
    width:60px;
    min-width:60px;
    height:120px;
}

.mag-cover{
    height:120px;
}

#legend{
    display:none;
}

.modal-content{
    width:95vw;
    padding:16px;
}

}

#header-articles{
    width:70%;
    height:100%;
    overflow:hidden;
}

#header-articles:hover{
    overflow-x:auto;
}

#header-map{
    width:30%;
    height:100%;
    border-left:1px solid rgba(255,255,255,.1);
    background:#08111b;
}

#map{
    width:100%;
    height:100%;
}

@media (max-width:768px){

    #journal-header{
        display:block;
        height:140px;
    }

    #header-articles{
        width:100%;
        height:140px;
        margin-top:80px;
    }

    #header-map{
        width:100%;
        height:180px;
        display: none;
    }


}