/*
Theme Name: Tema Ristorante
Theme URI: https://tuosito.com/tema-ristorante
Author: Il Tuo Nome
Author URI: https://tuosito.com
Description: Un tema WordPress classico personalizzato per un sito di ristorazione con Customizer Options.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tema_ristorante
Tags: custom-header, custom-menu, food, restaurant
*/

/* * Questo file contiene solo gli stili statici di base. 
 * Gli stili dinamici (colori, font, dimensioni) sono iniettati da functions.php.
 */

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Stile per l'immagine personalizzata nell'header */
.header-custom-image img {
    max-width: 32px; /* Puoi regolare questa dimensione */
    height: auto;
    display: block;
    margin: 0 auto 10px auto; /* Centrata con spazio sotto su mobile */
}

.main-navigation ul {
    list-style: none !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important; /* Disposizione verticale */
    width: 100%;
}

.main-navigation li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #ffffff; /* La riga bianca di separazione */
}

.main-navigation li:last-child {
    border-bottom: none;
}

.main-navigation a {
    display: block;
    padding: 12px 15px;
    text-decoration: none;
    color: inherit; /* Prende il colore del testo dell'header */
}

/* Rimuove eventuali pallini residui su alcuni browser */
.main-navigation ul li::before {
    content: none !important;
}

/* Allineamento per schermi più grandi */
@media (min-width: 768px) {
    .site-branding {
        display: flex;
        align-items: center;
        gap: 0px; /* Spazio tra immagine e testo */
    }
    
    .header-custom-image {
        margin: 0; /* Rimuove il margine inferiore su desktop */
    }
    
    .header-custom-image img {
        max-width: 32px;
    }
}

.site-content {
    min-height: 50vh;
    padding: 50px;
}

/* Stili per il contenitore del logo */
.site-branding a {
    text-decoration: none;
}

/* Stili Footer di base */
.site-footer {
    /* Padding e colori gestiti da CSS dinamico in functions.php */
    text-align: center;
}

/* ---------------------------------------------------- */
/* STILI FASCIA IMMAGINI OBLIQUA (Aggiornata a Immagine Singola) */
/* ---------------------------------------------------- */

/* Applichiamo le stesse regole di larghezza e padding a entrambi i contenitori */
.oblique-banner-wrapper,
.content-blocks-section {
    max-width: 1200px; /* Larghezza massima identica */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;  /* Padding laterale identico */
    padding-right: 20px !important; /* Padding laterale identico */
    width: 100%; /* Assicura che occupino tutto lo spazio su mobile */
    box-sizing: border-box;
}

/* Gestione degli spazi verticali (Riduzione) */
.oblique-banner-wrapper {
    margin-top: 10px !important;    /* Spazio tra header e banner */
    margin-bottom: 15px !important;  /* Spazio minimo sotto il banner */
}

/* Rimuoviamo eventuali margini che potrebbero creare asimmetria */
.oblique-banner-container {
    margin: 0; 
    width: 100%;
}

.oblique-block-style {
    /* L'altezza di 400px è definita nel CSS dinamico per poter essere sovrascritta */
    height: 400px; 
    border-radius: 8px; 
}

.oblique-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3; 
    pointer-events: none;
}

.oblique-banner-overlay a.cta-button {
    pointer-events: auto;
}

.oblique-banner-title {
    color: #ffffff; /* Colore gestito dal CSS dinamico */
    font-size: 40px; /* Dimensione gestita dal CSS dinamico */
    text-align: center;
    padding: 0 20px 5px 20px;
    margin: 0;
    line-height: 1.2;
}

.oblique-banner-subtitle {
    color: #ffffff; /* Colore gestito dal CSS dinamico */
    font-size: 20px; /* Dimensione gestita dal CSS dinamico */
    text-align: center;
    padding: 0 20px 20px 20px;
    margin: 0;
    line-height: 1.2;
}

/* Pulsanti CTA (Fascia Obliqua e Nuovi Blocchi Contenuto) */
.oblique-banner-overlay a.cta-button,
.content-block .cta-button {
    /* Colori gestiti dal CSS dinamico */
    padding: 12px 25px;
    text-decoration: none;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif; 
    font-weight: bold;
    font-size: 16px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
    /* Colori gestiti dal CSS dinamico */
    margin-top: 10px;
}

.oblique-banner-overlay a.cta-button:hover,
.content-block .cta-button:hover {
    /* Colori gestiti dal CSS dinamico */
}

.content-block .cta-button {
    font-size: 14px; /* Leggermente più piccolo */
    padding: 10px 20px;
}


/* ---------------------------------------------------- */
/* STILI AREE IMMAGINE CON CONTENUTO */
/* ---------------------------------------------------- */

.content-blocks-section {
    padding-top: 5px !important;    /* Avvicina i blocchi al banner */
    padding-bottom: 40px;           /* Spazio verso il footer */
}

.content-blocks-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; 
    gap: 20px; 
}

.content-block-wrapper {
    flex-basis: calc(50% - 10px); 
    max-width: calc(50% - 10px);
    margin-bottom: 0; 
}

/* Gestione del blocco dispari: centra l'ultimo blocco */
.content-block-wrapper.content-block-single {
    flex-basis: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center; 
}

.content-block-wrapper.content-block-single .content-block {
    max-width: 500px; 
    width: 100%;
}

.content-block {
    position: relative;
    height: 400px; 
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.content-block:hover {
    transform: translateY(-5px); 
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

.block-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
}

.block-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: background 0.3s ease;
}

.content-block:hover .block-overlay {
    background: rgba(0, 0, 0, 0.55);
}

.block-title {
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 15px 0;
    padding: 0 2px;
    line-height: 1.2;
    font-family: 'Playfair Display', serif; 
}


/* --- MOBILE RESPONSIVE AREE CONTENUTO --- */

@media (max-width: 768px) {
    .content-blocks-container {
        flex-direction: column; 
        gap: 20px;
    }
    
    .content-block-wrapper,
    .content-block-wrapper.content-block-single {
        flex-basis: 100%;
        max-width: 100%;
    }
    
    .content-block-wrapper.content-block-single .content-block {
        max-width: 100%; 
    }
    
    .content-block {
        height: 300px; 
    }
    
    .block-title {
        font-size: 24px;
    }
    
    .oblique-banner {
        margin: 0px auto; /* Meno margine in mobile */
        padding: 0; /* Rimuovi padding laterale in mobile */
    }
	
	.oblique-banner-wrapper,
    .content-blocks-section {
        padding-left: 10px !important;  /* Ridotto da 20px a 10px */
        padding-right: 10px !important; /* Ridotto da 20px a 10px */
    }
	
	.site-content {
    min-height: 50vh;
    padding: 10px;
	}
	
	
}