/*
Theme Name: Lo Specchio
Author: Tuo Nome & Team
Description: Tema stilizzato basato sulla Palette Ottanio e Carta da Zucchero, con bordi arrotondati.
Version: 1.3
*/

/* =========================================
   1. RESET E BASI (Colore di Sfondo della Home)
   ========================================= */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
}

body { 
    font-family: 'Georgia', serif; 
    line-height: 1.6; 
    color: #333; 
    background: #dbeff4; /* L'esatto azzurro/carta da zucchero dello sfondo della stilista */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

html {
    height: 100%;
}

/* =========================================
   2. HEADER & LOGO
   ========================================= */
.logo-area { 
    text-align: center; 
    padding: 20px 0; 
    background: #dbeff4; /* Uniformato allo sfondo como da bozza */
}

.site-logo {
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-logo {
    max-width: 450px; 
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.line { 
    height: 3px; 
    width: 80%; 
    background: #2E7D8A; /* Ottanio del logo */
    margin: 10px auto 0 auto; 
}

.social-icons { 
    margin-bottom: 5px; 
}

.social-icons a { 
    color: #2E7D8A; 
    margin: 0 10px; 
    font-size: 1.2rem; 
    text-decoration: none;
}

/* =========================================
   3. NAVBAR
   ========================================= */
.navbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    background: #2E7D8A; /* Barra ottanio scuro */
    color: #fff; 
    padding: 0 10%; 
    position: sticky; 
    top: 0; 
    z-index: 1000;
}

.nav-links { 
    display: flex; 
}

.dropbtn { 
    background: none; 
    border: none; 
    color: white; 
    padding: 15px 20px; 
    font-size: 1rem; 
    cursor: pointer; 
    font-family: inherit;
}

.search-box { 
    display: flex; 
    background: #fff; 
    padding: 2px 10px; 
    border-radius: 5px; 
}

.search-box input { 
    border: none; 
    padding: 5px; 
    outline: none; 
}

.search-box button { 
    border: none; 
    background: none; 
    cursor: pointer; 
    color: #2E7D8A;
}

/* =========================================
   4. LAYOUT GRID & EFFETTO ARROTONDATO
   ========================================= */
.grid-container { 
    display: grid; 
    grid-template-columns: 2fr 1fr; 
    gap: 30px; 
    max-width: 1200px; 
    margin: 30px auto; 
    padding: 0 20px; 
    flex: 1 0 auto; /* Spinge il footer in basso se la pagina ha pochi contenuti */
}

/* Blocchi bianchi con angoli arrotondati e ombreggiatura morbida */
.category-block, .featured-post, .sidebar { 
    background: #fff; 
    padding: 25px; 
    margin-bottom: 30px; 
    box-shadow: 0 4px 12px rgba(46, 125, 138, 0.15); /* Ombra azzurrata coerente */
    border-radius: 16px; /* Rende i bordi più tondeggianti e moderni */
}

.category-block h2, .sidebar h3 {
    border-bottom: 2px solid #2E7D8A; 
    color: #2E7D8A;
    margin-bottom: 20px; 
    padding-bottom: 5px;
}

.cat-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
    margin-top: 15px; 
}

/* Rettangolini delle Categorie Azzurrati */
.cat-card { 
    background: #e1f0f3; /* Sfondo carta da zucchero chiaro per i rettangoli */
    color: #2E7D8A; /* Testo ottanio */
    padding: 18px; 
    text-align: center; 
    font-weight: bold; 
    cursor: pointer; 
    border-radius: 8px; 
    transition: background 0.2s, transform 0.2s;
}

.cat-card:hover {
    background: #cfe7ec;
    transform: translateY(-2px); 
}

.featured-post h2 {
    font-size: 1.8rem;
    margin: 15px 0;
    color: #111;
}

/* =========================================
   5. SIDEBAR & FOOTER
   ========================================= */
.sidebar { 
    height: fit-content; 
}

.sidebar ul { 
    list-style: none; 
}

.sidebar ul li { 
    padding: 12px 0; 
    border-bottom: 1px solid #eee; 
}

.sidebar ul li a { 
    color: #333; 
    text-decoration: none; 
    transition: color 0.2s;
}

.sidebar ul li a:hover { 
    color: #2E7D8A;
    text-decoration: underline;
}

footer { 
    background: #2E7D8A; /* Footer coordinato con la navbar */
    color: #fff; 
    text-align: center; 
    padding: 30px 0; 
    margin-top: 50px; 
    flex-shrink: 0;
}

/* =========================================
   6. REGOLE PER MOBILE (Sotto 768px)
   ========================================= */
@media (max-width: 768px) {
    .main-logo { max-width: 280px; }
    .line { width: 95%; }

    /* FIX NAVBAR */
    .navbar { 
        display: flex;
        flex-direction: column; 
        padding: 10px;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* FIX LINK MENU */
    .nav-links { 
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%; 
        margin-bottom: 10px;
    }

    .search-box { width: 100%; box-sizing: border-box; }
    .search-box input { width: 100%; }

    /* FIX CONTENITORE */
    .grid-container { 
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px;
        margin: 10px 0;
        box-sizing: border-box;
    }

    /* FIX ARTICOLI E RECENT POSTS */
    .main-content, .sidebar, .featured-post, .category-block {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .sidebar {
        margin-top: 30px;
    }

    .cat-grid { 
        grid-template-columns: 1fr; 
    }

    .post-placeholder, .post-thumbnail { 
        height: 250px !important; /* Più basso sui telefoni per non occupare tutto lo schermo */
    }
}

/* =========================================
   7. GESTIONE DROPDOWN (Menu a tendina)
   ========================================= */
.dropdown { position: relative; display: inline-block; }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    border-radius: 8px; 
    overflow: hidden;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover { 
    background-color: #e1f0f3; 
    color: #2E7D8A;
}

.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropbtn { background-color: #24646E; }

/* =========================================
   8. POTENZIAMENTO FIX IMMAGINI (Effetto Sfocato Intelligente)
   ========================================= */

/* Il contenitore fa da "scatola" rigida con altezza fissa */
.post-thumbnail, .post-placeholder {
    position: relative;
    width: 100%;
    height: 350px; /* Altezza ottimale per PC */
    overflow: hidden; 
    border-radius: 8px;
    margin-bottom: 20px; 
    display: block;
    background-color: #111; /* Sfondo scuro di sicurezza */
}

/* 1. IMMAGINE DIETRO: Zoomata e sfocata per riempire i lati */
.post-thumbnail img.blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    filter: blur(20px) brightness(0.6); /* Sfuoca e scurisce leggermente per dare contrasto */
    transform: scale(1.15); /* Evita i bordi bianchi causati dal filtro blur */
    z-index: 1;
}

/* 2. IMMAGINE DAVANTI: Intera, nitida e proporzionata */
.post-thumbnail img.main-img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain; /* Non viene tagliata mai, preserva il disegno intero */
    z-index: 2; /* Sta sopra allo sfondo sfocato */
    display: block;
    margin: 0 auto;
}

/* Gestione testo e link segnaposto */
.post-placeholder {
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-weight: bold;
}

.post-image-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

/* Effetto Passaggio Mouse Coordinato */
.post-thumbnail:hover img.main-img {
    opacity: 0.9;
}

/* =========================================
   9. ALTRI FIX E COMPONENTI DI TESTO
   ========================================= */
.featured-post h2 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 12px; 
    color: #111;
    line-height: 1.3;
}

.featured-post p {
    margin-bottom: 18px; 
    color: #444;
    font-size: 1.05rem;
}

.featured-post a.read-more-link {
    color: #2E7D8A; 
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.05rem;
    display: inline-block;
    margin-top: 10px;
}

.featured-post a.read-more-link:hover {
    color: #1a515a; 
}

.nav-links .home-btn {
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 10px 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px; 
    transition: background 0.3s;
}

.nav-links .home-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.post-meta-tag, .post-meta-tag a {
    color: #555;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.post-meta-tag a:hover {
    color: #000;
}