/*
Theme Name: Happy Peanuts
Theme URI: 
Author: masino1967
Author URI: https://profiles.wordpress.org/masino1967/
Description: Designed for creating blogs and personal sites. This theme offers nine different filter effects for images and featured images. It also offers an effect that shows or hides the filter as the cursor hovers over the image. This theme runs in two columns. In this version, besides image filter effects, there are four widget areas, a menu area, an extra single column template for pages, an extra single column template for posts, custom logo, responsive design, the option to add copyright in the footer.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: happy-peanuts
Tags: blog, portfolio, photography, two-columns, threaded-comments, block-styles, custom-logo, custom-menu, featured-images, right-sidebar, full-width-template, template-editing, theme-options, translation-ready, wide-blocks
*/

:root {
	--colore0: #000000; /* nero */
	--colore1: #20bdf9; /* azzurro chiaro */
	--colore2: #cb0e13; /* rosso non puro */
	--colore3: #fff000; /* giallo non puro */
	--colore4: #ffffff; /* bianco */
}

* {
	box-sizing: border-box;
}
@font-face {
	font-family: robotoCondensed;
	src: url(assets/fonts/roboto-condensed/RobotoCondensed-VariableFont_wght.ttf;);
	font-style: normal;
}
@font-face {
	font-family: robotoCondensed;
	src: url(assets/fonts/roboto-condensed/RobotoCondensed-Italic-VariableFont_wght.ttf);
	font-style: italic;
}

body {
	margin: 0px 0px 0px 0px;
	color: var(--colore0);
	background: var(--colore4);
	font-family: robotoCondensed;
	font-size: 20px;
}
a {
	color: var(--colore2);
}

h1 {
	font-size: 42px;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 15px;
}
h2 {
	font-size: 36px;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 15px;
}
h3, h4, h5, h6 {
	font-size: 28px;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 15px;
}
p {
	margin-top: 0px;
	margin-bottom: 15px;	
}
button {
	background-color: var(--colore0);
	border: 1px solid var(--colore3);
	color: var(--colore3);
	padding: 8px 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	margin: 0;
	cursor: pointer;
}

.contenitore-cornice { /* larghezza della visualizzazione - applicato a div */
	max-width: 900px;
	/*min-height: 5px;*/
	background-color: var(--colore4);
	margin: auto;
	padding: 10px 10px 10px 10px;
	display: block;
}
.contenitore-dentro-cornice {
	background-color: var(--colore4);
	margin:auto;
	padding: 10px 10px 10px 10px;
	display: flex;
	flex-direction: row;
}
.contenitore-footer {
	background-color: var(--colore3);
	margin:auto;
	padding: 10px 10px 10px 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-radius: 5px;
}
.contenitore-pagina {
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-direction: row;
}
.contenitore-articoli {
	background-color: var(--colore4);
	margin: 10px 0px 10px 0px;
	padding: 10px 10px 10px 10px;
	width: 66%;
}
.contenitore-articoli-largo {
	background-color: var(--colore4);
	margin: 10px 0px 10px 0px;
	padding: 10px 10px 10px 10px;
	width: 100%;
}

.contenitore-widget {
	display: flex;
	flex-direction: column;
	margin: 10px 0px 10px 10px;
	padding: 0px 0px 0px 0px;
	width: 34%;
}
.widget-rosso {
	background-color: var(--colore2);
	margin: 0px 0px 10px 0px;
	padding: 10px 10px 10px 10px;
	min-height: 300px;
	border: 1px solid var(--colore0);
	border-radius: 5px;
	box-shadow: 0 2px 5px var(--colore0);
}
.widget-giallo {
	background-color: var(--colore3);
	margin: 0px 0px 10px 0px;
	padding: 10px 10px 10px 10px;
	min-height: 300px;
	border: 1px solid var(--colore0);
	border-radius: 5px;
	box-shadow: 0 2px 5px var(--colore0);
}
.widget-blu {
	background-color: var(--colore1);
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	min-height: 300px;
	border: 1px solid var(--colore0);
	border-radius: 5px;
	box-shadow: 0 2px 5px var(--colore0);
}

