/* tavolozza colore */
:root{
    --primary:#0953BA ;
    --secondary:#FFD21E  ;
    --accent:#8B0E00;    
    --light: #FFFFFF;
    --dark:#000224 ;
}

/* reset */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body{
    scroll-behavior: smooth;
}

li{
    list-style-type: none; } /* Con questo tolgo i pallini dalle liste */
a{
    text-decoration: none; /* Con questo tolgo la sottolineatura dai link */
}

img {    display: block; }

button {  display: block; }

.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* tipografia */

body{
    font-family: Montserrat, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

h1,h2,h3{
    font-family: 'Roboto Slab', serif;
    color: var(--primary);
    margin-bottom: 20px;
    margin-top: 20px; 
}

h1 { font-size: 2.2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }

p{
    font-size: 1.125em;
    margin-bottom: 15px;
}

.leading{
    font-size: 1.3em;
    line-height: 1.6em;
}

/* header */

header.cover{    
    background: var(--light);
    border-bottom: 5px solid var(--secondary); 
    min-height: 70px; 
    padding: 15px 0;
}

header .container{
    display: flex;
    justify-content: space-between; /* Con questo il logo sta a sinistra e il menu a destra */
    align-items: center;
    flex-wrap: wrap;
}

.cover__logo{
    display: flex;  
    align-items: center; 
    gap: 20px; 
}

.cover__logo img{ width: 60px; }

.cover__logo h2 { margin: 0; font-size: 1.8em; }

.cover__menu ul {
    display: flex;
    gap: 20px;
}

.cover__menu a {
    color: var(--primary);
    font-weight: 700;
}

.cover__menu a:hover { color: var(--accent); }

.cover__menu a.active {
    color: var(--secondary); 
    border-bottom: 2px solid var(--secondary);  /* Così mi sottolinea la pagina dove mi trovo */
    padding-bottom: 5px; 
}

/* Hero */

.hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 40px 0;
}

.hero__text {
    min-width: 0;
    flex: 1;
}

.hero__cover {
    min-width: 0;
    flex: 1;
}

.ant{ width: 100%; border-radius: 15px; }

/* Bottoni CALL TO ACTION Primary e Secondary */

.cta-group{
    display: flex;
    gap: 20px;
    margin-top: 20px;
}
.cta__primary, .cta__secondary{
    padding: 12px 24px;   
    border-radius: 8px;
    font-weight: 900;
     transition: all 0.3s ease;
}
.cta__primary{ background: var(--primary); color: var(--light); }

.cta__secondary{ background: var(--light); color: var(--primary); border: 1px solid var(--primary); }

/* Immagini sezioni */

.YP, .InterculturalNight, .info, .partecipare__foto {
    width: 60%;
    max-width: 400px;
    margin: 15px 0;
    border-radius: 10px;   
    border: none;              
    box-shadow: 0 10px 30px rgba(0,2,36, 0.15); /* Mi crea un'ombra */
}

.partecipare__link{
    background-color: var(--secondary);
    color: var(--primary);
    border-radius: 8px;
    font-weight: 900;
    padding: 10px 20px; 
    display: inline-block;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0,2,36, 0.15); 
}

/* SEZIONE CHI SONO */

.chi-sono {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 20px 30px; 
    margin: 20px auto;  
    max-width: 100%; /* Sfrutto tutto lo spazio del container */
    background-color: #f2f2f2; 
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    flex-wrap: wrap; /* Per adattare il contenuto su cellulare */
}

.chi-sono img {
    width: 180px;
    height: 180px;
    border-radius: 20%;
    border: 4px solid var(--secondary);
    object-fit: cover; /* Per evitare che la foto si schiacci */
}

.chi-sono-info {
    max-width: 600px;
    text-align: left;
    
}
.chi-sono-info h2 {
    margin-top: 0; 
    margin-bottom: 10px;
}

/* LA MAPPA */
.sezione-mappa {
    text-align: left;
    margin: 0 auto;
    padding-top: 10px;    
    padding-bottom: 60px;
}

.sezione-mappa h2 {
    margin-bottom: 10px;
    color: var(--primary);
}

.sezione-mappa p {
    margin-bottom: 30px;
    font-size: 1.1em;
}

