/* Stili Generali e Reset */
:root {
    font-size: 16px; /* Base per unità rem */
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #FFCC00; /* Colore di sfondo originale */
    background-image: url('im/sfondo.gif'); /* Immagine di sfondo originale */
    background-repeat: repeat;
    color: #333;
    line-height: 1.6;
    text-align: center; /* Mantiene questo per centrare tutto il contenuto a blocchi */
}

.main-container {
    max-width: 950px;
    margin: 1.25rem auto; /* 20px */
    padding: 1.25rem; /* 20px */
    background-color: #fff; /* Sfondo bianco per il contenuto */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* Include padding nel width */
    border-radius: 10px; /* Smussa gli angoli del contenitore principale */
}

/* Links Generali (non quelli della nav) */
a {
    color: #3033A4; /* Colore link originale */
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #FFFF00; /* Colore hover originale */
    text-decoration: underline;
}

/* Orologio e Data */
.clock-display {
    text-align: right;
    font-size: 0.8rem;
    color: #3033A4;
    font-weight: normal;
    margin-bottom: 0.5rem;
}

/* Header */
.site-header {
    margin-bottom: 2rem;
}

.site-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Centra il logo */
}

.header-content {
    margin-top: 1rem;
    text-align: center; /* Aggiunto per centrare i testi all'interno dell'header-content */
}

.header-title {
    font-size: 1.8rem;
    color: #000000;
    font-weight: bold;
    margin-bottom: 1rem;
}

.header-description {
    font-size: 1.1rem;
    color: #000000;
    line-height: 1.4;
    margin-bottom: 1rem;
}

/* Stili per i numeri di contatto e WhatsApp */
.contact-numbers {
    text-align: center; /* Assicura che i numeri di contatto siano centrati */
}

.contact-numbers p {
    margin: 0.2rem 0; /* Spaziatura tra i numeri */
}

.contact-numbers a {
    color: #3033A4; /* Colore link originale */
    text-decoration: underline; /* Sottolinea i link */
    font-weight: bold;
    font-size: 1.8rem;
}

a.whatsapp-link { /* Specifica per evitare conflitti */
    color: #25D366; /* Un verde più iconico per WhatsApp */
    text-decoration: underline;
}

a.whatsapp-link:hover {
    color: #1DA851; /* Un verde più scuro al hover */
}

.keywords-summary {
    font-size: 0.9rem;
    color: #000000;
    margin-top: 1rem;
    line-height: 1.5;
}

.facebook-block {
    margin-top: 1rem;
    text-align: center; /* Assicura che il blocco Facebook sia centrato */
}

.facebook-logo {
    max-width: 275px;
    height: auto;
    display: block;
    margin: 0 auto;
}

hr {
    border: none;
    border-top: 1px solid #ccc;
    margin: 2rem 0;
}

/* Navigazione */
.main-nav {
    background-color: #3033A4; /* Colore di sfondo della nav */
    padding: 0.625rem 0; /* 10px */
    margin-bottom: 2rem;
    border-radius: 10px; /* Smussa gli angoli della barra di navigazione */
    overflow: hidden; /* Importante per far sì che i border-radius funzionino correttamente con lo sfondo */
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra gli elementi della nav */
}

.nav-item {
    padding: 0; /* Rimuovi padding dalla cella per controllare meglio il link */
}

.nav-item a {
    background-color: #CCDDDD; /* Sfondo azzurrino tendente al grigio per il "bottone" */
    border-radius: 8px; /* Smussa gli angoli dello sfondo del testo del link */
    margin: 5px; /* Aggiunge un piccolo margine tra i "bottoni" dei link */
    box-sizing: border-box; /* Assicura che padding e border siano inclusi nella dimensione */
    border-right: 1px solid #19ADED; /* Ri-applica il separatore ai link stessi */
    
    /* Colori dei testi dei link di navigazione */
    color: #3033A4; /* Colore normale: blu scuro (come sfondo nav) */
    font-size: 1.2rem;
    font-weight: bold;
    white-space: nowrap;
    text-decoration: none;
    display: block; /* Rende il link un blocco per potergli dare sfondo e padding */
    padding: 0.625rem 0.9375rem; /* Padding spostato qui, era sul .nav-item */
}

.nav-item:last-child a {
    border-right: none; /* Rimuovi il bordo dall'ultimo link */
}

.nav-item a:hover {
    color: #19ADED; /* Colore al passaggio del mouse: azzurro */
    text-decoration: underline;
    background-color: #BBDDDD; /* Sfondo leggermente più scuro al hover */
}

.nav-item a:active {
    color: #6B8E23; /* Colore al click: verde spento */
    background-color: #AACCBB; /* Sfondo leggermente diverso al click per feedback visivo */
}

.nav-item span { /* Per il testo "(1MB - file formato .zip)" */
    display: block;
    font-size: 0.75rem;
    color: #19ADED;
    font-weight: normal;
    text-decoration: none;
    text-align: center; /* Centra il testo sotto il link */
    width: 100%; /* Assicura che lo span occupi tutta la larghezza disponibile del suo genitore */
}


