@charset "UTF-8";

/* @import "print.css"; */

:root {
  --rr-prim: #2f659e;
  --rr-sec: #d03831;
  --rr-wokrshop: #0268a5;
  --rr-lecture: #d03831;
  --bg: #ececec;  
  --bkg-speaker: #1d1d1b;
  --rr-iperio-event: #c6ad72;
}

.general-info #sp-main-body a, .registration #sp-main-body a {
  color: var(--rr-prim) !important;
}


/* header */

#sp-header {height: auto !important; padding-top: 5px;}
/* .sticky-header-placeholder {margin-top: 5px !important;}
 */
/* menu */
.sp-dropdown-items .lecture, .sp-dropdown-items .workshop {font-weight: 600 !important;}
.sp-dropdown-items .lecture {color: var(--rr-sec) !important;}
.sp-dropdown-items .workshop {color: var(--rr-prim) !important;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a.workshop:hover, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a.lecture:hover {
    color: var(--text-color) !important;
}

/* 1. Riduzione del logo sotto i 1372px */
@media (max-width: 1372px) {
    .logo-image {
        height: 40px !important;
        width: auto; /* Mantiene le proporzioni corrette */
    }
}

/* 2. Nascondere il menu megamenu sotto i 1280px */
@media (max-width: 1280px) {
    ul.sp-megamenu-parent {
        display: none !important;
    }
}

@media (max-width: 991px) { /* O la larghezza dove inizia il problema mobile */
    
    /* Impedisce alla riga dell'header di andare a capo */
    #sp-header .container-inner > .row {
        flex-wrap: nowrap !important;
    }

    /* Assicura che il blocco di destra non sia troppo largo */
    #menu-right {
        width: auto;
        padding-right: 15px; /* Un po' di margine dal bordo destro */
    }
}



/* --- Stili specifici per Lecture e Workshop nel Menu Offcanvas --- */

/* Grassetto per entrambe le voci */
.offcanvas-menu a.lecture, 
.offcanvas-menu a.workshop {
    font-weight: 600 !important;
}

/* Colore specifico per Lecture */
.offcanvas-menu a.lecture {
    color: var(--rr-sec) !important;
}

/* Colore specifico per Workshop */
.offcanvas-menu a.workshop {
    color: var(--rr-prim) !important;
}

/* Effetto Hover e Active (quando tocchi con il dito) */
.offcanvas-menu a.lecture:hover, 
.offcanvas-menu a.lecture:active,
.offcanvas-menu a.workshop:hover,
.offcanvas-menu a.workshop:active {
    color: var(--text-color) !important;
    /* Opzionale: se vuoi togliere il background grigio che a volte appare al click */
    background-color: transparent !important; 
}


.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus, .offcanvas-menu .offcanvas-inner ul.menu li.active a {color: var(--rr-prim) !important;}
.burger-icon > span {background-color: var(--rr-prim) !important;}
.sp-megamenu-parent > li:hover > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a /* , #sp-main-body a */ {color: var(--rr-prim) !important;}

/* #sp-main-body a:hover {color: var(--text-color) !important;} */


/* article details */
#sp-component .article-details  {max-width: 1320px !important;}

/* speaker */

/* 1. IMPOSTAZIONI GENERALI PER I WRAPPER (I "FRATELLI") */
/* Seleziona tutti i wrapper dentro al div con classe "speaker" */
.speaker > .sppb-addon-wrapper {
    position: relative; /* Fondamentale per z-index */
    z-index: 1; /* Valore base */
    
    /* Se vuoi che si sovrappongano, il margine negativo va dato QUI, non dentro */
    margin-left: -40px; 
    
    /* Fix per evitare che le animazioni nascondano la sovrapposizione */
    overflow: visible !important;
}

/* Fix per il primo elemento: niente margine a sinistra */
.speaker > .sppb-addon-wrapper:first-child {
    margin-left: 0;
}

.bkg-speaker {background-color: var(--bkg-speaker);}


/* 2. GESTIONE ORDINE CON NTH-CHILD */
/* Traduzione delle tue regole in codice */

