/* 1) RESET E STRUTTURA GENERALE */

/* imposto il colore di sfondo della pagina */
body {
    background-color: #e2c8e0;
}

/* 1.1) TITOLI E TESTO */

/* titoli in h1 (titolo della pagina aperta) */
h1 {
    background-color: #f4e1f1;
    color: #392966;
    font: 46px Candara, sans-serif;
    text-align: center;
    font-weight: bold;
}

/* titoli in h3 (spiegazione del paragrafo) */
h3 {
    color: #392966;
    font: 22px Candara, sans-serif;
    font-style: italic;
    text-decoration: underline;
}

/* paragrafo */
p {
    color: black;
    font: 18px Candara, sans-serif;
    text-align: justify;
}

/* colore dei testi delle liste liste */
li {
    color: #693F86;
}



/* 2) HEADER + MEGA MENU (NAVBAR) */

/* 2.1) HEADER E LOGO */

/* barra superiore generale */

@media (min-width: 1025px) {
	.header-bar {
		position: sticky;				/* faccio in modo che rimanga "incollata" in alto */
		top: 5px;						/* spazio dal bordo superiore */
		z-index: 6000;					/* posizione rispetto allo schermo in profondità */
		display: flex;					/* posizionamento flessibile */
		align-items: center;			/* allineamento centrale */
		height: 55px;					/* altezza */
		background-color: transparent;	/* sfondo trasparente */
	}
}

/* logo */
.header-bar .logo {
    flex: 0 0 auto;			/* faccio in modo che non cresca e che non si rimpicciolisca */
    margin-left: 10px;		/* spazio a sx */
    display: flex;			/* posizionamento flessibile */
    align-items: center;	/* allineamento centrale */
}

/* impostazioni immagine da inserire dentro il "logo" */
.header-bar .logo img {
    height: 60px;				/* altezza */
    width: auto;				/* larghezza automatica */
    display: block;				/* posizionamento bloccato/fisso */
    background-color: #e2c8e0;	/* colore di sfondo */
    border-radius: 50%;			/* bordi tondi: viene un cerchio */
    padding: 2px;				/* spazio interno */
}


/* 2.2) MEGA-MENU E NAVBAR */

/* colore di sfondo e font del MEGA-MENU (.mega-menu -> elemento HTML con classe "mega-menu" che troviamo dopo nel codice HTML) */
/* posizionamento flessibile e dispozione centrale, altezza e spazio a sinistra */
/* aggiungo animazione per mobile (a tutte le proprietà con velocità 1s e accelerazione tra parentesi) */
.mega-menu {
    background-color: #543e8e;
    font: 20px Candara, sans-serif;
    flex: 1;
    display: flex;
    align-items: center;
    height: 55px;
	margin-left: 0;
	transition: all 1s cubic-bezier(.215, .61, .355, 1); /* parte veloce e rallenta */
}

/* lista principale */
/* modifico elemento "menu" che si trova dentro la classe "mega-menu" */
/* posiziono il menù in orizzontale (tolgo "pallini" della lista: list-style: none) e in alto nella pagina (display: flex); sistemo i margini */
/* con margin:0 tolgo margine esterno (mi piace di più con spazio, quindi tolgo); con padding: 0 tolgo spazio interno a sx */
.mega-menu .menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

/* singolo elemento menu */
/* seleziono tutti gli elementi contenuti nella classe "mega-menu" e faccio in modo che abbia una posizione relativa assoluta */
.mega-menu .menu-item {
    position: relative;
}

/* evita sovrapposizioni nei dropdown */
.mega-menu .menu-item:hover,
.mega-menu .menu-item:focus-within {
    z-index: 2000;
}

/* link principali */
/* seleziono tutti gli elementi link "a" contenuti nella classe "mega-menu" */
/* faccio in modo che tutta l'area possa venire cliccata (display: block), impostando la dimensione degli spazi interni al blocco */
/* scelgo colore testo e tolgo la sottolineatura del link (text-decoration: none) */
/* animazione fluida con cambio colore di sfondo quando passo sopra con mouse */
.mega-menu .menu-item a {
    display: block;
    padding: 15px 20px;
    color: #f4e1f1;
    text-decoration: none;
    transition: background 0.3s;
}