.quadrante-sx {
	width: 66%;
}
.quadrante-dx {
	padding-left: 10px;
	width: 34%;
}
.contenitore-dentro-cornice-inferiore {
	background-color: var(--colore4);
	margin:0;
	padding: 0px 10px 10px 10px;
	display: flex;
	flex-direction: row;
}
.caratterizzazione-tema {
	display: block;
	margin-top: 10px;
	padding: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
	height: auto;
}
.a-sinistra{
	float:left;
}
.a-destra {
	float:right;
}
.site-title {
	padding: 0 0 0 0;
	text-decoration: none;
	color: var(--colore1);
	font-size: 36px;
	word-wrap: break-word;
}
.site-description {
	margin: 10px 0px 0px 0px;
	color: var(--colore1);
	font-size: 25px;
	word-wrap: break-word;
}
.titolo-sito-e-descrizione {
	padding: 0px 10px 0px 0px;
	display: flex;
	flex-direction: column;
}
.custom-logo {
	margin: 0 10px 0 0;
}
.flex-paginazione {
	margin: 0px 0px 0px 0px;
	display: flex;
	flex-direction: row;
}
.paginazione-sinistra {
	margin: 0px 0px 0px 0px;
	padding: 15px;
	flex: 50%; 
	text-align: left;
}
.paginazione-destra {
	margin: 0px 0px 0px 0px;
	padding: 15px;
	flex: 50%;
	text-align: right;
}
.contenitore-articolo-loop { /* serve per evitare che gli articoli
                              *  nel loop di .articolo-loop
                              *  si incastrino tra di loro invadendo
                              *  lo spazio dell'articolo precedente.
                              *  Qui ci deve essere "display: flex" e
                              *  in .articolo-loop ci deve essere display: block */
	display: flex;
}
.articolo-loop {  /* "display: block" serve a fare in modo
                   *  che il testo dell'articolo si disponga
                   *  intorno all'immagine in evidenza. Questa
                   *  classe deve essere incarcerata
                   *  dentro .contenitore-articolo-loop per
                   *  evitare che gli articoli sconfinino tra
                   *  di loro incastrandosi.*/
	margin: 0px;
	padding-bottom: 20px;
	display: block;
}
.titolo-articolo {
	padding: 0 0 0 0;
	text-decoration: none;
	font-size: 30px;
	word-wrap: break-word; /* forza e spezza le parole troppo lunghe */
}
.immagine-in-evidenza-loop {
	float:left;
	margin: 0px 10px 10px 0px;	
	border: 1px solid var(--colore0);
	box-shadow: 0 2px 5px var(--colore0);
	border-radius: 5px;
}
.immagine-in-evidenza-single { /* Non è un doppione: serve per differenziarsi
                                *  da immagine-in-evidenza-loop che ha un
                                *  corrispettivo nel blocco css relativo ai
                                *  dispositivi mobili.*/
	float:left;
	margin: 0px 10px 10px 0px;	
	border: 1px solid var(--colore0);
	box-shadow: 0 2px 5px var(--colore0);
	border-radius: 5px;
}
img.quattrocentoquattro {
	box-shadow: 0 2px 5px var(--colore0);
	
	border: 1px solid var(--colore0);
	border-radius: 5px;
	display: block;
	margin-top: 10px;
	padding: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 75%;
	height: auto;
}

@media only screen and (max-width: 768px) {     /* schermi piccoli */
	.contenitore-dentro-cornice,
	.contenitore-dentro-cornice-inferiore {
	  flex-direction: column;
	}
	.quadrante-sx {
	width: 100%;
	}
	.quadrante-dx {
	padding-left: 0px;
	width: 100%;
	}
	.contenitore-pagina {
	flex-direction: column;
	}
	.contenitore-articoli {
	width: 100%;
	}
	.contenitore-widget {
	margin: 0px 0px 10px 0px;
	width: 100%;
	}
	.widget-rosso {
	background-color: var(--colore2);
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 60px;
	}
	.widget-giallo {
	background-color: var(--colore3);
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 10px 0px;
	min-height: 60px;
	}
		.widget-blu {
	background-color: var(--colore1);
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	min-height: 60px;
	}
	.immagine-in-evidenza-loop {
	float:left;
	width: 150px;
	height: auto;
	margin: 0px 10px 10px 0px;	
	border: 1px solid var(--colore0);
	box-shadow: 0 2px 5px var(--colore0);
	}
}

