/**
 * Theme Name:        Frog Revolution
 * Theme URI:         https://www.frogrevolution.com/
 * Description:       Theme made by Enrico Piras web designer and developer and Frog Revolution SRL communication agency for the game adventure of Porto Antico di Genova.
 * Version:           1.0.0
 * Author:            Enrico Piras, Frog Revolution
 * Author URI:        https://www.frogrevolution.com/
 * Tags:              block-patterns, full-site-editing
 * Text Domain:       frogrevolution
 * Domain Path:       /assets/lang
 * Tested up to:      6.4
 * Requires at least: 6.2
 * Requires PHP:      7.4
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

 /* General rules */

 /* General rules, wp admin bar */

 /* Se l'header è fixed, lo spostiamo in basso di 32px */
.admin-bar header { top: 32px;}

/* General rules, colonne fit-content */

.display-none {display: none!important;}

a {
text-decoration: none;
transition: .3s;
}

a:hover {transition: .3s;}

.width-fit-content {width: fit-content;}

.display-none-desktop {display: none;}

/* General rules, spacing */

.container {max-width: 1320px;}

.mx-auto {
margin-left: auto;
margin-right: auto;
}

.w-img-100 img {width: 100%;}

p {margin: 0;}


/* General rules, custom blocks, portfolio filter block */

.filter-buttons-desktop {
padding-right: 10px;
text-align: right;
margin-bottom: 10px;
}

.filter-buttons-desktop .js-filter-btn {
font-size: 1em;
text-transform: uppercase;
color: #ffffff !important;
background-color: transparent;
background-image: linear-gradient(to left, #e20613 1%, #e20613 100%);
background-size: 0% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
border: 0;
transition: background-size .3s;
margin-right: .5rem;
}

.filter-buttons-desktop  .active {
color: #e20613 !important;
background-size: 100% 1px;
transition: background-size .3s;
}

.filter-select-mobile {
display: none;
text-align: center;
}

.filter-select-mobile .js-filter-btn-title {
font-size: 1.15rem;
text-transform: uppercase;
display: block;
color: #e20613;
background-color: transparent;
padding: 10px;
border: 0;
margin: 0 auto;
}

.filter-select-mobile .js-filter-btn-title::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
border-left: .3em solid transparent;
}

.filter-select-mobile .js-filter-btn {
font-size: 1.15rem;
display: block;
color: #ffffff;
text-transform: uppercase;	
background-color: transparent;
padding: 5px 10px;
max-width: 600px;
border: 0;
margin: 0 auto;
}

.js-filter-btn-box {
height: 0;
opacity: 0;
overflow: hidden; /* Nasconde i bottoni che escono quando l'altezza è 0 */
display: block;   /* Deve rimanere block/flex per permettere a GSAP di fare i calcoli */
}

.js-filter-btn-box.is-open {display: block; /* O flex, a seconda del tuo layout mobile */}

#works-filter-wrapper .grid-layout {
display: grid;
grid-template-columns: auto auto auto auto;
}

#works-filter-wrapper .card {
background-size: 150%;
overflow: hidden;
position: relative;
min-height: 350px;
}

#works-filter-wrapper .card .card-img-box {
height: 100%;
background-position: center;
background-size: cover;
transform: scale(1.1);
transition: .3s;
}

#works-filter-wrapper .card:hover .card-img-box {
opacity: .5;
transform: scale(1);
transition: .3s;
}

#works-filter-wrapper .card .card-text-box {
position: absolute;
top: 0;	
width: 100%;
height: 100%;
align-content: center;
}

#works-filter-wrapper .card .card-text-box h4 {
font-size: 1.25rem;
text-transform: uppercase;
text-align: center;
transform: scale(2);
opacity: 0;
transition: .3s;
}

#works-filter-wrapper .card:hover .card-text-box h4 {
transform: scale(1);
opacity: 1;
transition: .3s;
}

 /* Header */

header {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;   
}

header .wp-block-site-logo {
max-width: 300px;
transition: max-width 0.35s ease-in-out;
}

