/* ---------------------------------------------------
   PALETTE DI RIFERIMENTO (esempio ispirato alla foto)
   ---------------------------------------------------
   -- Colore di sfondo principale (body): #FFF9F2
   -- Colore del testo principale:        #4F2E06
   -- Colore di evidenza / accent:       #C2A15F
   -- Hover accent color:                #AE8C4E
   -- Ombra/box-shadow accent:           rgba(194,161,95,0.5)
   --------------------------------------------------- */

/* Applica gli stili solo all'interno del contenitore del plugin */
.qmd-plugin-container {
    color: #4F2E06 !important; /* Testo su fondo chiaro */
    font-family: Arial, sans-serif;
    margin: 0;
}

/* Forza il colore di sfondo chiaro per il body nelle pagine del plugin */
body.qmd-plugin-page {
    background-color: #FFF9F2;  /* Sfondo chiaro */
    color: #4F2E06;            /* Testo scuro */
}

/* Assicurati che il contenitore del plugin non abbia uno sfondo che sovrascriva */
.qmd-plugin-container .qmd-container {
    background-color: transparent;
}

/* Nascondi i titoli delle pagine */
.qmd-plugin-container .entry-title,
.qmd-plugin-container .page-title,
.qmd-plugin-container h1.entry-title,
.qmd-plugin-container h1.page-title {
    display: none;
}

/* Titoli centrati */
.qmd-plugin-container .qmd-container h1.qmd-category-title {
    text-align: center;
    margin-bottom: 40px;
}

/* Titoli delle pagine */
.qmd-plugin-container .qmd-container h1,
.qmd-plugin-container .qmd-container h2,
.qmd-plugin-container .qmd-container h3,
.qmd-plugin-container .qmd-container h4 {
    color: #C2A15F; /* Dorato */
}

/* Stili generali */
.qmd-plugin-container .qmd-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: transparent;
    position: relative; /* Necessario per posizionare l'icona di ritorno */
}

.qmd-back-icon {
    display: none;
}

/* Regolazioni di spaziatura su desktop */
@media (min-width: 769px) {
    .qmd-plugin-container .qmd-container {
        padding: 60px 20px;
    }

    .qmd-plugin-container .qmd-macrocategorie,
    .qmd-plugin-container .qmd-categorie,
    .qmd-plugin-container .qmd-piatti {
        margin-bottom: 60px;
    }

    .qmd-plugin-container .qmd-categorie-buttons {
        margin-bottom: 60px;
    }
}

/* Elementi Macrocategoria e Categoria */
.qmd-plugin-container .qmd-macrocategoria-item,
.qmd-plugin-container .qmd-categoria-item {
    background-color: #FFFFFF; /* Card chiara */
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
    box-shadow: 0 4px 10px rgba(194,161,95, 0.5); /* Ombra dorata */
    width: 300px; /* Larghezza consistente */
    text-align: center;
}

.qmd-plugin-container .qmd-macrocategoria-item:hover,
.qmd-plugin-container .qmd-categoria-item:hover {
    transform: translateY(-10px);
}

/* Rimuovi sottolineatura dai link nelle card */
.qmd-plugin-container .qmd-macrocategoria-item a,
.qmd-plugin-container .qmd-categoria-item a {
    text-decoration: none;
    color: inherit;
}

/* Immagini con bordi arrotondati */
.qmd-plugin-container .qmd-macrocategoria-item img,
.qmd-plugin-container .qmd-categoria-item img,
.qmd-plugin-container .qmd-piatto-item img,
.qmd-plugin-container .qmd-piatto-img,
.qmd-plugin-container .qmd-popup-content img {
    border-radius: 10px;
    overflow: hidden; /* Aiuta a “tagliare” i bordi dell’immagine */
    width: 100%;
    height: auto;
}

/* La regola sotto è rimasta, ma se vuoi togliere 
   questi attributi per non sovrascrivere nulla, 
   puoi cancellarli */