/* ------------------------ inizio CSS menu ------------------------------------ */

/* Style base per il menu */
.main-navigation {
		width: 100%;
    text-align: left;
    position: relative; /* Aggiungi questa riga per posizionare i sottomenu correttamente */
}
.main-navigation .menu {
    list-style: none;
    padding: 0;
    margin: 0px 0px 0px 0px;
	display: flex; /* Utilizza Flexbox per disporre le voci di menu orizzontalmente */
	flex-wrap: wrap;
	gap: 10px; /* Aggiungi distanza tra i blocchi delle voci del menu
                *  (regola il valore a piacere). Anche se l'editor di
                *  linea di WordPress lo evidenzia in rosso come se
                *  fosse un errore, «gap: 10px;» è perfettamente valido  */
}
.main-navigation .menu li {
    display: inline-block;
    position: relative;
}
.main-navigation .menu li a {
	color: var(--colore0);
    display: block;
    padding: 5px 10px;
    text-decoration: none;
	background-color: var(--colore3);
	border-radius: 5px;
	border: 1px solid black;
}
.main-navigation .menu li a:hover {
	color: var(--colore3);
    background-color: var(--colore0);
}
/* Menu a discesa - i sottomenu devono essere nascosti per default */
.main-navigation .menu li ul,
.main-navigation .menu li ul li ul,
.main-navigation .menu li ul li ul li ul {
	display: block;
    transform: translateY(-100%);
    position: absolute; /* Posiziona il sottomenu sopra gli altri contenuti */
    left: 0px;
    top: 100%;
	/*border: 1px solid var(--colore0);*/
    /*background-color: var(--colore3);*/
	list-style: none;
    padding: 0;
    margin: 0;
    z-index: -10;
}
.main-navigation .menu li:hover > ul,
.main-navigation .menu li:focus-within > ul,
.main-navigation .menu li:hover > ul li ul,
.main-navigation .menu li:focus-within > ul li ul,
.main-navigation .menu li:hover > ul li ul li ul,
.main-navigation .menu li:focus-within > ul li ul li ul {
	transform: translateY(0%);
	z-index: 10;
}

/*------------------------------------------da qui mobile --------------------------------*/

/* Nascondi il pulsante su schermi larghi */
.menu-toggle {
    display: none; /* Nascondi di default */
}

/* Visualizza il pulsante solo su schermi piccoli (max-width: 768px) */
@media (max-width: 768px) {
    /* Mostra il pulsante solo su dispositivi piccoli */
    .menu-toggle {
        display: block;
        background-color: var(--colore0);
        color: var(--colore3);
		border-radius: 5px;
		border: 2px solid var(--colore3);
		margin-top: 8px;
        padding: 5px 10px;
        text-align: center;
        cursor: pointer;
    }
}
@media (max-width: 768px) {
    /* Nascondi il menu di default sui dispositivi mobili */
    .main-navigation .menu {
        display: none;
    }

    /* Mostra il menu quando viene cliccato */
    .main-navigation .menu.open {
        display: block;
        margin-left: 0; /* Annulla il margine sinistro precedente */
    }

    /* Stile per il menu mobile */
    .main-navigation .menu li {
        display: block; /* Elementi uno sotto l'altro */
        width: 100%; /* Larghezza al 100% */
    }

    .main-navigation .menu li a {
     /*   background-color: var(--colore3);*/
        padding: 5px 10px;
		border: none; /* annulla il bordo attribuito al menu desktop*/
    }

    /* Elimina gli stili per i sottomenu su mobile */
    .main-navigation .menu li ul,
    .main-navigation .menu li ul li ul,
    .main-navigation .menu li ul li ul li ul {
        position: static; /* Posizione statica */
        transform: translateY(0%); /* Annulla la trasformazione */
        display: block; /* Mostra i sottomenu */
     /*   background-color: var(--colore3);*/
        min-width: auto; /* Larghezza automatica */
        z-index: auto; /* Indice z automatico */
        list-style: none; /* Rimuovi i pallini */
        padding-left: 10px; /* Indenta i sottomenu */
    }

    .main-navigation .menu li:hover > ul,
    .main-navigation .menu li:focus-within > ul,
    .main-navigation .menu li:hover > ul li ul,
    .main-navigation .menu li:focus-within > ul li ul,
    .main-navigation .menu li:hover > ul li ul li ul,
    .main-navigation .menu li:focus-within > ul li ul li ul {
        display: block; /* Mostra i sottomenu */
      /*  color: var(--colore5);
		background-color: var(--colore3);*/
    }

}

