/*
Theme Name: Twenty Twenty-Five Child
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.4.1774256308
Updated: 2026-03-23 09:58:28

*/
:root {
	--primary-color: #C43026;
	--business-color: #61A2D3; 
	--private-color: #C43026; 
}

.solo-mobile {
	display: none !important;
}
.solo-desktop {
	display: flex !important;
}


@media (max-width: 575.98px) {
    .solo-mobile {
        display: flex !important;
    }
	.solo-desktop {
        display: none !important;
    }
}


/* TIPOGRAFIA 
 * ------------------------------- */


/* BG COLOR
 * -------------------------------- */
.gray-bg {
	background-color: #F5F5F5;
}

.border-top {
	border-top: 1px solid #CCCCCC !important;
}
.image100 img {
	width: 100% !important;
}

/* HEADER 
 * ------------------------------- */
.header-sito {
	z-index:9;
	position: fixed;
	top:0;
	left:0;
	right:0;
	background-color: rgba(0,0,0,.8) !important;
	backdrop-filter: blur(10px);
  	-webkit-backdrop-filter: blur(10px); /* Supporto Safari */
}
.logo-header img {
	width: 40px !important;
}
.logo-search img {
	width: 30px !important;
}
.main-menu a {
	color: #FFFFFF !important;
	text-decoration: none !important;
}
.main-menu a:hover {
	text-decoration: none !important;
}
.menu-item-aziende span:hover,
.menu-item-data-center span:hover{
	color: var(--business-color) !important;
}
.wp-block-navigation-item__label {
	text-decoration: none;
}
.wp-block-navigation-item__label:hover {
	color: var(--primary-color) !important;
}

/* Nascondi i megamenu al caricamento */
.menu-aziende, 
.menu-privati {
    display: none;
    position: fixed; /* Tipico per i megamenu */
    z-index: 999;
    width: 100%;
	top: 80px;
    left: 0;
	background-color: rgba(0,0,0,.8) !important;
	backdrop-filter: blur(10px);
  	-webkit-backdrop-filter: blur(10px); /* Supporto Safari */
}

/* Classe che useremo per mostrarli */
.is-active-megamenu {
    display: block !important;
}
.is-active-megamenu a,
.is-active-megamenu p {
	color: #FFFFFF !important;
	text-decoration: none !important;
}

.business-link .wp-block-navigation-item__label:hover {
	color: var(--business-color) !important;
}
.wp-block-navigation__responsive-container-open,
wp-block-navigation__responsive-container-close {
		background-color: transparent !important;
	}


@media (max-width: 767px) {

	.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background-color: #000000 !important;
	}
	.wp-block-navigation__responsive-container-open,
	wp-block-navigation__responsive-container-close {
		background-color: transparent !important;
	}
	.main-menu a {
		
		text-decoration: none !important;
	}
	.main-menu a:focus) {
		outline-width: 0px !important;
		outline-style: solid;
	}
	button.wp-block-navigation__responsive-container-close svg {
		fill: #000000 !important;
		width: 28px !important;
		height: 28px !important;
	}

}


/* MENU BURGER
 * ------------------------------ */
/* Applichiamo le modifiche solo su mobile per non intaccare la visualizzazione desktop */
@media (max-width: 767px) {

  /* 1. Puliamo il bottone nativo di WordPress (rimuove bordo, sfondo e ombre) */
  button.wp-block-navigation__responsive-container-open {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    
    /* Lo posizioniamo fisso in alto al centro dello schermo */
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999; /* Lo tiene sopra gli altri elementi */
  }

  /* 2. Forziamo l'icona SVG ad essere bianca */
  button.wp-block-navigation__responsive-container-open svg {
    fill: #ffffff !important;   /* Colora le linee interne dell'SVG */
    stroke: #ffffff !important; /* Gestisce eventuali contorni nativi dell'icona */
    width: 32px !important;     /* Opzionale: regola leggermente la dimensione se serve */
    height: 32px !important;
  }
}

@media (max-width: 767px) {

  /* targeted quando il menu di WordPress riceve le classi di apertura */
  .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Gestiamo il sotto-contenitore del dialogo per occupare tutto lo spazio */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centra verticalmente la lista dei link */
    align-items: center !important;     /* Centra orizzontalmente la lista dei link */
    padding: 40px 20px !important;
  }

  /* Centriamo perfettamente la lista UL dei link interni */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    text-align: center !important; /* Testo centrato per ogni voce */
  }

  /* Puliamo anche il pulsante della "X" di chiusura nativo all'interno del menu */
  button.wp-block-navigation__responsive-container-close {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 20px !important;
    right: 20px !important; /* Mette la X di chiusura in alto a destra */
    cursor: pointer !important;
  }

  button.wp-block-navigation__responsive-container-close svg {
    fill: #ffffff !important; /* Cambia in bianco anche la X di chiusura se lo sfondo è scuro */
    width: 28px !important;
    height: 28px !important;
  }
}





/* FOOTER 
 * ------------------------------- */
.footer p {
	font-size: .9rem !important;
}