.mappa-box {
    margin-top: 15px;     /* Mi serve per avvicinare la mappa al titolo */
    margin-left: 0;
    border: 4px solid var(--secondary); /* Cornice gialla */
    border-radius: 20px;               /* Angoli arrotondati */
    overflow: hidden;                  /* Taglio gli angoli della mappa per farli diventare tondi */
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    line-height: 0;                 /* Elimina spazi bianchi sotto la mappa */
}

 .mappa-box iframe {
    width: 100%; 
    height: 500px;
    border: none;
    display: block; 
}

.img-side {
    float: left;
    width: 250px;
    height: 250px;
    object-fit: cover;
    margin-right: 20px;
    margin-bottom: 15px;
    border-radius: 10px;
    box-shadow: none;
}

section {
    clear: both;
}

img.img-intera { 
    width: auto;  /*  Permette alla foto di allargarsi */
    height: 450px;
    max-width: 300px;  /* limite per non farla diventare gigante */
    object-fit: contain;
}

section .testo-centrato {
    margin-top: 65px;
}

 /* BOX INFORMATIVI  */

.info-wrapper {
    display: flex;
    align-items: center; 
    gap: 40px;              
    margin-top: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;         
}

.info-wrapper .img-side {
    float: none; 
    margin-bottom: 0;
}

.requisiti-box {
    background-color: rgba(255, 210, 30, 0.1);
    border: 2px solid var(--secondary);
    border-radius: 12px;
    padding: 20px;
    margin: 0; 
    max-width: 300px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    
}
.requisiti-box h2 {
    margin-top: 0;   /* Azzera lo spazio sopra "In breve" */
    margin-bottom: 10px;        
    text-align: center;   
    font-size: 1.2em;
      
}

.info-wrapper-partecipa {
    display: flex;
    align-items: stretch; /* Fa sì che i due box siano alti uguali */
    gap: 30px;
    margin: 40px 0;
}

.step-box, .youthpass {
    flex: 1; /* Divide lo spazio equamente (50% e 50%) */
    padding: 20px;
    border-radius: 12px;
    transition: all 0.3s ease; /* movimento fluido */
    cursor: default;
}

.step-box:hover, .youthpass:hover {
    transform: translateY(-10px); /* Sollevo il box di 10 pixel */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Aggiungo un'ombra */
}

.step-box {
    background-color: rgba(255, 210, 30, 0.1);
    border: 2px solid var(--secondary);
}

.requisiti-box.youthpass {
    background-color: rgba(9, 83, 186, 0.05);
    border: 2px solid var(--primary);
}


/* --- BOX COS'È ERASMUS+ --- */
.erasmus-info {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    background: var(--light);
    border-left: 5px solid var(--primary);
    border-radius: 12px;
    padding: 35px;
    margin: 40px auto;
}

/* GRID PAGINE: le icone tonde */

.grid-pagine {
    display: flex;
    justify-content: center; 
    gap: 30px;              
    flex-wrap: wrap;         
    margin: 40px 0;
}

.pagina-item {
    display: flex;
    flex-direction: column;
    align-items: center;    
    width: 240px;           
}

.pagina-item img {
    width: 200px ;  
    height: 200px ; 
    object-fit: cover;       
    border-radius: 50%;     
    border: 3px solid #fff;  
    box-shadow: 0 0 0 2px var(--secondary); 
    margin-bottom: 20px;     
}

.pagina-item .partecipare__link {
    display: flex;            
    align-items: center;
    justify-content: center;
    width: 150px;  
    height: 45px;             
    font-size: 13px;         
    padding: 5px 10px;       
    text-align: center;
    box-sizing: border-box;   
    transition: all 0.3s ease; 
}

.pagina-item .partecipare__link:hover {
    background-color: var(--primary); 
    color: var(--light);              
    transform: scale(1.05);    
}

.pagina-item .partecipare__link:active {
    background-color: var(--secondary); 
    transform: scale(0.95);   
}

/* FAQ SECTION */
.faq-section { margin: 50px 0; }

.faq-section h2 { color: var(--primary); margin-bottom: 25px; }

details {   /* Il tag details racchiude sia il titolo cliccabile che il contenuto nascosto */
    background: #f2f2f2;
    padding: 15px 20px;
    border-radius: 12px;
    margin-bottom: 15px;
    transition: 0.3s;
    border-left: 5px solid var(--secondary);
    cursor: pointer; /* Quando clicco sopra il cursore diventa una mano */
}

details[open] { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); } /* Quando clicco Lo sfondo cambia da grigio a bianco e aggiungo l'ombra*/