.is-scrolled header .wp-block-site-logo {
max-width: 250px;
transition: max-width 0.35s ease-in-out;
}

#modal-1-content a {
background-image: linear-gradient(to left, #e20613 1%, #e20613 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size .3s;
}

#modal-1-content a:hover, #modal-1-content .current-menu-item a:hover {
color: #000000 !important;
background-size: 100% 100%;
transition: background-size .15s;
}

#modal-1-content .current-menu-item a {
color: #e20613 !important;
background-size: 100% 1px;
transition: background-size .3s;
}

#display-menu svg, #display-menu svg {
background-image: linear-gradient(to left, #e20613 1%, #e20613 100%);
background-size: 100% 0;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size .3s;
}

#display-menu .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge {color: #ffffff;}

#display-menu svg:hover, #display-menu svg:hover {
background-size: 100% 100%;
transition: background-size .15s;
}

#display-menu svg:hover circle, #display-menu svg:hover path {
color: #000000 !important;
fill: #000000 !important;
}

.wp-block-woocommerce-mini-cart {display: none;}

/* Mobile menu */

/* 1. Ingrandisce il contenitore per fare spazio alle barrette più lunghe */
.wp-block-navigation__responsive-container-open svg {
width: 35px !important;  /* Regola la lunghezza totale dell'orizzontale */
height: 30px !important; /* Regola l'altezza totale del blocco */
overflow: visible;       /* Impedisce che le linee spesse vengano tagliate */
}

/* 2. Modifica lo spessore e la lunghezza delle singole barrette */
.wp-block-navigation__responsive-container-open svg rect {
width: 100% !important;  /* Forza le barrette a prendersi tutta la larghezza del punto 1 */
height: 4px !important;  /* Modifica lo SPESSORE (es. 4px, 5px, ecc.) */
}

/* 3. Riposiziona le barrette verticalmente per non farle sovrapporre */
/* Prima barretta (in alto) */
.wp-block-navigation__responsive-container-open svg rect:nth-child(1) {y: 2px !important;}

/* Seconda barretta (in mezzo) */
.wp-block-navigation__responsive-container-open svg rect:nth-child(2) {y: 12px !important; /* Aumenta o diminuisci per regolare lo spazio tra le linee */}

/* Terza barretta (in basso) */
.wp-block-navigation__responsive-container-open svg rect:nth-child(3) {y: 22px !important; /* Aumenta o diminuisci per regolare lo spazio tra le linee */}

/* Overlay menu */

