/*
Theme Name: Mondrian Classic
Theme URI: 
Author: masino1967
Author URI: https://profiles.wordpress.org/masino1967/
Description: Theme inspired by Piet Mondrian. 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 is the classic version of the Mondrian theme. 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: mondrian-classic
Tags: blog, portfolio, photography, two-columns, threaded-comments, block-patterns, block-styles, custom-logo, custom-menu, featured-images, right-sidebar, full-width-template, template-editing, theme-options, translation-ready, wide-blocks
*/

:root {
  --colore0: #000000;  
  --colore1: #555555;  
  --colore2: #888888;  
  --colore3: #bbbbbb;  
  --colore4: #615e5e;  
  --colore5: #ffffff; 
}



* {
	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: white;
	background: black;
	font-family: robotoCondensed;
	font-size: 20px;
}



a {
  color: #ff0000; 
  text-decoration: none;
}

a:hover,
a:focus {
  color: #ffffffcc; 
  text-shadow: none;
  cursor: pointer;
  outline: none;
}







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(--colore5);
	color: var(--colore5);
	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(--colore0);
	margin: auto;
	padding: 10px 10px 10px 10px;
	display: block;
}
.contenitore-dentro-cornice {
  background-image: url('https://blogger.googleusercontent.com/img/a/AVvXsEi5KroMajZhr2_CQ1X_weiE48yAV7FigEQcPf5NJm0G7-wnyKKYgAUYWIDAn__1Jx8LFkBg_n_NosKDT1kHsQqCiaupxp5WgDu5VdupgvmMDbYx4JbqWOwK_4c6p8dpGduGfMLbSXf-ch9ftrcTdhXlQBsocr3rcpBmLJqLZMvpnPLWflRZy1DVmq7V1FU=s1568');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: auto;
  padding: 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;
}
.contenitore-pagina {
	margin: 0px;
	padding: 0px;
	display: flex;
	flex-direction: row;
}
.contenitore-articoli {
	background-color:black;
	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(--colore1);
	margin: 0px 0px 10px 0px;
	padding: 10px 10px 10px 10px;
	min-height: 300px;
}
.widget-giallo {
	background-color: var(--colore3);
	margin: 0px 0px 10px 0px;
	padding: 10px 10px 10px 10px;
	min-height: 300px;
}
.widget-blu {
	background-color: black;
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	min-height: 300px;
}

.quadrante-sx {
	width: 66%;
}
.quadrante-dx {
	padding-left: 10px;
	width: 34%;
}
.contenitore-dentro-cornice-inferiore {
  background-color:black;
  margin: 0;
  padding: 0 10px 10px 10px; 
  display: flex;
  flex-direction: row;
  width: 100%;
}
.a-sinistra{
	float:left;
}
.a-destra {
	float:right;
}




