/*!
Theme Name: Kadence Child
Template: kadence
Version: 1.0.24
Text Domain: kadence-child
*/


/* ==========================================================================
   VARIABILI GLOBALI
   ========================================================================== */

:root {
    --primario: var(--global-palette1);
}


/* ==========================================================================
   TIPOGRAFIA — Scale fluida via clamp()
   Valori calibrati su viewport 320px–1440px
   ========================================================================== */

h1, .h1, .h1 > .gspb-dynamic-title-element,
.h1.gspb_meta > * {
    font-size: clamp(30px, 0.0612rem + 5.2128vw, 75px);
}

h2, .h2, .h2 > .gspb-dynamic-title-element,
.h2.gspb_meta > * {
    font-size: clamp(26px, 1.0186rem + 2.0213vw, 45px);
}

h3, .h3, .h3 > .gspb-dynamic-title-element,
.h3.gspb_meta > * {
    font-size: clamp(20px, 1.1223rem + 0.4255vw, 24px);
}

h4, .h4, .h4 > .gspb-dynamic-title-element,
.h4.gspb_meta > * {
    font-size: clamp(18px, 1.0612rem + 0.2128vw, 20px);
}

h5, .h5, .h5 > .gspb-dynamic-title-element,
.h5.gspb_meta > * {
    font-size: clamp(16px, 0.9362rem + 0.2128vw, 18px);
}

h6, .h6, .h6 > .gspb-dynamic-title-element,
.h6.gspb_meta > * {
    font-size: 16px;
}


/* ==========================================================================
   PULSANTI
   Effetto angoli animati via ::before / ::after
   ========================================================================== */

.button,
.wp-block-button__link,
.wp-element-button,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
    position: relative;
    font-family: Epilogue;
    font-weight: 500;
    padding: 0.6em 1em 0.5em 1em;
    box-shadow: none;
    border-radius: 0;
}

/* Angoli decorativi — condivisi tra ::before e ::after */
.button::before,
.button::after,
.wp-block-button__link::before,
.wp-block-button__link::after,
.wp-element-button::before,
.wp-element-button::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Angolo in alto a destra */
.button::before,
.wp-block-button__link::before,
.wp-element-button::before {
    top: 0;
    right: 0;
    border-top: 3px solid var(--corner-color, currentColor);
    border-right: 3px solid var(--corner-color, currentColor);
}

/* Angolo in basso a sinistra */
.button::after,
.wp-block-button__link::after,
.wp-element-button::after {
    bottom: 0;
    left: 0;
    border-bottom: 3px solid var(--corner-color, currentColor);
    border-left: 3px solid var(--corner-color, currentColor);
}

/* Hover: gli angoli si espandono a coprire l'intero bordo */
.button:hover::before,
.button:hover::after,
.wp-block-button__link:hover::before,
.wp-block-button__link:hover::after,
.wp-element-button:hover::before,
.wp-element-button:hover::after {
    width: 100%;
    height: 100%;
}

/* Rimozione box-shadow su tutti gli stati interattivi */
.button:hover, .button:focus, .button:active,
.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link:active,
.wp-element-button:hover, .wp-element-button:focus, .wp-element-button:active,
input[type="button"], input[type="reset"], input[type="submit"],
input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active,
input[type="reset"]:hover, input[type="reset"]:focus, input[type="reset"]:active,
input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active,
.fl-button,
.elementor-button-wrapper .elementor-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit,
#main-header .header-button:hover {
    box-shadow: none;
}

.wp-element-button.filled {
    background-color: var(--global-palette1);
    color: var(--global-palette9);
    --corner-color: var(--global-palette1);
}

.wp-element-button.filled:hover {
    background-color: var(--global-palette9);
    color: var(--global-palette1);
}

/*
 * .btn-corner-wrap — wrapper applicato via JS a elementi <input>
 * che non supportano ::before / ::after nativamente
 */
.btn-corner-wrap {
    position: relative;
    display: inline-flex;
}

