/* ==========================================================
   BALDAIASSA
   USER.CSS
   Versione 1.3

   INDICE

   1. Colori
   2. Header
   3. Footer
   4. Logo e descrizione
   5. Menu
   6. Tipografia
   7. Link
   8. Hero Home
   9. Slider immagini
   10. Header trasparente Home
   11. Responsive
   12. Menu a destra sopra Hero
   13. Menu a destra su tutto il sito
   14. Riduzione spazio tra i menu
   15. Animazione testi Hero
========================================================== */


/* ==========================================================
   1. COLORI
========================================================== */

:root {

    --bald-black:#17130f;
    --bald-brown:#8b6b3f;
    --bald-brown-dark:#5a4528;
    --bald-gold:#c8a96a;
    --bald-white:#ffffff;

}


/* ==========================================================
   2. HEADER
========================================================== */

.header,
.container-header {

    background:var(--bald-black) !important;

}


.header {

    box-shadow:0 2px 15px rgba(0,0,0,.35);

}


/* ==========================================================
   3. FOOTER
========================================================== */

.footer,
.container-footer {

    background:var(--bald-black) !important;

}


/* ==========================================================
   4. LOGO E DESCRIZIONE
========================================================== */

.site-description {

    color:#000;

    font-size:.95rem;

    letter-spacing:.5px;

}


/* ==========================================================
   5. MENU
========================================================== */

.container-nav a {

    color:#f1ede4;

    transition:.3s;

}


.container-nav a:hover {

    color:var(--bald-gold);

}


/* ==========================================================
   6. TIPOGRAFIA
========================================================== */

h1,
h2,
h3,
h4 {

    letter-spacing:.3px;

}


/* ==========================================================
   7. LINK
========================================================== */

a {

    color:var(--bald-brown);

}


a:hover {

    color:var(--bald-brown-dark);

}


/* ==========================================================
   8. HERO HOME
========================================================== */

.hero-baldaiassa {

    position:relative;

    width:100%;

    height:620px;

    overflow:hidden;

}


/* ==========================================================
   9. SLIDER IMMAGINI
========================================================== */


.hero-slider {

    position:absolute;

    inset:0;

}


.hero-slider .slide {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    opacity:0;

    animation:heroFade 21s infinite;

}



.hero-slider .slide1 {

    animation-delay:0s;

}


.hero-slider .slide2 {

    animation-delay:7s;

}


.hero-slider .slide3 {

    animation-delay:14s;

}



@keyframes heroFade {


    0% {

        opacity:0;

    }


    10% {

        opacity:1;

    }


    30% {

        opacity:1;

    }


    40% {

        opacity:0;

    }


    100% {

        opacity:0;

    }

}


/* Overlay */

.hero-overlay {

    position:absolute;

    inset:0;

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

    z-index:2;

}


/* Contenuto */

.hero-content {

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:80%;

    max-width:900px;

    text-align:center;

    color:#fff;

    z-index:3;

}



.hero-title {

    font-family:var(--cassiopeia-font-family-headings);

    font-size:clamp(2.4rem,5vw,3.8rem);

    line-height:1.15;

    letter-spacing:1px;

    margin-bottom:20px;

    color:#fff;

    position:relative;

}



.hero-content p {

    font-size:1.55rem;

    color:#fff;

    font-style:italic;

    font-family:Georgia, "Times New Roman", serif;

    letter-spacing:.5px;

}


/* ==========================================================
   10. HEADER TRASPARENTE HOME
========================================================== */

.itemid-101 .container-header {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:transparent !important;

    box-shadow:none;

}


.itemid-101 .header {

    background:transparent !important;

}



/* Menu sopra immagine */

.itemid-101 .container-nav a {

    color:#fff;

    text-shadow:0 2px 5px rgba(0,0,0,.45);

}



/* Logo sopra immagine */

.itemid-101 .navbar-brand a {

    color:#fff;

    text-shadow:0 2px 5px rgba(0,0,0,.45);

}



/* ==========================================================
   11. RESPONSIVE
========================================================== */


@media(max-width:768px) {


    .hero-baldaiassa {

        height:480px;

    }


    .hero-content {

        width:90%;

    }


    .hero-title {

        font-size:2.2rem;

    }


    .hero-content p {

        font-size:1rem;

    }


    .hero-extra {

        font-size:1rem;

        letter-spacing:1px;

    }

}



/* ==========================================================
   12. MENU A DESTRA SOPRA HERO
========================================================== */

.itemid-101 .header {

    display:grid;

    grid-template-columns:auto 1fr;

    align-items:center;

}


/* logo */

.itemid-101 .navbar-brand {

    grid-column:1;

}


/* menu */

.itemid-101 .container-nav {

    grid-column:2;

    justify-self:end;

}


/* lista menu */

.itemid-101 .container-nav ul {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:25px;

    margin:0;

}



/* ==========================================================
   13. MENU ALLINEATO A DESTRA SU TUTTO IL SITO
========================================================== */

.header {

    display:grid;

    grid-template-columns:auto 1fr;

    align-items:center;

}


.navbar-brand {

    grid-column:1;

}


.container-nav {

    grid-column:2;

    justify-self:end;

}


.container-nav ul {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:25px;

}



/* ==========================================================
   14. RIDUZIONE SPAZIO TRA I MENU
========================================================== */


.container-nav ul {

    gap:0 !important;

}


.itemid-101 .container-nav li {

    margin-left:0 !important;

    margin-right:0 !important;

}


.itemid-101 .container-nav a {

    padding-left:10px !important;

    padding-right:10px !important;

}



/* ==========================================================
   15. ANIMAZIONE TESTI HERO
========================================================== */


/* Titolo principale */

.hero-title {

    opacity:0;

    animation:heroTitleIn 1.5s ease forwards;

}



/* Sottotitolo */

.hero-content p {

    opacity:0;

    animation:heroSubtitleIn 1.5s ease forwards;

    animation-delay:0.8s;

}



/* Seconda scritta */

.hero-extra {

    opacity:0;

    transform:translateX(-80px);

    animation:heroExtraIn 1.8s ease forwards;

    animation-delay:2s;

    margin-top:0;

    margin-bottom:15px;

    color:var(--bald-gold);

    font-size:1.4rem;

    font-weight:700;

    letter-spacing:2px;

}



/* entrata titolo */

@keyframes heroTitleIn {


    from {

        opacity:0;

        transform:translateY(-20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}



/* entrata sottotitolo */

@keyframes heroSubtitleIn {


    from {

        opacity:0;

        transform:translateY(20px);

    }


    to {

        opacity:1;

        transform:translateY(0);

    }


}



/* entrata scritta da sinistra */

@keyframes heroExtraIn {


    from {

        opacity:0;

        transform:translateX(-80px);

    }


    to {

        opacity:1;

        transform:translateX(0);

    }


}