/* ===== RESET ===== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* ===== SFONDO ===== */

html, body {

    height: 100%;

    font-family: Arial, Helvetica, sans-serif;



    background: radial-gradient(circle at 50% 30%, #5a5a5a, #1f1f1f);

    color: #f0f0f0;

}



/* ===== MENU ===== */

.main-menu {

    background: linear-gradient(to bottom, #2a2a2a, #111);

    padding: 16px 0;

    border-bottom: 1px solid #000;



    position: relative;

    z-index: 1000;

}

.main-menu > ul > li {

    position: relative;   /* 🔥 QUESTO È IL FIX */

}



.main-menu > ul {

    display: flex;

    justify-content: center;

    align-items: center;

    list-style: none;

}



/* elementi principali */

.main-menu > ul {

    display: flex;

    justify-content: center;

    align-items: center;

    list-style: none;



    gap: 40px;   /* 🔥 SPAZIO TRA LE VOCI */

}



/* link */

.main-menu a {

    color: #e0e0e0;

    text-decoration: none;

    font-size: 15px;

    letter-spacing: 1px;

    padding: 0 10px;

    display: block;

}







/* hover */

.main-menu a:hover {

    color: #d4af37;

    text-shadow: 0 0 6px rgba(212,175,55,0.5);

}



/* ===== SUBMENU ===== */

.submenu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    background: linear-gradient(to bottom, #2a2a2a, #111);

    border: 1px solid #000;

    min-width: 220px;

    padding: 5px 0;

    z-index: 2000;

}



/* elementi submenu */

.submenu li {

    display: block;

}



/* link submenu */

.submenu a {

    display: block;

    padding: 10px 15px;

    font-size: 14px;

}



/* hover submenu */

.submenu a:hover {

    background: #333;

    color: #d4af37;

}



/* apertura CORRETTA */

.main-menu li:hover > .submenu {

    display: block;

}



/* livello 2 (laterale) */

.submenu .submenu {

    top: 0;

    left: 100%;

}



/* ===== CONTENUTO SENZA BOX ===== */

main {

    all: unset;

    display: block;

    text-align: center;

    padding-top: 80px;

}



/* testo stato */

main p {

    color: #cfcfcf;

    font-size: 14px;

    margin-bottom: 10px;

}



/* sottotitolo */

main h2 {

    font-size: 22px;

    margin-bottom: 40px;

}



/* stemma */

.stemma {

    width: 240px;

    display: block;

    margin: 0 auto 30px;



    filter:

        drop-shadow(0 15px 30px rgba(0,0,0,0.8))

        drop-shadow(0 0 20px rgba(255,215,0,0.15));

}



/* titolo */

main h1 {

    font-family: Georgia, "Times New Roman", serif;

    font-size: 46px;

    letter-spacing: 5px;



    color: #d4af37;



    text-shadow:

        2px 2px 0 #000,

        0 0 10px rgba(0,0,0,0.7),

        0 0 20px rgba(212,175,55,0.3);



    margin-top: 20px;

}

/* LI deve essere il riferimento */

.main-menu > ul > li {

    position: relative;

}



/* submenu */

.main-menu > ul > li > .submenu {

    display: none;

    position: absolute;



    top: 100%;

    left: 0;



    min-width: 220px;



    background: #1f1f1f;

    border: 1px solid #000;



    z-index: 999;

}



/* apertura SOLO del figlio diretto */

.main-menu > ul > li:hover > .submenu {

    display: block;

}



/* livello 2 */

.submenu li {

    position: relative;

}



.submenu li > .submenu {

    top: 0;

    left: 100%;

}

.modal {

    display: none;



    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;



    background: rgba(0,0,0,0.7);



    justify-content: center;

    align-items: center;



    z-index: 9999;

}



.modal-content {

    background: #2a2a2a;

    padding: 30px;

    border-radius: 10px;

}

/* POPUP LOGIN - Dimensioni maggiori e forma quadrata */

.modal {

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);

    justify-content: center;

    align-items: center;

}



.modal-content {

    background-color: #fefefe;

    padding: 50px;

    border: 2px solid #888;

    width: 500px;

    height: 500px;

    max-width: 90%;

    max-height: 90%;

    border-radius: 10px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.close {

    position: absolute;

    top: 20px;

    right: 30px;

    color: #aaa;

    font-size: 42px;

    font-weight: bold;

    cursor: pointer;

    transition: color 0.3s;

}



.close:hover,

.close:focus {

    color: #000;

}



.modal-content h2 {

    margin: 0 0 40px 0;

    font-size: 32px;

    color: #333;

    text-align: center;

}



.modal-content form {

    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 25px;

}



.modal-content input[type="text"],

.modal-content input[type="password"] {

    width: 100%;

    padding: 18px;

    font-size: 20px;

    border: 2px solid #ddd;

    border-radius: 5px;

    box-sizing: border-box;

    transition: border-color 0.3s;

}



.modal-content input[type="text"]:focus,

.modal-content input[type="password"]:focus {

    outline: none;

    border-color: #4CAF50;

}



.modal-content button {

    padding: 18px;

    font-size: 22px;

    background-color: #4CAF50;

    color: white;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    transition: background-color 0.3s;

    font-weight: bold;

}



.modal-content button:hover {

    background-color: #45a049;

}