/*
Theme Name: Fluido
Theme URI: 
Author: Sergio Fagotto
Author URI: 
Description: Very simple and nice wordpress theme
Version: 1.0
*/


/* Layout Desktop */
.header-grid-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.header-branding { flex: 1; } /* Spazio maggiore al logo */
.header-sidebar-middle { flex: 1; }
.header-sidebar-right { flex: 1; }

/* REGOLE MOBILE: Sotto i 768px */
@media (max-width: 768px) {
    /* Nascondiamo le aree widget centrali e destre */
    .header-sidebar-middle, 
    .header-sidebar-right {
        display: none !important;
    }
    
    /* Il logo occupa tutto lo spazio */
    .header-branding {
        flex: 1;
    }
}
body {
	font-family: Arial;
	font-size: 16px; 
	color: #333;
	background: #f4f4f4;
	margin:0;
	padding:0;
	line-height:1.7em;
}

header {
	 
background: #393939;
color:#fff;
padding:20px 0px;
 
}
header span {
 font-size: 14px;   
}
header a{
	color:white;
	text-decoration:none;
	}
	
h1 {
	 
	color: #fff;
	margin:0;
	padding:0;
	padding:0px;
	padding-bottom:20px;
}

h2 {
	color:#676767;;
	
	margin:0;
	padding:0;
	padding-top:36px;
	padding-bottom:28px;
	font-family: Arial;
	
}

h3 {
    font-size: 23px;
	color:#676767;
	
	margin:0;
	padding:0;
	padding-top:28px;
	padding-bottom:18px;
	font-family: Arial;
	font-style: italic;
	padding-left:4px;
	padding-right:4px;
	
}
h4 {
	color:#fff;
	font-size: 17px;
	margin:0;
	padding:0;
	padding-top:28px;
	padding-bottom:6px;
	
}
.container{
	width:80%;  /* usiamola % per ottenere il responsive e non 1020px come nell'esempio del libro ... */
	margin:0 auto; /* auto centra orizzontalmente il div ... */  
	overflow: auto; /* se è necessario aggiunge una barra per lo scroll */

}

footer {	 
background: #393939;
color:#fff;
padding:10px 10px;
text-align:center;
}

.main{ 
   margin:15px 0; /* top e right ... */  
	float:left;
	width:62%;
}


a {	 
color:#333;
}

article.post {	 
border-bottom:1px #CCC solid; /* aggiungiamo un bordo nella parte bassa di article ... */
overflow: hidden; /* se è necessario aggiunge una barra per lo scroll. Commento non esatto, verificare ... */

}

article.post a.button{	
display:inline-block; 
background: #6B6B6B;
color:#fff;
padding:5px 10px;
margin-bottom: 10px;
text-decoration: none;
}
.button{border-radius:4px; font-size:12px;}
.meta {	
background: #333;
color:#fff;
padding:5px;
padding-left:12px;
font-size: 12px;
}
.metasingle {	
font-family: Arial;
font-size: 11px; 
background: #333;
color:#fff;
padding:5px;
padding-left:12px;
padding-right:12px;
margin-left:8px; margin-right:8px;
}
.post-thumbnail img {	
width:100%;
height:auto;
}

.posttext{	
padding-left:8px;
padding-right:8px;
}
/* MENU */
.main-nav{	
	
	background:red;
	padding:0px;
	text-align:center	
}

.main-nav a{	
	
	color:#fff
		
}

.main-nav ul{
	margin:0;
	padding:0;
	
}

.main-nav li{
	list-style:none;  /* per rimuovere il pallino dell'elenco puntato ... */
	display: inline-block;
	padding-right:25px;
	position: relative;
	text-align:left;
}

.main-nav ul li:hover > ul {
    display: block;
}

.main-nav ul ul {
    display: none;
    position: absolute;
    top: 1.5em;
    left: 0px;
	padding-left:10px;
    z-index: 99999;
    width: 180px;
    background: #b3b3b3c9;
	opacity: 0.90;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    
}

.main-nav ul ul a{
	color:gray;
}

.main-nav ul ul ul{
	top:6px;
    left: 130px;
	padding-left:10px;
    z-index: 99999;
    
}





.mobile-nav{border-radius:0;text-align:center;display:none;}
.mobile-nav a{color:white; font-size: 22px;}


.BOTTONE{
text-align:center;
padding:26px;
margin-top:20px;
display: none;
width: 40px;
height: 40px;
background-color: red;
background-image: url('../img/menu-icon.png');
background-size: 36px 36px;
background-repeat: no-repeat;
background-position: center center;
border-width:1px;
border-radius:50px;
}