/* Contenuto Principale e Sidebar */
.main-content-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem; /* 20px */
    margin-bottom: 2rem;
    justify-content: center; /* Centra le colonne (main-section e sidebar) quando la larghezza lo permette */
}

.main-section {
    flex: 3;
    min-width: 18.75rem; /* 300px */
    padding: 0.625rem; /* 10px */
    box-sizing: border-box;
    text-align: center; /* Centra il contenuto della sezione principale */
}

.sidebar {
    flex: 1;
    min-width: 15.625rem; /* 250px */
    padding: 0.625rem; /* 10px */
    box-sizing: border-box;
    background-color: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 10px; /* Smussa gli angoli della sidebar */
    text-align: center; /* Centra il contenuto della sidebar */
}

/* Stili specifici per la sezione principale */
.section-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 1rem;
    text-align: center; /* Modificato da left a center per centrare tutti i titoli */
}

.section-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 1.5rem;
    text-align: center; /* Modificato da justify a center */
    /* Se vuoi mantenere la giustificazione per il testo lungo, rimetti 'justify' */
}

.repair-headline {
    font-size: 2.5rem; /* Circa 40px */
    font-weight: bold;
    margin: 1rem 0;
    line-height: 1.2;
}

.green-text { color: #008000; }
.blue-text { color: #000080; }
.red-text { color: #FF0000; }

.highlight-box {
    background-color: #FFCC00; /* Sfondo giallo originale */
    padding: 0.625rem; /* 10px */
    margin: 1.5rem auto; /* `auto` per centrare orizzontalmente */
    display: inline-block; /* Per adattarsi al contenuto e centrare come blocco */
    border-radius: 8px; /* Smussa gli angoli del riquadro in evidenza */
}

.highlight-text {
    font-size: 2.5rem; /* Circa 40px */
    font-weight: bold;
    font-style: italic;
    color: #FF0000;
}

.call-to-action {
    font-size: 2.5rem; /* Circa 40px */
    font-weight: bold;
    margin: 1.5rem 0;
    line-height: 1.2;
}

.image-gallery {
    display: flex;
    flex-wrap: wrap; /* Permette alle immagini di andare a capo se lo spazio è insufficiente */
    justify-content: center; /* Centra le immagini all'interno della galleria */
    gap: 0.9375rem; /* 15px */
    margin: 1.5rem 0;
}

.repair-image {
    height: auto; /* Mantiene il rapporto d'aspetto */
    display: block;
    margin: 0 auto; /* Centra ogni singola immagine se su righe diverse */
    border-radius: 5px; /* Smussa leggermente gli angoli delle immagini */
    width: 100%; /* Permette alle immagini di restringersi */
}

/* Dimensioni specifiche per le due immagini */
.image-gallery .repair-image:first-child {
    max-width: 350px; /* Larghezza massima per desktop */
}
.image-gallery .repair-image:last-child {
    max-width: 180px; /* Larghezza massima per desktop */
}

/* Regola per la responsività delle immagini affiancate */
@media (max-width: 768px) {
    .image-gallery .repair-image:first-child {
        /* **MODIFICATO: Nuove percentuali per bilanciare dimensioni e affiancamento su mobile** */
        max-width: 55%; 
    }
    .image-gallery .repair-image:last-child {
        /* **MODIFICATO: Nuove percentuali per bilanciare dimensioni e affiancamento su mobile** */
        max-width: 25%; 
    }
}

.repair-time {
    font-size: 1.5rem; /* Circa 24px */
    font-weight: bold;
    font-style: italic;
    margin-bottom: 1.5rem;
}

.red-line {
    border: none;
    border-top: 1px solid #FF0000;
    margin: 2rem auto; /* Centra la linea orizzontale */
    width: 80%; /* Opzionale: per dare una larghezza fissa e vederla centrata */
}

.price-info {
    font-size: 1.5rem; /* Circa 24px */
    font-weight: bold;
    color: #5A708C; /* Colore originale */
    margin-bottom: 1.5rem;
}

.contact-location {
    margin-top: 2rem;
    text-align: center; /* Centra tutti gli elementi di contatto/posizione */
}

.location-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #008000;
    margin-bottom: 1rem;
    text-align: center; /* Modificato da left a center */
}

.email-info {
    font-size: 1rem;
    font-style: italic;
    color: #000000;
    margin-top: 0.5rem;
}

.opening-hours {
    font-size: 1rem; /* 16px */
    font-weight: bold;
    padding: 0.3125rem 0.625rem; /* 5px 10px */
    display: inline-block; /* Per mantenere lo sfondo colorato solo attorno al testo */
    margin: 0.5rem auto; /* `auto` per centrare l'elemento `inline-block` */
    border-radius: 5px; /* Smussa gli angoli dell'orario di apertura */
}

.yellow-bg { background-color: #FFFF00; }

.courier-address {
    font-size: 1rem;
    color: #000000;
    margin-top: 1.5rem;
    text-align: center; /* Modificato da left a center per l'indirizzo del corriere */
    padding-left: 0; /* Rimosso padding-left se centri */
}

/* Stili Sidebar */
.sidebar-block {
    background-color: #5A708C; /* Sfondo originale per i blocchi sidebar */
    padding: 0.9375rem; /* 15px */
    margin-bottom: 1.25rem; /* 20px */
    border-radius: 5px;
}

.sidebar-title {
    font-size: 1.6rem; /* Circa 25.6px */
    font-weight: bold;
    color: #FFCC00; /* Colore testo originale */
    margin-bottom: 1rem;
    line-height: 1.2;
}

.light-blue-bg {
    background-color: #5A708C; /* Colore di sfondo per il titolo specifico */
    color: #FFFFFF; /* Colore testo per il titolo specifico */
    padding: 0.625rem; /* 10px */
    margin: -0.9375rem -0.9375rem 0.9375rem -0.9375rem; /* Estende lo sfondo ai bordi del blocco (15px) */
    border-radius: 5px; /* Smussa gli angoli del titolo sidebar con sfondo */
}

.brand-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centra i loghi dei brand */
    gap: 0.625rem; /* 10px */
    margin-top: 1rem;
}

.brand-logo {
    max-width: 85px; /* Larghezza originale */
    height: 85px; /* Altezza originale */
    object-fit: contain; /* Assicura che l'immagine si adatta senza distorsioni */
    margin: 0 auto; /* Aggiunto per centrare ogni singolo logo se su righe diverse */
}

.sidebar-text {
    font-size: 1rem;
    color: #FFFFFF; /* Colore testo originale */
    margin-bottom: 1rem;
    text-align: center; /* Modificato da justify a center */
    /* Se vuoi mantenere la giustificazione per il testo lungo, rimetti 'justify' */
}

/* Footer */
.site-footer {
    padding-top: 1.5rem;
    border-top: 1px solid #ccc;
    margin-top: 2rem;
    text-align: center; /* Centra il contenuto del footer */
}

.footer-text {
    font-size: 0.9rem;
    color: #000000;
    margin-bottom: 0.5rem;
}

.copyright-text {
    font-size: 0.9rem;
    color: #000000;
}

.footer-link {
    color: #0000FF; /* Colore link originale */
    font-weight: bold;
    text-decoration: none;
    font-size: 1rem;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Media Queries per la Responsiveness */
@media (max-width: 900px) {
    .main-content-grid {
        flex-direction: column; /* Impila le colonne su schermi medi/piccoli */
        align-items: center; /* Centra gli elementi impilati orizzontalmente */
    }

    .main-section, .sidebar {
        min-width: unset; /* Rimuovi la larghezza minima */
        width: 100%;
        padding: 0.9375rem; /* 15px */
    }

    .sidebar {
        order: 1; /* Sposta la sidebar sopra il contenuto principale su mobile */
        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .main-section {
        order: 2;
    }

    .nav-list {
        flex-direction: column;
        align-items: center; /* Centra gli elementi della nav impilati */
    }

    .nav-item {
        width: 100%; /* La "cella" del link occupa tutta la larghezza disponibile */
        text-align: center;
    }

    .nav-item a {
        max-width: 250px; /* Imposta una larghezza massima per i "bottoni" */
        margin: 5px auto; /* Centra il bottone all'interno della "cella" */

        border-bottom: 1px solid #19ADED; /* Aggiungi bordo inferiore ai link impilati */
        border-right: none; /* Rimuovi bordo destro sui link impilati */
    }

    .nav-item:last-child a {
        border-bottom: none; /* Rimuovi bordo dall'ultimo link impilato */
    }

    .header-title, .repair-headline, .highlight-text, .call-to-action {
        font-size: 1.6rem; /* Riduci la dimensione dei titoli principali su mobile */
    }

    /* Adjusted font size for contact links on smaller screens */
    .contact-numbers a {
        font-size: 1.4rem; /* Slightly smaller for mobile, still prominent */
    }

    .brand-logo {
        max-width: 60px; /* Riduci la dimensione dei loghi dei brand su mobile */
        height: 60px;
    }
}

@media (max-width: 480px) {
    .main-container {
        padding: 0.625rem; /* 10px */
        margin: 0.625rem auto; /* 10px */
    }

    .header-title, .repair-headline, .highlight-text, .call-to-action {
        font-size: 1.3rem; /* Ulteriore riduzione per schermi molto piccoli */
    }

    /* Further adjusted font size for contact links on very small screens */
    .contact-numbers a {
        font-size: 1.2rem;
    }

    .nav-item a {
        font-size: 1rem;
        max-width: 200px; /* Esempio: ulteriore riduzione per schermi molto piccoli */
    }

    .nav-item span {
        font-size: 0.7rem;
        text-align: center; 
    }
}