/* =========================================
   Iscritti CISL FP — WebApp Template CSS
   Prefix: icfp-
   ========================================= */

/* Blocca il font-boosting di Chrome/WebView Android: evita che i testi vengano
   ingranditi sui device reali (discrepanza vs devtools/puppeteer) e sbordino. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* --- Logo --- */
body .sp-logo {
	max-height: calc(30px * 2.0);
}

/* --- Header override: compatto per webapp --- */
header {
	padding: 15px calc(30px * 5);
	height: auto;
	min-height: calc(15px * 3);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	background: #ffffff;
}

/*─────────Modifica Contatti dovuta a dezoom──────────*/
@media (max-width: 950px) and (min-width: 511px) {
  .sp-contacts .sp-contact-box {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: calc(50% - 32px);
    margin: 12px;
  }


  .sp-contacts .sp-contact-box:nth-child(3) {
    width: calc(100% - 24px);
    margin-top: 40px;           
  }
}

@media (max-width: 510px) {
  .sp-contacts .sp-contact-box {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: calc(100% - calc(30px*2));   /* più stretti: 32px di lato per parte */
    margin: 30px 30px;          /* 16px sopra/sotto, 32px ai lati */
  }
}

/*───Dezoommato intero sito per mobile, piú contenuto su schermo, rimanendo leggibile─────────*/
@media (max-width: 768px) { 
  html, body {
        width: 100%;
        overflow-x: hidden;
  }
  
  body {
   zoom: 0.85;
  }
}

@media only screen and (max-width: 1023px) {
  footer .sp-flex-cross-center {
    align-items: center !important;
  }
}
@media (max-width: 450px) {

    .sp-footer-content {
      width: 100% !important; 
    }

    .sp-footer-content .sp-flex {
      justify-content: left;
    }
}
/* --- Layout: footer sempre in fondo (gestito da JS) --- */

/* --- Home container --- */
.icfp-home {
	padding: 15px calc(30px * 5);
}

/* --- Banner/content image --- */
.sp-content-image-top {
	filter: grayscale(1) contrast(1);
	mix-blend-mode: multiply;
}

/* =========================================
   Reserved Menu — Griglia icone app-like
   ========================================= */

.icfp-menu-container {
	padding: 15px 0;
	margin-top: 15px;
}

.icfp-menu-header {
	margin-bottom: 15px;
}

.icfp-menu-title {
	margin: 0;
	font-size: 1.4em;
	color: #2f7e5e;
}

.icfp-menu-description {
	color: #b2b2b2;
	font-size: 0.9em;
	margin-top: calc(5px / 2);
}

/* Griglia menu */
.icfp-menu-grid {
	display: flex;
	flex-wrap: wrap;
	gap: calc(5px * 2);
	justify-content: center;
}

/* Singolo item menu */
.icfp-menu-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: calc(5px * 2);
	background: #ffffff;
	border-radius: calc(5px * 2);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	text-decoration: none;
	color: #000000;
	transition: box-shadow 0.2s, transform 0.2s;
	text-align: center;
	min-height: auto;
	width: calc(30px * 3.5);
}

.icfp-menu-item:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

/* Icona */
.icfp-menu-icon {
	font-size: 1.8em;
	color: #2f7e5e;
	margin-bottom: calc(5px * 1.5);
	width: calc(30px * 2);
	height: calc(30px * 2);
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fafafa;
	border-radius: 50%;
}

.icfp-menu-icon img {
	max-width: calc(30px * 1.5);
	max-height: calc(30px * 1.5);
	border-radius: 50%;
}

/* Label */
.icfp-menu-label {
	font-size: 0.85em;
	font-weight: 500;
	line-height: 1.2;
	color: #000000;
}

@media (max-width: 1199px) {

  .icfp-menu-container,.icfp-home,.icfp-profile-section,.sp-main-icon-intro {
    padding-left: calc(30px*2) !important;
    padding-right: calc(30px*2) !important;
  }

}

@media (max-width: 768px) {

  .icfp-menu-container,.icfp-home,.icfp-profile-section,.sp-main-icon-intro {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

}

/* =========================================
   Welcome User
   ========================================= */

.icfp-welcome {
	padding: 15px 0;
	text-align: center;
}

.icfp-welcome-title {
	margin: 0;
	font-size: 1.6em;
	color: #2f7e5e;
}

.icfp-welcome-subtitle {
	margin: calc(5px / 2) 0 0;
	color: #b2b2b2;
	font-size: 0.95em;
}

/* =========================================
   Featured Conventions
   ========================================= */

.icfp-featured {
	padding: 15px 0;
}

.icfp-featured-title {
	margin: 0 0 15px;
	font-size: 1.2em;
	color: #2f7e5e;
}

.icfp-featured-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.icfp-featured-card {
	flex: 1;
	min-width: 200px;
	background: #ffffff;
	border-radius: calc(5px * 2);
	padding: 15px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s, transform 0.2s;
	cursor: pointer;
}

.icfp-featured-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.icfp-featured-card-img {
	width: 100%;
	margin-bottom: 5px;
	border-radius: 5px;
	overflow: hidden;
}

.icfp-featured-card-img img {
	width: 100%;
	height: 120px;
	object-fit: cover;
}

.icfp-featured-card-icon {
	font-size: 2em;
	color: #2f7e5e;
	margin-bottom: 5px;
}

.icfp-featured-card-title {
	font-weight: 600;
	font-size: 0.95em;
	margin-bottom: calc(5px / 2);
}

.icfp-featured-card-desc {
	font-size: 0.85em;
	color: #b2b2b2;
	line-height: 1.4;
}

/* =========================================
   Conventions Section
   ========================================= */

.icfp-conventions-section {
	padding: 15px calc(30px * 5);
}

.icfp-section-title {
	margin: 0 0 15px;
	font-size: 1.4em;
	color: #2f7e5e;
}

@media (max-width: 480px){
	
	.icfp-section-title {
	  margin: 10px 0 15px;
	}
}

/* Filtri categorie */
.icfp-cat-filters {
	display: flex;
	flex-wrap: wrap;
	gap: calc(5px * 1.5);
	margin-bottom: 30px;
}

.icfp-cat-btn {
	padding: calc(5px * 1.5) 15px;
	background: #ffffff;
	border: 1px solid #b2b2b2;
	border-radius: calc(30px);
	cursor: pointer;
	font-size: 0.85em;
	font-weight: 500;
	color: #000000;
	transition: all 0.2s;
}

.icfp-cat-btn:hover {
	border-color: #2f7e5e;
	color: #2f7e5e;
}

.icfp-cat-btn.active {
	background: #2f7e5e;
	color: #ffffff;
	border-color: #2f7e5e;
}

/* Griglia convenzioni */
.icfp-conv-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

.icfp-conv-card {
	background: #ffffff;
	border-radius: calc(5px * 2);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	text-decoration: none;
	color: #000000;
	transition: box-shadow 0.2s, transform 0.2s;
	display: flex;
	flex-direction: column;
}

.icfp-conv-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.icfp-conv-card-img img {
	width: 100%;
	height: 160px;
	object-fit: cover;
}

.icfp-conv-card-body {
	padding: 15px;
	flex: 1;
}

.icfp-conv-card-title {
	font-weight: 600;
	font-size: 0.95em;
	margin-bottom: calc(5px);
}

.icfp-conv-card-desc {
	font-size: 0.85em;
	color: #b2b2b2;
	line-height: 1.4;
}

/* =========================================
   FPS Informa Section
   ========================================= */

.icfp-fps-section {
	padding: 15px calc(30px * 5);
}

.icfp-fps-list {
	display: flex;
	flex-direction: column;
	gap: calc(5px * 2);
}

.icfp-fps-card {
	background: #ffffff;
	border-radius: calc(5px * 2);
	padding: 15px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	border-left: 3px solid #2f7e5e;
	text-decoration: none;
	color: #000000;
	display: block;
	transition: box-shadow 0.2s, transform 0.2s;
}

.icfp-fps-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.icfp-fps-card-date {
	font-size: 0.8em;
	color: #b2b2b2;
}

.icfp-fps-card-title {
	font-weight: 600;
	font-size: 1em;
	margin-bottom: calc(5px / 2);
}

.icfp-fps-card-desc {
	font-size: 0.85em;
	color: #b2b2b2;
	line-height: 1.4;
	margin-bottom: 5px;
}

.icfp-fps-card-link {
	font-size: 0.85em;
	color: #2f7e5e;
	font-weight: 500;
}

.icfp-fps-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: calc(5px / 2);
}

