/* ============================================================ */
/*            STILI GENERALI E DESKTOP                           */
/* ============================================================ */

body { margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #000; background-image: url('https://history.ffonline.it/sfondo.jpg'); background-position: top center; background-repeat: no-repeat; background-attachment: fixed; color: #333; text-align: center; }
a { color: #444444; text-decoration: underline; }
a:hover { color: #000000; text-decoration: none; }
.wrapper { width: 766px; margin: 0 auto; background: #F7F9F9; text-align: left; border-left: 3px solid #ccc; border-right: 3px solid #ccc; }
.header img { display: block; }
.top-bar { background-color: #eee; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; height: auto; min-height: 25px; display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; font-size: 11px; }
.top-bar .updates { display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.top-bar .updates marquee a { color: #333; }
.top-bar .languages a, .top-bar .languages img { margin: 0 2px; vertical-align: middle; }
.footer { padding: 15px; text-align: center; font-size: 10px; color: #666; border-top: 1px solid #ddd; background-color: #efefef; line-height: 1.5; }
.sidebox { margin-bottom: 15px; border: 1px solid #E0E0E0; }
.sidebox-title { background-color: #efefef; padding: 5px; font-weight: bold; font-size: 11px; border-bottom: 1px solid #E0E0E0; }
.sidebox-content { padding: 8px; background: #FAFAFA; line-height: 1.6; word-wrap: break-word; }
.sidebox-content a {font-size: 11px;}

/* --- LAYOUT DESKTOP A 3 COLONNE --- */
.main-container { display: flex; padding: 10px; gap: 10px; }
.sidebar { width: 160px; flex-shrink: 0; }
.main-content { flex-grow: 1; min-width: 0; }
.mobile-menu-button, .mobile-menu-close-button { display: none; }


/* ============================================================ */
/*            STILI DEI CONTENUTI SPECIFICI                      */
/* ============================================================ */

/* --- News --- */
.search-bar { margin-bottom: 20px; }
.news-item { border: 1px solid #E0E0E0; margin-bottom: 15px; }
.news-title { background-color: #f5f5f5; padding: 8px; font-size: 14px; font-weight: bold; border-bottom: 1px solid #E0E0E0; }
.news-title a { text-decoration: none; }
.news-content { padding: 10px; line-height: 1.7; background: #FBFBFB; word-wrap: break-word; }
.news-meta { font-size: 10px; color: #666; margin-bottom: 10px; }
.news-more { padding: 8px; text-align: right; font-size: 11px; border-top: 1px solid #E0E0E0;}
.news-content img { max-width: 100%; height: auto; display: block; margin: 10px 0; }

/* --- Paginazione e Generici --- */
.pagination { text-align: center; margin: 20px 0; padding: 10px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.pagination a, .pagination b { margin: 0 5px; font-size: 12px; }
.breadcrumb { font-size: 11px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px; }

/* --- Contenitori Principali di Pagina (Guide, etc) --- */
.guide-container, .translator-container, .quiz-container, .preview-container, .bestiary-container { 
    border: 1px solid #E0E0E0; background: #FBFBFB; padding: 10px;
}
.guide-title { background-color: #f5f5f5; padding: 10px; border-bottom: 1px solid #E0E0E0; text-align: center; }
.guide-title h1 { margin: 0; font-size: 18px; color: #c00; }
.guide-title span { font-size: 12px; color: #333; }
.guide-meta { padding: 10px; font-size: 11px; color: #666; background: #FAFAFA; border-bottom: 1px solid #eee; text-align: center; }
.guide-meta span { display: inline-flex; align-items: center; margin: 0 10px; }
.guide-meta img { margin-left: 5px; }
.guide-content { padding: 15px; line-height: 1.8; font-size: 14px; word-wrap: break-word; }
.guide-pagination { border-top: 1px solid #eee; margin: 0; padding: 15px; }
.error-box { padding: 20px; text-align: center; background-color: #fff8f8; border: 1px solid #d00; color: #d00; margin: 10px; }

/* --- Galleria e Immagini --- */
.category-list ul { list-style-type: none; padding: 0; }
.category-list li { padding: 10px; border-bottom: 1px solid #eee; } .category-list li:hover { background-color: #f9f9f9; } .category-list a { text-decoration: none; font-weight: bold; } .category-list span { color: #666; font-size: 11px; margin-left: 10px; }
.gallery-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 20px 0; } .gallery-grid a { display: block; border: 1px solid #ddd; padding: 4px; background: #fff; transition: box-shadow 0.2s; } .gallery-grid a:hover { box-shadow: 0 0 8px rgba(0,0,0,0.2); } .gallery-grid img { display: block; max-width: 100px; height: auto; }
.image-viewer { text-align: center; padding: 10px; } .image-nav { padding: 15px; background-color: #f5f5f5; border: 1px solid #e0e0e0; margin: 20px 0; display: flex; justify-content: space-between; align-items: center; } .image-nav a, .image-nav span.disabled-link { font-weight: bold; text-decoration: none; } span.disabled-link { color: #999; } .image-container { padding: 10px; background: #fff; border: 1px solid #ddd; display: inline-block; } .image-container img { max-width: 100%; height: auto; display: block; } .image-meta { margin-top: 20px; padding: 15px; background: #fafafa; border: 1px solid #eee; text-align: left; font-size: 11px; color: #444; }

/* --- Form (Quiz, Al Bhed, etc.) --- */
.translator-section h2, .quiz-container h1 { margin-top: 0; font-size: 18px; color: #c00; border-bottom: 1px solid #f0f0f0; padding-bottom: 8px; }
.input-group label, .quiz-form legend { display: block; font-weight: bold; margin-bottom: 5px; font-size: 14px; }
.input-group input[type="text"], .quiz-result textarea { width: 100%; max-width: 450px; padding: 10px; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; box-sizing: border-box; }
.input-group input[readonly] { background-color: #f0f0f0; }
.translator-section button, .quiz-form button { padding: 10px 20px; font-size: 14px; font-weight: bold; cursor: pointer; border: 1px solid #333; background-color: #333; color: #fff; margin-right: 10px; border-radius: 3px; } .translator-section button:hover, .quiz-form button:hover { background-color: #c00; border-color: #c00; }
.translator-separator { border: 0; height: 1px; background-color: #ddd; margin: 30px 0; }

/* --- Tabelle (Download, Ricerca) --- */
.download-table, .search-results-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 20px; }
.download-table th, .download-table td, .search-results-table th, .search-results-table td { border: 1px solid #eee; padding: 8px; text-align: left; vertical-align: middle;}
.download-table th, .search-results-table th { background-color: #f5f5f5; font-weight: bold; } .download-table th a, .search-results-table th a { text-decoration: none; color: #333; }
.download-table tr:nth-child(even), .search-results-table tr:nth-child(even) { background-color: #fdfdfd; }
.download-table td:nth-child(n+2), .search-results-table td:nth-child(n+2) { text-align: center; width: 100px; } /* Seleziona dalla seconda colonna in poi */
.download-intro, .search-results-header { padding: 10px; background-color: #f9f9f9; border: 1px solid #eee; margin-top: 10px; }
.download-disclaimer, .search-no-results { margin-top: 20px; padding: 10px; background-color: #fff8e1; border: 1px solid #ffecb3; font-size: 11px; text-align: center; }


/* ============================================================ */
/*            STILI RESPONSIVE E MENU HAMBURGER (Corretti)       */
/* ============================================================ */
@media (max-width: 800px) {
    .wrapper { width: 100%; border: none; }
    .header img { max-width: 100%; height: auto; }
    .top-bar .updates { display: none; }

    /* Struttura per mobile: flex per riordinare gli elementi */
    .main-container {
        display: flex;
        flex-direction: column;
    }
    .main-content { order: 1; }
    .right-sidebar { order: 2; width: 100%; }

    /* Mostra il bottone hamburger */
    .mobile-menu-button {
        display: block;
        padding: 8px 12px; font-size: 16px; background-color: #444;
        color: white; border: none; cursor: pointer; border-radius: 4px; order: -1;
    }
    
    /* La sidebar SINISTRA diventa il menu mobile */
    .sidebar.left-sidebar {
        position: fixed;
        top: 0;
        left: -290px;
        width: 280px;
        height: 100%;
        background-color: #F7F9F9;
        box-shadow: 2px 0 15px rgba(0,0,0,0.3);
        z-index: 2000;
        transition: left 0.3s ease;
        padding: 10px;
        overflow-y: auto;
        box-sizing: border-box;
    }
    .sidebar.left-sidebar.is-open { left: 0; }
    
    .sidebar.left-sidebar .mobile-menu-close-button {
        display: block; width: 100%; text-align: right;
        font-size: 24px; font-weight: bold; padding: 0 5px 15px 0;
        background: none; border: none; color: #c00; cursor: pointer;
    }

    .main-content, .sidebar { width: 100%; box-sizing: border-box; }
}