/* ----------------------------- fine CSS menu ----------------------------------- */


/* ----------------css per comments.php------------------------------*/
.comment-list {
    list-style-type: none;
    padding: 0;
}

.comment-body {
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--colore4);
	border-radius: 5px;
    border: 1px solid var(--colore0);
	box-shadow: 0 2px 5px var(--colore0);
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
.comment-avatar {
	border-radius: 5px;
	border: 1px solid var(--colore0);
	box-shadow: 0 2px 5px var(--colore0);
}
.comment-author {
    display: flex;
    align-items: center;

}

.comment-author .fn {
    font-weight: bold;
    margin-left: 10px;
}

.comment-content {
    margin-bottom: 10px;
}

.comment-metadata time {
    font-size: 0.875em;
    color: var(--colore0);
}

.reply a {
    color: var(--colore0);
    text-decoration: underline;
}

.reply a:hover {
    text-decoration: underline;
	color: var(--colore0);
}

.comment-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
	border-radius: 5px;
    border: 1px solid var(--colore0);
    box-shadow: 0 2px 5px var(--colore0) inset;
}
.comment-form input {
	width: 100%;
	padding: 10px;
    margin: 10px auto;
	border-radius: 5px;
    border: 1px solid var(--colore0);
    box-shadow: 0 2px 5px var(--colore0);
	font-size: 20px;
	font-weight: normal;
	color: var(--colore0);
	background-color: var(--colore5);
	cursor: pointer;
}
.stg-table td {
	border: none;
	padding: 10px;
}
/* ----------------fine css per comments.php------------------------ */



/* ----- inizio WordPress Core (queste righe ci devono essere) ----- */

.sticky { /* richiesto da WordPress */
	position: sticky;
	top: 0;
}
.gallery-caption { /* richiesto da WordPress */
	display: block;
}
.bypostauthor { /* richiesto da WordPress */
	display: block;
}

.alignnone {
  margin: 10px 10px 10px 0;
}

.aligncenter,
div.aligncenter {
	display: block;
	padding-top: 10px;
	margin: 10px auto 10px auto;
}

.alignright {
	float:right;
	margin: 10px 0 10px 10px;
}

.alignleft {
	float: left;
	margin: 10px 10px 10px 0;
}

a img.alignright {
  float: right;
  margin: 10px 0 10px 10px;
}

a img.alignnone {
  margin: 10px 10px 10px 0;
}

a img.alignleft {
  float: left;
  margin: 10px 10px 10px 0;
}

a img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
  background: #fff;
  border: 1px solid #f0f0f0;
  max-width: 96%; /* Image does not overflow the content area */
  padding: 5px 5px 5px 5px;
  text-align: center;
}

.wp-caption.alignnone {
  margin: 10px 10px 10px 0;
}

.wp-caption.alignleft {
  margin: 10px 10px 10px 0;
}

.wp-caption.alignright {
  margin: 10px 0 10px 10px;
}

.wp-caption img {
  border: 0 none;
  height: auto;
  margin: 0;
  max-width: 98.5%;
  padding: 0;
  width: auto;
}

.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  margin: 0;
  padding: 0 4px 5px;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* -------  Fine WordPress Core   ---------------------------------- */