/* 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: 24px Candara, sans-serif;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 0;
}

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



/* 4) SEZIONE TITOLO "SCUOLE SUPERIORI" */

/* creo una classe chiamata "box-livello-superiori" in cui poter inserire il testo "scuole superiori" */
.box-livello-superiori {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin: 35px auto;
	padding: 10px 20px;
	width: auto;
	max-width: 250px;
	background: #bc96c0;
	color: #392966;
	font: 32px Candara, sans-serif;
	font-weight: bold;
	border: 1px solid #63499f;
	border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}



/* 5) CALENDARIO, DIVISO NEI VARI STEP DELLA PRENOTAZIONE */

/* sistemo allineamento, font, colori, bordi, larghezza, ecc... del box che apparirà in cui poter selezionare la durata della lezione */
.step1 {
	display: flex;
	justify-content: center;
	text-align: center;
	margin: 0 auto;
    background: #f4e1f1;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);	
    max-width: 500px;
}

/* modifico font e margini del paragrafo che verrà scritto al suo interno */
.step1 p {
	margin: 5px;
	padding: 0;
	font: 20px Candara, sans-serif;
}

/* modifico il "select", il box per la selezione della durata e imposto la manina nel cursore */
.step1 select {
	margin-top: 20px;
	font: 16px Candara, sans-serif;
	background: #fff;
	color: #693F86;
	border: 1px solid #693F86;
	border-radius: 3px;
	cursor: pointer;
}

/* preparo il secondo step, ovvero il calendario, e faccio in modo che non venga visualizzato all'inizio (display: none) */
.step2 {
    display: none;
    margin-top: 20px;
}

/* modifico font e margini del paragrafo che verrà scritto sopra il calendario */
.step2 p {
	margin: 5px;
	padding: 0;
	font: 20px Candara, sans-serif;
}

.step2 button {
	display: flex;
	margin: auto;
    padding: 12px 24px;
    font: 18px Candara, sans-serif;
    background-color: #543e8e;
    color: #f4e1f1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.step2 button:hover {
    background-color: #63499f;
}



/* 7) CLASSE TESTO DI COLORE DIVERSO */

.testo-colore {
	color: #800080;
	font-weight: bold;
}



@media (max-width: 1024px) {
	
	html, body {
		overflow-x: hidden;
		margin: 0;
		padding: 0;
	}
	
	p {
		text-align: center;
		font-size: 18px;
	}
	
	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 medie */
	.box-livello-superiori {
		font-size: 24px;
		max-width: 180px;
	}
	
	/* selezione durata */
	.step1 {
		margin-left: 15px;
		margin-right: 15px;
	}
	
	.step1 p {
		text-align: center;
		font-size: 18px;
	}
	
	.step1 select,
	.step1 select option {
		font-size: 14px;
		font-family: Candara, sans-serif;
	}
	
	.step1 select {
		height: 35px;
	}
	
	/* blocco scroll quando è aperto il menu */
	.no-scroll {
		overflow: hidden;
	}
	
}