/* Wrapper dell'applicazione menu. */
.App {
    min-height: 100vh;
    background: var(--primary);
}

#root, .App, main {
    background: var(--primary) !important;
}

/* Contenuto di pagine/articoli singoli: leggibile sullo sfondo chiaro. */
.phm-page-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--spacing-md);
    color: var(--secondary);
    text-align: left;
}

.phm-page-content a {
    color: var(--accent);
}

/* Immagine a tutta larghezza (allergeni, tabelle alcoliche). */
.full-width-image-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
    max-width: 100%;
    margin: 0 auto;
}

.full-width-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow);
    object-fit: contain;
}

@media (max-width: 767px) {
    .full-width-image {
        max-width: 95%;
    }
}

@media (min-width: 768px) {
    .full-width-image {
        max-width: 80%;
    }
}

/* Messaggio quando non ci sono piatti in una categoria. */
.menu-empty {
    text-align: center;
    color: var(--secondary);
    font-style: italic;
    padding: var(--spacing-lg);
}