.overlayMenu a {
background-image: linear-gradient(to left, #000 1%, #000 100%);
background-size: 100% 0;
background-position: 0 90%;
background-repeat: no-repeat;
transition: background-size .15s;
}

.overlayMenu .current-menu-item a {
color: #000000!important;
background-size: 100% 1px;
}

/* Footer */

/* Margin top footer */
footer[class*="wp-block-template-part"] {
    margin-block-start: 0px !important;
    margin-top: 0px !important;
}

footer a:hover {color: #000000;}

footer .wp-block-social-links .wp-social-link svg {
width: 30px;
height: 30px;
}

footer .wp-block-social-links a svg {transition: .3s;}

footer .wp-block-social-links a:hover svg {
fill: #000000!important;
transition: .3s;
}

footer .social-block {align-self: baseline;}

/* Home page */

/* Stato iniziale dell'elemento .autoType */
.autoType {
opacity: 0;
/* Transizione più lunga (0.8s) e morbida in uscita */
transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.autoType.is-visible {
opacity: 1;
/* In entrata (quando scrive) può essere leggermente più reattiva */
transition: opacity 0.4s ease-in-out;
}

/* About page */

.aboutProcessNumbers {
display: grid!important;
grid-template-columns: max-content 1fr;
}

.aboutProcessNumbers p, .aboutProcessNumbers h4, .aboutProcessNumbers h5 {transition: .3s;}

.aboutProcessNumbers:hover p, .aboutProcessNumbers:hover h4, .aboutProcessNumbers:hover h5 {
color: #e20613;
transition: .3s;
}

/* Client page */

.block-clients {
max-width: 1320px;
display: grid;
grid-template-columns: repeat(5, 1fr); /* 1. Forza le 5 colonne ad essere esattamente identiche (1 frazione di spazio ciascuna) */
gap: 20px;
align-items: center; /* 2. Allinea gli elementi al centro verticalmente, evitando che si stirino in altezza */
margin: 0 auto;
}

.block-clients figure {
width: 100%;
margin: 0 !important; /* Resetta tutti i margini nativi di Gutenberg */
text-align: center;       /* Aiuta a gestire meglio lo spazio interno */
justify-content: center;
align-items: center;
}

.block-clients figure img {
width: 100%;
height: auto;          /* Lascia che l'altezza sia guidata dall'aspect-ratio */
aspect-ratio: 170 / 90;
object-fit: contain; /* Usa 'contain' se sono loghi (consigliato per non tagliarli), altrimenti rimetti 'cover' */  
}

.block-clients figure figcaption {
color: #ffffff;
text-transform: uppercase;
font-weight: 300;	
margin: 10px 0 0;
}

/* Contact page */

#modulo-contatti {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Crea 2 colonne uguali */
grid-gap: 20px; /* Spazio tra le caselle (orizzontale e verticale) */
width: 100%;
}

#modulo-contatti br {display: none;}

#modulo-contatti .col-md-6 {grid-column: span 1;}

#modulo-contatti .col-12 {grid-column: span 2;}

#modulo-contatti label {display: none;}

#modulo-contatti input[type="text"], #modulo-contatti input[type="email"], #modulo-contatti input[type="tel"], #modulo-contatti textarea {
font-size: 1.15em;
font-family: Lato, sans-serif;
color: #000000;
width: 100%;
padding: .25rem!important;
border: 0;
}

#modulo-contatti input::placeholder, #modulo-contatti textarea::placeholder {
color: #000000;
font-weight: 300;        /* Modifica la dimensione del font */
opacity: 1;              /* Importante per Firefox, che di base li sbiadisce */
}

#modulo-contatti .accettazione-privacy-policy {
display: block;
font-size: 1.15em;
font-weight: 300;
}

#modulo-contatti .accettazione-privacy-policy .wpcf7-list-item {margin: 0px 0.25rem 0px 0px;}

#modulo-contatti .accettazione-privacy-policy a {
background-image: linear-gradient(to left, rgb(226, 6, 19) 1%, rgb(226, 6, 19) 100%);
background-size: 100% 1px;
background-repeat: no-repeat;
color: rgb(255, 255, 255) !important;
text-decoration: none;
background-position: 0px 100%;
transition: background-size 0.3s;
}


#modulo-contatti .accettazione-privacy-policy a:hover {
color: rgb(226, 6, 19) !important;
transition: background-size 0.3s;
}

#modulo-contatti  input[type="submit"] {
font-size: 1.15em;
text-transform: uppercase;
color: #ffffff;
font-weight: bold;
background-color: #e20613;
border: 1px solid #e20613;
padding: .25rem 1rem;
transition: .3s;
}

#modulo-contatti  input[type="submit"]:hover {
color: #e20613;
background-color: transparent;
transition: .3s;
}

.campi-obbligatori {
font-size: 1.15em;
font-weight: 300;
font-style: italic;
}

.contact-map-box {text-align: center;}

.contact-map {
max-width: 990px;
margin: 0 auto;
}

/* Portfolio page */

