/* ===============================

   VARIABILI GLOBALI

   =============================== */

:root {

    --color-primary: black;

    --color-background: rgb(255, 246, 234);

    --color-hover: #333;

    --cards-border: 1rem;

}



/* ===============================

   RESET E GLOBAL STYLES

   =============================== */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Inter", Arial, sans-serif;

}



/* ===============================

   HEADER E MENU PRINCIPALE

   =============================== */

header.menu_bar {

    position: sticky;

    top: 0;

    width: 100%;

    height: 80px;

    background-color: var(--color-background);

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 5%;

    box-shadow: 0 5px 10px rgba(0,0,0,0.2);

    z-index: 1000;

}



.logo img{

    width: 250px;

    height: auto;

}

.logo .menu{

    display: none;

}

.menu_bar ul {

    list-style: none;

    display: flex;

    gap: 0;

}



.menu_bar ul li {

    padding: 10px 30px;

    position: relative;

}



.menu_bar ul li a {

    text-decoration: none;

    color: var(--color-primary);

    transition: color 0.1s, text-shadow 0.1s;

}



.menu_bar ul li a:hover {

    color: var(--color-hover);

    text-shadow: 0 0 1px var(--color-hover);

}



/* ===============================

   DROPDOWN PRENOTA

   =============================== */

.booking_dropdown {

    display: none;

}

.language_dropdown {

    display: none;

}

.menu_bar ul li:hover .booking_dropdown {

    display: block;

    position: absolute;

    left: 0;

    top: 100%;

    background-color: var(--color-background);

    border-bottom-left-radius: var(--cards-border);

    border-bottom-right-radius: var(--cards-border);

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);

    z-index: 1002;

}

.menu_bar ul li:hover .language_dropdown{

    display: block;

    position: absolute;

    left: 0;

    top: 100%;

    background-color: var(--color-background);

    border-bottom-left-radius: var(--cards-border);

    border-bottom-right-radius: var(--cards-border);

    box-shadow: 0 5px 5px rgba(0,0,0,0.2);

    z-index: 1002;

}

.menu_bar ul li:hover .booking_dropdown ul, .menu_bar ul li:hover .language_dropdown ul{

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin: 10px;

    padding: 0;

    list-style: none;

}



.menu_bar ul li:hover .booking_dropdown ul li,  .menu_bar ul li:hover .language_dropdown ul li{

    width: 150px;

    padding: 10px;

}



.booking_dropdown ul li strong,  .booking_dropdown ul li{

    display: flex;

    align-items: center;

    gap: 6px;

}



.booking_dropdown ul li .icon {

    height: 20px;

    width: auto;

}



/* ===============================

   HERO E SEZIONI

   =============================== */

.hero {

    width: 100%;

    height: 80vh;

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    background-image: url("../FotoTrullo/Alberobello.webp");

    background-size: cover;      /* riempi senza stretch */

    background-position: center;

    background-repeat: no-repeat;

    background-color: rgba(0, 0, 0, 0.208);

    background-blend-mode: multiply;

}



.hero-content {

    position: absolute;

    top: 10%;

    text-align: center;

    color: white;

    text-shadow: 0 0 10px black;

}



.hero-content h3 {

    font-weight: normal;

}



.hero-content p.descrizione {

    max-width: 25rem;

    margin: 5% 0;

}



/* ===============================

   SEZIONI GENERICHE

   =============================== */

.sezioni {

    margin: 3% 0;

    text-align: center;

}



.sezioni h1 {

    font-size: 2.5rem;

    margin: 15px;

}



.sezioni .select_trullo {

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

}



.sezioni p {

    font-size: 1.1rem;

    padding: 5px;

}



.select_trullo select {

    padding: 16px 20px;

    font-size: 1.5rem;

    border-radius: 8px;

    border: 1px solid #ccc;

}

/* ===============================

   ANCORE PER SCROLL

   =============================== */

#home,

#alloggi,

#attrazioni,

#ristoranti,

#contatti {

    scroll-margin-top: 80px; /* altezza header */

}

/* ===============================

   ROW E IMMAGINI

   =============================== */