/* "La prima foto (1) è davanti alla seconda (2)" */
.speaker > .sppb-addon-wrapper:nth-child(1) { z-index: 5; }

/* "La seconda (2) è dietro la terza (3)" */
.speaker > .sppb-addon-wrapper:nth-child(2) { z-index: 4; }

/* "La terza (3) è dietro la quarta (4)" */
.speaker > .sppb-addon-wrapper:nth-child(3) { z-index: 6; }

/* "La quarta (4) è davanti alla quinta (5)" */
.speaker > .sppb-addon-wrapper:nth-child(4) { z-index: 10; }

/* Implicito: La quinta deve stare sotto la quarta, ma... */
/* "La sesta (6) è dietro alla settima (7)" -> quindi 5 non ha regole specifiche ma deve stare "sotto" */
.speaker > .sppb-addon-wrapper:nth-child(5) { z-index: 5; }

/* "La sesta (6) è dietro alla settima (7)" */
.speaker > .sppb-addon-wrapper:nth-child(6) { z-index: 4; }

/* "La settima (7) è dietro l'ottava (8)" */
.speaker > .sppb-addon-wrapper:nth-child(7) { z-index: 6; }

/* Ottava (8) in primo piano rispetto alla 7 */
.speaker > .sppb-addon-wrapper:nth-child(8) { z-index: 10; }


.doctor-list-layout-modern .sppb-dynamic-content-collection__item {display: flex !important;}

/* 1. Allinea le foto una accanto all'altra */
.gruppo-chairmen {
    display: inline-flex; /* Le mette in riga */
    align-items: center;  /* Allinea al centro verticalmente (opzionale) */
}

/* 2. Impostazioni base per i wrapper (i contenitori delle foto) */
.gruppo-chairmen > .sppb-addon-wrapper {
    position: relative; /* Fondamentale per z-index */
    overflow: visible !important; /* Evita che la foto venga tagliata */
}

/* --- RASPERINI (Il primo a sinistra) --- */
/* Deve stare SOPRA (z-index più alto) */
.gruppo-chairmen > .sppb-addon-wrapper:first-child {
    z-index: 10; 
    margin-right: -50px; /* Tira Urban verso sinistra (sovrapposizione) */
}

/* --- URBAN (Il secondo a destra) --- */
/* Deve stare SOTTO (z-index più basso) */
.gruppo-chairmen > .sppb-addon-wrapper:last-child {
    z-index: 5;
    /* Se preferisci usare il margin-left negativo qui invece che il right sopra, va bene uguale:
       margin-left: -50px; 
    */
}


/* homepage */

/* Program overview */

.table-workshop {background-color: var(--rr-prim); color: white; font-weight: 600;}
.table-lecture {background-color: var(--rr-sec);; color: white; font-weight: 600;}
.table-iperio-event {background-color: var(--rr-iperio-event);; color: white; font-weight: 600;}