.single-portfolio {background-color: #000000;}

.portfolio-text-box {
max-width: 660px;
float: right;
}

.align-content-center {align-content: center;}

/* Woocommerce */

.woocommerce .wp-block-woocommerce-mini-cart {display: inline-block;}

/* Shop archive */

.post-type-archive-product .woocommerce-breadcrumb a {
background-image: linear-gradient(to left, rgb(226, 6, 19) 1%, rgb(226, 6, 19) 100%);
background-size: 100% 0;
background-repeat: no-repeat;
text-decoration: none;
background-position: 0px 100%;
transition: background-size 0.3s;
}

.post-type-archive-product .woocommerce-breadcrumb a:hover {
color: #000000;
background-size: 100% 100%;
transition: background-size 0.3s;
}

.post-type-archive-product .wp-block-woocommerce-product-collection ul li a img {transition: 0.3s;}

.post-type-archive-product .wp-block-woocommerce-product-collection ul li a:hover img {
opacity: .75;
transition: 0.3s;
}

.post-type-archive-product .wp-block-woocommerce-product-collection ul li h4 a {
background-image: linear-gradient(to left, rgb(226, 6, 19) 1%, rgb(226, 6, 19) 100%);
background-size: 100% 0;
background-repeat: no-repeat;
text-decoration: none;
background-position: 0px 100%;
transition: background-size 0.3s;
}

.post-type-archive-product .wp-block-woocommerce-product-collection ul li h4 a:hover {
color: #000000;
background-size: 100% 100%;
transition: background-size 0.3s;
}

.post-type-archive-product .wp-block-woocommerce-product-collection ul li button {
border: 1px solid #e20613!important;
border-style: solid!important;
transition: 0.3s;
}

.post-type-archive-product .wp-block-woocommerce-product-collection ul li button:hover {
color: #e20613;
background-color: transparent!important;
transition: 0.3s;
}

/* Single product */

.single-product .woocommerce {margin-top: 0;}

.single-product .woocommerce-breadcrumb a {
background-image: linear-gradient(to left, rgb(226, 6, 19) 1%, rgb(226, 6, 19) 100%);
background-size: 100% 0;
background-repeat: no-repeat;
text-decoration: none;
background-position: 0px 100%;
transition: background-size 0.3s;
}

.single-product .woocommerce-breadcrumb a:hover {
color: #000000;
background-size: 100% 100%;
transition: background-size 0.3s;
}

.single-product .taxonomy-product_cat a {
background-image: linear-gradient(to left, rgb(226, 6, 19) 1%, rgb(226, 6, 19) 100%);
background-size: 100% 0;
background-repeat: no-repeat;
text-decoration: none;
background-position: 0px 100%;
transition: background-size 0.3s;
}

.single-product .taxonomy-product_cat a:hover {
color: #000000;
background-size: 100% 100%;
transition: background-size 0.3s;
}

.single-product .add-to-cart form .quantity input[type="number"] {margin-right: 0!important;}

.single-product .add-to-cart form  button[name=add-to-cart] {
background-color: #e20613;
border: 1px solid #e20613;
margin-right: 0!important;
transition: .3s;
}

.single-product .add-to-cart form  button[name=add-to-cart]:hover {
color: #e20613;
background-color: transparent;
transition: .3s;
}

.single-product .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li {opacity: 1;}

.single-product .woocommerce-Tabs-panel--reviews .form-submit input {
text-transform: uppercase;
background-color: #e20613;
border: 1px solid #e20613;
transition: .3s;
}

.single-product .woocommerce-Tabs-panel--reviews .form-submit input:hover {
color: #e20613;
background-color: transparent;
transition: .3s;
}

/* Checkout page */

.woocommerce-cart button, .woocommerce-cart .wc-block-cart__submit-container a, .wp-block-woocommerce-mini-cart-shopping-button-block {
text-transform: uppercase;
background-color: #e20613;
border: 1px solid #e20613;
transition: .3s;
}

.woocommerce-cart button:hover, .woocommerce-cart .wc-block-cart__submit-container a:hover, .wp-block-woocommerce-mini-cart-shopping-button-block:hover {
color: #e20613;
background-color: transparent;
transition: .3s;
}

.wp-block-woocommerce-mini-cart-shopping-button-block {margin-top: 10px;}

/* Mini carrello */

.wc-block-components-drawer {border-left: 0!important;}

.wc-block-mini-cart__footer-actions a {
text-transform: uppercase;
color: #ffffff!important;
background-color: #e20613!important;
border: 1px solid #e20613!important;
box-shadow: none!important;
transition: .3s;	
}

.wc-block-mini-cart__footer-actions a:hover {
color: #e20613!important;
background-color: transparent!important;
border: 1px solid #e20613!important;
box-shadow: none!important;
transition: .3s;	
}

/* Payment page */

.woocommerce-checkout .wc-block-components-checkout-place-order-button, .woocommerce-checkout #shipping-method .wc-block-checkout__shipping-method-option {
font-size: 1.15rem;
text-transform: uppercase;
background-color: #e20613;
border: 1px solid #e20613;
border-radius: 0;
transition: .3s;
}