/* hover voce menu */
/* cosa succede quando passo sopra con il mouse? */
/* applico uno stile diverso: cambio colore dello sfondo e faccio la stessa cosa anche quando la pagina è attiva */
.mega-menu .menu-item:hover > a,
.mega-menu .menu-item.active > a {
    background-color: #63499f;
}



/* 3) SUBMENU (MEGA DROPDOWN) */

/* SUBMENU con colonne */
/* definisco "SUBMENU" che è un elemento della classe "mega-menu" */
/* con "display: none" nascono inizialmente il sottomenu e lo posiziono sotto l'elemento padre (position: absolute e top: 100%) */
/* -> senza "absolute" diventa tutto grande; senza 100% non cambia molto, ma evito che si modifichi con altri dispositivi */
/* lo allieno sotto quello padre (left: 0), scelgo il colore di sfondo, la larghezza, il font e aggiungo uno spazio interno di 20px */
/* per bellezza metto una piccola ombra con box-shadow e lo posiziono sopra gli altri elementi della pagina con z-index */
/* metto spazio di 20px tra le colonne e dispongo elementi in orizzontale con "flow-direction: row". ATTENZIONE: funziona solo con "flex" */
.mega-menu .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 600px;
    padding: 20px;
    background-color: #63499f;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	font: 16px Candara, sans-serif;
    z-index: 1000;
    flex-direction: row;
    gap: 20px;
}

/* SUBMENU senza titolo (compatto) */
/* faccio la stessa cosa per il sottomenu senza titolo, il SUBMENU NOTITLE, modificandone la larghezza */
.mega-menu .submenunotitle {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
	width: auto;
    min-width: max-content;
    background-color: #63499f;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    flex-direction: column;
	font: 16px Candara, sans-serif;
    padding: 0;
    z-index: 1000;	
}

/* mostra submenu al passaggio mouse (solo su dispositivi che non siano smartphone) */
@media (min-width: 1025px) {

    .mega-menu .menu-item:hover .submenu,
    .mega-menu .menu-item:hover .submenunotitle {
        display: flex;
    }

}


/* 3.1) COLONNE SUBMENU  */

/* seleziono ogni colonna del sottomenu e imposto lo spazio che devono avere: tutte uguali allo spazio disponibile */
.mega-menu .submenu-column {
    flex: 1;
}

/* titoli colonne */
/* scelgo come modificare le scritte di ogni elemento del sotto menu (titoli in h2, tolgo il margine superiore e scelgo il colore) */
.mega-menu .submenu-column h2 {
    margin: 0;
    color: #f4e1f1;
    white-space: nowrap; /* evita a capo */
}

/* lista colonne */
/* nella lista del sottomenu, tolgo i pallini della lista, tolgo lo spazio interno e sistemo i margini */
.mega-menu .submenu-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* link submenu */
/* per tutti i link della lista scelgo il colore, tolgo la sottolineatura, rendo cliccabile e fluido tutto il dispaly, sistemo spazio interno */
.mega-menu .submenu-column ul li a {
    color: #ddd;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: color 0.3s;
}

/* elementi non cliccabili */
/* faccio la stessa cosa per le materie (non cliccabili) */
.mega-menu .submenu-column ul li {
    color: #ddd;
    padding: 5px 0;
}

/* hover link submenu */
/* faccio in modo che il testo del sottomenu diventi bianco (#fff) e in grassetto quando ci passo sopra con il mouse */
.mega-menu .submenu-column ul li a:hover {
    color: #fff;
    font-weight: bold;
}


/* 3.2) COLONNE SUBMENU SENZA TITOLO */

