@font-face {
    font-family: "TreRose";
    src: url("../font/Flow.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "TreRose";
    src: url("../font/Flow_B.otf") format("opentype");
    font-weight: bold;
    font-style: normal;
}

*, *::before, *::after {
    box-sizing: border-box;
}

body, html {
    font-family: "TreRose", Arial, sans-serif !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: "TreRose", Arial, sans-serif;
    background: #fff2ab;
    color: #333;
}

/* ================================
   HERO CONTENT
   ================================ */

.hero-content {
    z-index: 1;
}

.hero-content h1 {
    font-size: clamp(2rem, 6vw, 5.5rem);
    margin-bottom: 0.5rem;
}

.hero-content p {
    font-size: clamp(1rem, 2.5vw, 1.5rem);
}

/* ================================
   HEADER / LOGO / TENDINA
   ================================ */

#logo {
    width: 200px;
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 2;
}

#btnApriTendina {
    width: 75px;
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 2;
    padding: 8px;
    min-width: 44px;
    min-height: 44px;
}

#tendina {
    position: fixed;
    top: 0;
    right: -100%;
    width: 800px;
    max-width: 100%;
    height: 100vh;
    background-color: rgba(49, 20, 9, 0.98);
    padding-top: 110px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.7);
    transition: right 0.6s ease-in-out;
    z-index: 9999;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #fff2ab transparent;
}

#tendina::-webkit-scrollbar { width: 8px; }
#tendina::-webkit-scrollbar-thumb {
    background-color: #fff2ab;
    border-radius: 10px;
}

#tendina a {
    font-size: 33px;
    display: block;
    padding: 15px 25px;
    color: #fff2ab;
    text-align: center;
    text-decoration: none;
}

#tendina a:hover {
    background-color: #501b08;
}

#btnChiudiTendina {
    width: 70px;
    cursor: pointer;
    position: absolute;
    top: 25px;
    right: 25px;
    min-width: 44px;
    min-height: 44px;
}

#eastLombardy {
    color: #fff2ab;
    text-decoration: none;
}

#eastLombardy:hover {
    text-decoration: underline;
}

/* ================================
   ICONE WHATSAPP E FACEBOOK
   Centralizzate qui, NON ridefinire
   nei CSS specifici delle pagine
   ================================ */

#whatsapp,
#facebook {
    width: 70px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* FISSO a schermo, sempre visibile */
    position: fixed;
    bottom: 20px;
    z-index: 10000;   /* sopra tutto, inclusa la tendina */
}

#whatsapp {
    right: 20px;
}

#facebook {
    left: 20px;
}

#whatsapp:hover,
#facebook:hover {
    transform: scale(1.15);
}

/* ================================
   FOOTER
   ================================ */

footer {
    background: #4f200d;
    color: #fff2ab;
    padding: 30px 20px;   /* padding laterale per evitare testo attaccato */
    text-align: center;
}

/* ================================
   ANIMAZIONI
   ================================ */

.animato {
    opacity: 0;
    transition: all 1s ease;
}
.animato.attivo {
    opacity: 1;
    transform: translate(0, 0);
}

.from-left   { transform: translateX(-80px); }
.from-right  { transform: translateX(80px); }
.from-top    { transform: translateY(-80px); }
.from-bottom { transform: translateY(80px); }

/* ================================
   PADDING SICUREZZA TESTO
   Evita testo attaccato ai bordi
   ================================ */

p, h2, h3, h4, li {
    /* max-width per leggibilità */
    max-width: 100%;
}

section, .section, .container-testo {
    padding-left: max(16px, 4%);
    padding-right: max(16px, 4%);
}

/* ================================
   RESPONSIVE – MOBILE (max 768px)
   ================================ */

@media (max-width: 768px) {

    /* HERO */
    .hero-content h1 {
        font-size: clamp(1.8rem, 8vw, 2.8rem);
        padding: 0 16px;
    }

    .hero-content p {
        font-size: 1rem;
        padding: 0 20px;
    }

    /* LOGO */
    #logo {
        width: 120px;
        top: 8px;
        left: 12px;
    }

    /* HAMBURGER */
    #btnApriTendina {
        width: 52px;
        top: 16px;
        right: 16px;
    }

    /* TENDINA a tutto schermo */
    #tendina {
        width: 100%;
    }

    #tendina a {
        font-size: 26px;
        padding: 18px 20px;
    }

    /* ICONE SOCIAL su mobile */
    #whatsapp,
    #facebook {
        width: 52px;
        bottom: 14px;
    }

    #whatsapp {
        right: 12px;
    }

    #facebook {
        left: 12px;
    }

    /* FOOTER */
    footer {
        padding: 24px 16px;
        font-size: 0.95rem;
    }
}