/*
Theme Name: Understrap Child
Theme URI: https://understrap.com
Template: understrap
Author: Howard Development &amp; Consulting
Author URI: https://howarddc.com
Description: The renowned WordPress starter theme framework that combined Underscores and Bootstrap. Trusted by more than 100,000 developers for building handcrafted, custom WordPress sites.
Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,translation-ready,block-styles,wide-blocks,editor-style,threaded-comments,accessibility-ready
Version: 1.2.4.1755592279
Updated: 2025-08-19 10:31:19

*/

:root{--black:#000; --white:#fff; --yellow:#E8C100; --magenta:#D73863;}

body{color: var(--white); font-family: 'Space Grotesk', sans-serif;}
a{color: var(--yellow); transition: 0.3s;}
a:hover{color: var(--magenta);}
#iub-pp-container h1, #iub-pp-container h2,#iub-pp-container  h3 {font-family: 'Space Grotesk', sans-serif !important}
h1, h2, h3, .sedgwick {font-family: 'Sedgwick Ave Display', cursive;}
.spacegrotesk {font-family: 'Space Grotesk', sans-serif !important;}
.wp-lightbox-container img{filter: grayscale(100%); transition: filter 0.5s ease-in-out;}
.wp-lightbox-container img:hover{filter: grayscale(0%);}
.wp-block-gallery > figure{overflow: hidden;}
.wp-block-gallery > figure img{transition: 0.3s;}
.wp-block-gallery > figure img:hover{transform: scale(1.05);}



/* Bootstrap */
.badge{background-color: var(--yellow); color: var(--black);}
.text-primary{color: var(--magenta) !important;}
.btn-primary{background-color: var(--yellow) !important; color: var(--black) !important;}



/* Menu */
#main-nav{background-color: transparent; transition: background-color 0.3s ease;}
#main-nav.scrolled,
#main-nav:has(#navbarNavDropdown.show){background-color: #000;}
#main-nav .custom-logo-link img,
footer .custom-logo-link img{width: 100px; height: auto;}
footer ul{list-style-type: none; padding-left: 0;}

#main-menu > li{margin-right: 1rem;}
#main-menu > li.current-menu-item > a,
#main-menu > li.current-menu-parent > a,
#main-menu > li.current-menu-ancestor > a {color: var(--yellow);}

ul.dropdown-menu{background-color: var(--black); border: 1px solid var(--white);}
ul.dropdown-menu > li.current-menu-item > a {color: var(--yellow);}
ul.dropdown-menu > li > a {color: #ffffff8c;}

header #main-menu .menu-item:has(.dropdown-menu){display: flex; flex-wrap: wrap;}
header #main-menu .menu-item:has(.dropdown-menu) button {
    color: #ffffff;
    text-decoration: none;
}
header #main-menu .menu-item:has(.dropdown-menu) .dropdown-menu.show{
    top: 100%;
    width: fit-content;
}

/* Footer */
footer .custom-logo-link img{margin-bottom: 1rem;}
footer .col-12:last-child img{height: 40px; width: auto; margin-right: 1.5rem;}



/* Home */
#carouselExampleCaptions{position: relative;}
#carouselExampleCaptions .carousel-bg {height:800px; background-size:cover; background-position:center;}
#carouselExampleCaptions .carousel-bg::before {content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; filter: grayscale(100%); transition: transform 0.5s ease, filter 0.5s ease; z-index: 1;}
#carouselExampleCaptions .carousel-item:hover .carousel-bg::before {filter: grayscale(0%); transform: scale(1.05);}
#carouselExampleCaptions .carousel-caption{z-index: 2;}
#carouselExampleCaptions .carousel-caption::before{content:''; position: absolute; background-color: var(--magenta); width: 100%; height: 80%; z-index: -1; top: 3rem; left: 2rem;}
#carouselExampleCaptions .carousel-caption h2,
.banner-description h3{font-size: 4rem; margin-bottom: 2rem;}
#carouselExampleCaptions .carousel-caption p{font-weight: bold; margin-bottom: 0rem;}

.internal-section{flex: 1 1 calc(33.333% - 1rem); min-height: 400px; overflow: hidden; position: relative; transition: transform 0.5s ease;}
.internal-section-bg{position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(100%); transition: filter 0.5s ease, transform 0.5s ease; z-index: 1;}
.internal-section:hover .internal-section-bg{filter: grayscale(0%); transform: scale(1.05);}
.internal-section-title{z-index: 2; color: var(--white); padding: 0 1rem; position: relative; font-size: 2.5rem;}
.internal-section-title::before,
#swiperTeachers .teacher-name::before{content: ''; position: absolute; background-color: var(--magenta); width: 90%; height: 80%; z-index: -1; top: 1rem; left: 2rem;}

