/* RESET E STRUTTURA */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }

:root {
    --arancione-morbido: #D97443;
    --arancione-hover: #BE5B2C;
    --sfondo-crema: #FAF7F2;
    --testo-scuro: #2D312E;
    --grigio-chiaro: #F0EDE8;
}

body { font-family:Tahoma, Calibri, Verdana, sans-serif; color: var(--testo-scuro); background-color: var(--sfondo-crema); line-height: 1.6; }

/* INTESTAZIONE FISSA */
.site-header { background-color: #ffffff; padding: 15px 30px; border-bottom: 3px solid var(--arancione-morbido); position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.header-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.logo-yom { color: var(--arancione-morbido); font-family: 'Lora', serif; font-weight: bold; font-size: 26px; }
.logo-sub { font-size: 11px; text-transform: uppercase; color: #777; letter-spacing: 1px; display: block; }
.main-navigation ul { display: flex; list-style: none; gap: 20px; }
.main-navigation a { text-decoration: none; color: var(--testo-scuro); font-weight: 500; font-size: 15px; }
.main-navigation a:hover { color: var(--arancione-morbido); }

/* SEZIONI E HERO */
.hero-section { background: linear-gradient(135deg, #FFF0E6 0%, #F5D5C3 100%); padding: 170px 20px 130px; text-align: center; }
.hero-content h1 { font-family: 'Lora', serif; font-size: 42px; margin-bottom: 15px; }
.hero-content p { font-size: 18px; margin-bottom: 30px; color: #555; }
.btn-primary { display: inline-block; background-color: var(--arancione-morbido); color: #ffffff; padding: 12px 28px; text-decoration: none; font-weight: 500; border-radius: 30px; box-shadow: 0 4px 15px rgba(217, 116, 67, 0.3); transition: background-color 0.3s; }
:hover.btn-primary { background-color: var(--arancione-hover); }
.btn-staff { display: inline-block; background-color: var(--arancione-morbido); color: #ffffff; padding: 8px 15px; text-decoration: none; font-weight: 200;
	border-radius: 20px; box-shadow: 0 4px 15px rgba(217, 116, 67, 0.3); transition: background-color 0.3s; }
:hover.btn-staff { background-color: var(--arancione-hover); }


.section-title { font-family: 'Lora', serif; text-align: center; font-size: 32px; margin-bottom: 40px; }
::after.section-title { content: ''; display: block; width: 60px; height: 3px; background-color: var(--arancione-morbido); margin: 10px auto 0; }

.courses-section, .orari-image-section, .social-section { max-width: 1200px; margin: 100px auto; padding: 0 20px; }
.courses-grid, .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; }
.course-card, .team-card { background-color: #ffffff; padding: 30px 20px; border-radius: 12px; border: 1px solid var(--grigio-chiaro); }
.course-card { text-align: justify; border-top: 4px solid var(--arancione-morbido); }
.course-card h3 { font-family: 'Lora', serif; color: var(--arancione-morbido); margin-bottom: 12px; }

.staff-section-home { border:3px solid #D97443; background-color: #FFFFFF; text-align: center; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px }

.online-section { border:3px solid #D97443; background-color: #FFFFFF; text-align: center; padding-left:4px; padding-right:4px; padding-top:1px; padding-bottom:1px }
.online-box { max-width: 700px; margin: 0 auto; }

.team-card { padding: 0; overflow: hidden; }
.member-image-placeholder { width: 100%; height: 175px; background-color: #E6E2DC; display: flex; justify-content: center; align-items: center; color: #888; }
.member-info { padding: 20px; }
.member-role { color: var(--arancione-morbido); font-size: 13px; font-weight: 600; text-transform: uppercase; display: block; margin-bottom: 10px; }
.member-bio { text-align: left; }

.orari-img-container { max-width: 900px; margin: 0 auto; background: #fff; padding: 15px; border-radius: 12px; border: 1px solid var(--grigio-chiaro); }
.img-orario-responsive { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.txt-prezzi {
	padding:20px; width: 100%;
    background-color: #000000; /* Sfondo nero */
    color:#FFFFFF;          /* Testo bianco per contrasto sul nero */
    line-height: 1.6; 
    /* Bordi arancioni esterni */
    border-top: 3px solid #FF6600;    /* Bordo superiore arancione */
    border-bottom: 3px solid #FF6600; text-align:justify
 }

/* 1. Forza l'immagine a non superare mai la larghezza dello schermo */
.img-prezzi-responsive {
    width: 100%;          /* Occupa tutta la larghezza del contenitore su mobile */
    max-width: 100%;      /* Impedisce all'immagine di allargarsi oltre la sua dimensione reale */
    height: auto !important; /* Sovrascrive l'altezza fissa di 2338px per mantenere le proporzioni corrette */
    display: block;       /* Rimuove spazi vuoti indesiderati sotto l'immagine */
    margin: 0 auto;       /* Centra l'immagine nella pagina */
}

/* 2. Gestisce il contenitore per dare il giusto spazio sui lati */
.prezzi-img-container {
    border-style:solid; border-width:1px; width: 100%;
    max-width: 800px;     /* Imposta una larghezza massima ideale su PC (es. 800px) per non renderla gigantesca */
    margin: 0 auto;       /* Centra il contenitore nella sezione */
    /* Evita che l'immagine tocchi i bordi millimetrici dello smartphone */
    border-radius: 12px; box-sizing: border-box; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0;
}

/* 3. Assicura che la sezione principale contenga tutto correttamente */
.prezzi-image-section {
    width: 100%;
    overflow: hidden;     /* Evita qualsiasi scorrimento orizzontale residuo */
    padding: 60px 0;      /* Spaziatura verticale standard sopra e sotto la sezione */
}


/* STILE STRUTTURA BLOCCO PRIVACY (PLACEHOLDER WIDGETS) */
.widget-lock-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    min-height: 350px;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 12px;
    border: 2px dashed var(--arancione-morbido);
    padding: 20px;
}
.widget-lock-wrapper.map-lock {
    min-height: 200px;
    width: 100%;
    border: 2px dashed #555;
    background: #3A3E3B;
}
.lock-notice { text-align: center; color: #666; font-size: 14px; }
.map-lock .lock-notice { color: #ccc; }

/* GRAFICA COOKIE BANNER (FISSO IN BASSO) */
.cookie-banner-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #252826;
    color: #ffffff;
    z-index: 2000;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    border-top: 3px solid var(--arancione-morbido);
}
.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.cookie-banner-content p { font-size: 14px; max-width: 800px; line-height: 1.4; }
.cookie-banner-buttons { display: flex; gap: 10px; }
.cookie-btn { padding: 10px 22px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; font-size: 14px; transition: background 0.2s; }
.cookie-btn.accept { background-color: var(--arancione-morbido); color: #fff; }
:hover.cookie-btn.accept { background-color: var(--arancione-hover); }
.cookie-btn.reject { background-color: #4A4E4B; color: #fff; }
:hover.cookie-btn.reject { background-color: #5A5F5C; }

/* FOOTER */
/* RESET & REGOLE BASE FOOTER */
.site-footer, 
.site-footer * {
    box-sizing: border-box;
}

.site-footer {
    width: 100%;
    background-color: #000000; /* Sfondo nero */
    color:#FFFFFF;          /* Testo bianco per contrasto sul nero */
    font-family: serif;
    line-height: 1.6; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 40px; 
    padding-bottom: 20px;
    
    /* Bordi arancioni esterni */
    border-top: 4px solid #FF6600;    /* Bordo superiore arancione */
    border-bottom: 4px solid #FF6600;
}

/* CONTENITORE PRINCIPALE (DESKTOP) */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 30px;
    background-color: #000000;
}

/* SINGOLA COLONNA */
.footer-column {
    flex: 1 1 280px; /* Si distribuisce in automatico mantenendo almeno 280px */
    min-width: 0;    /* Evita che testi lunghi spingano i margini oltre lo schermo */
}

.footer-column h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.2rem;
    color: #ff6600;                 /* Titoli delle colonne in arancione */
    border-bottom: 2px solid #ff6600; /* Linea sotto i titoli convertita in arancione */
    padding-bottom: 8px;
}

/* GESTIONE LINK NEL FOOTER (Aggiunto per leggibilità) */
.site-footer a {
    color: #ffffff;                 /* Link color bianchi */
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-footer a:hover {
    color: #ff6600;                 /* I link diventano arancione al passaggio del mouse */
    text-decoration: underline;
}

/* LISTE CONTATTI E TRASPARENZA */
.contact-links, 
.legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-links li, 
.legal-links li {
    margin-bottom: 10px;
    word-break: break-word; /* Rompe e-mail troppo lunghe evitando lo scroll orizzontale */
}

.contact-links a, 
.legal-links a {
    color: inherit;
    text-decoration: none;
}

.contact-links a:hover, 
.legal-links a:hover {
    text-decoration: underline;
}

/* BOX IBAN */
.iban-box {
    margin-top: 20px;
    padding: 12px 15px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.iban-box h4 {
    margin: 0 0 5px 0;
    font-size: 0.95rem;
}

.iban-box p {
    margin: 0;
    font-size: 0.9rem;
    word-break: break-all; /* Garantisce che l'IBAN rimanga dentro la scheda anche su schermi molto stretti */
}

/* COPYRIGHT BOTTOM */
.footer-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    font-size: 0.85rem;
    color: #666666;
}

/* OPTIMIZATION MOBILE (Smartphone e Tablet < 768px) */
@media screen and (max-width: 768px) {
    .site-footer {
        padding: 30px 15px 15px 15px;
    }

    .footer-container {
        flex-direction: column; /* Dispone le 3 colonne in verticale */
        gap: 25px;
    }

    .footer-column {
        width: 100%;
        text-align: center; /* Centra il testo per una migliore lettura da smartphone */
    }

    .footer-column h3 {
        display: inline-block;
        padding-bottom: 5px;
    }

    .iban-box {
        text-align: center;
    }
}
/* Stili base e reset box-sizing per il footer */
.site-footer, .site-footer * {
    box-sizing: border-box;
}

.site-footer {
    width: 100%;
    background-color: #f8f9fa; /* Modifica con il colore di sfondo del tuo sito */
    padding: 40px 20px 10px 20px;
    font-family: inherit;
}

/* Contenitore flessibile */
.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
}

/* Gestione delle colonne su Desktop */
.footer-column {
    flex: 1 1 280px; /* Si adatta alla larghezza disponibile */
    min-width: 0;    /* Evita l'overflow dei testi lunghi */
}

.footer-column h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.contact-links, .legal-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-links li, .legal-links li {
    margin-bottom: 8px;
    word-break: break-word; /* Evita che mail/IBAN buchino lo schermo */
}

/* Scatola IBAN reattiva */
.iban-box {
    margin-top: 15px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    word-break: break-all; /* Spezza l'IBAN lungo su mobile */
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
    font-size: 0.9em;
}

/* OPTIMIZATION MOBILE (Schermi inferiori a 768px) */
@media screen and (max-width: 768px) {
    .site-footer {
        padding: 20px 15px 10px 15px;
    }

    .footer-container {
        flex-direction: column; /* Impila le colonne in verticale */
        gap: 25px;
    }

    .footer-column {
        width: 100%;
        text-align: center; /* Centra il testo per una resa migliore su smartphone */
    }

    .iban-box {
        text-align: center;
    }
}