/* 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) BOX RECENSIONI DA INSERIRE */

/* sistemo la dimensione del riquadro per inserimento recensioni e lo centro nella pagina, faccio in modo che non venga ridimensionato */
/* cambio colore al bordo e aggiungo l'ombra */
fieldset {
	width: 60%;
	margin: 0 auto;
	box-sizing: border-box;
	border: 2px solid #693f86;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
	border-radius: 10px;
	background: #f4e1f1;
}

/* sistemo la legenda, cambiando font, dimensione e colore */
legend {
	font: 18px Candara, sans-serif;
	color: #392966;
	font-weight: bold;
}

/* modifico font del form: dell'etichette all'inizio dell'input */
form {
	font: 18px Candara, sans-serif;
}

/* sistemo tutti i label e i vari input, posizionando il blocco in in punto fisso, impostando la dimensione max e centrandoli */
/* faccio in modo che ci stia tutto entro i bordi ("border-box") */
label, input[type=text], input[type=tel], input[type=email], textarea {
	display: block;
	box-sizing: border-box;
	width: 75%;
	margin: 0 auto;
}

/* sistemo spazio interno degli input, modifico bordi cambiando colore e spessore, faccio bordi arrotondati e faccio stare dentro tutto */
/* sistemo i margini e permetto di ridimensionare il box solo in verticale, senza modificarne la larghezza ("resize") */
/* modifico colore di sfondo, font e colore di ciò che andrà scritto all'interno */
input[type=text], textarea {
	padding: 10px;
	border: 1px solid #693f86;
	border-radius: 3px;
	box-sizing: border-box;
	margin-top: 5px;
	margin-bottom: 15px;
	resize: vertical;
	font: 14px Candara, sans-serif;
	font-weight: bold;
	background: #f7e9f0;
	color: #392966;
}

/* modifico il colore delle scritte "placeholder" dei vari box */
input::placeholder, 
textarea::placeholder {
	color: #693f86;
	font-style: italic;
	font-weight: 400;
}

/* sistemo il pulsante del "button", cambiando colore dello sfondo e colore della scritta, modifico spazio interno, tolgo il bordo */
/* faccio gli angoli arrotondati e con "pointer" faccio in modo che il cursore diventi una manina quano ci passa sopra */
button {
	font: 16px Candara, sans-serif;
	background: #63499f;
	color: #f4e1f1;
	padding: 10px 20px;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

/* sistemo come diventa il bottone quando ci clicco su */
button:hover {
	background: #bc96c0;
	color: #392966;
	font-weight: bold;
	border: 1px solid #63499f;
}

/* modifico il "select", il box per la selezione del voto e imposto la manina nel cursore */
.recensione select {
	display: block;
	width: 50%;
	margin: 5px 0 20px 12.5%;
	padding: 10px;
	box-sizing: border-box;
	font: 14px Candara, sans-serif;
	font-style: italic;
	background: #f7e9f0;
	color: #392966;
	border: 1px solid #693f86;
	border-radius: 3px;
	cursor: pointer;
}

/* faccio in modo che il testo delle opzioni della stellina sia in grassetto (oltre che in corsivo, come tutto il resto) */
.recensione select option {
	font-weight: bold;
}



/* 6) ASTERISCO CAMPI OBBLIGATORI */
.required {
  color: #800080;
}



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



/* 8) BOX CON LE RECENSIONI DI SKUOLA.NET ("DICONO") E PER QUELLE CHE ARRIVERANNO */

/* creo un box per inserire le recensioni già fatte, sistemo larghezza massima, margini, colore sfondo, angolo e ombra */
.recensione-box {
    width: 80%;
    margin: 15px auto;
    padding: 18px;
    background: #f7e9f0;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* sistemo il titolo che deve avere */
.recensione-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: #392966;
}

/* sistemo il testo della recensione vera e propria */
.recensione-testo {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
}



/* 9) BOX DELLE RECENSIONI DEL SITO */

/* creo cosa succede se ancora non ci sono recensioni: box con bordino a trattini, colore sfondo, colore testo... */
.empty-state {
    text-align: center;
    color: #693f86;
    font-style: italic;
    padding: 20px;
    background: #f7e9f0;
    border: 1px dashed #693f86;
    border-radius: 6px;
    width: 80%;
    margin: 20px auto;
}

/* creo una piccola classe per mettere il titoletto della parte con il box delle recensioni */
.recensione-scritta {
	margin-top: 20px;
} 

/* sistemo come deve essere il paragrafo/titoletto della sezione */
.recensione-scritta p {
	color: #392966;
	margin-left: 8.5%;
	font: 20px Candara, sans-serif;
	font-style: italica;
	font-weight: bold;
}



/* 10) 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;
}



@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;
	}
	
	/* box recensione da inserire */
	/* evita sbordi */
	* {
		box-sizing: border-box;
	}

	/* form mobile */
	form,
	fieldset {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		border: none;
	}

	/* box interno */
	fieldset {
		width: calc(100% - 20px);
		margin: 10px auto;
		padding: 15px;
		border: 2px solid #693f86;
		border-radius: 10px;
		background: #f4e1f1;
		box-shadow: 0 4px 8px rgba(0,0,0,0.15);
	}

	/* label */
	label {
		display: block;
		width: 100%;
		margin-top: 12px;
		font-size: 16px;
	}

	/* input e textarea */
	input[type=text],
	textarea,
	select {
		width: 100%;
		max-width: 100%;
		display: block;
		margin: 5px 0 15px 0;
		padding: 12px;
		font-size: 16px;
		border: 1px solid #693f86;
		border-radius: 6px;
		background: #f7e9f0;
		color: #392966;
	}

	/* textarea */
	textarea {
		min-height: 140px;
		resize: vertical;
	}

	/* bottone */
	button {
		width: 100%;
		padding: 14px;
		font-size: 16px;
		margin-top: 10px;
	}

	/* recensioni visualizzate */
	.recensione-box {
		width: calc(100% - 20px);
		margin: 15px auto;
		padding: 15px;
	}

	/* titolo recensioni */
	.recensione-scritta p {
		margin-left: 10px;
		margin-right: 10px;
	}
	
}