@media (max-width: 575.98px) { 
	.logo-confindustria {
		width: 100px !important;
		margin: 0 auto !important;
	}
}



/* BUTTONS
 * --------------------------------- */
.btn-business > a {
	background-color: var(--primary-color) !important;
	border-width: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	letter-spacing: inherit;
	line-height: inherit;
	padding-top: .5rem !important;
	padding-right: 2.25rem !important;
	padding-bottom: .5rem !important;
	padding-left: 2.25rem !important;
	text-decoration: none;
	text-transform: none !important;
}


/* STYLES BUSINESS
------------------------------------- */
.business-style h2 > em,
.business-style em {
	color: var(--business-color) !important;
}
.business-style h2 > b,
.business-style h2 > strong {
	color: var(--business-color) !important;
}

.business-style p > b,
.business-style p > strong {
	color: var(--business-color) !important;
}

.business-style .btn > a {
	background-color: var(--business-color) !important;
	border-width: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	letter-spacing: inherit;
	line-height: inherit;
	padding-top: .5rem !important;
	padding-right: 2.25rem !important;
	padding-bottom: .5rem !important;
	padding-left: 2.25rem !important;
	text-decoration: none;
	text-transform: none !important;
}

.business-style .wp-element-button {
	background-color: var(--business-color);
	transition: filter 0.3s ease; /* Transizione fluida */
}
.business-style .wp-element-button:hover {
	background-color: var(--business-color);
	filter: brightness(90%); /* Scurisce del 10% */
}
.citazione-private {
    border-left: 12px solid var(--business-color);
    /* Opzionale: assicura che il bordo non "mangi" lo spazio interno */
    box-sizing: border-box; 
	padding: 1rem 0rem 1rem 3rem !important;
	margin-top: 5rem !important;
	margin-bottom: 3rem !important;
}

/* STYLES PRIVATE
------------------------------------- */
.private-style h2 > em,
.private-style em {
	color: var(--private-color) !important;
}
.private-style p > b,
.private-style p > strong {
	color: var(--private-color) !important;
}
.private-style .btn > a {
	background-color: var(--private-color) !important;
	border-width: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	letter-spacing: inherit;
	line-height: inherit;
	padding-top: .5rem !important;
	padding-right: 2.25rem !important;
	padding-bottom: .5rem !important;
	padding-left: 2.25rem !important;
	text-decoration: none;
	text-transform: none !important;
}
.citazione-red {
    border-left: 12px solid var(--private-color);
    /* Opzionale: assicura che il bordo non "mangi" lo spazio interno */
    box-sizing: border-box; 
	padding: 1rem 0rem 1rem 3rem !important;
	margin-top: 5rem !important;
	margin-bottom: 3rem !important;
}

/* HOME
 * --------------------------------- */
.home-cover {
	height: 100vh !important;
}


.zoom-shadow {
	box-shadow: 0px 0px 15px rgba(0,0,0,.05);
	transition: transform 0.3s ease;
}
.zoom-shadow:hover {
  	transform: scale(1.03);
	box-shadow: 0px 0px 15px rgba(0,0,0,.2);
	transition: transform 0.3s ease;
}


/* CAROSELLO
 * ---------------------------------------- */
/* Forza le slide ad avere la stessa altezza */
.cb-carousel-block .swiper-wrapper {
    display: flex;
    align-items: stretch;
}

.cb-carousel-block .swiper-slide {
    height: auto; /* Permette alla slide di allungarsi */
    display: flex;
    flex-direction: column;
}

/* Espande il box interno (fondo nero) per riempire tutta la slide */
.cb-carousel-block .swiper-slide .wp-block-group {
    flex-grow: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
	align-items: flex-start; /* Forza l'allineamento a sinistra degli elementi figli */
    text-align: left;        /* Assicura che il testo sia allineato a sinistra */
}
.cb-carousel-block .swiper-slide figure {
	margin-left: 0 !important;
}

.cb-carousel-block h3 {
	text-align: left;
	margin-left: 0 !important;
}

/* Opzionale: Se vuoi che i testi siano distribuiti uniformemente, 
   puoi aggiungere margini interni, ma i blocchi sopra 
   sono sufficienti per pareggiare i fondi neri. */

/* FLEX COL
 * ----------------------------------------- */

/* 1. Assicura che le colonne figlie abbiano la stessa altezza */
.wp-block-columns.flex-column {
    display: flex !important;
    align-items: stretch !important; 
}

/* 2. Trasforma le singole colonne in contenitori flex verticali */
.wp-block-columns.flex-column > .wp-block-column {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: hidden; /* Mantiene l'immagine dentro i bordi arrotondati */
}

/* 3. La "molla" per l'immagine: spinge tutto il blocco immagine sul fondo */
.wp-block-columns.flex-column > .wp-block-column .wp-block-image {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    line-height: 0; /* Rimuove gap bianchi sotto l'immagine */
}

/* 4. Opzionale: pulizia margini immagine */
.wp-block-columns.flex-column > .wp-block-column .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0 !important;
}