.row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    align-items: center;

    margin: 5% 5%;

    background-color: var(--color-background);

    padding: 3%;

    border-radius: var(--cards-border);

}



/* TESTO */

.testo {

    padding: 0 50px;

}



.testo h2 {

    font-size: 2rem;

    margin-bottom: 10px;

    text-align: left;

}



.testo p {

    font-size: 1.5rem;

    font-weight: lighter;

    text-align: left;

}



/* IMMAGINI */

.images {

    display: flex;

    gap: 25px;

    justify-content: center;

}



.sq {

    width: 100%;

    max-width: 350px;

    aspect-ratio: 3/4; /* leggermente verticali */

    object-fit: cover;

    border-radius: var(--cards-border);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.31);

}



/* ROW INVERT */

.row.invert {

    grid-template-columns: 1fr 1fr; /* invariato */

}



.row.invert .testo {

    order: 2;

}



.row.invert .images {

    order: 1;

}





@media (max-width: 768px) {

    .row {

        grid-template-columns: 1fr;

        text-align: center;

    }



    .row.invert .text,

    .row.invert .images {

        order: unset;

    }



    .images {

        justify-content: center;

    }

}

/* ===============================

   CARDS E CONTENITORI

   =============================== */



/* Contenitore delle card */

.cards {

    display: flex;

    flex-wrap: wrap;      /* le card vanno a capo se necessario */

    gap: 20px;            /* spazio tra le card */

    justify-content: center;

    margin-top: 20px;

}



.cards_attrazioni {

    max-width: 1200px;

    margin: 5% auto;

}



/* Card intera come link */

.card_link {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    width: 250px;

    padding: 15px;

    border-radius: var(--cards-border);

    box-shadow: 0 2px 8px rgba(0,0,0,0.1);

    text-decoration: none;

    color: inherit;

    transition: transform 0.2s ease;

    background-color: var(--color-background);

}



.card_link:hover {

    transform: translateY(-5px);

}



/* Immagine della card */

.card_link img {

    width: 100%;

    height: 150px;

    object-fit: cover;

    border-radius: var(--cards-border);

    margin-bottom: 10px;

    image-rendering: auto;

}



/* Titolo e descrizione */

.card_link h3 {

    font-size: 1.2rem;

    margin: 10px 0 5px;

}



.card_link p {

    font-size: 1rem;

    color: #555;

    margin-bottom: 10px;

}



/* Testo del link in grassetto */

.card_link strong {

    font-weight: bold;

    color: var(--color-primary);

    transition: color 0.2s ease;

}



.card_link strong:hover {

    color: var(--color-hover);

}



/* ===============================

   FOOTER

   =============================== */

footer {

    background-color: var(--color-background);

    text-align: center;

    font-size: 0.85rem;

    padding: 14px 10px;

    box-shadow: 0 -5px 10px rgba(0,0,0,0.2);

    margin-top: 5%; /* uguale a quello delle sezioni */

}



/* Contenitore info */

.footer-info {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

}



/* Logo piccolo */

.footer-logo {

    width: 50px;

    height: auto;

    margin-bottom: 6px;

    user-select: none;

    pointer-events: none;

}



/* Link footer */

footer a {

    color: inherit;

    text-decoration: none;

    transition: opacity 0.2s ease, text-decoration 0.2s ease;

}



footer a:hover {

    text-decoration: underline;

    opacity: 0.75;

    cursor: pointer;

}



/* Lista footer */