.site-description {
	margin: 10px 0px 0px 0px;
	color: var(--colore5);
	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;
}
.immagine-in-evidenza-loop {
	float:left;
	margin: 0px 10px 10px 0px;	
	border: 1px solid var(--colore0);
	box-shadow: 0 2px 5px var(--colore0);
}
.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);
}
img.quattrocentoquattro {
	box-shadow: 0 2px 5px var(--colore0);
	border: 1px solid var(--colore0);
	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 {
	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(--colore2);
	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 ------------------------------------ */


.main-navigation {
  width: 100%;
  padding: 4px 10px; 
  background: linear-gradient(145deg, #222222, #0a0a0a);
  border-radius: 6px;
  box-shadow:
    inset 0 2px 5px rgba(255 255 255 / 0.1),
    0 4px 8px rgba(0 0 0 / 0.9);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  user-select: none;
  margin: 0; 
  box-sizing: border-box;
}

.main-navigation .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  box-sizing: border-box;
}


.main-navigation .menu li {
  display: inline-block;
  position: relative;
}


.main-navigation .menu li a {
  color: #cfd6dc; 
  display: block;
  padding: 6px 14px;
  font-size: 14px;
  text-decoration: none;
  background: linear-gradient(to bottom, #1a1a1a, #333333);
  border: 1.5px solid #4a4a4a;
  border-radius: 5px;
  box-shadow:
    inset 0 2px 6px rgba(255 255 255 / 0.15),
    0 2px 4px rgba(0 0 0 / 0.7);
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0 0 0 / 0.7);
  transition: all 0.3s ease;
  user-select: none;
}

/* Hover / Focus state */
.main-navigation .menu li a:hover,
.main-navigation .menu li a:focus {
  color: #ffffff;
  background: linear-gradient(to bottom, #444444, #1c1c1c);
  border-color: #a0a8b0;
  box-shadow:
    inset 0 4px 10px rgba(255 255 255 / 0.35),
    0 4px 8px rgba(0 0 0 / 0.85);
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 5;
}

/* Submenu */
.main-navigation .menu li ul,
.main-navigation .menu li ul li ul,
.main-navigation .menu li ul li ul li ul {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  background: linear-gradient(to bottom, #111111, #222222);
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  box-shadow:
    0 6px 12px rgba(0 0 0 / 0.9),
    inset 0 1px 3px rgba(255 255 255 / 0.1);
  padding: 5px 0;
  margin: 0;
  list-style: none;
  transform: translateY(-100%);
  z-index: -10;
  min-width: 160px;
  transition: transform 0.3s ease, z-index 0.3s ease;
}

.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: 100;
}

.main-navigation .menu li ul li a {
  color: #ccd6dd;
  padding: 8px 20px;
  background: transparent;
  border: none;
  box-shadow: none;
  font-weight: normal;
  text-shadow: none;
  display: block;
  transition: background 0.25s ease, color 0.25s ease;
  white-space: nowrap;
}

.main-navigation .menu li ul li a:hover,
.main-navigation .menu li ul li a:focus {
  background: #444444;
  color: #ffffff;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}


.menu-toggle {
  display: none;
}


body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


.contenitore-cornice,
.contenitore-dentro-cornice-inferiore {
  padding: 0;
  margin: 0 auto;
  max-width: 1024px;
  box-sizing: border-box;
  width: 100%;
}
/*
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    margin: 8px 0;
  }

  .main-navigation .menu {
    display: none;
    flex-direction: column;
    gap: 8px;
  }

  .main-navigation .menu.open {
    display: flex;
  }

  .main-navigation .menu li {
    width: 100%;
    display: block;
  }

  .main-navigation .menu li a {
    padding: 10px 20px;
    border: none;
    background: linear-gradient(to bottom, #222222, #333333);
    box-shadow:
      inset 0 2px 6px rgba(255 255 255 / 0.15),
      0 3px 6px rgba(0 0 0 / 0.7);
    border-radius: 6px;
    font-weight: bold;
    color: #cfd6dc;
  }

  .main-navigation .menu li ul,
  .main-navigation .menu li ul li ul,
  .main-navigation .menu li ul li ul li ul {
    position: static;
    transform: none;
    display: block;
    background: none;
    box-shadow: none;
    padding-left: 15px;
    border-radius: 0;
  }

  .main-navigation .menu li ul li a:hover,
  .main-navigation .menu li ul li a:focus {
    background: #444444;
    color: #ffffff;
  }
}*/

.main-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: hidden; 
}

.main-navigation .menu {
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: hidden; 
  white-space: nowrap;
  text-overflow: ellipsis; 
}


.search-container {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  margin-left: auto; 
}

.search-input {
  padding: 6px 10px;
  border: 1.5px solid #4a4a4a;
  border-radius: 5px;
  background: #111;
  color: #cfd6dc;
  font-size: 14px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow:
    inset 0 1px 3px rgba(255 255 255 / 0.1),
    0 2px 4px rgba(0 0 0 / 0.6);
}

.search-input::placeholder {
  color: #888;
}

.search-button {
  padding: 6px 12px;
  background: linear-gradient(to bottom, #1a1a1a, #333333);
  border: 1.5px solid #4a4a4a;
  color: #cfd6dc;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  box-shadow:
    inset 0 2px 6px rgba(255 255 255 / 0.15),
    0 2px 4px rgba(0 0 0 / 0.7);
  transition: all 0.3s ease;
}

.search-button:hover {
  background: linear-gradient(to bottom, #444444, #1c1c1c);
  border-color: #a0a8b0;
  color: #ffffff;
  box-shadow:
    inset 0 4px 10px rgba(255 255 255 / 0.35),
    0 4px 8px rgba(0 0 0 / 0.85);
}


/* ----------------------------- 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: 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: 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: 1px solid var(--colore0);
    box-shadow: 0 2px 5px var(--colore0) inset;
}
.comment-form input {
    width: 100%;
    padding: 10px;
    margin: 10px auto;
    font-size: 20px;
    font-weight: normal;
    color: #222;                 
    background-color: #fff;      
    border: 3px solid #ccc;      
    box-shadow: inset 0 0 6px #aaa; 
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.comment-form input:hover {
    background-color: #f0f0f0;   
    border-color: #999;
}

.comment-form input:active {
    background-color: #ddd;      
    box-shadow: inset 0 0 8px #888;
}


.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   ---------------------------------- */
html, body {
  width: 100%;
  min-width: 1024px;      
  margin: 0 auto;
  box-sizing: border-box;
  overflow-x: auto;       
}

.contenitore-cornice {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  box-sizing: border-box;
}

.main-navigation {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  white-space: nowrap;
  background: linear-gradient(145deg, #222222, #0a0a0a);
  border-radius: 6px;
  box-shadow:
    inset 0 2px 5px rgba(255 255 255 / 0.1),
    0 4px 8px rgba(0 0 0 / 0.9);
  overflow-x: auto;   
}

.main-navigation .menu {
  display: inline-flex;
  white-space: nowrap;
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
}

.main-navigation .menu li a {
  padding: 6px 10px;
  white-space: nowrap;
}

* {
  outline: none;
}





<style>
.movie-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: flex-start;
  padding: 20px;
}

.movie-grid-item {
  width: 160px;
  text-align: center;
  background: #f0f0f0;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out;
}

.movie-grid-item:hover {
  transform: scale(1.05);
}

.poster-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.movie-title {
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  display: block;
  transition: color 0.2s;
}

.movie-title:hover {
  color: #0073aa;
}
</style>

<style>
.video-hidden {
  display: none !important;
}
</style>