#banner-wonderland {min-height: 500px;}
#banner-wonderland::before {content: ""; position: absolute; inset: 0; background-image: var(--banner-bg); background-size: cover; background-position: center; filter: grayscale(100%); transform: scale(1); transition: filter 0.5s ease, transform 0.5s ease; z-index: 1;}
#banner-wonderland > * {z-index: 2;}
#banner-wonderland:hover::before {filter: grayscale(0%); transform: scale(1.05);}

.banner-description{width: 85%;}
.banner-description::before {content: ''; position: absolute; background-color: var(--magenta); width: 100%; height: 80%; z-index: -1; top: 3rem; left: 2rem;}

#in-primo-piano article {border-bottom: 1px solid var(--white); padding: 1rem 0;}
#in-primo-piano article:last-child {border-bottom: none;}
#in-primo-piano article h3 {transition: color 0.3s;}
#in-primo-piano article:hover h3 {color: var(--magenta);}
#in-primo-piano article p:last-child {display: none;}
#in-primo-piano .post-thumb {position: relative; overflow: hidden; min-height: 250px; width: 100%; max-width: 300px; flex-shrink: 0;}
#in-primo-piano .post-thumb > .badge{z-index: 999; top: 1rem; left: 1rem;}
#in-primo-piano .post-thumb-bg {position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; filter: grayscale(100%); transform: scale(1); transition: filter 0.5s ease, transform 0.5s ease;}
#in-primo-piano .post-item:hover .post-thumb-bg {filter: grayscale(0%); transform: scale(1.05);}

#swiperTeachers .teacher-card{color: inherit;}
#swiperTeachers .teacher-img{padding-top: 100%;}
#swiperTeachers .teacher-img::before{content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: inherit; background-size: cover; background-position: center; background-repeat: no-repeat; filter: grayscale(100%); transition: filter 0.5s ease, transform 0.5s ease;}
#swiperTeachers .teacher-card:hover .teacher-img::before{filter: grayscale(0%); transform: scale(1.1);}
#swiperTeachers .teacher-name{font-family: 'Sedgwick Ave Display', cursive;}
#swiperTeachers .swiper-button-next,
#swiperTeachers .swiper-button-prev {color: var(--white);}
#swiperTeachers .teacher-img::before {background-image: var(--bg);}



/* Template page: Background 100% and Title */
.page-hero{min-height: 60vh; overflow: hidden; background-size: cover; background-position: center; background-attachment: fixed;}
.page-hero-bg{inset: 0; background-image: var(--bg-img); background-size: cover; background-position: center; filter: grayscale(100%); transition: filter 0.6s ease; z-index: 0; transition: 0.3s;}
.page-hero:hover .page-hero-bg{filter: grayscale(0%); transform: scale(1.02); transition: 0.3s;}
.page-hero-inner{text-align: center; color: #fff; z-index: 1;}
/* .page-title{background: linear-gradient(to top, var(--magenta) 40%, transparent 40%); box-decoration-break: clone; padding: 0 0.3em; margin: 0 -0.3em;} */
.page-title, .content-title{position: relative; z-index: 0; display: inline;}
.page-title:before{
    content: '';
    position: absolute;
    background-color: var(--magenta);
    width: 100%;
    height: calc(100% - 2rem);
    z-index: -1;
    top: 0;
    left: 0; 
    transform: translate(25px, 25px);   
}
.content-title:before{
    content: '';
    position: absolute;
    background-color: var(--magenta);
    width: 100%;
    height: calc(100% - 1rem);
    z-index: -1;
    top: 0;
    left: 0; 
    transform: translate(15px, 15px);   
}
div.wp-block-cover__inner-container:has(.content-title){
    display: flex;
    justify-content: center;
    align-items: center;
}

/*  */

#la-nostra-storia{
    scroll-margin-top: 200px;
}

.wp-block-separator{
    border: 10px solid transparent;
}

.open-section-only-title{
    padding: 200px 0 50px 0;
}

.archive-wrapper .internal-section {

    flex: 0 1 calc(33.333%);
}
.cta{
    background-color: var(--yellow);
    padding: 5px 10px;
    color: var(--black);
    border: 2px solid var(--yellow);
    transition: all .25s ease;
    text-decoration: none;
    font-weight: 900;
    margin-top: 10px;
    display: inline-block;
    text-transform: uppercase;
}

.cta:hover{
    background-color: var(--black);
    color: var(--yellow);
}

/* single corso*/

#section-content{
    padding: 50px 0;
}

.docente-card--title h2{
    font-family: 'Space Grotesk', sans-serif;
}

