/* REPLICA CSS CORTOLOVERE 2025
   Font utilizzati: Oswald (Titoli/Menu) e Roboto (Testi)
*/

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&family=Roboto:wght@300;400;700&display=swap');

:root {
    --turquoise: #00b1b9;
    --dark-grey: #333333;
    --light-grey: #f8f9fa;
    --nav-font: 'Oswald', sans-serif;
    --body-font: 'Roboto', sans-serif;
}

/* --- Impostazioni Generali --- */
body {
    font-family: var(--body-font);
    color: var(--dark-grey);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
}

/* --- Intestazione (Header) --- */
.main-header {
    background: #fff;
    padding-top: 10px;
}

.text-turquoise { 
    color: var(--turquoise) !important; 
}

/* --- Logo Section --- */
.logo-box { 
    display: inline-block; 
    text-align: center; 
    margin-bottom: 15px;
}

.logo-handwritten {
    font-family: 'Brush Script MT', cursive;
    font-size: 2.4rem;
    display: block;
    color: #000;
    transform: rotate(-10deg) translateY(15px);
    z-index: 2;
    position: relative;
}

.logo-eye {
    width: 90px; 
    height: 90px;
    border: 1.5px solid #000;
    border-radius: 50%;
    margin: 0 auto;
    background: radial-gradient(circle, #000 35%, transparent 36%);
    position: relative;
    z-index: 1;
}

.logo-location {
    color: var(--turquoise);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-top: 5px;
    letter-spacing: 1px;
}

/* --- Titolo Festival e Date --- */
.festival-title { 
    font-family: var(--nav-font);
    font-weight: 400; 
    line-height: 1;
    text-transform: uppercase;
    color: #1a1a1a;
    font-size: calc(1.5rem + 1vw);
}

.display-1.text-turquoise {
    font-family: var(--nav-font);
    font-weight: 700;
    line-height: 0.8;
}

.date-badges { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
}

.badge-item {
    background: var(--turquoise);
    color: #fff;
    padding: 2px 15px;
    font-family: var(--nav-font);
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.2;
    text-transform: lowercase; /* Il sito usa spesso il minuscolo per le date */
}

.year-display { 
    font-family: var(--nav-font);
    font-size: 3.5rem; 
    color: #1a1a1a; 
    font-weight: 400;
}

/* --- Navigazione (Menu) --- */
.border-top-turquoise { 
    border-top: 2px solid var(--turquoise) !important; 
    margin-top: 10px;
}

.custom-nav .nav-link {
    font-family: var(--nav-font);
    color: var(--dark-grey) !important;
    text-transform: uppercase;
    font-size: 1rem; 
    font-weight: 400;
    padding: 1rem 0.9rem !important;
    letter-spacing: 0.5px;
    transition: all 0.2s ease-in-out;
}

.custom-nav .nav-link:hover {
    color: var(--turquoise) !important;
}

/* Freccetta dropdown personalizzata */
.custom-nav .dropdown-toggle::after {
    border-top: 0.35em solid;
    border-right: 0.35em solid transparent;
    border-left: 0.35em solid transparent;
    vertical-align: middle;
    color: #ccc;
    margin-left: 8px;
}

/* --- Form di Iscrizione --- */
.form-container { 
    border-top: 4px solid var(--turquoise) !important; 
    background-color: var(--light-grey);
    padding: 40px !important;
}

.form-label {
    font-family: var(--nav-font);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    color: #555;
}

.form-control, .form-select {
    border-radius: 0;
    border: 1px solid #ddd;
    padding: 0.6rem;
}

.form-control:focus {
    border-color: var(--turquoise);
    box-shadow: 0 0 0 0.2rem rgba(0, 177, 185, 0.1);
}

.btn-turquoise {
    background-color: var(--turquoise);
    border-color: var(--turquoise);
    color: white;
    font-family: var(--nav-font);
    text-transform: uppercase;
    padding: 10px 40px;
    font-size: 1.1rem;
    border-radius: 0;
    transition: background 0.3s;
}

.btn-turquoise:hover {
    background-color: #008c92;
    border-color: #008c92;
    color: #fff;
}

.styled-hr {
    border: 0;
    border-top: 1px solid #ddd;
    margin: 40px 0;
}

/* --- Responsive Layout --- */
@media (max-width: 991px) {
    .year-display {
        font-size: 2.5rem;
    }
    .custom-nav .nav-link {
        padding: 0.5rem 0 !important;
        border-bottom: 1px solid #eee;
    }
    .badge-item {
        font-size: 1.1rem;
    }
}