.qmd-plugin-container .qmd-macrocategoria-item img,
.qmd-plugin-container .qmd-categoria-item img {
    background-color: #FFF9F2;
    padding: 10px;
    box-sizing: border-box;
}

/* Area di testo nelle card */
.qmd-plugin-container .qmd-macrocategoria-item h3,
.qmd-plugin-container .qmd-categoria-item h3 {
    background-color: #FFFFFF;
    margin: 0;
    padding: 10px 15px;
    font-size: 1.2em;
    color: #4F2E06; /* Testo scuro */
    text-align: center;
}

/* Aumenta lo spazio tra le card */
.qmd-plugin-container .qmd-macrocategorie,
.qmd-plugin-container .qmd-categorie {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* Spaziatura aumentata tra le card */
    margin-bottom: 30px;
}

/* Regola le dimensioni */
.qmd-plugin-container .qmd-macrocategorie-large .qmd-macrocategoria-item,
.qmd-plugin-container .qmd-categorie .qmd-categoria-item {
    width: 300px;
    height: auto;
}

/* Icone Macrocategoria piccole nelle pagine dei piatti */
.qmd-plugin-container .qmd-macrocategorie-small {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 10px 0;
    gap: 10px;
    justify-content: center;
}

.qmd-plugin-container .qmd-macrocategorie-small .qmd-macrocategoria-item {
    width: 80px;
    height: auto;
}

.qmd-plugin-container .qmd-macrocategorie-small .qmd-macrocategoria-item img {
    padding: 5px;
}

.qmd-plugin-container .qmd-macrocategorie-small .qmd-macrocategoria-item h3 {
    font-size: 0.8em;
    padding: 5px;
}

/* Rimuovi sottolineatura dai link nelle icone macrocategoria piccole */
.qmd-plugin-container .qmd-macrocategorie-small .qmd-macrocategoria-item a {
    text-decoration: none;
    color: inherit;
}

/* Pulsanti della pagina Categoria */
.qmd-plugin-container .qmd-categorie-buttons {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    padding: 10px 0;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: flex-start;
}

.qmd-plugin-container .qmd-categoria-button {
    padding: 10px 20px;
    background-color: #C2A15F; /* Dorato */
    color: #FFFFFF;           /* Testo bianco su dorato */
    text-decoration: none;    
    border-radius: 30px;
    transition: background-color 0.3s, color 0.3s;
    font-weight: bold;
    white-space: nowrap; 
}

.qmd-plugin-container .qmd-categoria-button:hover {
    background-color: #AE8C4E; /* Dorato più scuro */
    color: #FFF9F2;           
}

/* Lista dei piatti */
.qmd-plugin-container .qmd-piatti {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Spaziatura tra le card */
    justify-content: center;
}

.qmd-plugin-container .qmd-piatto-item {
    background-color: #FFFFFF;
    border-radius: 10px;
    overflow: hidden;
    width: 300px;
    transition: transform 0.3s;
    box-shadow: 0 4px 10px rgba(194,161,95, 0.5); /* Ombra dorata */
}

.qmd-plugin-container .qmd-piatto-item:hover {
    transform: translateY(-10px);
}

/* Se l'immagine è resa con .qmd-piatto-img, allora questa regola la riprendiamo
   NB: se l’img è un <img> con classe .qmd-piatto-img, resta valida la regola su */
.qmd-plugin-container .qmd-piatto-img {
    background-color: #FFF9F2;
    padding: 10px;
    box-sizing: border-box;
    /* border-radius: 10px;  <-- lo mettiamo in comune con le altre immagini sopra */
}

/* Rimuovi sottolineatura dai link nelle card dei piatti */
.qmd-plugin-container .qmd-piatto-item a {
    text-decoration: none;
    color: inherit;
}

