/*
 * FILE: assets/css/style.css
 * DESCRIZIONE: Stile completo del progetto.
 * VERSIONE: 7.0 (con menu responsive completo)
 */

/* --- IMPORTAZIONE FONT E ICONE --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Playfair+Display:wght@700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* --- VARIABILI DI DESIGN --- */
:root {
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    --color-navy: #1C1F4A;
    --color-text: #333333;
    --color-light-gray: #F5F5F5;
    --color-dark-gray: #2E2E2E;
    --color-white: #FFFFFF;
    --color-link-light: #DDDDDD;
}

/* --- RESET E STILI GLOBALI --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    font-size: 16px;
    color: var(--color-text);
    background-color: var(--color-white);
    line-height: 1.6;
}
/* Impedisce lo scroll quando il menu mobile è aperto */
body.mobile-menu-active {
    overflow: hidden;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--color-navy); font-weight: 700; }
a { color: var(--color-navy); text-decoration: none; }

/* --- HEADER --- */
.main-header { background-color: var(--color-white); height: 80px; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; transition: box-shadow 0.3s ease; }
.main-header.scrolled { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.logo { font-family: var(--font-serif); font-size: 28px; font-weight: 700; color: var(--color-navy); }
.main-nav ul { list-style: none; display: flex; gap: 30px; }
.main-nav a { font-size: 16px; font-weight: 500; color: var(--color-text); position: relative; padding-bottom: 5px; }
.header-right { display: flex; align-items: center; gap: 40px; }
.main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-navy); transition: width 0.3s ease-out; }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.main-nav a.active { font-weight: 700; }

/* --- BOTTONI E ANIMAZIONI --- */
.btn { display: inline-block; padding: 12px 24px; border-radius: 8px; font-weight: 700; text-align: center; transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease; }
.btn:hover { transform: scale(1.03); filter: brightness(1.1); }
.btn-navy { background-color: var(--color-navy); color: var(--color-white); }
.btn-light { background-color: var(--color-white); color: var(--color-navy); }

/* --- HAMBURGER MENU (ICONA) --- */
.hamburger { display: none; font-size: 24px; cursor: pointer; z-index: 1600; position: relative; }

/* --- HERO SECTION --- */
.hero { height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--color-white); padding: 20px; overflow: hidden; }
.hero::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; background-image: url('../images/mainfotohome.png'); background-size: cover; background-position: center; filter: blur(4px); z-index: -2; }
.hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); z-index: -1; }
.hero h1 { font-size: 48px; color: var(--color-white); margin-bottom: 1rem; }
.hero p { font-size: 20px; font-weight: 400; max-width: 700px; margin-bottom: 2rem; }

/* --- ANIMAZIONI PER LINK TESTUALI --- */
.competence-card a, .link-styled, .main-footer a { position: relative; padding-bottom: 2px; text-decoration: none; }
.competence-card a::after, .link-styled::after, .main-footer a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background-color: currentColor; transition: width 0.3s ease-out; }
.competence-card a:hover::after, .link-styled:hover::after, .main-footer a:hover::after { width: 100%; }

/* --- SEZIONI E COMPONENTI --- */
.section { padding: 80px 0; }
.section-bg-gray { background-color: var(--color-light-gray); }
.section-bg-navy { background-color: var(--color-navy); color: var(--color-white); }
.section-bg-navy h2, .section-bg-navy p { color: var(--color-white); }
.grid-2, .grid-3 { display: grid; gap: 40px; align-items: center; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.about-preview-img { width: 100%; max-width: 400px; height: 500px; object-fit: cover; border-radius: 8px; }
.link-styled { font-style: italic; }
.competence-card { background-color: var(--color-white); padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-align: center; }
.competence-card i { font-size: 40px; color: var(--color-navy); margin-bottom: 1rem; }
.competence-card h3 { font-family: var(--font-sans); font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; }
.competence-card p { font-size: 14px; margin-bottom: 1rem; }
.cta-section { text-align: center; }
.cta-section h2 { font-size: 36px; margin-bottom: 1rem; }
.cta-section .btn { margin-top: 2rem; }

/* --- PAGINE INTERNE --- */
.page-container { max-width: 1000px; margin: 0 auto; padding: 80px 20px; }
.page-container-narrow { max-width: 800px; }
.page-title { font-size: 40px; font-weight: 700; }
.page-subtitle { font-size: 20px; font-style: italic; color: var(--color-text); margin-top: 0.5rem; }
.team-card { text-align: center; }
.team-card img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; }
.competence-section { padding: 40px 0; border-bottom: 1px solid #eee; }
.competence-section:last-child { border-bottom: none; }
.competence-section h2 { font-family: var(--font-serif); font-size: 28px; }
.competence-section ul { list-style-position: inside; padding-left: 10px; }
.privacy-text { text-align: justify; }
.booking-section { text-align: center; padding: 40px 20px; background-color: var(--color-white); border-radius: 8px; }
.info-section { text-align: center; }
.info-section h2 { margin-bottom: 2rem; }
.info-grid { display: flex; justify-content: center; align-items: center; gap: 2rem 4rem; flex-wrap: wrap; margin-top: 1.5rem; }
.info-item { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.info-item i { font-size: 22px; }

/* --- FOOTER --- */
.main-footer { background-color: var(--color-dark-gray); color: var(--color-link-light); padding: 60px 0; font-size: 14px; }
.main-footer .grid-3 { align-items: start; }
.main-footer h4 { color: var(--color-white); margin-bottom: 1rem; }
.main-footer ul { list-style: none; }
.main-footer li { margin-bottom: 0.5rem; }
.main-footer a { color: var(--color-link-light); }

/* --- ANIMAZIONI FADE-IN --- */
.fade-in-element { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in-element.is-visible { opacity: 1; transform: translateY(0); }

/*
=========================================
--- RESPONSIVE DESIGN & MOBILE MENU ---
=========================================
*/
@media (max-width: 992px) {
    .main-header { padding: 0 20px; }
    .header-right .btn { display: none; }
    .hamburger { display: block; }
    
    .main-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: -100%; /* Inizia fuori dallo schermo a sinistra */
        width: 100%;
        height: 100%;
        background-color: var(--color-navy);
        z-index: 1500;
        transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }
    .main-nav.is-active {
        left: 0; /* Entra nello schermo */
    }
    .main-nav ul { flex-direction: column; text-align: center; gap: 40px; }
    .main-nav a { color: var(--color-white); font-size: 24px; }
    .main-nav a::after { background-color: var(--color-white); }

    .hamburger .fa-times { display: none; }
    .hamburger.is-active .fa-bars { display: none; }
    .hamburger.is-active .fa-times { display: block; color: var(--color-white); }
}

@media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .about-preview-img { margin-bottom: 2rem; }
    .main-footer .grid-3 { text-align: center; }
    .hero h1 { font-size: 36px; }
    .hero p { font-size: 18px; }
}