.program-overview-bkg {
	background-image: linear-gradient(90deg, var(--bkg-speaker) 28%, #ffffff 28%);
}
@media (max-width: 767px) {
.program-overview-bkg {
	background-image: linear-gradient(90deg, var(--bkg-speaker) 10%, #ffffff 10%);
}
}


.title-workshop {color: var(--rr-prim); font-weight: 600 !important;}
.title-lecture {/* color: var(--rr-prim);  */font-weight: 600 !important;}
.periomanagment {color: var(--text-color) !important;}

.table-day {background-color: var(--bg) !important;}
.workshop .table-day strong {color: var(--rr-prim);}
.workshop .table-day a:hover {color: var(--rr-prim);}
.lecture .table-day strong, .lecture .table-day a, .workshop .table-day a {color: var(--text-color);}
.lecture .table-day a:hover {color: var(--rr-sec);}

.program-overview .title-lecture a, .title-lecture .sppb-dynamic-content-text__link a  {color: var(--text-color) !important;}
.program-overview .title-lecture a:hover, .title-lecture .sppb-dynamic-content-text__link a:hover  {color: var(--rr-prim) !important;}

.program-overview .title-workshop a, .title-workshop .sppb-dynamic-content-text__link a  {color: var(--rr-prim) !important;}
.program-overview .title-workshop a:hover, .title-workshop .sppb-dynamic-content-text__link a:hover  {color: var(--text-color) !important;}

.header-workshop .sppb-dynamic-content-collection__item:nth-child(2) {
    margin-left: -100px;
	z-index: -1;
}



.workshop .table-calendar {color: var(--rr-prim);}
.lecture .table-calendar {color: var(--text-color);}
.workshop .table-calendar, .lecture .table-calendar	{font-weight: 600 !important;}

.lecture .iperio-event {background-color: var(--rr-sec); color: white !important;}

.speaker-details-name {color: var(--rr-sec) !important;}
.itemid-134 .speaker-details-name {color: var(--rr-prim) !important;}

.click-for-bio, .click-for-bio {
	font-family: 'Caveat', sans-serif;
	font-weight: 600; 
	font-size: 30px !important; 
	position: absolute !important;
	text-decoration: none; 
	color: white !important;
	top: 30%;   /* Posiziona a metà altezza */
	left: 30%;  /* Posiziona a metà larghezza */
	transform: translate(60%, -60%) rotate(60deg);
	z-index: 10 !important;
}

/* WORKSHOP */

/* =========================================
   ICONA LINK "SIGN-IN" PER TUTTE LE SEZIONI
   ========================================= */

/* 1. DEFINIZIONE DELL'ICONA */
/* Caso A: Workshop e Lecture (Icona dopo il grassetto STRONG) */
.workshop .table-day a strong::after,
.lecture .table-day a strong::after,
/* Caso B: Program Overview (Icona dopo il LINK diretto, cella title-lecture) */
.program-overview .title-lecture a::after, .program-overview .title-workshop a::after {
    content: "\f090";                   /* Codice icona */
    font-family: "Font Awesome 6 Free"; /* Font */
    font-weight: 900;                   /* Peso (Solid) */
    
    /* Visibilità */
    opacity: 1;
    display: inline-block;
    
    /* Stile */
    margin-left: 8px;
    color: #333;
    font-size: 18px;
    
    /* Animazione */
    transition: transform 0.3s ease;
}

/* 2. EFFETTO HOVER (Spostamento a destra) */

/* Caso A: Se c'è il grassetto */
.workshop .table-day a:hover strong::after,
.lecture .table-day a:hover strong::after,
/* Caso B: Se è diretto sul link */
.program-overview .title-lecture a:hover::after, .program-overview .title-workshop a:hover::after {
    transform: translateX(5px);
}


/* =========================================
   1. LOGICA "TUTTO O NIENTE" (NUOVA)
   ========================================= */
/* Questa è la regola magica:
   Se .my-card-wrapper NON contiene un link (<a>), 
   allora NASCONDI L'INTERO BLOCCO. */
.my-card-wrapper:not(:has(a)) {
    display: none !important;
}

/* =========================================
   2. IL CONTENITORE PRINCIPALE
   ========================================= */
.my-card-wrapper {
    position: relative !important;
    display: block;
    overflow: hidden; /* Fondamentale per non far uscire nulla */
    padding: 0 !important;
    z-index: 1;
    margin: 0 auto !important;
    
    /* DIMENSIONI RESPONSIVE */
    width: 460px !important;
    max-width: 100%;
    
    border-radius: 8px;
}

/* MOBILE */
@media (max-width: 767px) {
    .my-card-wrapper {
        width: 280px !important;
    }
}

/* =========================================
   3. IMMAGINE
   ========================================= */
.my-card-wrapper .sppb-addon-image {
    margin: 0 !important; display: block; z-index: 1;
}
.my-card-wrapper .sppb-addon-image img {
    width: 100%; height: auto; display: block;
    transition: transform 0.5s ease;
}

/* =========================================
   4. STILE DEL PULSANTE "SOPRA" (Normale)
   ========================================= */
/* Identifichiamo il pulsante sopra: ha il link MA NON ha la classe overlay */
.my-card-wrapper a .sppb-btn:not(.my-overlay-btn) {
    position: relative !important;
    z-index: 5;
    margin-bottom: 10px !important; /* Spazio tra bottone e immagine */
    display: inline-block; /* O flex, per mantenere la sua forma */
}

/* =========================================
   5. STILE DEL PULSANTE "SOTTO" (Overlay)
   ========================================= */
/* Identifichiamo il pulsante overlay: ha il link E la classe overlay */
.my-card-wrapper a .my-overlay-btn {
    /* Posizionamento Assoluto per coprire ESATTAMENTE l'immagine */
    position: absolute !important;
    top: 0; left: 0;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; padding: 0 !important;
    
    /* Reset grafico per farlo trasparente */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    
    display: flex !important; /* Per centrare il testo */
    align-items: center; justify-content: center;
    z-index: 10;
    
    opacity: 0; /* Invisibile finché non passi il mouse */
    transition: opacity 0.3s ease-in-out;
    
     /*color: #fff !important; Testo bianco */
}

/* Velo scuro per l'overlay */
.my-card-wrapper a .my-overlay-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.8) !important; 
    z-index: -1; 
}