.btn-corner-wrap::before,
.btn-corner-wrap::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    pointer-events: none;
    transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-corner-wrap::before {
    top: 0;
    right: 0;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

.btn-corner-wrap::after {
    bottom: 0;
    left: 0;
    border-bottom: 3px solid currentColor;
    border-left: 3px solid currentColor;
}

.btn-corner-wrap:hover::before,
.btn-corner-wrap:hover::after {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   FUNZIONALI
   ========================================================================== */
.mt-0 {
	margin-top: 0!important
}
/* Sottolineatura animata al hover — cresce da sinistra */
.card-progetto a,
.single-progetti .meta a,
.servizi-megamenu a {
    display: inline;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent calc(100% - 1px), currentColor 1px);
    background-size: 0 95%;
    transition: background-size 0.7s ease;
    text-decoration: none;
}
.card-progetto a:hover,
.single-progetti .meta a:hover,
.servizi-megamenu a:hover {
    background-size: 100% 95%;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Colore icona menu mobile quando l'header trasparente è in modalità sticky */
.mobile-transparent-header .item-is-stuck .mobile-toggle-open-container .menu-toggle-open,
.transparent-header .item-is-stuck .search-toggle-open-container .search-toggle-open {
    color: var(--global-palette1) !important;
}

/* Icone social: bianche in header trasparente, normali da sticky in poi */
.transparent-header .social-link img {
    filter: invert(100%);
}
.transparent-header .item-is-stuck .social-link img {
    filter: invert(0%);
}

/* Mega menu servizi V1 */
.kadence-menu-mega-columns-1 .servizi-megamenu {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 2rem;
}
ul.servizi-megamenu li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.5rem;
    font-size: 14px;
    border-bottom: 0.5px solid var(--global-palette7);
    padding-bottom: 1rem;
}
ul.servizi-megamenu li:nth-last-child(-n+2) {
    border-bottom: none;
    padding-bottom: 0;
}
.servizi-megamenu a.servizi-megamenu__link {
    font-weight: 500;
    width: auto !important; /* forzo altrimenti il bordo in hover si allunga troppo */
    color: var(--global-palette9);
}
.servizi-megamenu span.servizi-megamenu__desc {
    font-size: 12px;
    color: var(--global-palette5);
}

.mobile-html-inner {
    line-height: 1;
}

/* Menu mobile — drawer */
.popup-drawer .drawer-header {
    margin-top: 10px;
}
.drawer-content .site-header-item:first-child {
    margin-top: -36px;
    margin-bottom: 2rem;
}

/* Rimozione bordo sinistro sul toggle dei sottomenu senza parent-toggle */
.mobile-navigation:not(.drawer-navigation-parent-toggle-true) ul li.menu-item-has-children .drawer-nav-drop-wrap button {
    border-left: 0;
}

.header-mobile-social-wrap {
    position: absolute;
    right: 25px;
    margin-top: -100px;
}


/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* Freccia scroll animata */
.scroll-down {
    position: absolute;
    right: 30px;
    bottom: 80px;
}
.scroll-down img {
    animation: bounce 2s ease-in-out infinite;
}
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(30px); }
}

/* Blocco citazione */
.citazione {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1.5rem;
}
.citazione p {
    color: var(--global-palette9);
    font-size: 2.5rem;
}

@media (max-width: 1080px) {
    .citazione {
        max-width: 70%;
    }
    .citazione p {
        font-size: 2rem;
    }
}

@media (max-width: 810px) {
    .citazione {
        max-width: 85%;
    }
}

@media (max-width: 480px) {
    .citazione {
        max-width: 100%;
        row-gap: 1rem;
    }
    .citazione p {
        font-size: 1.5rem;
    }
}

/*
 * Logo sticky con mix-blend-mode: difference
 * Il logo scorre sopra i blocchi di contenuto cambiando colore per contrasto
 */
.logo-sticky h1 {
    height: 510px;
    background: var(--global-palette9);
    margin-bottom: -160px !important;
}
.logo-sticky h1 img {
    height: 140px;
    mix-blend-mode: difference;
    transform: translateY(-155px);
    position: sticky;
    top: 50vh;
}
@media (max-width: 768px) {
	.logo-sticky h1 {
		background: transparent;
	}
}

.intro p {
    max-width: 480px;
}
.intro p:first-child {
    padding-top: 2rem;
}