.clr{
	clear:both; /* clear specifica su quale lato dell'elemento non è permessa la fluttuazione ... */	
}

.sidebar{	
float:right;
width:34%;
}

.header-left{
	
float:left;

}
.side-widget{
	border:1px #777777 solid;
	padding:10px 10px;
	margin-bottom:20px;
	margin-top:20px;
}

.side-widget li{
	list-style:none;
	line-height:2.2em;
	 
}

.footer-sidebar-left{
	
float:left;
width:33%;
}

.footer-sidebar-middle{
	
float:left;
width:34%;
}

.footer-sidebar-right{	
float:right;
width:33%;
}

.footer-widget{
	border:0px #777777 solid;
	padding:10px 10px;
	margin-bottom:20px;
	margin-top:20px;
	color:white;

}

.footer-widget li{
	list-style:none;
	line-height:2.2em;
	color:white;
	 
}

.footer-widget a{
	
	color:white;
	 
}



/* segue classe usata per il titolo del singolo post nella pagina single.php ... */
.pabc{ 
	font-family: Arial;  
	font-size: 26px; 
	font-style: italic;
	padding-left:8px;
	padding-right:8px;
	padding-bottom:14px;
}

/* quello che segue è importante per far rispettare gli allineamenti che si danno alle immagini dalla bacheca di wp ... */
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* MEDIA QUERIES */
/* rendo il menù responsivo per adattarlo ai dispositivi più piccoli, fino ad una risoluzione massima di 768px */
@media only screen and (max-width: 768px) {
    
/* Queste regole verranno lette SOLO se il browser è Firefox e sui dispositivi con max-width: 768px  */
.is-firefox h3 {
    font-size: 18px !important; /* Abbassiamo i 23px originali perché Firefox li gonfia */
    line-height: 1.1 !important; /* Riduce lo spazio tra le righe del titolo */
}
.is-firefox header span {
    font-size: 13px !important; /* Diminuito per compensare lo zoom di Firefox */
}
header span {
    font-size: 16px /* Diminuito per compensare lo zoom di Firefox */
}
.is-firefox header a {
    font-size: 20px !important; /* Diminuito per compensare lo zoom di Firefox */
}
.is-firefox body {
    font-size: 12px !important; /* Diminuito per compensare lo zoom di Firefox */
}

.is-firefox .pabc{ 
	font-family: Arial;  
	font-size: 20px; 
	font-style: italic;
	
}
.main-nav{display:none;} 
 
.mobile-nav{border-radius:0;text-align:left;display:block;}  
/* .main-nav{border-radius:0;text-align:center;display:none} */
  
/* rendo gli elementi dei menu elementi di blocco */  
ul li{display:block}
  
 


.BOTTONE{

display: block;
width: 40px;
height: 40px;
background-color: #b5b5b5;
background-image: url('img/menu-icon.png');
background-repeat: no-repeat;
background-position: center center;

}

.is-firefox .BOTTONE {
    width: 32px !important; /* Regola questo valore finché non combacia */
    height: 32px !important;
}



}
/* .toggle-nav {
 
    display: none !important;
 
}



@media screen and ( max-width: 700px) {
     
    
    a.toggle-nav {
        float: right;
        margin: 0 0 0.5em 0.5em;
        display: inline-block !important;
        color: black;
        transition: color linear 0.15s;
    }
     
    a.toggle-nav:hover, a.toggle-nav:active {
        text-decoration: none;
        color: red;
    } 
    
    .menu-header {
        display: inline-block;
        position: relative;
        margin: 0;
        width: 100%;
    }
     
    #access .menu-header ul {
        display: none;
        position: absolute;
        top: 80%;
        right: 0px;
        min-width: 200px;
        background-color: #7B3D84;
        font-size: 1.2em;
    }
     
    #access .menu-header li {
        display: block;
        float: none;
        padding-right: 2%;
        text-align: right;
    }
    #access ul li:hover > ul {
        display: none;
    }
          
}
 */

/* MEDIA QUERIES */
/* rendo il menù responsivo per adattarlo ai dispositivi più piccoli, fino ad una risoluzione massima di 768px */
@media only screen and (max-width: 550px) {

.footer-sidebar-left{	
float:none;
width:96%;
}

.footer-sidebar-middle{	
float:none;
width:96%;
}
	
.footer-sidebar-right{	
float:none;
width:96%;
}

.sidebar{	
display:none;
}
/*.side-widget{
display:none;
}*/
.main{ 

	width:98%;
	
}

}