/* nella lista del sottomenu senza titolo, tolgo i pallini della lista, tolgo lo spazio interno e sistemo i margini */
.mega-menu .submenunotitle-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* per tutti i link della lista scelgo il colore, tolgo la sottolineatura, rendo cliccabile e fluido tutto il dispaly, sistemo spazio interno */
.mega-menu .submenunotitle-column ul li a {
    color: #ddd;
    text-decoration: none;
    display: block;
    padding: 12px 20px;
    white-space: nowrap;
    transition: color 0.3s;
}

/* faccio in modo che il testo del sottomenu senza titolo diventi bianco (#fff) e in grassetto quando ci passo sopra con il mouse */
.mega-menu .submenunotitle-column ul li a:hover {
    color: #fff;
    font-weight: bold;
}



/* 4) HAMBURGER */

.hamburger {
	display: none;
}



/* 5) APERTURA DELLA DOMANDE PRESENTI NELLA FAQ */

/* creo una classe chiamata "gowp-accordion", cioè un contenitore che può essere espanso una volta cliccato o toccato su un touch screen */
.gowp-accordion {
	background: #f4e1f1; 					/* imposto il colore di sfondo */
	color: #63499f; 						/* imposto il colore del titolo, cioè della scritta che verrà visualizzata nel contenitore */
	border: 3px solid #63499f; 				/* imposto il colore del bordo del contenitore e il suo spessore*/
	border-radius: 5px; 					/* rendo gli angolini del bordo arrotondati */
	font: 22px Candara, sans-serif;			/* dimensione e tipologia del font */
	font-weight: 700;						/* testo in grassetto */
	margin: 0 auto;							/* sistemo i margini e lo centro */
	padding: 10px 20px;						/* sistemo gli spazi interni */
	width: 90%;								/* sistemo la dimensione */
	max-width: 1000px;
	cursor: pointer;						/* il cursore diventa una manina quando ci passo sopra */
	transition: all 0.7s ease-in-out; 		/* animazione e durata */
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);	/* piccola ombra attorno */
}

/* creo un'animazione al passaggio del mouse: quando ci passo su, il testo dentro al riquadro si sposta un po' più a sinistra */
@media (mix-width: 769px) {
	
	.gowp-accordion:hover {
		padding-left: 25px;
	} 

}

/* creo un'animazione quando clicco sopra con il mouse: il triangolino che segna la domanda, si gira di 90° */
.gowp-accordion details[open] > summary:before {
	transform: rotate(90deg);
}

.gowp-accordion {
	transition: all 0.3s ease;
}

details[open] .gowp-accordion {
	background: #ead0e7;
}

/* definisco le caratteristiche del testo contenuto all'interno della risposta */
.gowp-accordion-text {
	background: #f4e1f1; 				/* imposto il colore dello sfondo del testo */
	color: black; 						/* imposto il colore del testo */
	font: 18px Candara, sans-serif;		/* font e dimensione testo */
	margin: 10px auto;					/* sistemo i margini esterni e lo centro*/
	padding: 10px 20px;					/* sistemo lo spazio interno */
	width: 75%;							/* sistemo la dimensione */
	max-width: 1000px;
	border-radius: 5px;					/* creo gli angoli smussati */
	text-align: justify;				/* giustifico il testo */
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease;			/* miglioro transizione */
}

