MediaWiki:Common.css

/* ========================== Integrazione pagine Wix 2024 ========================== */
/* ============= GENERALE ============= */

/* Imposta il colore principale del testo del sito */
body {
	color: #333;
}

/* Nasconde il pulsante del menu principale (mobile) */
#mw-mf-main-menu-button {
	display: none;
} 

/* Nasconde la sezione pre-content */
.pre-content {
	display: none;
}

/* Imposta la larghezza del contenuto per schermi più grandi di 1000px */
@media screen and (min-width: 1000px) {
	.content {
		width: auto;
	}
}

/* Imposta la larghezza del contenuto per schermi più grandi di 720px */
@media screen and (min-width: 720px) {
	.content {
		width: auto;
	}
}

/* Nasconde gli elementi con la classe mobile-only (quindi visibili solo su mobile) */
.mobile-only {
	display: none;
}

/* ============= Stili per i titoli personalizzati ============= */

/* Titolo H0 (più grande del normale H1) */
.custom-h0 {
	font-size: 300%;
	color: #116089; /* Colore blu scuro */
}

/* Titolo H1 personalizzato */
.custom-h1 {
	font-size: 200%;
	color: #116089;
}

/* Titolo H2 personalizzato */
.custom-h2 {
	font-size: 150%;
	color: #116089;
}

/* Stile per sottotitoli */
.custom-subtitle {
	font-size: 125%;
	color: grey;
}

/* ============= Allineamenti del testo ============= */

.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}

/* ============= Stile del logo ============= */

#p-logo a img {
    width: 150px !important; /* Imposta la larghezza a 150px */
    height: 150px !important; /* Imposta l'altezza a 150px */
    border-radius: 50% !important; /* Rende il logo circolare */
    object-fit: cover !important; /* Ritaglia l'immagine per coprire il contenitore */
    display: block !important; /* Impedisce comportamenti anomali in inline */
}

.rounded-logo img {
	width: 200px;
	height: 200px;
	border-radius: 100%;
}

/* ============= Pulsanti colorati ============= */