/* Animazione movimento testo */
.my-overlay-btn .sppb-btn { 
    position: relative; z-index: 20; 
    transform: translateY(20px);
    transition: transform 0.3s ease;
    background: transparent !important; /* Sicurezza extra */
    box-shadow: none !important;
}

/* =========================================
   6. EFFETTI HOVER
   ========================================= */
/* Mostra l'overlay solo al passaggio del mouse */
.my-card-wrapper:hover a .my-overlay-btn {
    opacity: 1;
}

/* Muovi il testo dell'overlay */
.my-card-wrapper:hover a .my-overlay-btn .sppb-btn,
.my-card-wrapper:hover a .my-overlay-btn i {
     transform: translateY(0);
}

/* Zoom immagine */
.my-card-wrapper:hover .sppb-addon-image img {
    transform: scale(1.1);
}


/* --- SOLO PER WORKSHOP PERIOMANAGEMENT --- */

/* 1. GESTIONE DELLA SEZIONE (Sfondo e Reset Colori) */
/* Cerca la section che contiene l'immagine specifica */
.sppb-section:has(img[src*="workshop-periomanagement.webp"]) {
    
    /* RESET: Tolgo il colore solido e l'ombra imposti dall'ID */
    background-color: transparent !important;
    box-shadow: none !important;
    
    /* NUOVO SFONDO: Imposto l'immagine come background */
    background-image: url('/images/topic/2026/workshop-periomanagement.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* (Opzionale) Aggiunge una patina scura per leggere il testo sopra */
    background-blend-mode: overlay;
    background-color: rgba(0,0,0,0.6) !important; 
}

/* 2. NASCONDI L'IMMAGINE ORIGINALE */
/* Cerca il wrapper specifico che contiene quell'immagine e nascondilo */
.sppb-addon-wrapper:has(img[src*="workshop-periomanagement.webp"]) {
    display: none !important;
}

/* 3. COLORE TESTO (Per renderlo leggibile su sfondo scuro) */
.sppb-section:has(img[src*="workshop-periomanagement.webp"]) h1,
.sppb-section:has(img[src*="workshop-periomanagement.webp"]) h2,
.sppb-section:has(img[src*="workshop-periomanagement.webp"]) p,
.sppb-section:has(img[src*="workshop-periomanagement.webp"]) span,
.sppb-section:has(img[src*="workshop-periomanagement.webp"]) .sppb-addon-title {
    color: #ffffff !important;
}

/* --- NASCONDI PULSANTE SOLO PER IL WORKSHOP "PLAN AHEAD" --- */

/* Logica:
   1. Seleziona la colonna principale (.sppb-row-column)
   2. CONTROLLA se al suo interno esiste (:has) il link all'articolo specifico "reframing-periodontal-care"
   3. Se è vero, cerca al suo interno il bottone HuFriedy e nascondilo
*/

.sppb-row-column:has(a[href*="reframing-periodontal-care"]) .addon-root-button:has(a[href*="hufriedy-offers.html"]) {
    display: none !important;
}



/* --- FIX SOLO PER WORKSHOP KUO (Allineamento in alto) --- */

/* 1. Seleziona la COLONNA che contiene specificamente l'immagine di Kuo */
.sppb-row-column:has(img[src*="disegni-workshop_kuo.webp"]), .sppb-row-column:has(img[src*="disegni-workshop_suzuki.webp"]) {
    
    /* "Rompe" la regola del genitore (che dice "stai in basso") 
       e forza questa colonna a stare in ALTO */
    align-self: flex-start !important;
    
    /* Opzionale: Aggiunge un po' di spazio dal tetto se è troppo attaccata */
    margin-top: 0px !important; 
}

/* Venue */

/* Stile base per i contenitori degli eventi */
.venue .venue-type .sppb-addon-wrapper.addon-root-dynamic-content-text {
    margin: 10px 0 !important;
	padding: 4px;              /* Spaziatura interna richiesta */

    width: 100%;               /* Larghezza totale del contenitore */
    display: block;            /* Assicura che si comporti come un blocco */
    box-sizing: border-box;    /* Include il padding nel calcolo della larghezza */
}

.header-venue .sppb-row-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Il background-color verrà messo dal JS, qui non serve */
    z-index: 1; /* Assicura che stia sopra l'immagine di sfondo ma sotto il testo */
}
a#btn-12669cad-fc05-4dfd-a666-0930852ccbdc {color: #ffffff !important; border-bottom: white !important;}


