/* ===========================================================
   DAAT - STILE COMUNE
   =========================================================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Cormorant Garamond',serif;
    color:#222;
    background:#f4f1ea;
    position:relative;
    overflow-x:hidden;
}

/* ===========================================================
   SFONDO
   =========================================================== */

body::before{

    content:"";

    position:fixed;
    inset:0;

    background:url("../images/daatbkg2.jpg")
               center center
               no-repeat;

    background-size:cover;

    z-index:-2;
}

body::after{

    content:"";

    position:fixed;
    inset:0;

    background:rgba(255,255,255,.12);

    z-index:-1;
}

/* ===========================================================
   HEADER
   =========================================================== */

.header{

    text-align:center;

    padding:70px 20px 30px;
}

.header h1{

    color:#8a6120;

    font-size:4rem;

    letter-spacing:8px;

    font-weight:600;

    text-shadow:
        0 2px 10px rgba(255,255,255,.7);
}

.subtitle{

    margin-top:12px;

    font-size:1.2rem;

    letter-spacing:4px;

    color:#6a4d1c;

    text-transform:uppercase;
}

/* ===========================================================
   MENU
   =========================================================== */

.nav{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    margin-bottom:45px;

    flex-wrap:wrap;
}

.nav a{

    color:#8a6120;

    text-decoration:none;

    font-size:1.05rem;

    font-weight:600;

    letter-spacing:2px;

    transition:.3s;
}

.nav a:hover{

    color:#b8860b;

    text-shadow:
        0 0 10px rgba(184,134,11,.35);
}

/* ===========================================================
   CONTENITORE
   =========================================================== */

.container{

    width:min(1200px,92%);

    margin:auto;

    padding-bottom:60px;
}

/* ===========================================================
   BOX CONTENUTI
   =========================================================== */

.section{

    background:rgba(255,255,255,.35);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.45);

    border-radius:18px;

    padding:40px;

    margin-bottom:35px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.15);
}

.section h2{

    color:#8a6120;

    font-size:2.2rem;

    margin-bottom:25px;
}

.section h3{

    color:#8a6120;

    margin-top:25px;

    margin-bottom:12px;

    font-size:1.5rem;
}

.section p{

    color:#222;

    font-size:1.25rem;

    line-height:1.9;

    margin-bottom:18px;
}

.section ul{

    margin-left:30px;

    line-height:1.9;

    font-size:1.2rem;
}

.section li{

    margin-bottom:8px;
}

/* ===========================================================
   CITAZIONE
   =========================================================== */

.quote{

    margin:35px 0;

    padding:25px;

    background:rgba(255,255,255,.45);

    border-left:5px solid #b8860b;

    font-style:italic;

    font-size:1.4rem;

    color:#5b3d12;

    border-radius:8px;
}

/* ===========================================================
   EVENTI
   =========================================================== */

.event-title{

    font-size:2.6rem;

    color:#8a6120;

    text-align:center;

    margin-bottom:20px;
}

.event-image{

    width:100%;

    max-width:700px;

    display:block;

    margin:30px auto;

    border-radius:15px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.25);
}

/* ===========================================================
   IMMAGINI
   =========================================================== */

img{

    max-width:100%;

    height:auto;
}

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

.footer{

    text-align:center;

    padding:40px 20px;

    color:#333;

    font-size:.95rem;

    line-height:1.8;
}

.footer a{

    color:#8a6120;

    text-decoration:none;

    transition:.3s;
}

.footer a:hover{

    color:#b8860b;
}

/* ===========================================================
   MOBILE
   =========================================================== */

@media(max-width:768px){

    /* ============================
       SFONDO
       ============================ */

    body::before{

        background-image:url("../images/daat-mobile.jpg");

        background-position:center top;

        background-repeat:no-repeat;

        background-size:cover;
    }

    body::after{

        background:rgba(255,255,255,.05);
    }

    /* ============================
       NASCONDE L'HEADER
       ============================ */

    .header{

        display:none;
    }

    /* ============================
       CONTENUTO
       ============================ */

    .container{

        width:94%;

        margin:0 auto;

        padding:360px 15px 50px;
    }

    .section{

        padding:25px;

        margin-bottom:25px;

        background:rgba(255,255,255,.30);

        backdrop-filter:blur(10px);
    }

    .section h2{

        font-size:1.8rem;
    }

    .section h3{

        font-size:1.35rem;
    }

    .section p{

        font-size:1.1rem;

        line-height:1.8;
    }

    .section ul{

        font-size:1.05rem;
    }

    /* ============================
       NASCONDE IL MENU
       ============================ */

    .nav{

        display:none;
    }

    /* ============================
       PULSANTE HOME
       ============================ */

    .mobile-home{

        display:block;

        position:fixed;

        top:15px;

        left:15px;

        z-index:9999;

        padding:10px 18px;

        border-radius:30px;

        background:rgba(255,255,255,.85);

        backdrop-filter:blur(10px);

        -webkit-backdrop-filter:blur(10px);

        color:#6b4c16;

        text-decoration:none;

        font-size:1rem;

        font-weight:700;

        box-shadow:
            0 6px 18px rgba(0,0,0,.18);
    }

    /* ============================
       EVENTI
       ============================ */

    .event-title{

        font-size:2rem;
    }

    .event-image{

        width:100%;
    }

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

    .footer{

        font-size:.85rem;

        padding:25px 15px;
    }

}