/* TABELLA
 * ------------------------- */
/* Contenitore della tabella */
.apple-comparison-table {
    width: 100%;
    border-collapse: collapse;
    color: #ffffff; /* Testo bianco come da immagine */
    margin: 40px 0;
}

.apple-comparison-table.wp-block-table thead {
	border: 0px solid transparent !important; /* Linea sottile semitrasparente */
}
/* Stile delle intestazioni (Header) */
.apple-comparison-table th {
    text-align: left;
    text-transform: uppercase;
	font-size: 1.2rem !important;
    padding: 20px 0;
    vertical-align: top;
    width: 33.33%;
	border: 0px solid transparent !important; /* Linea sottile semitrasparente */
}

/* Stile delle celle di contenuto */
.apple-comparison-table td {
    padding: 15px 0;
    line-height: 1.5;
	border: 0px solid transparent !important; /* Linea sottile semitrasparente */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important; /* Linea sottile semitrasparente */
    vertical-align: top;
}

/* Prima colonna (le etichette) più in grassetto */
.apple-comparison-table td:first-child {
    /*font-weight: 600;*/
}

/* Rimuove il bordo dall'ultima riga */
.apple-comparison-table tr:last-child td {
    border-bottom: none;
}

/* Forza la prima colonna alla larghezza del testo */
.apple-comparison-table th:first-child,
.apple-comparison-table td:first-child {
    width: 300px; /* Forza la colonna a stringersi */
    white-space: nowrap; /* Impedisce al testo di andare a capo */
}

/* Distribuisce il resto dello spazio equamente sulle altre due colonne */
.apple-comparison-table th:not(:first-child),
.apple-comparison-table td:not(:first-child) {
    width: auto; /* Lascia che occupino il resto dello spazio */
}

/* Modifica specifica per la prima colonna (Etichette) */
.apple-comparison-table td:first-child {
    font-weight: 600;
    color: #ffffff;
    opacity: 0.9;
}


/* CARDS
 * ---------------------------- */
.card {
	overflow: hidden;
	border-radius: 20px;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,.3);
	background-color: #FFFFFF;
}
.card .card-container {
	padding: 20px;
}
.crd-separator {
	width: 100px;
}
.card ul {
	padding-left: 1.1rem;
}


/* COVER COPERTURA FIBRA OTTICA
 * ---------------------------------------- */
.cover-container {
	margin-top: 50px;
	margin-bottom: 80px;
}
.cover-container .col {
	text-align: center;
}
.cover-item {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background-color: #DDDDDD;
	color: #FFFFFF;
	text-align: center;
	margin: 0 auto;
}
.cover-item p {
	font-family: 'ExoBold';
	line-height: 150px;
	color: #FFFFFF;
}
.covered {
	background-color: #4CBB17;
}


.fibra-wrapper {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        max-width: 1200px;
        margin: 40px auto;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* Riga Input Form */
    .fibra-form-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 50px;
    }

    /* Gruppo di Input (Label + Campo) */
    .fibra-form-group {
        display: flex;
        flex-direction: column;
        flex: 1 1 200px; /* Cresce e si adatta */
    }

    /* Dimensionamento specifico per i campi (Simil-Bootstrap) */
    .fibra-form-group.width-citta,
    .fibra-form-group.width-via {
        flex: 2 1 40%;
    }
    .fibra-form-group.width-civico {
        flex: 1 1 15%;
    }

    /* Etichette */
    .fibra-form-group label {
        font-size: 1.1rem;
        font-weight: 500;
        margin-bottom: 8px;
        color: #000;
    }

    /* Campi Input e Select */
    .fibra-input {
        width: 100%;
        height: 45px;
        padding: 8px 12px;
        font-size: 1rem;
        border: 1px solid #ced4da;
        border-radius: 4px;
        background-color: #fff;
        box-sizing: border-box;
    }
    .fibra-input:focus {
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    /* Messaggio di Risultato */
    #result {
        width: 100%;
        margin-top: 10px;
    }

    /* Riga per i Cerchi della Copertura */
    .fibra-cover-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        margin-top: 40px;
    }

    /* Struttura del Cerchio */
    .cover-item {
        width: 210px;
        height: 210px;
        background-color: #dbdbdb;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        box-sizing: border-box;
        transition: transform 0.2s ease;
    }

    /* Testo dentro il Cerchio */
    .cover-item p {
        color: #fff;
        font-weight: bold;
        font-size: 1.1rem;
        line-height: 1.2;
        margin: 0;
        padding: 10px;
        text-transform: uppercase;
    }

    /* Responsività per Smartphone (Sotto i 768px) */
    @media (max-width: 768px) {
        .fibra-form-row {
            flex-direction: column;
            gap: 15px;
        }
        .fibra-form-group {
            flex: 1 1 100% !important;
        }
        .fibra-cover-row {
            gap: 20px;
        }
        .cover-item {
            width: 160px;
            height: 160px;
        }
        .cover-item p {
            font-size: 0.9rem;
        }
    }