.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover, .woocommerce-checkout #shipping-method .wc-block-checkout__shipping-method-option:hover {
color: #e20613;
background-color: transparent;
transition: .3s;
}

@media screen and (max-width: 1400px) {
	
/* General rules */	

/* General rules, spacing */

.container {max-width: 1140px;}

/* General rules, custom blocks, portfolio filter block */

#works-filter-wrapper .card {min-height: 300px;}

}


@media screen and (max-width: 1200px) {
	
/* General rules */	

/* General rules, spacing */

.container {max-width: 960px;}
	
/* General rules, tipography */	

.autoType {font-size: 2.5rem!important;}

/* About page */

.aboutProcessNumbers {grid-template-columns: 1fr;}

/* Client page */

.block-clients {grid-template-columns: repeat(4, 1fr);}

}

@media screen and (max-width: 992px) {

/* General rules */

/* General rules, spacing */

.container {max-width: 720px;}

/* General rules, custom blocks, portfolio filter block */

#works-filter-wrapper .grid-layout {grid-template-columns: auto auto;}

#works-filter-wrapper .card {min-height: 350px;}

/* Client page */

.block-clients {grid-template-columns: repeat(3, 1fr);}

}

/* Su mobile la barra è più alta (46px) se lo schermo è piccolo */
@media screen and (max-width: 782px) {

/* Su mobile la barra è più alta (46px) se lo schermo è piccolo */    
.admin-bar header {top: 46px;}

/* Portfolio page */

.portfolio-text-box {
max-width: 720px;
float: none;
padding-top: 50px!important;
padding-bottom: 50px!important;
margin: 0 auto;
}

}

@media screen and (max-width: 767px) {

/* General rules */

.display-none-desktop {display: block;}

.display-none-mobile {display: none;}

/* General rules, spacing */

.container {max-width: 540px;}

/* General rules, tipography */	

.autoType {font-size: 1.75rem!important;}

/* General rules, custom blocks, portfolio filter block */

.filter-buttons-desktop {display: none;}

.filter-select-mobile {display: block;}

/* .filter-select-mobile {display: block;} */

#works-filter-wrapper .card .card-img-box {
transition: .3s;
opacity: .85;
transform: scale(1);
transition: .3s;
}

#works-filter-wrapper .card .card-text-box {
position: absolute;
top: 0;	
width: 100%;
height: 100%;
align-content: center;
}

#works-filter-wrapper .card .card-text-box h4 {
transform: scale(1);
opacity: 1;
transition: .3s;
}

/* Header */

/* Footer */

.top-footer {display: block!important;}

footer .social-block {margin-top: 20px;}
	
.footer-bottom p {text-align: left!important;}	

/* Home page */

/* Client page */

.block-clients {grid-template-columns: repeat(2, 1fr);}

/* Contact page */
#modulo-contatti {grid-template-columns: 1fr;}
  
#modulo-contatti .col-md-6, #modulo-contatti .col-12 {grid-column: span 1;}

/* Portfolio page */

.portfolio-cover {min-height: 500px!important;}

}

@media screen and (max-width: 576px) {

/* General rules */

.display-none-desktop {display: block;}

.display-none-mobile {display: none;}

/* General rules, spacing */

.container {max-width: none;}

/* General rules, custom blocks, portfolio filter block */

#works-filter-wrapper .grid-layout {grid-template-columns: auto;}

/* Client page */

.block-clients {grid-template-columns: repeat(1, 1fr);}

.block-clients figure img {max-width: 300px;}
	
}