details[open] .gowp-accordion-text {
	max-height: 500px;
	opacity: 1;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* se è presente un link, lo "nascondo" togliendo la sottolineatura e cambiandone il colore */
.gowp-accordion-text a {
	color: #800080;
	text-decoration:none;
}



/* 6) BOX ALLA FINE DELLA PAGINA */

/* creo una classe per un box da posizionare alla fine della pagina, seguendo le stesse "regole" di quello nella Home */
.box-domanda-finale {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    width: 75%;
    max-width: 1000px;
    margin: 40px auto;
    padding: 5px 15px;
    background-color: #f4e1f1;
    border-radius: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* se è presente un link, lo "nascondo" togliendo la sottolineatura e cambiandone il colore */
.box-domanda-finale a {
	color: #800080;
	text-decoration:none;
}



/* 7) CREARE UNA LINEA CHE FUNGE DA DIVISORE */
.divisore {
  width: 90%;
  height: 2px;
  background-color: #63499f;
  margin: 20px auto;
}


@media (max-width: 1024px) {
	
	html, body {
		overflow-x: hidden;
	}
	
	p {
		text-align: left;
	}
	
	h1 {
		font-size: 28px;
		padding: 5px;
	}
	
	body {
		padding-top: calc(55px + 10px);
	}
	
	.header-bar {
		background-color: #543e8e;
		position: fixed;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 70px;
		z-index: 9999;
		padding-top: env(safe-area-inset-top);
		box-shadow: 0 2px 10px rgba(0,0,0,0.15);
	}
	
	.header-bar .logo {
		margin-top: 10px;
		margin-left: 20px;
	}
	
	/* menu al lato */
	.mega-menu {
		position: fixed;
		top: 0;
		right: -100%;
		height: 100vh;
		background: #543e8e;
		display: flex;
		flex-direction: column;
        justify-content: flex-start;
		align-items: center;
        padding-top: 70px;
		width: 70%;
		max-width: 320px;
	}	
	
	.mega-menu--open {
		right: 0%;
	}
	
	/* liste menu */
	.mega-menu .menu {
		margin: 0;
		padding: 0;
		display: flex;        
		flex-direction: column;
        width: 100%;
	}
	
	/* imposto larghezza degli item massima */
    .mega-menu .menu-item {
        width: 100%;
    }

	/* sistemo bordi e posizionamento centrale dei link */
    .mega-menu .menu-item a {
        padding: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
    }
	
	/* submenu con e senza titolo */
	/* tolgo il posizionamento assoluto, faccio in modo che prenda la massima larghezza disponibile, metto per colonna e sistemo bordi/ombre */
    .mega-menu .submenu {
        position: static;
        width: 100%;
        flex-direction: column;
        padding: 0;
        box-shadow: none;
		gap: 5px;
		display: none;
    }
	
	.mega-menu .submenu.submenu-open {
		display: flex;
	}

	/* aggiungo spazio verticale tra le colonne */
    .mega-menu .submenu-column {
        padding: 0;
    }
	
	.mega-menu .submenu-column h2 {
        margin: 0;
		font-size: 20px;
    }    
	
	/* nasconde le materie */
    .mega-menu .submenu-column ul {
        display: none;
	}
	
	/* faccio lo stesso con il sottomenu senza titolo */
    .mega-menu .submenunotitle {
        position: static;
        width: 100%;
        flex-direction: column;
        padding: 0;
        box-shadow: none;
    }

    .mega-menu .submenunotitle-column {
        padding: 10px 0;
    }	
	
	/* hamburger */
	.hamburger{
		display: block;
		width: 30px;
		height: 30px;
		position: absolute;
		top: 30px;
		right: 20px;
	}
	
	.hamburger span {
		background: #f4e1f1;
		height: 3px;
		width: 100%;
		display: block;
		margin-bottom: 5px;
		transition: background 0.3s;
	}
	
	.hamburger.open span {
		background: #ddd;
	}
	
	/* faq */
	.gowp-accordion {
		width: 100%;
		margin: 0;
		padding: 12px;
		font-size: 18px;
		box-sizing: border-box;
		overflow-wrap: break-word;
	}

	.gowp-accordion-text {
		width: 100%;
		margin: 10px 0;
		padding: 12px;
		font-size: 15px;
		box-sizing: border-box;
	}

	details {
		width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}

	summary {
		list-style: none;
	}

	summary::-webkit-details-marker {
		display: none;
	}

	.gowp-accordion:hover {
		padding-left: 25px;
	}
	

	.gowp-accordion,
	.gowp-accordion-text{
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
	}
	
	/* box finale */
	.box-domanda-finale {
		width: 92%;
		padding: 15px;
		box-sizing: border-box;
	}
}