/* Sinistra: comparto + data (data sotto comparto) */
.icfp-fps-card-headleft {
	display: flex;
	flex-direction: column;
	gap: calc(5px / 3);
}

/* Autore a destra */
.icfp-fps-card-sender {
	font-size: 0.8em;
	color: #b2b2b2;
	text-align: right;
	flex-shrink: 0;
}

.icfp-fps-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 5px;
}

.icfp-fps-card-att {
	font-size: 0.8em;
	color: #b2b2b2;
}

.icfp-fps-card {
	cursor: pointer;
}

/* =========================================
   FPS Informa — Dettaglio documento
   ========================================= */

.icfp-fps-detail {
	padding: 15px calc(30px * 5);
}

.icfp-fps-detail-nav {
	margin-bottom: 15px;
}

.icfp-fps-detail-nav .sp-button {
	cursor: pointer;
}

.icfp-fps-detail-header {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.icfp-fps-detail-title {
	margin: 0 0 calc(5px * 2);
	font-size: 1.4em;
	color: #2f7e5e;
	line-height: 1.3;
}

.icfp-fps-detail-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.icfp-fps-detail-meta span {
	font-size: 0.85em;
	color: #b2b2b2;
}

.icfp-fps-detail-meta i {
	margin-right: calc(5px / 2);
}

.icfp-fps-detail-body {
	background: #ffffff;
	border-radius: calc(5px * 2);
	padding: 15px;
	margin-bottom: 15px;
	font-size: 0.9em;
	line-height: 1.6;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	max-height: 500px;
	overflow-y: auto;
}

.icfp-fps-detail-attachments {
	background: #ffffff;
	border-radius: calc(5px * 2);
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.icfp-fps-detail-att-title {
	font-weight: 600;
	font-size: 0.95em;
	margin-bottom: 5px;
	color: #2f7e5e;
}

.icfp-fps-detail-att-item {
	display: block;
	padding: calc(5px / 2) 0;
	font-size: 0.85em;
	color: #2f7e5e;
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.icfp-fps-detail-att-item:last-child {
	border-bottom: none;
}

.icfp-fps-detail-att-item:hover {
	text-decoration: underline;
}

.icfp-fps-detail-att-item i {
	margin-right: 5px;
}

.icfp-fps-detail-actions {
	margin-top: 15px;
}

.icfp-fps-detail-actions .sp-button {
	display: inline-block;
}

/* --- Ricerca FPS --- */
.icfp-fps-search-bar {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.icfp-fps-search-active {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 0.9em;
	color: #b2b2b2;
}

.icfp-fps-search-clear {
	font-size: 0.8em;
	cursor: pointer;
}

/* --- Paginazione FPS --- */
.icfp-fps-section .sp-full-width {
	margin-top: 15px;
}

/* --- Convenzioni pubbliche --- */
.icfp-conv-notice {
	background: #ffffff;
	border-left: 3px solid #2f7e5e;
	padding: 8px 15px;
	margin-bottom: 15px;
	font-size: 0.92rem;
	color: #b2b2b2;
	border-radius: calc(5px * 2);
}

.icfp-conv-notice i {
	color: #2f7e5e;
	margin-right: 5px;
}

/* --- Section count --- */
.icfp-section-count {
	font-size: 0.7em;
	color: #b2b2b2;
	font-weight: 400;
}

/* =========================================
   Latest News
   ========================================= */

.icfp-news {
	padding: 15px 0;
}

.icfp-news-title {
	margin: 0 0 15px;
	font-size: 1.2em;
	color: #2f7e5e;
}

.icfp-news-list {
	display: flex;
	flex-direction: column;
	gap: calc(5px * 2);
}

.icfp-news-item {
	background: #ffffff;
	border-radius: calc(5px * 2);
	padding: 15px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s, transform 0.2s;
	cursor: pointer;
	border-left: 3px solid #2f7e5e;
}

.icfp-news-item:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

a.icfp-news-item {
	display: block;
	color: inherit;
	text-decoration: none;
}

.icfp-news-item-date {
	font-size: 0.8em;
	color: #b2b2b2;
	margin-bottom: calc(5px / 2);
}

.icfp-news-item-title {
	font-weight: 600;
	font-size: 0.95em;
	margin-bottom: calc(5px / 2);
}

.icfp-news-item-desc {
	font-size: 0.85em;
	color: #b2b2b2;
	line-height: 1.4;
}

/* =========================================
     Assicurazioni Section                                                                                                                                                                                                                                                                                                                                                                                  
     ========================================= */                                                                                                                                                                                                                                                                                                                                                           

.icfp-assicurazioni-section {                                                                                                                                                                                                                                                                                                                                                                             
	padding: 15px calc(30px * 5);                                                                                                                                                                                                                                                                                                                                                     
	text-align: center;                   
}                                                                                                                                                                                                                                                                                                                                                                                                         
   
.icfp-assicurazioni-section .icfp-section-title {
	text-align: left;                                                                                                                                                                                                                                                                                                                                                                                   
}
   
.icfp-assicurazioni-card {                                                                                                                                                                                                                                                                                                                                                                                
	background: #ffffff;
	border-radius: calc(5px * 2);                                                                                                                                                                                                                                                                                                                                                              
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	padding: calc(30px * 2) 30px;
	max-width: 600px;                     
	margin: 0 auto;                                                                                                                                                                                                                                                                                                                                                                                     
}

.icfp-assicurazioni-icon {                  
	font-size: 3em;                                                                                                                                                                                                                                                                                                                                                                                     
	color: #2f7e5e;
	margin-bottom: 15px;                                                                                                                                                                                                                                                                                                                                                                      
}                                           

.icfp-assicurazioni-text {
	font-size: 0.95em;                                                                                                                                                                                                                                                                                                                                                                                  
	line-height: 1.7;
	color: #000000;                                                                                                                                                                                                                                                                                                                                                                             
	margin-bottom: calc(30px * 1.5);
}                                       

.icfp-assicurazioni-btn {                                                                                                                                                                                                                                                                                                                                                                                 
	display: inline-block;
	padding: calc(5px * 2) calc(30px * 2);                                                                                                                                                                                                                                                                                                                                             
	background: #2f7e5e;      
	color: #ffffff;
	border-radius: calc(30px);                                                                                                                                                                                                                                                                                                                                                                  
	font-size: 1.1em;                     
	font-weight: 600;                                                                                                                                                                                                                                                                                                                                                                                   
	text-decoration: none;
	transition: background 0.2s, transform 0.2s;                                                                                                                                                                                                                                                                                                                                                        
}                                           

.icfp-assicurazioni-btn:hover {
	transform: translateY(-2px);                                                                                                                                                                                                                                                                                                                                                                        
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}                                                                                                                                                                                                                                                                                                                                                                                                         

@media (max-width: 768px) {
	.icfp-assicurazioni-section {                                                                                                                                                                                                                                                                                                                                                                       
			padding: 15px calc(30px * 2);
	}                                                                                                                                                                                                                                                                                                                                                                                                   
}                                       

@media (max-width: 480px) {                                                                                                                                                                                                                                                                                                                                                                               
	.icfp-assicurazioni-section {
			padding: 5px 15px;                                                                                                                                                                                                                                                                                                                                                       
	}                                     
}   

/* =========================================
   Responsive
   ========================================= */

/* Tablet */
@media (max-width: 1199px) {

	.icfp-conventions-section {
		padding: 15px calc(30px * 2);
	}
}

@media (max-width: 1024px) {
	header {
		padding: 15px calc(30px * 3);
	}

	.icfp-home {
		padding: 15px calc(30px * 3);
	}

	.icfp-conventions-section {
		padding: 15px calc(30px * 2);
	}

	.icfp-menu-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.icfp-conv-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile large */
@media (max-width: 768px) {
	header {
		padding: 15px calc(30px * 2);
		max-height: calc(30px * 2);
	}

	.icfp-home {
		padding: 15px calc(30px * 2);
	}

	.icfp-menu-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: calc(5px * 2);
	}

	.icfp-menu-item {
		padding: calc(5px * 2);
		min-height: calc(30px * 2.5);
	}

	.icfp-menu-icon {
		font-size: 1.5em;
		width: calc(30px * 1.5);
		height: calc(30px * 1.5);
	}
}

/* Mobile large */
@media (max-width: 768px) {
	.icfp-conventions-section {
		padding: 15px calc(30px * 2);
	}

	.icfp-conv-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile small */
@media (max-width: 480px) {
	header {
		padding: 5px 15px;
		max-height: calc(30px * 3);
	}

	.icfp-home {
		padding: 5px 15px;
	}

	.icfp-menu-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: calc(5px * 1.5);
	}

	.icfp-menu-item {
		padding: 5px;
	}

	.icfp-menu-icon {
		font-size: 1.3em;
	}

	.icfp-menu-label {
		font-size: 0.8em;
	}

	.icfp-conventions-section {
		padding: 5px 15px;
	}

	.icfp-conv-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================
   I tuoi dati — Profile Section
   ========================================= */

.icfp-profile-section {
	padding: 15px calc(30px * 5);
}

.icfp-profile-grid {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.icfp-profile-card {
	background: #ffffff;
	border-radius: calc(5px * 2);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	padding: 15px;
}

.icfp-profile-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.icfp-profile-card-title {
	font-size: 1.1em;
	font-weight: 600;
	color: #2f7e5e;
	margin: 0;
}

.icfp-profile-fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: calc(5px * 2);
}

.icfp-profile-field {
	display: flex;
	flex-direction: column;
}

.icfp-profile-field-label {
	font-size: 0.78em;
	color: #b2b2b2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: calc(5px / 4);
}

.icfp-profile-field-value {
	font-size: 0.95em;
	color: #000000;
	font-weight: 500;
}

.icfp-profile-edit-btn {
	font-size: 0.85em;
	color: #2f7e5e;
	font-weight: 500;
	cursor: pointer;
	border: 1px solid #2f7e5e;
	border-radius: calc(30px);
	padding: calc(5px) calc(5px * 2);
	text-decoration: none;
	transition: background 0.2s, color 0.2s;
}

.icfp-profile-edit-btn:hover {
	background: #2f7e5e;
	color: #ffffff;
}

@media (max-width: 768px) {
	.icfp-profile-section {
		padding: 15px calc(30px * 2);
	}

	.icfp-profile-fields {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.icfp-profile-section {
		padding: 5px 15px;
	}
}

/* =========================================
   News riservate — sezione + dettaglio
   ========================================= */

.icfp-news-section {
	padding: 15px;
}

.icfp-newscard-hint {
	font-size: 0.85em;
	color: #b2b2b2;
	margin-bottom: 5px;
}

.icfp-newscard-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* colonne fisse: con limit 12 le righe sono sempre sature */
	gap: 15px;
	margin-top: 15px;
}

@media (max-width: 1400px) {
	.icfp-newscard-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1000px) {
	.icfp-newscard-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Blocco comparto: mono-riga a scroll orizzontale */
.icfp-newscard-row {
	display: flex;
	gap: 15px;
	overflow-x: auto;
	padding-bottom: 5px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.icfp-newscard-row .icfp-newscard {
	/* crescono a riempire la riga (cap 480px): con poche news non restano nane rispetto alla griglia */
	flex: 1 1 300px;
	min-width: 300px;
	max-width: 480px;
}

.icfp-news-block-title {
	margin: 30px 0 5px;
	font-size: 1.1em;
	color: #2f7e5e;
}

.icfp-news-block-title:first-of-type {
	margin-top: 15px;
}

.icfp-newscard {
	background: #ffffff;
	border-radius: calc(5px * 2);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s, transform 0.2s; /* transform: addio Minecraft sullo sp-scale */
}

.icfp-newscard:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.icfp-newscard-img {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.icfp-newscard-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.icfp-newscard-body {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: calc(5px / 2);
}

.icfp-newscard-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
}

.icfp-newscard-tag {
	background: #2f7e5e;
	color: #ffffff;
	font-size: 0.75em;
	font-weight: 600;
	padding: calc(5px / 2) 5px;
	border-radius: 5px;
	white-space: nowrap;
}

.icfp-newscard-date {
	font-size: 0.8em;
	color: #b2b2b2;
}

.icfp-newscard-title {
	font-weight: 600;
	font-size: 1em;
	line-height: 1.3;
}

.icfp-newscard-desc {
	font-size: 0.85em;
	color: #b2b2b2;
	line-height: 1.4;
}

.icfp-news-detail {
	padding: 15px calc(30px * 5);
}

.icfp-news-detail-img {
	margin: 15px 0;
	border-radius: calc(5px * 2);
	overflow: hidden;
}

.icfp-news-detail-img img {
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	display: block;
}

.icfp-news-detail-body {
	line-height: 1.6;
}

.icfp-news-detail-body img {
	max-width: 100%;
	height: auto;
}

@media (max-width: 1500px) {
	.icfp-news-detail {
		padding: 0 15px !important;
	}

}

@media (max-width: 768px) {
	.icfp-news-detail {
		padding: 5px 15px;
	}
	.icfp-newscard-list {
		grid-template-columns: 1fr;
	}
}

/* --- Ultime news (home): etichetta categoria colorata --- */
.icfp-news-item-head {
	display: flex;
	align-items: center;s
	gap: 5px;
	margin-bottom: calc(5px / 2);
}

/* data sempre a destra anche senza etichetta categoria/comparto (FPS senza comparto) */
.icfp-news-item-head .icfp-news-item-date {
	margin-left: auto;
	margin-bottom: 0;
}

.icfp-news-item-cat {
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* --- FPS Informa: messaggio non abilitato --- */
.icfp-fps-denied {
	background: #ffffff;
	border-radius: calc(5px * 2);
	padding: 30px;
	text-align: center;
	color: #b2b2b2;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* --- News riservate: barra ricerca inline --- */
.icfp-news-search {
	display: flex;
	align-items: center;
	gap: 5px;
	background: #ffffff;
	border: 1px solid #b2b2b2;
	border-radius: calc(30px);
	padding: calc(5px * 1.2) 15px;
	margin-bottom: 15px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.icfp-news-search:focus-within {
	border-color: #2f7e5e;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.icfp-news-search-icon {
	color: #b2b2b2;
}

.icfp-news-search-input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-size: 0.95em;
	color: #000000;
}

.icfp-news-search-go,
.icfp-news-search-clear {
	cursor: pointer;
	width: calc(30px * 1.4);
	height: calc(30px * 1.4);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
}

.icfp-news-search-go {
	background: #2f7e5e;
	color: #ffffff;
}

.icfp-news-search-clear {
	background: #fafafa;
	color: #b2b2b2;
}

/* --- Conteggio sulle pills categorie/comparti (badge con fondo) --- */
.icfp-cat-count {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 calc(5px / 1.5);
	margin-left: calc(5px / 2);
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1.4em;
	text-align: center;
	border-radius: 30px;
	background: rgba(0, 0, 0, 0.08);
}

.icfp-cat-btn.active .icfp-cat-count {
	background: rgba(255, 255, 255, 0.3);
}

/* --- Pager (Precedenti/Successive): stacca dalle card --- */
.icfp-pager {
	margin-top: 30px;
	gap: 15px;
}

/* =========================================
   Responsive — hardening mobile consolidato (2026-06-04)
   Ultimo blocco = vince sui breakpoint sparsi sopra.
   ========================================= */
@media (max-width: 768px) {
	header,
	.icfp-home,
	.icfp-conventions-section,
	.icfp-fps-section,
	.icfp-news-section,
	.icfp-news-detail,
	.icfp-fps-detail,
	.icfp-profile-section {
		padding-left: 15px;
		padding-right: 15px;
	}
	.icfp-conv-grid,
	.icfp-newscard-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	header,
	.icfp-home,
	.icfp-featured,
	.icfp-fps-section,
	.icfp-news,
	.icfp-news-section,
	.icfp-news-detail,
	.icfp-fps-detail,
	.icfp-profile-section {
		padding-left: 5px;
		padding-right: 5px;
	}
	/* una colonna su telefono */
	.icfp-conv-grid,
	.icfp-newscard-list {
		grid-template-columns: 1fr;
	}
	/* chip filtri più compatte, niente overflow orizzontale */
	.icfp-cat-filters {
		gap: 5px;
		margin-bottom: 15px;
	}
	.icfp-cat-btn {
		font-size: 0.8em;
		padding: 5px calc(5px * 1.5);
	}
	/* card FPS: comparto+data sopra, autore sotto (no a fianco quando stretto) */
	.icfp-fps-card-header {
		flex-direction: column;
		gap: calc(5px / 2);
	}
	.icfp-fps-card-sender {
		text-align: left;
	}
	/* titolo sezione un filo più piccolo */
	.icfp-section-title {
		font-size: 1.2em;
	}
}

/* =========================================
   Home CTA Area Riservata (blocco iconsIntro) — bottone pill compatto
   ========================================= */
.sp-main-icon-intro {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	justify-content: center;
	align-items: stretch;
	gap: 15px;
	padding: 0 calc(30px * 5) calc(30px * 1.5);
	margin-top: 0;
	--icon-box-w: 14rem;
}

.sp-main-icon-intro .sp-intro:empty,
.sp-main-icon-intro .sp-text-muted:empty {
	display: none;
}

.sp-main-icon-box {
	display: inline-flex;
	flex: 0 0 auto;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: calc(5px * 2);

	width: auto;
	min-width: var(--icon-box-w);
	max-width: 100%;

	padding: 15px calc(30px * 1);
	background: #2f7e5e;
	color: #ffffff;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	text-decoration: none;
	transition: box-shadow 0.2s, transform 0.2s;
}

.sp-main-icon-box:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

.sp-main-icon-box-icon {
	font-size: 1.4em;
	line-height: 1;
	margin: 0;
}
.sp-main-icon-box-icon i { color: #ffffff; }

.sp-main-icon-box-title {
	width: auto;
	font-weight: 700;
	font-size: 1.05em;
	white-space: nowrap;
}

.sp-main-icon-box-desc { display: none; }

@media (max-width: 600px) {
	.sp-main-icon-box {
		width: 100%;
		min-width: 0;
		max-width: 28rem;
	}
}

/* =========================================
   Gate dati incompleti — overlay bloccante (complete=0)
   ========================================= */
.icfp-complete-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
}
.icfp-complete-modal {
	background: #ffffff;
	border-radius: calc(5px * 2);
	max-width: 480px;
	width: 100%;
	padding: calc(30px * 1.5);
	text-align: center;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.icfp-complete-icon {
	font-size: 2.6em;
	color: #2f7e5e;
	margin-bottom: 15px;
}
.icfp-complete-title {
	font-size: 1.4em;
	font-weight: 700;
	color: #000000;
	margin-bottom: calc(5px * 2);
}
.icfp-complete-text {
	color: #b2b2b2;
	line-height: 1.5;
	margin-bottom: 15px;
}
.icfp-complete-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

/* =========================================
   Fix mobile/UI (2026-06-06)
   ========================================= */
/* Login: stacca i bottoni ISCRIVITI / ACCEDI (erano attaccati).
   box-sizing border-box: il padding orizzontale rientra nel 100% del wrapper Google
   (altrimenti sborda 10px a dx e disallinea con la riga ISCRIVITI/ACCEDI). */
.sp-login-buttons {
	box-sizing: border-box;
	padding: 0 calc(5px);
}

/* Slideshow: 600px fisso è troppo invadente su mobile → più basso */
@media ( max-width: 768px ) {
	.slides,
	.slide {
		height: 300px;
	}
}

/* Hamburger menù mobile (icona iniettata da JS, toggla .icfp-menu-open su .sp-menu) */
.icfp-burger {
	display: none;
}
@media ( max-width: 768px ) {
	.icfp-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		font-size: 1.6em;
		line-height: 1;
		color: #2f7e5e;
		cursor: pointer;
	}
	.sp-menu {
		display: none;
		width: 100%;
		flex-direction: column;
	}
	.sp-menu.icfp-menu-open {
		display: flex;
	}
	.sp-menu.icfp-menu-open .sp-menu-item {
		width: 100%;
		margin: 0;
		padding: 15px;
		border-top: 1px solid rgba( 0, 0, 0, 0.08 );
		text-align: center;
	}
}

/* Header a 3 zone: logo (sx) · "Area Iscritti" (centro) · menù/☰ (dx) — su una riga */
.icfp-header {
	position: relative;
	gap: 15px;
}
/* logo e menu non devono espandersi: una regola core mette i figli header a width:100%
   (residuo del vecchio header che impilava logo/menu) → li forzo a width:auto, sennò
   spingono "Area Iscritti" e ☰ fuori schermo. */
.icfp-header-logo {
	flex: 0 0 auto;
	width: auto !important;
}
.icfp-header-logo .logo,
.icfp-header-logo .logo > a {
	width: auto !important;
	flex: 0 0 auto;
}
/* scritta centrata DAVVERO rispetto al viewport (logo e ☰ hanno larghezze diverse):
   posizione assoluta al centro dell'header, fuori dal flusso flex */
.icfp-header-title {
	/* su desktop ridondante (logo + nav + "AREA RISERVATA" in topbar): mostrata solo su mobile */
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -50% );
	width: auto !important;
	text-align: center;
	font-weight: 700;
	font-size: 1.25em;
	color: #2f7e5e;
	white-space: nowrap;
	pointer-events: none;
}
.icfp-header-menu {
	flex: 0 0 auto;
	width: auto !important;
}
@media ( max-width: 768px ) {
	.icfp-header-title {
		display: block;
		font-size: 1.05em;
	}
	/* la tendina si apre a TUTTA LARGHEZZA sotto l'header, non dentro la colonna destra */
	.sp-menu.icfp-menu-open {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		background: #ffffff;
		box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.12 );
		z-index: 200;
	}
}

/* Login box svecchiato: card centrata, angoli morbidi, ombra soft, accento brand in alto */
.sp-login-box {
	max-width: 420px;
	margin: 30px auto;
	border: 0;
	border-top: 3px solid #2f7e5e;
	border-radius: calc( 5px * 2 );
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.10 );
	padding: calc( 30px * 1.2 );
}
.sp-login-box .sp-login-title {
	font-size: 1.5em;
	font-weight: 700;
}
/* input del box: border-box + 100% della card → niente sbordo a dx del placeholder lungo
   (es. "Email principale / Codice fiscale"); il testo eventualmente eccedente resta clippato dentro */
.sp-login-box .fen-field,
.sp-login-box input:not([type="hidden"]) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}
/* la fen-label flottante ("Email principale / Codice fiscale") è l'elemento più largo del box:
   a 16.8px su device reali (font Samsung, metriche != Arial) sborda a dx. La riduco e la tengo dentro. */
.sp-login-box .fen-label {
	font-size: 0.9em;
	max-width: 100%;
	box-sizing: border-box;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ===== Home pubblica — sezione "Cosa trovi nella tua area riservata" (contentsIntro) =====
   Override della banda rossa di default (#00fff8) -> banda chiara + card stile mockup. */
/* verdino continuo da sotto l'headline fino al footer: niente bianco che spezza
   (l'headline resta bianca; la CTA scura ha bg proprio con specificità maggiore) */
.sp-main-content{ background: #e8f2ec; display: flow-root; }
/* Hero testuale (niente più slideshow): sfondo bianco con micro-pattern a pois verdi */
.sp-main-content-top{
	background:
		radial-gradient( circle at 1px 1px, rgba( 46, 145, 104, .14 ) 1px, transparent 0 ) 0 0 / 24px 24px,
		#ffffff;
}
.sp-main-content-intro{
	/* bianco -> verdino sfumato */
	background: linear-gradient( 180deg, #ffffff 0%, #e8f2ec 100% ) !important;
	padding: calc( 30px * 1.5 ) 15px;
	gap: calc( 30px * 1.5 );
	align-items: stretch;
}
.sp-main-content-intro .sp-intro{
	width: 100%;
	color: #2f7e5e;
	font-size: 1.7rem;
	font-weight: 700;
	margin-bottom: 0;
}
.sp-main-content-intro .sp-main-content-box{
	width: auto;
	flex: 1 1 230px;
	max-width: 280px;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	background: #ffffff;
	border: 1px solid rgba( 11, 26, 18, .10 );
	border-radius: calc( 5px * 2.4 );
	box-shadow: 0 2px 10px rgba( 6, 59, 34, .06 );
	padding: calc( 30px * 1.4 ) 15px 15px;
	margin: 0;
	overflow: hidden;
	transition: transform .25s, box-shadow .25s, border-color .25s;
}
.sp-main-content-intro .sp-main-content-box::before{
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: #2f7e5e;
	transition: width .25s, background .25s;
}
.sp-main-content-intro .sp-main-content-box:hover{
	transform: translateY( -5px );
	box-shadow: 0 18px 40px -20px rgba( 6, 59, 34, .35 );
	border-color: transparent;
}
.sp-main-content-intro .sp-main-content-box:hover::before{ width: 6px; }
/* Icona = linguetta CORTA che pende dal bordo superiore (angoli inferiori arrotondati),
   contenuta dentro la card (top:0, non più -30px), tab largo e basso. */
.sp-main-content-intro .sp-main-content-box-icon{
	position: absolute;
	top: 0;
	left: 50%;
	right: auto;
	transform: translateX( -50% );
	box-sizing: border-box;
	width: calc( 30px * 2 );          /* ~60px largo */
	height: calc( 30px * 1.1 );       /* ~33px basso → linguetta */
	margin: 0;
	border-radius: 0 0 calc( 5px * 2 ) calc( 5px * 2 );
	background: #e9f3ee;
	color: #2f7e5e;
	font-size: 1.1rem;
}
.sp-main-content-intro .sp-main-content-box-title{
	text-transform: none;
	font-size: 1.12rem;
	margin-top: 5px;
}
.sp-main-content-intro .sp-main-content-box-text{
	color: #5A6B60;
	font-size: .9rem;
	line-height: 1.55;
	margin-top: 5px;
}

/* Home headline: ritmo verticale (base mette 90px su/giù) + lead leggibile e centrata */
.sp-main-content-top{
	padding: calc( 30px * 1.4 ) 15px calc( 30px * 1.2 ) !important;
	line-height: 1.6;
}
/* Hero CTA "Entra nella tua area" (pill primario sotto la lead) */
.icfp-hero-btn{
	display: inline-flex;
	align-items: center;
	gap: calc( 5px * 1.5 );
	margin-top: 30px;
	padding: 15px calc( 30px * 1.5 );
	background: #2f7e5e;
	color: #ffffff;
	font-weight: 600;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .12 );
	transition: transform .2s, box-shadow .2s;
}
.icfp-hero-btn:hover{
	transform: translateY( -2px );
	box-shadow: 0 6px 18px rgba( 0, 0, 0, .2 );
}
.sp-main-content-top-title{
	margin-bottom: 15px;
	letter-spacing: 1px;
	line-height: normal;
}
.sp-main-content-top > div,
.sp-main-content-top p{
	max-width: 60ch;
	margin-left: auto;
	margin-right: auto;
	color: #5A6B60;
	font-size: 1.05rem;
}

/* Home CTA band "Non sei ancora iscritto?" (siteIntro + .icfp-cta-band) — banda scura contenuta */
.sp-main-content-top.icfp-cta-band{
	background: linear-gradient( 135deg, #0f3f2c 0%, #2f7e5e 100% );
	color: #ffffff;
	border-radius: calc( 5px * 4 );
	margin: 0 auto calc( 30px * 1.5 );
	max-width: 1000px;
	padding: calc( 30px * 1.5 ) 15px !important;
}

@media ( max-width: 1079px ) {
	.sp-main-content-top.icfp-cta-band{
		margin: 0 15px calc( 30px * 1.5 );
	}
}
.sp-main-content-top.icfp-cta-band .sp-main-content-top-title{ color: #ffffff; }
.sp-main-content-top.icfp-cta-band > div,
.sp-main-content-top.icfp-cta-band .icfp-cta-text{
	color: rgba( 255, 255, 255, .85 );
	max-width: 46ch;
}
.icfp-cta-btn{
	display: inline-block;
	margin-top: 15px;
	background: #ffffff;
	color: #2f7e5e;
	font-weight: 600;
	padding: calc( 5px * 2.4 ) calc( 30px * 1.2 );
	border-radius: 999px;
	transition: transform .2s, box-shadow .25s;
}
.icfp-cta-btn:hover{ transform: translateY( -2px ); box-shadow: 0 12px 26px -12px rgba( 0, 0, 0, .45 ); }

/* Hero photo: trattamento brand — velatura verde diagonale + scrim che sfuma nel bianco headline */
.slides .slide > img{
	filter: saturate( 1.08 ) contrast( 1.04 );
}
.slides::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background:
		linear-gradient( 115deg, rgba( 16, 63, 44, .58 ) 0%, rgba( 16, 63, 44, .14 ) 45%, rgba( 16, 63, 44, 0 ) 72% ),
		linear-gradient( 180deg, rgba( 16, 63, 44, .22 ) 0%, rgba( 16, 63, 44, 0 ) 38%, rgba( 16, 63, 44, .12 ) 74%, #ffffff 100% );
}

/* Dialog header: era #000000 (reso nero) → verde brand, conforme al template */
.sp-dialog-header{
	background: #2f7e5e;
	color: #ffffff;
}

/* Modale des sopra l'header: .splwrapper e header erano entrambi z-index 10000 (pari → l'header
   vinceva per ordine di paint e i campi in alto del dialog finivano sotto l'header). */
.splwrapper{ z-index: 10001; }
.sphere-dialog{ z-index: 10002; }

/* Dialog (modifica dati): larghezza contenuta su desktop + leggibilità label/helper
   (erano #b2b2b2 grigio chiarissimo). */
.sphere-dialog{ max-width: 760px; }
.sphere-dialog .fen-label,
.sphere-dialog .main-fen-label{
	color: #2c3a32;
	font-weight: 600;
}
.sphere-dialog .fen-field:focus ~ .fen-label{ color: #2f7e5e; }
.sphere-dialog .fen-helper{
	color: #51635a;
	font-size: 0.92rem;
}

/* Comparti: titolo distanziato, pill OUTLINE (no strisciatone verde), pill spaziate */
.sp-main-icon-intro .sp-intro{ margin-bottom: 30px; }
.sp-main-icon-box{
	margin: calc( 5px ) calc( 5px * 1.5 );
	background: #ffffff;
	color: #2f7e5e;
	border: 1px solid #2f7e5e;
	box-shadow: none;
}
.sp-main-icon-box:hover{
	background: #2f7e5e;
	color: #ffffff;
}
.sp-main-icon-box-icon,
.sp-main-icon-box-title{ color: inherit; }

/* Comparti: sottotitolo uniforme alla lead hero (era .sp-intro-subtitle italic+left) + icona pill visibile */
.sp-main-icon-intro .sp-intro-subtitle{
	width: 100%;
	font-style: normal;
	text-align: center;
	color: #5a6b60;
	font-size: 1.05rem;
	margin: 0 0 30px;
	padding: 0 15px;
	box-sizing: border-box;
}
.sp-main-icon-box-icon i{ color: inherit; }

/* ===== Strisciata news scorrevole (ticker) — home pubblica (mockup C) ===== */
.icfp-ticker{ 
  margin-bottom: calc( 15px * 2);
  margin-top: 15px;
}

.icfp-ticker-head{ 
	display: flex; 
	align-items: center; 
	justify-content: center;
	gap: 5px;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	color: #2f7e5e;
	margin-bottom: 15px;
}

.icfp-ticker-live{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2f7e5e;
	position: relative;
	flex: none;

}
.icfp-ticker-live::after{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: #2f7e5e;
	animation: icfp-ping 1.8s ease-out infinite;
}

@keyframes icfp-ping{

	0%{
		transform: scale(1);
		opacity: .6;
	}

	100%{
		transform: scale(3);
		opacity: 0;
	}
}

.icfp-ticker-mask{
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
	mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}

.icfp-ticker-track{
	display: flex;
	gap: 15px;
	width: max-content;
	animation: icfp-ticker-scroll 45s linear infinite;
}

.icfp-ticker-mask:hover .icfp-ticker-track{
	animation-play-state: paused;
}

@keyframes icfp-ticker-scroll{ to{ transform: translateX(-50%); } }

.icfp-ticker-item{
	display: inline-flex;
	align-items: center;
	gap:5px; white-space: nowrap;
	text-decoration: none;
	background: #ffffff;
	border: 1px solid rgba(11,26,18,.10);
	border-radius: 999px;
	padding: calc( 5px * 1.4 ) calc( 15px * 1.1 );
	box-shadow: 0 1px 4px rgba(6,59,34,.06);
	color: #000000;
	font-size: .9rem;
	transition: border-color .2s, box-shadow .2s;
}

.icfp-ticker-item:hover{
	border-color: #2f7e5e;
	box-shadow: 0 4px 12px rgba(6,59,34,.12);
}

.icfp-ticker-dot{
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2f7e5e;
	flex: none;
}

.icfp-ticker-cat{
	font-weight: 700;
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.icfp-ticker-text{ font-weight: 500; }

@media( prefers-reduced-motion: reduce ){
	.icfp-ticker-track{ animation: none; }
	
	.icfp-ticker-live::after{ animation: none; }
}

/* =========================================
   Dialog des (Modifica dati / Dati tessera / Reset password) — fix MOBILE (2026-06-08)
   I dialog Sphere sono draggable/resizable e posizionati via stili INLINE dal JS
   (sphere.dialog: position:fixed + top/left calcolati a runtime + width 90%). Su mobile
   risultava "grezzo" perché:
     - .sphere-dialog-content ha il padding COMMENTATO nel core (sp-site-layout-1.1) → campi attaccati ai bordi;
     - .splwrapper backdrop è semi-trasparente (#fafafa82 ≈ 51%) → la pagina/bottoni dietro trasparivano sul bordo;
     - offset/resize/auto-height (top:30px) → footer visibile sotto, dialog non a tutto schermo.
   Soluzione standard: modal a TUTTO SCHERMO su mobile (override degli inline JS con !important).
   :not(.sphere-dialog-dash) per non toccare la dash-bar.
   ========================================= */
@media ( max-width: 600px ) {
	/* backdrop pieno: niente pagina/bottoni che trasparono dietro */
	.splwrapper {
		background: rgba( 0, 0, 0, 0.55 ) !important;
	}
	/* dialog a tutto schermo, neutralizza drag/resize/offset inline del JS */
	.sphere-dialog:not(.sphere-dialog-dash):not(#sp-dialog) {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		transform: none !important;
		resize: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		display: flex !important;
		flex-direction: column !important;
	}
	/* header fisso in alto, niente cursore "move" */
	.sphere-dialog:not(.sphere-dialog-dash):not(#sp-dialog) .sp-dialog-header {
		flex: 0 0 auto;
	}
	.sphere-dialog:not(.sphere-dialog-dash):not(#sp-dialog) .sp-dialog-handle {
		cursor: default;
	}
	/* contenuto: riempie e scrolla, con respiro ai lati (il core ha il padding commentato) */
	.sphere-dialog:not(.sphere-dialog-dash):not(#sp-dialog) .sphere-dialog-content {
		flex: 1 1 auto !important;
		height: auto !important;
		max-height: none !important;
		padding: 15px !important;
		-webkit-overflow-scrolling: touch;
	}
	/* campi a piena larghezza con spazio verticale */
	.sphere-dialog:not(.sphere-dialog-dash):not(#sp-dialog) .des .fen {
		width: 100% !important;
		margin-bottom: 15px;
	}
	.sphere-dialog:not(.sphere-dialog-dash):not(#sp-dialog) .des .sp-button {
		width: 100%;
	}
}

/* =========================================================================
   Bottoni "Login Google" (fase 3) — brand-compliant, logo G multicolor inline (no file)
   Resi su <a> launcher-link verso URL puliti:
     - "Accedi con Google"  → /google-login  (box login, pubblico → googleLoginStart)
     - "Collega Google"     → /google-link   (area riservata → googleLinkStart)
   Targettati per href (jerda setta solo l'href dell'item) + classe opz. .icfp-google-btn.
   White button da linee guida Google; vince sul verde .sp-button con override mirati.
   ========================================================================= */
.icfp-google-btn,
.sp-login-box a[href*="googlecallback"],
.sp-login-buttons a[href*="googlecallback"],
.icfp-profile-actions a[href*="google-link"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: calc( 5px * 2 );
	min-height: 40px;
	padding: 0 calc( 15px * 0.8 );
	background: #ffffff !important;
	color: #3c4043 !important;
	border: 1px solid #dadce0 !important;
	border-radius: 4px;
	box-shadow: none !important;
	font-family: Montserrat, "Roboto", Arial, sans-serif;
	font-size: 14px !important;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .15px;
	text-decoration: none;
	text-transform: none !important;   /* niente UPPERCASE ereditato da .sp-button → "Accedi con Google" */
	white-space: nowrap;               /* niente testo a capo su 3 righe */
	cursor: pointer;
	transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.icfp-google-btn:hover,
.sp-login-box a[href*="googlecallback"]:hover,
.sp-login-buttons a[href*="googlecallback"]:hover,
.icfp-profile-actions a[href*="google-link"]:hover {
	background: #f7fafe !important;
	border-color: #d2e3fc !important;
	box-shadow: 0 1px 2px rgba( 60, 64, 67, .18 ) !important;
}
/* logo G ufficiale (4 colori) come ::before, SVG inline in data-URI */
.icfp-google-btn::before,
.sp-login-box a[href*="googlecallback"]::before,
.sp-login-buttons a[href*="googlecallback"]::before,
.icfp-profile-actions a[href*="google-link"]::before {
	content: "";
	/* un reset core su .sp-button::before/.sp-scale::before mette display:none + position:absolute
	   (effetto scale) → la G non dipingeva e finiva in un angolo. La riporto in flusso flex. */
	display: inline-block !important;
	position: static !important;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* separatore opzionale "oppure" sopra il bottone nel box login */
.icfp-oauth-sep {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 15px 0;
	color: #b2b2b2;
	font-size: .82rem;
	text-transform: uppercase;
	letter-spacing: .08em;
}
.icfp-oauth-sep::before,
.icfp-oauth-sep::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: #e3e3e3;
}
/* box login: ogni bottone è in un proprio wrapper .sp-login-buttons dentro l'outer .sp-flex-space-around.
   Per mettere "Accedi con Google" su una RIGA PROPRIA a tutta larghezza sotto ISCRIVITI/ACCEDI:
   (1) l'outer deve poter wrappare; (2) il wrapper che contiene l'anchor googlecallback va a flex-basis 100%. */
.sp-login-box .sp-flex-space-around {
	flex-wrap: wrap !important;
	row-gap: calc( 5px * 1.6 );
}
.sp-login-box .sp-login-buttons:has( a[href*="googlecallback"] ) {
	flex: 0 0 100% !important;
	width: 100% !important;
	order: 9;              /* sotto gli altri */
	margin-top: calc( 5px * 1.2 );
}
/* ISCRIVITI / ACCEDI: ciascun wrapper cresce a riempire metà riga → i due bottoni
   "arrivano ai lati" coprendo la stessa larghezza totale del bottone Google sotto
   (il bottone interno ha già .sp-full-width, quindi riempie il wrapper). */
.sp-login-box .sp-flex-space-around > .sp-login-buttons:not( :has( a[href*="googlecallback"] ) ) {
	flex: 1 1 0 !important;
}

/* PWA — bottone "Installa app" (desktop, iniettato in .icfp-welcome dal JS) */
.icfp-pwa-install {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 20px;
	background: #5a6b60;
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}
.icfp-pwa-install:hover { background: #4a5a50; transform: translateY(-1px); }
.icfp-pwa-install i { font-size: 15px; }

/* Toast esito login Google (iniettato da iscrittiCislFP.js su #google-linked / #google-login) */
.icfp-toast {
	position: fixed;
	top: 15px;
	left: 50%;
	transform: translate( -50%, -20px );
	z-index: 100000;
	display: flex;
	align-items: center;
	gap: calc( 5px * 1.6 );
	background: #2f7e5e;
	color: #ffffff;
	padding: calc( 5px * 2 ) calc( 15px * 1.1 );
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba( 0, 0, 0, 0.22 );
	font-weight: 600;
	font-size: 0.95rem;
	max-width: 90vw;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}
.icfp-toast.icfp-toast-in {
	opacity: 1;
	transform: translate( -50%, 0 );
}
.icfp-toast i { font-size: 1.25em; flex: 0 0 auto; }
.icfp-toast span { text-align: left; line-height: 1.3; }
/* variante warning/errore (rosso) per gli esiti negativi del login Google */
.icfp-toast.icfp-toast-warn { background: #b3261e; cursor: pointer; }

/* PWA — hint istruzioni per browser senza install nativo (Firefox/Safari desktop) */
.icfp-pwa-hint {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 14px;
	max-width: 580px;
	background: #eef3f0;
	border: 1px solid #d9e4dd;
	border-radius: 8px;
	color: #5a6b60;
	font-size: 13px;
	line-height: 1.45;
}
.icfp-pwa-hint i { margin-top: 2px; color: #7a8a80; }
.icfp-pwa-hint b { color: #4a5a50; }

/* PWA — barra affordance install in fondo, prima del footer */
.icfp-pwa-bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 16px;
	text-align: center;
}
.icfp-pwa-bar .icfp-pwa-install,
.icfp-pwa-bar .icfp-pwa-hint { margin-top: 0; }

/* PWA bar: sfondo verdino → continua il verde fino al footer (no buco bianco) */
.icfp-pwa-bar { background: #e8f2ec; }
.icfp-pwa-bar .icfp-pwa-hint { background: #fff; border-color: #d4e3da; }

/* =========================================================================
   Consenso privacy post-login (.sp-privacy) — fix MOBILE.
   Su mobile .sp-privacy e il .des interno collassavano a width:0 → la label
   dello switch andava a capo 1 parola/riga e il bottone "Conferma" si
   schiacciava (infruibile). Su desktop era ok → fix solo sotto i 768px.
   ========================================================================= */
@media ( max-width: 768px ) {
	/* ROOT CAUSE: la regola base .sp-privacy ha "padding: 0 calc(300px) calc(90px)"
	   → con box-sizing:border-box l'area contenuto collassava a 0px su mobile.
	   Azzero i 300px laterali (lascio respiro 15px) e riduco il fondo. */
	.sp-privacy { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; overflow-x: hidden; padding: 0 15px 24px !important; }
	.sp-privacy .des { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
	.sp-privacy .des > .sp-flex { width: 100% !important; max-width: 100% !important; flex-wrap: wrap; }
	/* in flex il width:100% si comprime → forzo flex-basis 100% + niente shrink */
	.sp-privacy .fen { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; }
	/* label leggibile a tutta larghezza, toggle a sinistra */
	.sp-privacy .fen-check-label { display: block; width: 100%; max-width: 100%; white-space: normal; word-break: normal; text-align: left; line-height: 1.45; box-sizing: border-box; }
	/* bottone Conferma: largo a sufficienza, testo non sborda */
	.sp-privacy .sp-button { width: auto; min-width: 150px; max-width: 100%; padding: 12px 22px; white-space: nowrap; box-sizing: border-box; }
}