summary {  /*Il tag summary è la parte che rimane sempre visibile*/
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

summary::after { 
    content: '➔'; /* Con questo comando creo la freccia*/
    color: var(--accent); 
    transition: 0.3s; 
}

details[open] summary::after { transform: rotate(90deg); }  /* Quando clicco la freccia ruota verso il basso */


details p { margin-top: 15px; line-height: 1.6; color: #444; }


/* FORM CONTATTAMI */
.form-layout {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}

.form-text, .form-box { flex: 1; } /* iL Testo e IL Box occupano ciascuno metà spazio */

fieldset {
    border: 2px solid var(--secondary);
    border-radius: 12px;
    padding: 20px;
}

input, textarea {
    width: 100%;
    margin: 8px 0 15px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    display: block; /* Toglie il bisogno di <br> nell'HTML */
}

legend {
    font-weight: 700;
    color: var(--primary);
    padding: 0 10px;
    font-size: 1.1em;
}   /* Per il testo "Inviaci un messaggio" */

label {
    font-weight: 600;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}     /* Gli altri testi del form */

/* Bottone */
.btn-invia {
    background: var(--primary);
    color: var(--light);
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;

}

.btn-invia:hover {
    background: var(--dark);
}

/* footer */

footer{
    background-color: var(--light); 
    border-top: 5px solid var(--secondary); 
    color: var(--dark); 
    padding: 10px 0;
    margin-top: 0;
    width: 100%;   
    text-align: center;
}

footer .container {
    display: flex;
    flex-direction: column;
    align-items: center;   
    gap: 15px;
    }

footer p {
    margin-top: 15px; 
    margin-bottom: 0;
}

footer .container h2 { 
    margin-top: 20px;  
    margin-bottom: 5px;
    font-size: 1.4em;
}

.social a{
    color: var(--primary);
    font-size: 2em;
    display: inline-block; 
    margin-right: 15px;
}

.social a i {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Con questo l'icona fa un rimbalzo */
}

.social a:hover{ color: var(--accent); }

.social a:hover i {
    transform: rotate(15deg) scale(1.3);
}

img {
    transition: transform 0.4s ease; 
    cursor: pointer;              
}

.ant {
    transition: transform 0.4s ease;
    backface-visibility: hidden;
}

.ant:hover {
    transform: scale(1.05);
}

.cta__primary:hover, .cta__primary:active,
.cta__secondary:hover, .cta__secondary:active {
    background-color: var(--secondary); 
    color: var(--dark);               
    border: 2px solid var(--secondary); 
    transform: scale(1.05);   
     transition: all 0.3s ease; 
}

/* creative commons */
.credits-line {
    padding: 10px 15px;
    display: flex;
    flex-direction: row; /* Allinea orizzontalmente */
    align-items: center;
    justify-content: center; /* Centra verticalmente */
    gap: 15px;
     margin-top: 10px; 
     margin-bottom: 10px;
    position: relative;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;}

.credits-line img {
    height: 20px;
    filter: grayscale(100%); /* Rende il logo grigio */
    opacity: 0.7;           
}

.credits-line p {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: var(--primary);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    width: auto;
    max-width: none;
    text-align: center;
}

.email-link {
    color: inherit; /* Mantiene lo stesso colore del testo  */
    text-decoration: none; /* Rimuovo la sottolineatura */
}

.email-link:hover {
    text-decoration: underline; /* la sottolineatura appare solo quando ci passo sopra col mouse */
}

/* Media Queries per schermi piccoli */

@media (max-width: 767px) {

  .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  h1 {
    font-size: 1.8em !important;
  }

  .hero,
  header .container,
  .cover__menu ul,
  .chi-sono,
  .info-wrapper,
  .info-wrapper-partecipa,
  .erasmus-info,
  .form-layout {
    flex-direction: column;
  }       /* Tutto va in colonna */

  .hero,
  .chi-sono,
  .chi-sono-info,
  .cta-group,
  .form-layout {
    text-align: center;
    align-items: center;
  }

  .YP, .InterculturalNight, .info, .partecipare__foto,
  .img-side, .info-wrapper .img-side, .requisiti-box {
    float: none;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
  }

  .credits-line {
        font-size: 10px; 
        flex-wrap: nowrap; 
    }

    .credits-line img {
        max-width: 50px; 
    }

}

/* Tablet/PC */
@media (min-width: 768px) {
  .hero { flex-direction: row; }
  .hero__text { width: 50%; }
  .hero__cover { width: 50%; }
  h1 { font-size: 2.2em; }
}