/* Titolo e prezzo del piatto */
.qmd-plugin-container .qmd-piatto-item h4,
.qmd-plugin-container .qmd-prezzo {
    background-color: #FFFFFF;
    margin: 0;
    padding: 10px 15px;
}

.qmd-plugin-container .qmd-piatto-item h4 {
    font-size: 1em; 
    color: #4F2E06; /* Testo scuro */
}

.qmd-plugin-container .qmd-prezzo {
    font-size: 1.2em;
    color: #C2A15F; /* Dorato */
}

/* Popup dei dettagli del piatto */
.qmd-plugin-container #qmd-popup {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 60px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.qmd-plugin-container .qmd-popup-content {
    background-color: #C2A15F; /* Sfondo dorato */
    margin: auto;
    padding: 20px;
    border-radius: 15px;
    width: 80%;
    max-width: 600px;
    position: relative;
    color: #4F2E06; /* Testo scuro */
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
}

.qmd-plugin-container .qmd-popup-close {
    color: #4F2E06; /* Bottone di chiusura scuro */
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.qmd-plugin-container .qmd-popup-close:hover,
.qmd-plugin-container .qmd-popup-close:focus {
    color: #333333;
}

.qmd-plugin-container .qmd-popup-content img {
    /* Bordi arrotondati già definiti sopra nella regola comune */
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
    height: auto;
    object-fit: cover;
    margin-bottom: 20px;
    background-color: #FFF9F2;
}

.qmd-plugin-container .qmd-popup-content h2 {
    margin: 0 0 10px 0;
    font-size: 2em;
    color: #4F2E06;
}

.qmd-plugin-container .qmd-popup-content p {
    font-size: 1.2em;
    color: #4F2E06;
    margin-bottom: 20px;
}

/* Icona di ritorno */
.qmd-plugin-container .qmd-back-icon {
    position: absolute;
    top: 20px;
    left: 20px;
}

.qmd-plugin-container .qmd-back-icon img {
    width: 50px; 
    height: auto;
}

/* Responsivo per mobile */
@media (max-width: 767px) {
    .qmd-plugin-container .qmd-macrocategorie {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .qmd-plugin-container .qmd-macrocategoria-item {
        width: 80%;
        height: auto;
    }

    .qmd-plugin-container .qmd-macrocategoria-item img {
        height: auto;
    }

    .qmd-plugin-container .qmd-categorie,
    .qmd-plugin-container .qmd-piatti {
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 20px;
    }

    .qmd-plugin-container .qmd-categorie .qmd-categoria-item,
    .qmd-plugin-container .qmd-piatti .qmd-piatto-item {
        flex: 0 0 48%;
        max-width: 48%;
    }

    .qmd-plugin-container .qmd-piatto-item {
        width: 48%;
    }

    .qmd-plugin-container .qmd-container h1.qmd-category-title {
        margin-bottom: 20px;
    }

    .qmd-plugin-container .qmd-macrocategorie,
    .qmd-plugin-container .qmd-categorie,
    .qmd-plugin-container .qmd-piatti {
        margin-bottom: 20px;
    }

    .qmd-plugin-container .qmd-categorie-buttons {
        margin-bottom: 20px;
    }
}

/* Ulteriore media query per garantire due card per fila su smartphone */
@media (max-width: 599px) {
    .qmd-plugin-container .qmd-categorie .qmd-categoria-item,
    .qmd-plugin-container .qmd-piatti .qmd-piatto-item {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .qmd-plugin-container .qmd-piatto-item,
    .qmd-plugin-container .qmd-categoria-item {
        width: 48%;
    }
}

/* Visualizzazione su tablet: due card per riga */
@media (min-width: 600px) and (max-width: 1024px) {
    .qmd-plugin-container .qmd-categorie .qmd-categoria-item,
    .qmd-plugin-container .qmd-piatti .qmd-piatto-item {
        flex: 0 0 45%;
        max-width: 45%;
    }
}