/* 1. Impostazioni base del link (contenitore) */
a.venue-logo {
    display: inline-flex; /* Permette di allineare immagine e icona sulla stessa riga */
    align-items: center;  /* Centra verticalmente l'icona rispetto al logo */
    transition: transform 0.3s ease; /* Rende fluido lo spostamento */
    text-decoration: none; /* Rimuove eventuali sottolineature */
}

/* 2. Creazione dell'icona tramite pseudo-elemento */
a.venue-logo::after {
    content: "\f090"; /* Codice Unicode per fa-arrow-right-to-bracket */
    font-family: "Font Awesome 6 Free"; /* Definisce la famiglia di font */
    font-weight: 900; /* Necessario per le icone 'Solid' di FontAwesome 6 */
    
    /* Stato iniziale dell'icona: invisibile e spostata a sinistra */
    opacity: 0;
    transform: translateX(-10px); 
    margin-left: 10px; /* Spazio tra il logo e l'icona */
    
    /* Stile dell'icona */
    color: #333; /* Cambia questo colore con quello del tuo brand */
    font-size: 18px; /* Dimensione dell'icona */
    
    /* Transizione fluida per l'apparizione */
    transition: all 0.3s ease;
}

/* 3. Effetto al passaggio del mouse (Hover) */

/* Sposta tutto il blocco (logo + icona) verso destra */
a.venue-logo:hover {
    transform: translateX(10px); 
}

/* Rende visibile l'icona e la mette in posizione */
a.venue-logo:hover::after {
    opacity: 1;
    transform: translateX(0);
}

/* FORM */

#cf_1, #cf_2 {margin: 0 auto;}
#cf_1_response, #cf_2_response {margin-top: 200px;}


/* iubenda */

#iub-legalDoc {
  font-size: 1rem !important;
}

/* varie */

/* 1. Desktop (Regola base che hai già) */
.lecture-image-top img {
    transform: translateX(400px) translateY(40px);
    /* Opzionale: aggiunge un movimento fluido se ridimensioni la finestra */
    transition: transform 0.3s ease; 
}

/* 2. Tablet (Schermi più piccoli di 992px) */
/* Dimezziamo il translateX a 200px */
@media (max-width: 991.98px) {
    .lecture-image-top img {
        transform: translateX(200px) translateY(40px);
    }
}

/* 3. Smartphone (Schermi più piccoli di 768px) */
/* Azzeriamo il translateX */
@media (max-width: 767.98px) {
    .lecture-image-top img {
        transform: translateX(0) translateY(40px);
    }
}


/* Registration */

.total_program {
	background: var(--bg) !important; 
	width: 200px !important;
	font-size: 26px !important;
	font-weight: 700;
	color: var(--rr-sec) !important;
	text-align: center !important;
}