/* styles.css */
/* 
    Created on : 2 mar 2025, 15:48:51
    Author     : stefano
*/
body {
    /* Immagine di Sfondo */
    background-image: url('../img/sfondo-cucina.jpg'); /* Percorso RELATIVO dal CSS all'immagine */

    /* Adattamento e Posizionamento */
    background-size: cover; /* Fa sì che l'immagine copra l'intera area del viewport.
                               L'immagine potrebbe essere ritagliata su alcuni schermi.
                               È la scelta più comune per sfondi full-screen. */
    background-position: center center; /* Centra l'immagine orizzontalmente e verticalmente. */
    background-repeat: no-repeat; /* Impedisce la ripetizione dell'immagine. */
    background-attachment: fixed; /* Mantiene l'immagine fissa durante lo scroll.
                                     Questo crea un leggero effetto parallax e spesso
                                     funziona bene su desktop. SU MOBILE può causare
                                     problemi di performance o visualizzazione su alcuni
                                     browser/OS. Potresti volerlo cambiare per mobile. */

    /* Colore di Fallback */
    background-color: #f0f0f0; /* Un colore di sfondo visibile se l'immagine non carica
                                  o prima che carichi. Scegli un colore che si abbini. */

    /* Altezza minima per garantire che lo sfondo sia visibile anche se il contenuto è corto */
    min-height: 100vh; /* Occupa almeno tutta l'altezza del viewport */

    /* Opzionale: Aggiustamenti per leggibilità (vedi sotto) */
}


/* --- Miglioramenti Leggibilità (Opzionali ma Spesso Necessari) --- */

/* Opzione 1: Overlay semi-trasparente sul body (richiede pseudo-elemento) */
/* body::before {
    content: "";
    position: fixed; // o absolute se vuoi che scorra con la pagina
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); // Overlay scuro (30% opacità)
    // background-color: rgba(255, 255, 255, 0.6); // Overlay chiaro (60% opacità)
    z-index: -1; // Mette l'overlay dietro il contenuto ma sopra lo sfondo body
} */

/* Opzione 2: Sfondo semi-trasparente sul container principale */
.container {
    background-color: rgba(255, 255, 255, 0.4); /* Bianco al 92% di opacità */
    padding-top: 1.5rem; /* Aggiungi padding sopra/sotto se metti sfondo */
    padding-bottom: 1.5rem;
    margin-top: 1rem; /* Distanza dalla navbar (se c'è) */
    margin-bottom: 1rem; /* Distanza dal fondo */
    border-radius: 0.5rem; /* Angoli arrotondati */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Ombra per staccare dal fondo */
}


.rec-selected {
    border: 2px solid #007bff; /* Colore del bordo */
    background-color: #66ff66; /* Colore di sfondo */
}

/* Stile per le card delle ricette (esistente o da aggiungere) */
.card {
    transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Aggiunge transizione fluida */
     background-color: #ffffff; /* Sfondo bianco pieno */
    /* Altri stili base della card se necessario */
}

/* Stile per la card selezionata */
.recipe-selected {
    border-color: #0d6efd; /* Colore primario di Bootstrap (o un colore a tua scelta) */
    border-width: 2px;     /* Spessore del bordo che già usavi */
    background-color: #e7f1ff; /* Un azzurro molto chiaro - SCEGLI IL COLORE CHE PREFERISCI */
    /* Esempio alternativo: un giallo chiaro */
    /* background-color: #fff9e6; */
    /* Esempio alternativo: un grigio chiaro */
    /* background-color: #f8f9fa; */
}

/* Puoi anche definire uno stile specifico per il bottone quando la card è selezionata,
   sebbene il cambio btn-secondary -> btn-success già lo faccia */
.recipe-selected .btn[data-action="toggle"] {
   /* Esempio: font-weight: bold; */
   /* Ma il cambio colore di Bootstrap di solito è sufficiente */
}

/* Aggiunta per compatibilità, assicurati che lo stile di Bootstrap non sovrascriva il tuo sfondo */
.recipe-selected .card-body {
    background-color: inherit; /* Eredita lo sfondo dalla card */
}

/* --- Adattamenti per Mobile (Media Query) --- */
@media (max-width: 767.98px) { /* Target dispositivi mobili (sotto i 768px di Bootstrap) */
    body {
        /* SU MOBILE 'fixed' può dare problemi. Cambia in 'scroll'. */
        background-attachment: scroll;
        /* Potresti voler usare un'immagine di sfondo diversa o più semplice per mobile */
        /* background-image: url('../img/sfondo-mobile.jpg'); */
    }

    .container {
        /* Riduci padding/margini su mobile se necessario */
        padding-left: 15px;
        padding-right: 15px;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        /* Potresti rendere lo sfondo del container meno opaco o trasparente su mobile */
         /* background-color: rgba(255, 255, 255, 0.95); */
    }

    /* Riduci colonne per le card su schermi piccoli (Bootstrap dovrebbe già farlo) */
    /* Ma puoi forzarlo se necessario */
    #recipes .col-md-4, #recipes .col-lg-3 {
       /* flex: 0 0 auto; */ /* Resetta Bootstrap se necessario */
       /* width: 50%; */   /* Esempio: 2 colonne su mobile */
       /* width: 100%; */  /* Esempio: 1 colonna su mobile */
    }

}