/* Stile di base per i pulsanti colorati */
.colour-button a, 
.colour-button a.external, 
.colour-button-small a, 
.colour-button-small a.external {
	display: inline-block;
	border-radius: 3rem; /* Rende i pulsanti arrotondati */
	background-image: linear-gradient(126deg, #5f5bcd 24%, #ff5700 100%);
	background-size: auto;
	transition: .5s; /* Aggiunge un'animazione alla transizione */
	color: white;
	text-decoration: none;
}

/* Cambia il colore del pulsante quando si passa sopra */
.colour-button a:hover, 
.colour-button-small a:hover {
	background-image: linear-gradient(160deg, #5f5bcd 24%, #ff5700 100%);
	color: white;
	text-decoration: none;
}

/* Padding per i pulsanti normali */
.colour-button a, 
.colour-button a.external {
	padding: 1rem 2rem;
}

/* Padding per i pulsanti piccoli */
.colour-button-small a, 
.colour-button-small a.external {
	padding: 0.5rem 1rem;
}

/* ============= Layout e struttura ============= */

/* Allinea gli elementi uno accanto all'altro con spazio tra di loro */
.side-by-side {
	display: flex;
	gap: 2rem; /* Spazio tra gli elementi */
	justify-content: center;
	align-items: center;
}

/* Imposta ogni div all'interno di .side-by-side per occupare tutta la larghezza disponibile */
.side-by-side > div {
	width: 100%;
}

/* Separatore visivo tra sezioni */
.separator {
	border: 1px solid silver; /* Bordo grigio */
	width: 50%; /* Occupa il 50% della larghezza */
	margin: 3rem auto; /* Spazio verticale di 3rem e centrato */
}

/* ============= Stile per sezioni a larghezza piena ============= */

/* Sezione di copertura, usata probabilmente per immagini di sfondo con testo sopra */
.cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 550px;
	background-size: cover;
	background-position: center;
	text-align: center;
	line-height: 400%;
}

/* Regola per rendere un contenuto a larghezza piena con un margine negativo */
.full-width {
	margin: 0 calc(-1*((99vw - 993px)/2));
}

/* Adatta la larghezza per schermi più piccoli di 1000px */
@media screen and (max-width: 1000px) {
	.full-width {
	    margin: 0 calc(-1*((99vw - 763px) / 2));
	}
}

/* Adatta la larghezza per schermi più piccoli di 800px */
@media screen and (max-width: 800px) {
	.full-width {
	    margin: 0 calc(-1*((99vw - 654px) / 2));
	}
}

/* ============= Stile per container logo nella pagina di contenuti ============= */
.content-page-logo-container {
	margin-bottom: 2rem; /* Spazio sotto il logo */
}


/* ============= HOME PAGE ============= */
.homepage-slider {
	position: relative;
	height: 550px;
	background-color: white;
}
.homepage-logo-container {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translate(-50%);
    z-index: 100;
}

.homepage-slide-1, .homepage-slide-2, .homepage-slide-3 {
	position: absolute;
	height: 550px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-shadow: 2px 2px 40px rgba(0,0,0,0.9);
	font-size: 500%;
	animation-duration: 15s;
	animation-iteration-count: infinite;
	background-color: #dadada;
	background-blend-mode: overlay;
	background-position: center;
	background-size: cover;	
}
.homepage-slide-1 > *, .homepage-slide-2 > *, .homepage-slide-3 > * {
	transform: translate(0, 2rem);
}
.homepage-slide-1 {
	background-image: url(https://wiki.masticationpedia.org/images/a/a2/The_Past.jpg);
    animation-name: slide-1-animation;
}
.homepage-slide-2 {
	background-image: url(https://wiki.masticationpedia.org/images/9/9c/The_Present.jpg);
    animation-name: slide-2-animation;
}
.homepage-slide-3 {
	background-image: url(https://wiki.masticationpedia.org/images/a/ad/The_Future.jpg);
    animation-name: slide-3-animation;
}
@keyframes slide-1-animation {
	0% { opacity: 0; }
	2% { opacity: 1; }
	31% { opacity: 1; }
	35% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes slide-2-animation {
	0% { opacity: 0; }
	31% { opacity: 0; }
	35% { opacity: 1; }
	66% { opacity: 1; }
	69% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes slide-3-animation {
	0% { opacity: 0; }
	65% { opacity: 0; }
	69% { opacity: 1; }
	98% { opacity: 1; }
	100% { opacity: 0; }
}

.homepage-what-is-it, .homepage-how-to-follow-it, .homepage-why-to-enroll {
	padding: 2rem;
	background-color: rgba(196,196,196, .1);
}
.homepage-what-is-it {
	margin-top: -6.5rem;
	z-index: 103;
}
.homepage-how-to-follow-it {
	text-align: right;
}

.for-editors a {
	display: inline-block;
	padding: .5rem 1rem;
	background-color: #02b8bf;
	color: white;
	text-align: right;
	transition: .5s;
}
.for-editors a:hover {
	background-color: #6bd0d4;
	text-decoration: none;
}
.perspective {
	display: flex;
	flex-direction: column;
	gap: 2rem;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    perspective-origin: 10% 60%;
}
.three-d-image-container {
	width: 380px;
    background-color: cornflowerblue;
    transition: 1s;
    transform: rotateX(4deg) rotateY(-15deg) rotateZ(2deg);
    box-shadow: 10px 10px 30px rgba(0 0 0 / .2);
}
.three-d-image-container:hover {
   transform: rotateX(6deg) rotateY(-25deg) rotateZ(3deg);
   box-shadow: 10px 20px 30px rgba(0 0 0 / .3);
}

.informative-video {
	width: 15rem;
	margin: 1rem 0;
	padding: 1rem 2rem;
	border-radius: 3rem;
	background-color: #116089;
	text-align: center;
	color: white;
	transition: .5s;
}
.informative-video:hover {
	letter-spacing: .2rem;
}

.einstein-quote {
	padding: 3rem 15vw;
	background-image: url('https://wiki.masticationpedia.org/images/5/50/Cityscape.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: white;
	text-align: center;
}

.hidden-except-on-intersection {
	opacity: 0;
	transition: 2s;
}
.fade-in-on-intersection {
	opacity: 1;
}

/* ============= Scientific community ============= */
.scientific-community-cover {
	color: #045184;
	background-image: url('https://wiki.masticationpedia.org/images/0/0d/Scientific_community.jpg');
}

/* ============= Template:Person card ============= */

.scientific-community-container {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	justify-content: center;
	align-items: flex-start;
}

.person-container {
	display: inline-block;
	width: 20%;
	margin: 0;
	text-align: center;
}

.person-image img {
	width: 100%;
	height: auto;
	border-radius: 100%;
}

.person-country {
	color: #045184;	
}
.header-container, .header-chrome {
    background-size: cover;
    height: 50px;
    width: 100%;
  
}



/* ============= Scientific project ============= */
.scientific-project-text-box {
	padding: 2rem;
	background-color: rgba(196,196,196, .1);
}

/* ============= Social project ============= */

/* ============= Our story ============= */

/* ============= Book index ============= */
.book-index-cover {
	background-image: url('https://wiki.masticationpedia.org/images/f/f7/The_sacred_wood_of_books.jpg');
	color: white;
	text-shadow: 3px 3px 40px rgba(0 0 0 / 0.9);
}

.book-index-columns {
	display: flex;
	gap: 3rem;
}
.book-index-columns div {
	width: 100%;
}
.book-index-columns p, .book-index-columns li {
	color: gray;
}

/* ============= Our Network ============= */
.network-cover {
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/19/Background-3228704_1920.jpg');
	background-color: rgba(0 0 0 / 0.3);
    background-blend-mode: overlay;
}

/* ============= Frisardi Masticationpedia ============= */
.frisardi-nettuno-cover {
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/26/Costa_di_Nettuno_Levante.JPG');
}
.frisardi-nettuno-main-title, .frisardi-nettuno-subtitle {
	font-size: 300%;
	color: white;
	text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.frisardi-nettuno-person, .fontana-como-person {
	text-align: center;
	padding: 2rem;
}

#iframe-Google\ Docs {
    height: 1600px;
}

#iframe-Google\ Maps {
	margin: 0 calc(-1*((99vw - 993px)/2));
	width: 99vw;
}

/* ============= Fontana Masticationpedia ============= */
.fontana-como-cover {
	background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Como_-_Comune_di_Como_-_2023-09-08_23-29-16_001.jpg/2560px-Como_-_Comune_di_Como_-_2023-09-08_23-29-16_001.jpg');
}
.fontana-como-main-title, .fontana-como-subtitle {
	font-size: 300%;
	color: white;
	text-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

/* ============= Donate ============= */
.donate-cover {
	background-image: url('https://wiki.masticationpedia.org/images/b/b2/Donation_background.jpg');
}

/* ============= Template:Person ============= */
.person-box {
	background-color: silver;
	padding: 30px;
	text-align: center;
	background-image: url(https://wiki.masticationpedia.org/images/0/0d/Scientific_community_darker.jpg);
	background-position: center;
	background-size:cover;
}
.person-name {
	font-size: 300%;
	color: white;
	text-shadow: 3px 3px 20px rgba(0 0 0 / 0.5);
}
.person-bio {
	color: white;
	font-size: 150%;
	text-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}
.person-portrait {
	margin: 2rem 0;
}

/* ============= Template:Person details ============= */
.person-details-header, .person-cv-header {
	margin-top: 2rem;
	margin-bottom: 5px;
	padding: 10px 0;
    border-radius: 8px 8px 0 0;
	text-align: center;
	color: white;
	background-color: #116089;
}

.person-cv-header {
	border-radius: 8px;
}

.smart-template {
  display: flex;
  box-sizing: border-box;
  margin: 0 auto;
}

.smart-template p {
    margin-top: 0;
    margin-bottom: 0;
}

.smart-template-left {
  box-sizing: border-box;
  width: 30%;
  margin-bottom: 5px;
  padding: 5px;
  background-color: #e6e7e8;
  text-align: right;
  font-weight: bold;
}
.smart-template:last-child .smart-template-left:nth-last-child(2) {
  border-radius: 0 0 0 8px;
}

.smart-template-right {
  box-sizing: border-box;
  width: 70%;
  margin-bottom: 5px;
  padding: 5px;
  background-color: #f2f2f2;
}
.smart-template:last-child .smart-template-right:last-child {
  border-radius: 0 0 8px 0;
}

.smart-template-bottom {
  justify-content: center;
  gap: 10px;
  margin-bottom: 5px;
  padding: 5px;
  background-color: #e6e7e8;
  border-radius: 0 0 8px 8px;
}

.person-contributions {
  background-color: #e6e7e8;
  border-radius: 8px;
  margin: 2rem 0 5px 0;
  padding: 5px;
  text-align: center;
}

/* ============= Template:Main menu ============= */

/* Nasconde gli elementi con ID main-menu-open e main-menu-close */
#main-menu-open, #main-menu-close { 
  display: none; 
}

/* Contenitore principale del menu */
.main-menu-container {
  display: flex; /* Usa Flexbox per allineare gli elementi */
  justify-content: center; /* Centra gli elementi orizzontalmente */
  background-color: #f1f1f1; /* Imposta il colore di sfondo a grigio chiaro */
}

/* Rimuove la sottolineatura dai link all'interno del menu */
.main-menu-container a {
  text-decoration: none; /* Nessuna decorazione per i link */
}

/* Definisce un padding per gli elementi con classe .padded */
.padded {
  padding: 0.2rem 1rem;
  font-size: 14px;
}


/* Cambia il colore di sfondo quando il mouse passa sopra un elemento con classe .padded */
.padded:hover {
  background-color: #e0e0e0; /* Sfondo leggermente più scuro al passaggio del mouse */
}

/* Definisce la posizione relativa per il trigger del menu a discesa */
.main-menu-dropdown-trigger {
  position: relative; /* Necessario per il posizionamento assoluto del contenuto del dropdown */
}

/* Stile del menu a discesa (inizialmente nascosto) */
.main-menu-dropdown-content {
  display: none; /* Il menu è nascosto di default */
  position: absolute; /* Posiziona il menu rispetto al trigger */
  z-index: 101; /* Imposta una priorità di visualizzazione elevata */
  min-width: 180px; /* Larghezza minima del menu */
  background-color: #f1f1f1; /* Sfondo grigio chiaro */
  transition: 0.5s; /* Effetto di transizione di 0.5 secondi */
}

/* Mostra il menu a discesa quando il mouse passa sopra il trigger */
.main-menu-dropdown-trigger:hover .main-menu-dropdown-content {
  display: block; /* Il menu diventa visibile */
}

/* Stile del titolo personalizzato */
.custom-page-title {
  margin-top: 50px !important; /* Margine superiore di 50px */
  margin-bottom: 50px !important; /* Margine inferiore di 50px */
  text-align: center; /* Testo centrato */
  font-size: 250%; /* Dimensione del testo al 250% */
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* Ombra del testo per effetto visivo */
}

/* Stile del titolo principale della pagina */
.firstHeading {
  margin-top: 2em !important; /* Margine superiore di 2em */
  margin-left: 3em !important; /* Margine sinistro di 3em */
}
/* ----------------- Eliminazione spazi bianchi --------------*/


.main-menu-container a {
  margin: 0; /* Rimuove eventuali margini extra */
  padding: 10px 15px; /* Mantiene un padding uniforme */
  white-space: nowrap; /* Evita che il testo vada a capo */
}




/* ============= Configurazione visibilità capitoli nel Book index ============= */
.crisis-of-paradigm-for-all {
	display: block;
}
.crisis-of-paradigm-for-members {
	display: none;
}
.extraordinary-science-for-all {
	display: block;
}
.extraordinary-science-for-affiliates {
	display: none;
}

/* ============= Template:Login or request Member account ============= */
.responsive-buttons {
	display: flex;
	justify-content: center;
	gap: 2rem;
	margin: 2rem auto;
}
/* ============= Dashboard ============= */
/* Pulsanti toggle dashboard */
.dashboard-toggle {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  margin: 0.5rem 0.5rem 0 0;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  background-color: #e6e6e6;
  border: 2px solid #ccc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.dashboard-toggle:hover {
  background-color: #d0e7ff;
  border-color: #4a90e2;
  color: #000;
  transform: translateY(-2px);
}

/* Contenitore dei box di contenuto */
.dashboard-box {
  display: none;
  padding: 1rem;
  margin-top: 1rem;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ================ Font chaptrs ================*/

.chapter-content {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 105%;
    line-height: 1.6;
    color: #555;
    text-align: left;
    padding: 1.5rem;
    max-width: 70ch; /* 50 caratteri circa = ~10 parole per riga */
    margin: auto;     /* centro il blocco orizzontalmente */
}

/* ============= Template:Tooltip ============= */

.tooltip-trigger, .tooltip-trigger-2, .tooltip-trigger-CitaFull {
  color: #ba0606;
  position: relative;
}

.tooltip-trigger-CitaFull {
  display: inline;
}

.tooltip-trigger:hover .tooltip-content, 
.tooltip-trigger-2:hover .tooltip-content-2,
.tooltip-trigger-CitaFull:hover .tooltip-content-CitaFull {
  display: inline-block;
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 90vw;
  min-width: 30em;
  padding: 12px 20px;
  color: #585858;
  background-color: white;
  border: 1px solid silver;
  border-radius: 12px;
  font-size: 95%;
  box-shadow: 0 0 100px 60px rgba(40, 40, 40, 0.65);
  z-index: 100;
  word-wrap: break-word;
}

.tooltip-content, .tooltip-content-2, .tooltip-content-CitaFull {
  display: none;
}

.tooltip-trigger:hover, .tooltip-trigger-2:hover, .tooltip-trigger-CitaFull:hover {
  cursor: help;
}

@media screen and (max-width: 1200px) {
  .tooltip-trigger:hover .tooltip-content, 
  .tooltip-trigger-2:hover .tooltip-content-2,
  .tooltip-trigger-CitaFull:hover .tooltip-content-CitaFull {
    box-sizing: border-box;
    left: 0;
    top: auto;
    transform: translate(0, 2em);
    width: 95vw;
    box-shadow: 0 0 80px 50px rgba(40, 40, 40, 0.65);
  }
}
/* ========== TooltipWide ==============*/
.tooltip-trigger-wide {
  position: relative;
  cursor: help;
  display: inline-block;
  border-bottom: 1px dotted #666;
}

.tooltip-content-wide {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 120%;
  transform: translateX(-50%);
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  max-width: 600px;
  z-index: 999;
  transition: opacity 0.3s ease;
  pointer-events: none;
  text-align: left;
  font-size: 95%;
  line-height: 1.6;
  white-space: normal;
}

.tooltip-trigger-wide:hover .tooltip-content-wide {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.tooltip-content-wide img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}


/* ========== Tooltip mini ==========*/
.tooltip-trigger-mini {
  position: relative;
  display: inline-block;
}

.tooltip-icon {
  font-size: 14px;
  color: #0077cc;
  cursor: pointer;
  vertical-align: middle;
}

.tooltip-content-mini {
  display: none;
  position: absolute;
  top: 1.6em;
  left: 50%;
  transform: translateX(-50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.85em;
  color: #333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  white-space: normal;
  z-index: 999;
  max-width: 260px;
  text-align: left;
}

.tooltip-trigger-mini:hover .tooltip-content-mini {
  display: inline-block;
}
.tooltip-content-mini {
  background-color: black;
  color: white;
}
/*======================= Logo Tooltip =================*/
.logo-masticationpedia-box {
  float: left;
  margin-right: 20px;
  margin-top: 10px;
}

.logo-masticationpedia {
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border: 2px solid #f7f8f6;
  background-color: white;
  padding: 6px;
  width: 120px; /* oppure 150px per dimensione maggiore */
  height: auto;
}

.testo-masticationpedia {
  overflow: hidden; /* forza il testo a non avvolgere troppo */
  padding-top: 10px;
}

/* Box contenitore logo */
.logo-box {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 20px;
}

/* Immagine del logo stilizzata */
.logo-img {
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 8px;
  background-color: white;
  max-width: 200px;
  height: auto;
}


/* === Stile box "Come partecipare" sfondo avana === */
/* Layout orizzontale dei 3 box */
.riga-box-partecipazione {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin: 40px auto;
  max-width: 1000px;
}

.box-come-partecipare {
  background-color: #f7f8f6;  /* colore avana/verde molto chiaro */
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: transform 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 180px;
  max-width: 250px;
  margin: 10px;
}

.box-come-partecipare:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Elimina bordo bianco interno, se esiste */
.box-come-partecipare .inner-box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
/* Layout logo + testo */
.logo-layout {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 30px 0;
  flex-wrap: wrap;
}

/* Logo */
.logo-img {
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  background: white;
  padding: 12px;
  max-width: 180px;
  height: auto;
}

/* Testo affiancato */
.logo-text {
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.5em;
  color: #222;
}
/* Logo con testo a fianco */
.logo-layout {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 40px 0;
  flex-wrap: wrap;
  justify-content: center;
}

.logo-img {
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  padding: 12px;
  max-width: 180px;
  height: auto;
}

.logo-text {
  max-width: 600px;
  font-size: 1rem;
  line-height: 1.6em;
  color: #222;
}


/* ============= Template  ============= */
.person-header-cover {
  background: linear-gradient(to right, #f4f4f4, #ffffff);
  padding: 3rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.person-header-content {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  text-align: left;
  max-width: 1200px;
  margin: auto;
}

.person-header-image img {
  border-radius: 50%;
  width: 240px;
  height: 240px;
  object-fit: cover;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
}

.person-header-text h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.person-header-text .subtitle {
  font-style: italic;
  font-size: 1.2rem;
}
/* ============ Galleria immagini in orizzontale ======== */
@media screen {
	/* The backgrounds for galleries. */
	#content .gallerybox div.thumb {
		/* Light gray padding */
		background-color: #f8f9fa;
	}
	
	/* Put a chequered background behind images, only visible if they have transparency.
   '.filehistory a img' and '#file img:hover' are handled by MediaWiki core (as of 1.19) */
	.gallerybox .thumb img {
		background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
	}
	/* But not on articles, user pages, portals or with opt-out. */
	.ns-0 .gallerybox .thumb img,
	.ns-2 .gallerybox .thumb img,
	.ns-100 .gallerybox .thumb img,
	.nochecker .gallerybox .thumb img {
		background: #fff;
	}
	
	/* T178626 */
	#contentSub:empty,
	#contentSub2:empty {
		display: block !important;
	}
	
	#contentSub:empty ~ #jump-to-nav,
	#contentSub2:empty ~ #jump-to-nav {
		margin-top: -1.4em !important;
		margin-bottom: 1.4em !important;
	}
/* ===========Gallery Odontoiatria =====*/

/* Galleria Odontoiatria */
.gallery-odontoiatria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding: 2em 5%;
}

.gallery-odontoiatria figure {
  width: 250px;
  margin: 0;
  text-align: center;
}

.gallery-odontoiatria img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.gallery-odontoiatria figcaption {
  margin-top: 0.5em;
  font-size: 0.95em;
  color: #333;
  line-height: 1.4;
}

}


/* ========================================================================== */
/*   HOMEPAGE LINKEDIN (COMMENTED) – stili per Main Page test / Home LinkedIn     */
/* ========================================================================== */

.homepage-layout { /* Contenitore principale della pagina */
  font-family: Arial, sans-serif;    /* Font utilizzato per tutto il testo */
  color: #333;                       /* Colore di base del testo */
  max-width: 1200px;                 /* Larghezza massima del layout */
  margin: 0 auto;                    /* Centra orizzontalmente il contenuto */
  padding: 2rem 1rem;                /* Spaziatura interna superiore/inferiore e ai lati */
}

.hero-header { /* Sezione "hero" con sfumatura e titolo */
  background: linear-gradient(to right, #2fc3ad, #1f8e8e); /* Sfumatura orizzontale */
  color: white;                     /* Colore del testo nella hero */
  padding: 3rem 1rem;               /* Spaziatura interna */
  text-align: center;               /* Centratura del testo */
  border-radius: 16px;              /* Angoli arrotondati */
  margin-bottom: 2rem;              /* Spazio sotto la hero */
}
.hero-header h1 { /* Titolo principale nella hero */
  font-size: 2.5rem;                /* Dimensione del font */
  margin-bottom: 1.5rem;            /* Spazio sotto il titolo */
  line-height: 1.3;                 /* Altezza riga per leggibilità */
}

.cta-button { /* Pulsante per call-to-action nella hero */
  background-color: #fff;           /* Sfondo bianco */
  color: #2fc3ad;                   /* Colore del testo */
  padding: .75rem 1.5rem;           /* Spaziatura interna */
  font-weight: bold;                /* Testo in grassetto */
  border-radius: 8px;               /* Angoli arrotondati */
  text-decoration: none;            /* Rimuove sottolineatura */
  font-size: 1rem;                  /* Dimensione del font */
  transition: background-color .3s ease; /* Transizione sfondo al passaggio */
}
.cta-button:hover { /* Stato hover del pulsante */
  background-color: #e6fffa;        /* Colore di sfondo quando si passa sopra */
}

.logo-layout { /* Sezione logo + testo introduttivo */
  display: flex;                    /* Layout flessibile orizzontale */
  flex-wrap: wrap;                  /* Va a capo se troppo stretto */
  justify-content: center;          /* Centra le colonne orizzontalmente */
  align-items: flex-start;          /* Allinea in alto gli elementi */
  gap: 2rem;                        /* Spazio tra logo e testo */
  margin-bottom: 3rem;              /* Spazio sotto la sezione */
}
.logo-layout .logo-img { /* Immagine del logo */
  max-width: 120px;                 /* Larghezza massima per il logo */
}
.logo-layout .logo-text { /* Blocco di testo affiancato al logo */
  max-width: 700px;                 /* Larghezza massima del testo */
  font-size: 1rem;                  /* Dimensione del font */
  line-height: 1.6;                 /* Altezza riga per leggibilità */
}

.partecipare-section { /* Contenitore sezione "Come partecipare" */
  display: flex;                    /* Layout flessibile orizzontale */
  flex-wrap: wrap;                  /* Va a capo su schermi piccoli */
  justify-content: center;          /* Centra le card orizzontalmente */
  gap: 40px;                        /* Spazio tra le card */
  align-items: flex-start;          /* Allinea titoli delle card in alto */
  margin-bottom: 3rem;              /* Spazio sotto la sezione */
}
.partecipare-section .card { /* Stile per ogni singola card */
  display: flex;                    /* Layout flessibile per colonna */
  flex-direction: column;           /* Disposizione in colonna */
  align-items: center;              /* Centratura orizzontale interno */
  width: 220px;                     /* Larghezza fissa della card */
  background: #fafafa;              /* Sfondo leggermente grigio */
  padding: 20px;                    /* Spaziatura interna */
  border-radius: 12px;              /* Angoli arrotondati */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombra leggera */
}
.partecipare-section .card img { /* Icona in cima alla card */
  width: 40px;                      /* Larghezza icona */
  height: 40px;                     /* Altezza icona */
  margin-bottom: 1rem;              /* Spazio sotto l'icona */
}
.partecipare-section .card .card-title { /* Titolo della card */
  margin: 0 0 10px;                 /* Spazio sotto il titolo */
  font-weight: bold;                /* Testo in grassetto */
  font-size: 1.1rem;                /* Dimensione del titolo */
  text-align: center;               /* Centro il testo */
}
.partecipare-section .card .card-body { /* Testo descrittivo della card */
  flex: 1;                          /* Occupa tutto lo spazio disponibile */
  font-size: .9rem;                 /* Dimensione del font */
  color: #444;                      /* Colore testo */
  text-align: left;                 /* Allinea a sinistra */
  margin-bottom: 10px;              /* Spazio sotto il testo */
}
.partecipare-section .card .card-link { /* Link/pulsante "continua a leggere" */
  margin-top: auto;                 /* Spinge il link in fondo */
  padding: .5rem 1rem;              /* Spaziatura interna link */
  font-weight: bold;                /* Testo in grassetto */
  color: #116089;                   /* Colore del testo link */
  text-decoration: none;            /* Rimuove sottolineatura */
  border: 1px solid #116089;        /* Bordo colorato */
  border-radius: 6px;               /* Angoli arrotondati */
  text-align: center;               /* Centra il testo */
}

.section.members h3 { /* Titolo sezione "Membri Approvati" */
  text-align: center;               /* Centro il testo */
  font-size: 1.4rem;                /* Dimensione maggiore */
  margin-bottom: 1rem;              /* Spazio sotto il titolo */
}
.member-cards { /* Contenitore avatar membri */
  display: flex;                    /* Layout flessibile orizzontale */
  flex-wrap: wrap;                  /* Va a capo su schermi piccoli */
  justify-content: center;          /* Centro gli avatar */
  gap: 24px;                        /* Spazio tra avatar */
  margin-top: 20px;                 /* Spazio sopra gli avatar */
}
.member-card { /* Singolo avatar */
  text-align: center;               /* Centro contenuto */
  max-width: 160px;                 /* Larghezza massima avatar */
}
.member-card img { /* Immagine avatar */
  width: 120px;                     /* Larghezza immagine */
  height: 120px;                    /* Altezza immagine */
  object-fit: cover;                /* Ritaglio proporzionale */
  border-radius: 50%;               /* Rende l’immagine circolare */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombra leggera */
}

.section.projects { /* Sezione "Progetti in corso" */
  text-align: center;               /* Centro il testo della sezione */
  margin-top: 3rem;                 /* Spazio sopra la sezione */
}
.project-list { /* Lista orizzontale progetti */
  list-style: none;                 /* Rimuove pallini lista */
  padding: 0;                       /* Rimuove padding default */
  display: flex;                    /* Layout flessibile orizzontale */
  flex-wrap: wrap;                  /* Va a capo se necessario */
  justify-content: center;          /* Centro i progetti */
  gap: 1.5rem;                      /* Spazio tra elementi */
  margin-top: 1rem;                 /* Spazio sopra lista */
}
.project-list li { /* Singolo progetto */
  background: #e0f7f4;              /* Sfondo leggermente colorato */
  padding: .75rem 1.25rem;          /* Spaziatura interna */
  border-radius: 10px;              /* Angoli arrotondati */
  font-weight: bold;                /* Testo in grassetto */
}

.quote-section { /* Citazione finale */
  font-style: italic;               /* Corsivo */
  text-align: center;               /* Centro il testo */
  margin-top: 4rem;                 /* Spazio sopra la citazione */
}