@media (max-width: 1080px) {
    .logo-sticky h1 {
        height: 340px;
        margin-bottom: -90px !important;
    }
    .logo-sticky h1 img {
        height: 100px;
        transform: translateY(-80px);
    }
    .intro p:first-child {
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .logo-sticky h1 {
        height: 65px;
        margin-bottom: -70px !important;
    }
    .logo-sticky h1 img {
        height: 100%;
        position: relative;
        top: 0;
    }
}

/* Offset verticale sul primo elemento del loop home (effetto stagger visivo) */
.loop-home li:first-child {
    transform: translateY(-15vw);
}

@media (max-width: 768px) {
    .loop-home li:first-child {
        transform: translateY(-10vw);
    }
}

@media (max-width: 480px) {
    .loop-home li:first-child {
        transform: translateY(0);
    }
}


/*
 * Sfondo bicolore orizzontale 50/50 — solo desktop
 * Usato per separare visivamente colonne affiancate senza usare bordi
 */
@media (min-width: 768px) {
    .duotone {
        background: linear-gradient(90deg, rgba(244, 244, 244, 1) 50%, rgba(255, 255, 255, 1) 50%);
    }
    .duotone-inv {
        background: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(244, 244, 244, 1) 50%);
    }
}

/* Testo sticky affiancato alla griglia servizi */
.servizi-description {
    mix-blend-mode: difference;
    position: sticky;
    top: 50vh;
    transform: translateY(calc(-5vw - 90px));
}
.servizi-description h2 {
    margin-bottom: 0.5em !important;
}

@media (max-width: 992px) {
    .servizi-description {
        position: sticky;
        top: 200px;
        transform: translateY(0);
        height: auto;
    }
}

/* Griglia card tassonomia servizi — 2 colonne, 1 su mobile */
.servizi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.servizi-card {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.servizi-card__title {
    color: #fff;
    margin: 0 !important;
}

.servizi-card p {
    color: #fff;
    font-size: 0.75rem;
    /* Testo troncato a 3 righe */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0;
}

.servizi-card__link {
    align-self: flex-end;
    color: #fff;
    text-decoration: none;
}

.servizi-card__link svg {
    transition: transform 0.25s ease;
}
.servizi-card__link:hover svg {
    transform: translate(3px, -3px);
}

@media (max-width: 768px) {
    .servizi-grid {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   CARD PROGETTO — usata in homepage e archivio
   ========================================================================== */

.card-progetto {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.card-progetto .immagine {
    overflow: hidden;
    border: 1px solid var(--global-palette5);
}

.card-progetto .dettagli-card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 12px;
}

.card-progetto .dettagli-card .divisioni,
.card-progetto .dettagli-card .meta {
    max-width: 50%;
}

.card-progetto .dettagli-card .meta {
    text-align: right;
}

@media (max-width: 768px) {
    .card-progetto .dettagli-card {
        flex-direction: column;
    }
    .card-progetto .dettagli-card .divisioni,
    .card-progetto .dettagli-card .meta {
        max-width: 100%;
        text-align: left;
    }
}

.card-progetto h2.card-titolo {
    margin-top: 0;
    margin-bottom: 0;
}


/* ==========================================================================
   ARCHIVIO PROGETTI
   ========================================================================== */
.progetti-archive-title {
    max-width: 85%;
}
.archive-description {
    margin-bottom: 3rem;
}

@media (max-width: 480px) {
    .progetti-archive-title {
		max-width: 100%;
	}
}
@media (max-width: 768px) {
    .archive-desc-collapsible {
        overflow: hidden;
        max-height: 8.5em;
        position: relative;
        transition: max-height 0.4s ease;
    }
    .archive-desc-collapsible::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3em;
        background: linear-gradient(to bottom, transparent, white);
        transition: opacity 0.4s ease;
    }
    .archive-desc-collapsible.is-open {
        max-height: 600px;
    }
    .archive-desc-collapsible.is-open::after {
        opacity: 0;
    }
    .archive-desc-toggle {
        display: inline-block;
        margin-top: 0.5em;
        font-size: 0.9em;
    }
}


/* ==========================================================================
   SINGLE PROGETTI
   ========================================================================== */

/* Colonna meta laterale con separatori tra le righe */
.single-progetti .blocco-meta {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
    justify-content: flex-start;
}

/* Separatore sopra ogni riga tranne la prima */
.single-progetti .blocco-meta > * + * {
    border-top: 1px solid #e0e0e0;
    padding-top: 0.5rem;
	flex-wrap: wrap;
}

.single-progetti .meta {
    column-gap: 0.5em;
    align-items: flex-start;
}

/* Prefix (es. "Cliente:") in tono secondario */
.single-progetti .meta .gspb_meta_prefix {
    color: var(--global-palette3);
}

/* Valore in evidenza */
.single-progetti .meta .gspb_meta_value {
    color: var(--global-palette1);
    font-weight: 500;
}


/* ==========================================================================
   GALLERIA MOSAICO — layout a griglia 12 colonne
   ========================================================================== */

.gm-gallery {
    width: 100%;
}

/* Ogni riga è una griglia 12 colonne con altezza uniforme tra le celle */
.gm-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    gap: 20px;
    margin-bottom: 20px;
}
.gm-row:last-child {
    margin-bottom: 0;
}

/* Classi di spanning colonne */
.gm-col-3  { grid-column: span 3; }
.gm-col-4  { grid-column: span 4; }
.gm-col-5  { grid-column: span 5; }
.gm-col-7  { grid-column: span 7; }
.gm-col-12 { grid-column: span 12; }

.gm-item {
    overflow: hidden;
    position: relative;
}

/* Cella vuota: occupa spazio di layout senza contenuto visivo */
.gm-item--vuoto {
    background: transparent;
}

.gm-item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: var(--gm-ratio, auto); /* iniettato dal PHP per ogni immagine */
    max-height: 80vh;
    object-fit: cover;
}