.docente-card--info{
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    align-items: center;
}
.docente-card--image__container{
    width: 70px;
    height: 70px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.docente-card--info__container span{
   display: block;
   width: min-content;
   text-transform: uppercase;
}

.info-card--content {
    margin-top: 30px;
}

.info-card--content h2{
    font-family: 'Space Grotesk', sans-serif;
}

.info-card--content p{
    margin-bottom: 5px;
}

.info-card--content .info-card__testo,
.info-card--content .info-card__cta{
    margin-bottom: 25px;
}

.info-card--content .info-card__info{
    margin-bottom: 10px;
}

span.data-corso{
    position: relative;
    padding-left: 25px;
}

span.data-corso:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background-image: url('img/date.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.single-corso--sticky-cta{
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: var(--yellow);
    border: 2px solid var(--yellow);
    font-size: 20px;
    color: var(--black);
    text-transform: uppercase;
    text-decoration: none;
    width: 100%;
    display: block;
    transition: all .2s ease;
    padding: 5px 0;
    text-align: center;
    font-weight: bold;
}

.single-corso--sticky-cta:hover{
    background-color: var(--black);
    color: var(--yellow);
}

.single-corso-scolastico footer{
    padding-bottom: 50px;
}

.corso-sidebar{
    position: sticky;
    top: 150px;
    padding-bottom: 30px;
}

/* single docente */
.docente--image__container{
    width: 100%;
    overflow: hidden;
    margin-bottom: 2rem;

}
.docente--image__inner{
    width: 100%;
    padding-top: 100%;
        background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.5s ease;
    overflow: hidden;

}

.docente--image__inner:hover{
    filter: grayscale(0%);
    transform: scale(1.05);

}
.docente-sidebar{
    margin-bottom: 2rem;
}

.docente-sidebar--header h2:before{
    height: calc(100% - .5rem);
    transform: translate(15px, 10px);
}

.docente-sidebar--info .social-links img{
    width: 3rem;
    height: 3rem;
}

.docente-sidebar--info .social-links{
    
    margin-top: 2rem;
    
}

.docente-sidebar--info .docente-corso-link {
    
   text-transform: uppercase;
   font-size: 1.25rem;
   text-decoration: none;
    
}

.docente-sidebar--info .docente-corsi-container h2{
    font-family: 'Space Grotesk', sans-serif;
    text-transform: uppercase;
    margin-top: 2rem;
    font-size: 1rem;
    
}

.docente-single-card{
    position: relative;
    text-align: center;
    margin-bottom: 4rem;
}

.docente-single-card h2:before{
    
    height: calc(100% - .5rem);
    transform: translate(1rem, .5rem);
}

.docente-single-card:hover .docente--image__inner{
    
    transform: scale(1.05);
    filter: grayscale(0%);
    
}

.docente_card + .docente_card{
    margin-top: 10px;
}

.docente_card a{
    color: var(--white);
    text-decoration: none;
}



/* Media Query: Tablet horizontal */
@media screen and (max-width: 1199px) {
    /* Menu */
    #main-menu > li,
    #main-menu ul.dropdown-menu > li{margin-right: 0rem; text-align: right; font-size: 1.5em;}
    ul.dropdown-menu.show{display: inline-block;}
    header #main-menu .menu-item:has(.dropdown-menu){
        justify-content: flex-end;
    }

    header #main-menu .menu-item:has(.dropdown-menu) .dropdown-menu.show{
        width: 100%;
    }

}



/* Media Query: Tablet vertical */
@media screen and (max-width: 991px) {

    .wp-block-gallery > figure{width: 100% !important;}

    /* Home */
    #carouselExampleCaptions #hero-slider-cta{background-color: var(--yellow);}
    #carouselExampleCaptions .carousel-indicators{display: none;}
    #carouselExampleCaptions .carousel-caption-mobile{background-color: var(--magenta);}
    #carouselExampleCaptions .carousel-caption-mobile h2{font-size: 2.5rem;}
    #carouselExampleCaptions .carousel-caption-mobile p{margin-bottom: 0;}

    #in-primo-piano .post-thumb {max-width: 100%; min-height: auto; aspect-ratio: 16 / 9;}
    #in-primo-piano .post-thumb-bg {position: absolute; inset: 0;}

}



/* Media Query: Mobile */
@media screen and (max-width: 575px) {
    
    /* Navbar */
    #main-nav{margin-top: 37px;}

    /* Home */
    #carouselExampleCaptions .carousel-bg{height: 500px;}
    #carouselExampleCaptions .carousel-indicators{display: flex; top: 29rem;}
    #banner-wonderland{min-height: 375px;}
    .banner-description h3{font-size: 2rem; margin-bottom: 1rem;}    
    #in-primo-piano .post-content{padding: 1rem;}

}