/**
 * 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 */

.wp-block-column.colonna-fit {
flex-basis: fit-content!important;
flex-grow: 0!important; /* Impedisce alla colonna di espandersi per riempire lo spazio vuoto */
}

.grid-avventure {display: grid;}

.avventure-grid-2 {
display: grid;    
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.display-none {display: none;}

a {transition: .3s;}

a:hover {
transition: .3s;
opacity: .75;
}

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

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

/* General rules, spacing */

p {margin: 0;}

.SectionContent {padding: 50px 20px;}

 /* Header */

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

header .widget_polylang select {
height: fit-content;
color: #ffffff;
background-color: #004d81;
padding: 10px 35px 10px 25px;
border: 0;
border-radius: 25px;

appearance: none; 
-webkit-appearance: none;
	
background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
background-repeat: no-repeat;
background-position: right 15px center; /* Posiziona la freccia a 8px dal bordo destro */
background-size: 18px;
}

/* Footer */

footer {margin-top: 0;}

/* Home page */

/* Sezione Avventure */

#adv-results-container {
min-height: 400px; /* Mantieni lo spazio occupato */
position: relative;
}

.card {opacity: 0; /* Partono invisibili, le anima GSAP */}

/* Pagine archivio */
.loop-archivio ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}

.loop-archivio ul li {margin-bottom: 20px;}

.loop-archivio ul li:last-of-type {margin-bottom: 0px;}

.loop-archivio ul li .loop-archivio-img img {
border: 0;
border-radius: 25px;
}

.loop-archivio ul li h4 {
font-size: 1.5em;
margin: 0 0 20px;
}

.loop-archivio ul li .categorie-cpt {
display: inline-grid;
grid-template-columns: repeat(3, auto);
gap: 10px	
}

.loop-archivio ul li .categorie-cpt .wp-block-column {
display: inline-grid;
grid-template-columns: repeat(2, auto);
gap: 5px;
width: fit-content;
}

.loop-archivio ul li .categorie-cpt a {color: #ffff00;}

/* Avventure, pagine */

.single-avventure header {display: none;}

.single-avventure #main-content {margin-top: 0;}

.avviso-vai-al-porto-antico {
height: 100vh;
display: flex;
align-items: center;
}

.scrolla-giu {position: relative;}

.scrolla-giu::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-width: 8px 8px 0;
border-style: solid;
border-color: white transparent transparent;
}

.single-avventure footer {display: none;}

/* Avventure, Olpo il polpo - capitolo 1 */

.postid-250 .rifiuti {
z-index: 2;
position: absolute;
width: 65%;
top: 20%;
margin-left: 2% !important;
}

.postid-250 .rifiuti img {width: 100%;} 

.postid-250 .pesci {
z-index: 3;
position: absolute;
width: 60%;
top: 30%;
margin-left: 6% !important;
}

.postid-250 .pesci img {width: 100%;} 

.small-olpo-container {
position: sticky;
top: 100px;
height: 180px;
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
transition: opacity 0.6s ease;
}

.postid-250 .drago {
z-index: 4;
position: absolute;
width: 60%;
top: 38%;
right: 0;
margin-right: 2% !important;
}

.postid-250 .drago img {width: 100%;} 

.postid-250 .olpo {
z-index: 5;
position: absolute;
width: 45%;
top: 60%;
margin-left: 8% !important;
}

.postid-250 .olpo img {width: 100%;} 

/* Avventure, Olpo il polpo - capitolo 2 */

.olpo-cap-2-scena-1 {max-width: 70%;}

.sfondo-cap-2-scena-1, .sfondo-cap-2-scena-3 {margin-top: -35%;}

.sfondo-cap-2-scena-2 {margin-top: -10%;}

.olpo-cap-2-scena-3 {
max-width: 70%;
z-index:2;
position: relative;
}

/* Avventure, Olpo il polpo - capitolo 3 */

.olpo-cap-3-drago-1 {max-width: 50%;}

.olpo-cap-3-olpo-1 {
max-width: 80%;
z-index: 2;
position: relative;
}

.sfondo-cap-3-scena-1 {margin-top: -45%;}

.olpo-cap-3-scena-2 {margin-top: -40%;}

.olpo-cap-3-olpo-2 {max-width: 60%;}

.olpo-cap-3-drago-2 {max-width: 80%;}

.olpo-cap-3-scena-3 {margin-top: -45%;}

.olpo-cap-3-bidone-1 {max-width: 70%;}