/* Mobile: colonna singola, celle vuote nascoste */
@media (max-width: 768px) {
    .gm-row {
        grid-template-columns: 1fr;
    }

    .gm-col-3,
    .gm-col-4,
    .gm-col-5,
    .gm-col-7 {
        grid-column: span 1;
    }

    .gm-item--vuoto {
        display: none;
    }

    .gm-item img {
        max-height: 80vh;
        aspect-ratio: auto;
    }
}


/* ==========================================================================
   CONTATTI
   Pseudo-elemento ::before estende lo sfondo fino al bordo sinistro dello schermo
   ========================================================================== */

.blocco-contatti {
    padding: 2rem 1rem;
    position: relative;
}

.blocco-contatti::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(-50vw + 50%);
    background: var(--global-palette1);
}

/* Su mobile il trick vw non è necessario: il blocco è già full-width */
@media (max-width: 768px) {
    .blocco-contatti::before {
        display: none;
    }
}
/* ==========================================================================
   ABOUT
   ========================================================================== */
.after-full::after {
	content: '';
	background: var(--global-palette7);
	width: 100%;
	height: 100%;
	position: absolute;
	right: -100%;
	top: 0;
}
.slider-team .swiper-button-next:after,
.slider-team .swiper-button-prev:after{
	content: '';
}
.slider-team .swiper-button-next,
.slider-team .swiper-button-prev {
	background-image: url('/wp-content/uploads/2026/04/right.svg');
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat
}
.slider-team .swiper-button-prev {
		background-image: url('/wp-content/uploads/2026/04/left.svg');
}
.slider-team .swiper-button-next:before {
	content: '';
	background: rgba(255,255,255,0.5);
	position: absolute;
	top: 0;
	left: -25px;
	height: 100%;
	width: 1px;
}

@media(max-width: 992px) {
	.list-valori {
		padding-left: 0!important;
	}
	.slider-team .swiper-button-next, 
	.slider-team .swiper-button-prev {
		display: none;
	}
}
/* ==========================================================================
   FOOTER
   ========================================================================== */

footer .social-link {
    column-gap: 1.5rem;
}

footer .social-link img {
    filter: invert(100%);
    height: 1.5rem;
}

footer ul {
    margin: 0;
    list-style: none;
}

/* Menu footer su due colonne per ottimizzare lo spazio */
footer #menu-footer-servizi {
    column-count: 2;
}

li.entry-list-item:has(.card-progetto):nth-child(even) .card-progetto {
	transition-delay: 0.3s;
}