/*
Theme Name: Vara_new
Theme URI: http://gradastudio.com/Vara
Description: WordPress Theme for Architects and Interior Designers
Author: GradaStudio
Author URI: https://themeforest.net/user/gradastudio
Version: 1.2.1
License: General Public License
License URI: http://www.gnu.org/licenses/gpl.html
Tags: blog, two-columns, three-columns, left-sidebar, featured-images, sticky-post, custom-menu, footer-widgets, theme-options, threaded-comments, translation-ready, e-commerce, portfolio
Text Domain: vara
Domain Path: /languages
*/

/*==============================
=        WordPress Core        =
==============================*/

.wp-caption {
    width: auto;
    clear: both;
    max-width: 100%;
    margin-top: 15px;
    margin-bottom: 15px;
}

.wp-caption a {
    box-shadow: none;
}

.alignright {
    margin: 0px 0px 25px 25px;
    box-sizing: border-box;
    float: right !important;
}

.alignleft {
    float: left;
    margin: 0px 25px 25px 0px;
    box-sizing: border-box;
}

.aligncenter {
    text-align: center;
    margin-left: 25px;
    margin-right: 25px;
    box-sizing: border-box;
}

.wp-caption img {
    margin-top: 15px;
}

.wp-caption p.wp-caption-text {
    padding: 0;
    font-size: 14px;
    margin-top: 0px;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.wp-block-gallery,
.wp-block-categories,
.wp-block-search,
.wp-block-calendar {
    margin-bottom: 35px;
}

.bypostauthor {
    background-color: #f3f1f1;
}

.gallery-caption {
    opacity: 0.7;
    margin-top: 10px;
}

.gallery-item {
    margin: 0 0 15px 0;
    padding-right: 10px;
    padding-left: 10px;
}

.gallery-item a {
    box-shadow: none;
}

.gallery-item img {
    border: 0 !important;
}



/* ================================
   METRO BLOG GRID (stile Vara)
   ================================ */

/* Contenitore generale */
.metro-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* Gruppi da 5 articoli */
.metro-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 18px;
  margin-bottom: 18px;
}

/* Item base */
.metro-item {
  position: relative;
  overflow: hidden;
  background: #f2f2f2;

  /* BORDI DRITTI */
  border-radius: 0;
}

/* Link a tutta area */
.metro-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Immagine */
.metro-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  transform: scale(1.02);
  transition: transform 0.45s ease;
}

/* Hover zoom leggero */
.metro-item:hover .metro-thumb {
  transform: scale(1.08);
}

/* OVERLAY (solo su hover) */
.metro-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 24px;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0) 60%
  );

  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.metro-item:hover .metro-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Testi overlay */
.metro-meta {
  color: #fff;
  max-width: 90%;
}

.metro-cat {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 6px;
}

.metro-title {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 600;
  margin: 0;
}

/* ================================
   DIMENSIONI METRO
   ================================ */

/* TILE GRANDE */
.metro-item--big {
  grid-column: span 2;
  grid-row: span 2;
}

/* TILE PICCOLE */
.metro-item--small {
  grid-column: span 1;
  grid-row: span 1;
}

/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1024px) {
  .metro-group {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }

  .metro-item--big {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (max-width: 640px) {
  .metro-group {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
  }

  .metro-item--big,
  .metro-item--small {
    grid-column: span 1;
    grid-row: span 1;
  }

  .metro-title {
    font-size: 22px;
  }
}

.my-fixed-header{
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  height: 75px;
}

/* LOGO VARA */
.my-fixed-header__logo .gs-logo img,
.my-fixed-header__logo img {
  max-height: 100%;
  height: auto;
  display: block;
}

.gs-burger-icon {
    background-color: #212121;
    padding: 10px 16px 10px 16px;
}
.gs-burger-icon-text {
    color: #FFFFFF !important;
}
.gs-burger-icon .burger-icon span {
    background-color: #FFFFFF !important;
}

.wp-block-image img{
	top: -50px;
	position: absolute;
}
#block-20{
	top: -50px !important;
	position: absolute !important;
}
.wp-social-link-instagram{
	background-color: #000;
}

.my-fixed-header__menu{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#212121;
  padding:10px 16px;
  text-decoration:none;
}

.myMenuText{ color:#fff; font-size:14px; }

.myBurger{ display:inline-flex; flex-direction:column; gap:4px; }
.myBurger span{ width:18px; height:2px; background:#fff; display:block; }

/* evita che il fixed header copra la pagina */
.gs-content-wrapper{ padding-top:90px; }


/* ===== Fullscreen menu overlay ===== */
.my-fullscreen-menu{
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999999;
  display: none;
}

.my-fullscreen-menu.is-active{
  display: flex;
  align-items: center;
  justify-content: center;
}

html.my-menu-open,
html.my-menu-open body{
  overflow: hidden;
}

/* Lista menu centrata, senza pallini */
.my-fullscreen-menu__list{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.my-fullscreen-menu__list li{
  list-style: none;
  margin: 10px 0;
}

.my-fullscreen-menu__list li a{
  font-size: 30px;
  line-height: 1.1;
  color: #212121;
  text-decoration: none;
  font-weight: 400;
}

/* Hover */
.my-fullscreen-menu__list li a:hover{
  opacity: .7;
}

/* Bottone X chiusura */
.my-fullscreen-menu__close{
  position: absolute;
  top: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  text-decoration: none;
}

.my-fullscreen-menu__close span{
  position: absolute;
  inset: 0;
}

/* SOLO le due linee della X */
.my-fullscreen-menu__close span:before,
.my-fullscreen-menu__close span:after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 2px;
  background: #212121;
  transform-origin: center;
}

/* Linee inclinate */
.my-fullscreen-menu__close span:before{
  transform: translate(-50%, -50%) rotate(45deg);
}

.my-fullscreen-menu__close span:after{
  transform: translate(-50%, -50%) rotate(-45deg);
}
#menu-menu-4 li{
	margin-bottom: 5px!important;
	font-size: 16px!important;
}
#menu-menu-4 li:hover{
	text-decoration: underline;
}
#menu-item-201 li:hover{
	text-decoration: underline;
}

.my-fullscreen-menu__close span:before{
  transform: translate(-50%, -50%) rotate(45deg);
}

.my-fullscreen-menu__close span:after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Nasconde header/menu del tema Vara (lasciamo solo il tuo) */
.gs-site-header-holder,
.gs-mobile-header-holder{
  display: none !important;
}


@media (max-width: 520px) {
	.gs-burger-icon {
		background-color: #FFF;
	}
	.gs-burger-icon-text {
		display: none;
	}
	.gs-burger-icon .burger-icon span {
		background-color: #000 !important;
	}
}