.olpo-cap-3-testo-scena-3 {margin-top: -25%;}

.olpo-cap-3-drago-3 {max-width: 60%;}

.olpo-cap-3-olpo-3 {
max-width: 80%;
position: relative;
z-index: 2;
}

.olpo-cap-3-scena-4 {margin-top: -10%;}

/* Avventure, Olpo il polpo - capitolo 4 */

.olpo-cap-4-drago-1 {max-width: 70%;}

.olpo-cap-4-olpo-1 {
max-width: 40%;
position: relative;
z-index: 2;
margin-bottom: -40%;
}

.olpo-cap-4-olpo-2 {
max-width: 90%;
position: relative;
z-index: 2;
margin-bottom: -40%;
}

.olpo-cap-4-bici-1 {max-width: 90%;}

.olpo-cap-4-granchi-1 {
max-width: 60%;
margin-bottom: -35%;
z-index: 3;
position: relative;
}

.sfondo-cap-4-scena-3 {
z-index: 2;
position: relative;
}

.olpo-cap-4-bimbi-1 {
margin-top: -30%;
z-index: 0;
position: relative;
}

.olpo-cap-4-granchi-2 {max-width: 50%;}

/* Avventure, Olpo il polpo - capitolo 5 */

.olpo-cap-5-vortice-1 {max-width: 70%;}

.olpo-cap-5-drago-1 {
max-width: 65%;
margin-top: -30%;
margin-bottom: -100%!important;
z-index. 2;
}

.sfondo-cap-5-scena-1 {margin-top: -50%;}

.olpo-cap-5-vortice-2 {max-width: 70%;}

.olpo-cap-5-olpo-1 {
max-width: 70%;
margin-top: -20%;
z-index: 2;
position: relative;
margin-bottom: -30%;
}

.olpo-cap-5-vortice-3 {
max-width: 60%;
z-index: 2;
margin-bottom: -20%;
}

.olpo-cap-5-fumo-vortice-3 {
max-width: 50%;
margin-left: 10%!important;
z-index: 3;
position: relative;
}

.olpo-cap-5-olpo-2 {
margin-top: -30%;
margin-bottom: -60%!important;
z-index: 1;
position: relative;
}

/* Avventure, Olpo il polpo - capitolo 6a */

.olpo-cap-6a-drago-1 {
max-width: 60%;
z-index: 2;
position: relative;
padding-left: 20%;
}

.olpo-cap-6a-olpo-1 {
margin-top: -60%!important;
display: inline-block;
margin-bottom: -50%;
/*padding-left: 20px!important;*/
z-index: 3;
}

.olpo-cap-6a-olpo-1 figure {max-width: 60%;}

.olpo-cap-6a-olpo-1 figure img {margin-left: -10%;}

.sfondo-cap-6a-scena-1 {margin-top: -50%;}

.olpo-cap-6a-drago-2 {
max-width: 60%;
position: relative;
padding-left: 20%;
z-index: 2;
position: relative;
}

.olpo-cap-6a-olpo-2 {
max-width: 60%;
margin-top: -40%!important;
z-index: 2;
position: relative;
}

.olpo-cap-6a-olpo-2 img {margin-left: -30%;}

.sfondo-cap-6a-scena-2 {margin-top: -30%;}

.bolle-cap-6a-scena-3 {margin-top: -20%;}

/* Avventure, Olpo il polpo - capitolo 6b */

.olpo-cap-6b-olpo-1 {
max-width: 60%;
margin-top: -60%;
z-index: 3;
position: relative;	
}

.olpo-cap-6b-fucile-1 {
max-width: 30%;
margin-top: -25%;
z-index: 2;
position: relative;	
}

.olpo-cap-6b-fucile-1 img {margin-left: 80%;}


.olpo-cap-6b-drago-2 {max-width: 80%;}

.olpo-cap-6b-olpo-2 {
max-width: 80%;
z-index: 2;
position: relative;
}

.sfondo-cap-6b-scena-3 {margin-top: -30%;}

/* Avventure, Olpo il polpo - capitolo 7a */

.olpo-7-scena1 {padding-bottom: 45%;}

.olpo-7-pesce-1 {
max-width: 30%;
margin-top: -85%;
}

.olpo-7-pesce-1 img {margin-left: 80%;}

.olpo-cap-7-stella-1 {max-width: 60%;}

/* Avventure, Olpo il polpo, regole generali dei form */