.footer-list {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-list li {

    line-height: 1.4;

}



/* Icone con testo */

.icon-text {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.booking_dropdown .icon {

    height: 20px; /* footer = icone leggermente più grandi */

    width: auto;

}



.icon {

    height: 16px; /* footer = icone piccole */

    width: auto;

}



/* Footer bottom */

.footer-bottom {

    margin-top: 8px;

    font-size: 0.75rem;

    opacity: 0.7;

    pointer-events: none;

    user-select: none;

}





/* =========================

   MEDIA QUERIES ACCORPATE

   ========================= */



@media (max-width: 1100px) {

    /* iPad landscape/portrait */



    .row {

        margin: 5% 2%; /* riduci margine laterale su tablet */

    }



    .images {

        padding: 0; /* rimuove padding extra */

    }



    .cards {

        margin: 0 auto;

        max-width: 95%; /* evita overflow */

    }



    .trullo_gallery .row {

        grid-template-columns: 1.2fr 1fr; /* testo leggermente più largo */

        gap: 25px;

    }



    .row.invert {

        grid-template-columns: 1fr 1.2fr; /* mantiene invert senza invadere testo */

    }



    .images .sq {

        max-width: 50%;

        height: auto;

    }



    .testo h2 {

        font-size: 1.8rem;

    }



    .testo p {

        font-size: 1.2rem;

    }

    .nav_list {

        padding: 0 5%; /* margini laterali */

        justify-content: flex-start; /* evita che elementi escano a destra */

        flex-wrap: wrap; /* fa andare a capo gli elementi se necessario */

    }



    .language_dropdown {

        left: auto;

        right: 0; /* forza il dropdown a stare dentro a destra */

    }



    .language_dropdown ul {

        min-width: 120px; /* larghezza minima sicura */

    }

}



@media (max-width: 850px) {

    .descrizione {

        padding-top: 150px;

    }



    header.menu_bar {

        position: sticky;

        top: 0;

        height: 80px;

        background-color: var(--color-background);

        display: flex;

        align-items: center;

        justify-content: center; /* CENTRA IL LOGO */

        padding: 0 5%;

        z-index: 1000;

    }



    /* Contenitore logo */

    .logo {

        position: relative;

        display: flex;

        align-items: center;

        justify-content: center;

        width: 100%;

    }



    /* Logo principale SEMPRE centrato */

    .logo_inline {

        margin: 0 auto;

        display: block;

    }



    /* Icona menu a SINISTRA */

    .logo .menu {

        position: absolute;

        left: 0;

        display: block;

        cursor: pointer;

    }



    .logo .menu img {

        width: 28px;

        height: auto;

    }



    .nav_list {

        position: absolute;

        top: 80px;

        left: 0;

        width: 100%;

        display: none !important;

        flex-direction: column;

        background-color: var(--color-background);

        border-bottom-left-radius: var(--cards-border);

        border-bottom-right-radius: var(--cards-border);

        z-index: 1001;

    }



    .nav_list.active {

        display: flex !important;

    }



    .nav_list li {

        padding: 10px 20px;

    }

    

    .booking_dropdown,

    .language_dropdown {

        display: none!important;

        position: static!important;

        box-shadow: none!important;

        margin-left: 15px!important;

    }



    .booking_dropdown.active,

    .language_dropdown.active {

        display: block !important;

    }

}



@media (max-width: 768px) {

    /* Forza layout verticale per gallery */

    .trullo_gallery .row {

        display: flex !important;

        flex-direction: column !important;

        gap: 30px !important;

        margin: 40px 5% !important;

    }



    .trullo_gallery .row .testo {

        order: 1 !important;

        width: 100% !important;

        padding: 0 10px !important;

        text-align: left !important;

    }



    .trullo_gallery .row .images {

        order: 2 !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 20px !important;

        align-items: center !important;

        width: 100% !important;

    }



    .trullo_gallery .row .sq {

        max-width: 90% !important;

    }

}



@media (max-width: 600px) {

    /* Hero */

    .hero {

        height: 60vh;

        padding: 20px;

    }



    .hero-content h1 {

        font-size: 1.8rem;

    }



    .hero-content h3 {

        font-size: 1.2rem;

    }



    .hero-content p.descrizione {

        font-size: 1rem;

        max-width: 90%;

        margin: 20px auto;

    }



    /* Card */

    .card_link {

        width: 90%;

        padding: 20px;

    }



    .card_link img {

        height: 180px;

    }



    /* Footer */

    footer {

        font-size: 0.9rem;

        padding: 20px 10px;

    }

}



@media (min-width: 851px) {

    /* Desktop menu normale */

    .nav_list {

        display: flex !important;

        flex-direction: row;

    }

}