/* Home di Mauna. Estratto dal template: qui il browser lo mette in cache,
   e la versione dell'URL arriva da filemtime(). */

html { scroll-behavior: smooth; overflow-y: scroll; }
.tw-root { 
    line-height: 1.6; 
    font-family: "Inter", sans-serif;
    color: #45322E;
    background-color: #ffffff;
}
.tw-root * { box-sizing: border-box; }
.tw-root h1, .tw-root h2, .tw-root h3, .tw-root h4 { 
    font-family: "Lora", serif;
    line-height: 1.2; 
    margin-top: 0; 
    margin-bottom: 0.5em; 
    font-weight: 500; 
    color: #45322E; 
}
.tw-root p { margin-top: 0; margin-bottom: 1.5rem; color: #6b7280; font-weight: 300; }
.tw-root a { text-decoration: none; }
.tw-root img { max-width: 100%; height: auto; }
#main-content { padding-top: 0 !important; }

.hero-overlay { background: linear-gradient(to right, rgba(69, 50, 46, 0.7) 0%, rgba(69, 50, 46, 0.2) 100%); }
.glass-card { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); }
.section-padding { padding: 120px 24px; }
@media (max-width: 768px) { .section-padding { padding: 80px 20px; } }

.et_pb_section { display: none !important; }
.tw-root .et_pb_section { display: block !important; }

/* Course Card Custom Animations */
.course-item .course-bg { transition: transform 0.7s ease; }
.course-item:hover .course-bg, .course-item.is-active .course-bg { transform: scale(1.05); }

.course-item .course-gradient { transition: opacity 0.3s ease; opacity: 1; }
.course-item:hover .course-gradient, .course-item.is-active .course-gradient { opacity: 0; }

.course-item .course-overlay { transition: opacity 0.3s ease; opacity: 0; pointer-events: none; }
.course-item:hover .course-overlay, .course-item.is-active .course-overlay { opacity: 1; }

.course-item .course-content-inner { transition: transform 0.4s ease; transform: translateY(0); }
.course-item:hover .course-content-inner, .course-item.is-active .course-content-inner { transform: translateY(-1rem); }

.course-item .course-extra { transition: all 0.4s ease; max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; }
.course-item:hover .course-extra, .course-item.is-active .course-extra { max-height: 200px; opacity: 1; margin-top: 1rem; }

/* Course Modal Styles */
.course-modal { display: none; }
.course-modal.active { display: flex !important; }
body.modal-open { overflow: hidden; }

/* Overrides to fix Modal blocking */
#course-modal { z-index: 999999 !important; }

/* Il testo della modale e' centrato in verticale finche' ci sta. La parola
   "safe" e' la parte importante: quando il contenuto e' piu' alto della
   finestra, il centraggio farebbe debordare il blocco da entrambi i lati e la
   parte di sopra — occhiello e titolo — finirebbe fuori, irraggiungibile anche
   scorrendo (misurata a -133px sui testi lunghi). Con "safe" l'allineamento
   ripiega da solo all'inizio, e i browser che non la conoscono ignorano la
   riga, ottenendo lo stesso risultato. */
#course-modal-body { justify-content: safe center; }

/* I tab delle categorie non ci sono piu': i corsi stanno tutti in una griglia
   sola, quindi lo stile dei pulsanti e' stato tolto. */

/* Fluid Atmospheric Element Animation - Redesign completo */
@keyframes wavePath {
    0% { transform: translateY(0) scaleY(1); opacity: 0.5; }
    50% { transform: translateY(-15px) scaleY(1.2); opacity: 0.8; }
    100% { transform: translateY(0) scaleY(1); opacity: 0.5; }
}

@keyframes heroCloudBreathe {
    0% { transform: scale(1) translate(0, 0); opacity: 0.8; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { transform: scale(1.05) translate(-2%, 2%); opacity: 1; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.8; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

@keyframes heroCloudDrift {
    0% { transform: scale(1) translate(0, 0); opacity: 0.7; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    50% { transform: scale(0.95) translate(3%, -2%); opacity: 0.9; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.7; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
}

.hero-atmospheric-field {
    position: absolute;
    top: 50%;
    left: -20%; /* Shifted more to the left to cover text perfectly */
    transform: translateY(-50%);
    width: 160%; /* Wider to ensure full text coverage */
    height: 180%;
    z-index: -1;
    pointer-events: none;
    mix-blend-mode: normal;
}

.hero-cloud-base {
    position: absolute;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle at center, rgba(248, 246, 245, 1) 0%, rgba(248, 246, 245, 0.9) 40%, transparent 80%);
    filter: blur(50px);
    animation: heroCloudBreathe 20s ease-in-out infinite;
}

.hero-cloud-accent {
    position: absolute;
    top: 40%;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle at center, rgba(212, 163, 115, 0.2) 0%, rgba(138, 122, 119, 0.08) 40%, transparent 70%);
    filter: blur(40px);
    animation: heroCloudDrift 25s ease-in-out infinite reverse;
}

.atmospheric-fluid-container {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 180px;
    max-width: 1000px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.fluid-path {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 150px;
    border-top: 1px solid rgba(138, 122, 119, 0.4);
    border-radius: 50%;
    filter: blur(1px);
    animation: wavePath 8s ease-in-out infinite;
}

.fluid-path:nth-child(1) {
    border-top: 2px solid rgba(69, 50, 46, 0.15);
    transform: translateY(10px) scaleX(1.1);
    animation-duration: 9s;
    animation-delay: 0s;
}
.fluid-path:nth-child(2) {
    border-top: 1px solid rgba(212, 163, 115, 0.3);
    transform: translateY(-5px) scaleX(0.9);
    animation-duration: 7s;
    animation-delay: -2s;
}
.fluid-path:nth-child(3) {
    border-top: 2px solid rgba(138, 122, 119, 0.2);
    transform: translateY(5px) scaleX(1);
    animation-duration: 11s;
    animation-delay: -4s;
}
.fluid-path:nth-child(4) {
    border-top: 1px solid rgba(69, 50, 46, 0.2);
    transform: translateY(-10px) scaleX(1.2);
    animation-duration: 8s;
    animation-delay: -1s;
}
.fluid-path:nth-child(5) {
    border-top: 3px solid rgba(212, 163, 115, 0.1);
    transform: translateY(0px) scaleX(0.8);
    animation-duration: 10s;
    animation-delay: -3s;
    filter: blur(2px);
}

@media (max-width: 768px) {
    .atmospheric-fluid-container { top: -60px; height: 120px; }
    .hero-bg-image { background-position: 70% center !important; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .hero-bg-image { background-position: 50% center !important; }
}
@media (min-width: 1025px) {
    .hero-bg-image { background-position: -45% center !important; }
}