#wpcf7-f320-p250-o1 .wpcf7-radio {
display: grid;
gap: 15px;
margin-top: 0;
margin-bottom: 40px;
}

#wpcf7-f320-p250-o1 .wpcf7-radio .wpcf7-list-item {
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 20px;
font-size: 1.5rem;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
width: 100%;
max-width: 320px;
margin: 0 auto;
}

#wpcf7-f320-p250-o1 .wpcf7-submit {
background: white;
color: #142C62;
border: none;
padding: 20px 50px;
border-radius: 50px;
font-weight: 900;
font-size: 1.2rem;
text-transform: uppercase;
width: 100%;
max-width: 320px;
margin: 0 auto;	
display: grid;
}

/* Pagine archivio, tassonomia artista */

.immagine-profilo-artista img {
width: 100%;
height: auto;
border: 0;
border-radius: 25px;
}

.wp-block-term-description p {margin-bottom: 10px;}

.wp-block-term-description p:last-of-type {margin-bottom: 0px;}

.tax-acf-link {
text-decoration: none;
height: fit-content;
color: #ffffff;
background-color: #004d81;
padding: 10px 25px;
border: 0;
border-radius: 25px;
display: block;
width: fit-content;
}

/* 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;}

}

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

/* General rules */

.hide-on-desktop {display: block;}

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

/* Avventure, pagine */

.avventure-bg-img img {width: 100%;}

/* Avventure, Olpo il polpo */
	
.scena-olpo-1 {
min-height: 150vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: opacity 1.2s ease, transform 1.2s ease;
}
	
.scena-olpo-1-min-height-auto {}	

.is-avventura-olpo-il-polpo-capitolo-1 .bubble, .avventura-parent-olpo-il-polpo-capitolo-1 .bubble {
position: fixed;
bottom: -50px;
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 50%;
pointer-events: none;
z-index: 1;
animation: rise 4s linear forwards;
}

.is-avventura-olpo-il-polpo-capitolo-1 .speech-bubble, .avventura-parent-olpo-il-polpo-capitolo-1  .speech-bubble {
background: white;
color: #333;
padding: 15px 20px;
border-radius: 20px;
font-weight: bold;
font-size: 1rem;
position: relative;
margin-bottom: 15px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
animation: popIn 0.8s ease-out forwards 0.5s;
opacity: 0;
}

.is-avventura-olpo-il-polpo-capitolo-1 .speech-bubble::after, .avventura-parent-olpo-il-polpo-capitolo-1 .speech-bubble::after{
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
border-width: 8px 8px 0;
border-style: solid;
border-color: white transparent transparent;
}

.is-avventura-olpo-il-polpo-capitolo-1 .active, .avventura-parent-olpo-il-polpo-capitolo-1 .active {
opacity: 1 !important;
transform: translateY(0) !important;
}
	
.arrow-down {
margin-top: 0;
text-align: center;
}
	
.lucide-chevron-down-icon {
width: 24px;
height: 24px;	
fill: none;
stroke: #ffffff;
stroke-width: 2px;
scale: 2.25;
}

.olpo-text-1 {text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);}

.olpo-cap-1-scena2 {position: relative;}

.olpo-cap1-scena2-polpo {
width: 45%;
position: relative;
z-index: 2;
}

.olpo-cap1-scena2-pesci {
width: 85%;
position: absolute;
bottom: 15%;
z-index: 1;
}
	
.olpo-cap1-scena3-drago {width: 90%;}

.olpo-cap1-scena4-drago {max-width: 85%;}
	
.olpo-cap1-scena4-rifiuti {
width: 90%;
margin-top: -200px;
position: relative;
z-index: 2;
}	

}

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

/* Header */

header .custom-logo {min-width: 150px;}

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

/* Footer */

.top-footer {gap: 0;}

/* Home page */

.home-page-hero-title {font-size: 2.5em!important;}	
	
.home-page-hero-subtitle {font-size: 1.5em!important;}	

/* Pagine archivio */

.loop-archivio ul {grid-template-columns: repeat(1, 1fr);}

.loop-archivio ul li .categorie-cpt {
display: grid;
grid-template-columns: repeat(1, 1fr);
}

/* Avventure, Olpo il polpo */

.scena-olpo-1-min-height-auto-smartphone {min-height: auto;}	

}

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

/* Avventure, Olpo il polpo */

/* Avventure, Olpo il polpo, capitolo 1 */

.postid-250 #scena2, .postid-250 #scena3, .postid-250 #scena4 {min-height: 90vh;}

}