/* ============================================================
   CSS MASTER - STUDIO TECNICO CALCHERA (Versione 16.1 Final)
   Theme: Total Metal Tech 2026
   Layout: Originale Ripristinato + Nuova Home Hub
   ============================================================ */

/* --- 1. RESET E VARIABILI --- */
* { box-sizing: border-box; }

:root {
    --brand: #ce420c;       /* Arancione (Solo accenti minimi) */
    --gunmetal: #444444;    /* Canna di fucile */
    --silver: #e0e0e0;      /* Argento */
    --dark-carbon: #222222; /* Nero Carbonio */
}

body { 
    font-family: 'Roboto', sans-serif; 
    margin: 0; 
    padding: 20px 0; 
    background: #dcdcdc; 
    color: #333; 
    line-height: 1.6;
}

/* --- 2. WRAPPERS (1200px) --- */
#wrapper-menu-top, #wrapper-header, #wrapper-content, #wrapper-footer {
    max-width: 1200px; margin: 0 auto; width: 95%; overflow: hidden;
}

/* --- 3. MENU TOP (CANNA DI FUCILE) --- */
#wrapper-menu-top { 
    background: linear-gradient(to bottom, #555 0%, #333 100%) !important;
    border-bottom: 2px solid var(--brand); 
    border-top: 1px solid #777; 
}

#menu-top ul { list-style: none; display: flex; justify-content: center; margin: 0; padding: 0; flex-wrap: wrap; }
#menu-top ul li a { 
    color: #f2f2f2 !important; text-decoration: none; padding: 15px 18px; 
    font-size: 13px; font-weight: 700; text-transform: uppercase; display: block; 
    border-right: 1px solid #555; transition: 0.3s;
}
#menu-top ul li a:hover { background: #444; color: #fff !important; }

/* --- 4. HEADER (ARGENTO TECH - SOTTILE) --- */
#wrapper-header { 
    background-image: none !important;
    background: linear-gradient(to right, #999999 0%, #e0e0e0 50%, #999999 100%) !important;
    border-bottom: 1px solid #666; 
}

#header h1 { 
    font-size: 26px; text-transform: uppercase; margin: 0; padding: 15px 10px; 
    text-align: center; font-weight: 900; letter-spacing: 1px;
    color: #000000 !important; 
    text-shadow: 1px 1px 0px rgba(255,255,255, 0.6); 
}

/* --- 5. CONTENITORE PRINCIPALE --- */
#wrapper-content { 
    background: #fff; display: flex; gap: 40px; padding: 45px; 
    border-left: 1px solid #ccc; border-right: 1px solid #ccc; 
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

#content { flex: 3; min-width: 0; }
#wrapper-menu-page { flex: 1; min-width: 280px; }

/* TYPOGRAPHY */
#content h2 { 
    color: #444; border-bottom: 2px solid var(--brand); 
    padding-bottom: 12px; margin-top: 0; text-transform: uppercase; font-size: 22px; 
}
#content h3 { 
    color: var(--brand); font-size: 19px; font-weight: 700; 
    border-bottom: 1px solid #eee; margin: 30px 0 15px 0;
}

/* --- 6. SIDEBAR (LAYOUT ORIGINALE + COLORI METAL) --- */
.authority-badge { 
    background: linear-gradient(to bottom, #f0f0f0 0%, #cccccc 100%) !important;
    border: 1px solid #999 !important; color: #000 !important;
    padding: 15px; border-radius: 8px; font-size: 13px; margin-bottom: 25px; text-align: center; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#menu-page h3 { 
    background: none !important; color: #333 !important; 
    padding: 8px 0; font-size: 15px; text-align: left; text-transform: uppercase; 
    margin: 30px 0 10px 0; font-weight: 700; border-bottom: 2px solid var(--brand); 
}

#menu-page ul { list-style: none; padding: 0; margin: 0 0 25px 0; border: 1px solid #ddd; }
#menu-page ul li { border-bottom: 1px solid #eee; }
#menu-page ul li a { display: block; padding: 10px 15px; color: #555; text-decoration: none; font-size: 13px; }
#menu-page ul li a:hover { background: #e0e0e0; color: #000; padding-left: 20px; transition: 0.2s; }

/* --- 7. NUOVA GRIGLIA HUB (HOME PAGE) --- */
.metal-hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0 50px 0; }
.metal-hub-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; text-decoration: none; padding: 30px 20px; border-radius: 6px;
    background: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
    border: 1px solid #bbb; border-bottom: 3px solid var(--brand); transition: all 0.3s ease;
}
.metal-hub-card:hover {
    background: linear-gradient(to bottom, #444 0%, #222 100%);
    border-color: #000; transform: translateY(-5px);
}
.metal-hub-card:hover h3 { color: #fff !important; }
.metal-hub-card:hover p { color: #ccc; }

.metal-hub-card .hub-icon { font-size: 42px; margin-bottom: 15px; }
.metal-hub-card h3 { color: #333 !important; font-size: 18px; font-weight: 800; text-transform: uppercase; margin: 0 0 10px 0; border: none !important; }
.metal-hub-card p { color: #666; font-size: 13px; margin: 0; }

/* --- 8. PULSANTI (STILE METAL ACCHIAPPA-TUTTO) --- */
/* Questa sezione forza tutti i bottoni del sito ad essere grigi */
.btn-chiama, .btn-scrivi, .btn-submit, .hub-btn, 
input[type="submit"], input[type="button"], button, .button {
    display: block; width: 100%; text-align: center; text-decoration: none; 
    font-weight: bold; border-radius: 4px; text-transform: uppercase; cursor: pointer;
    margin-bottom: 10px; transition: all 0.3s; padding: 12px;
    background: linear-gradient(to bottom, #e6e6e6 0%, #bfbfbf 100%) !important;
    color: #222 !important; border: 1px solid #888 !important;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}

.btn-chiama:hover, .btn-scrivi:hover, .btn-submit:hover, .hub-btn:hover,
input[type="submit"]:hover, button:hover, .button:hover {
    background: linear-gradient(to bottom, #555 0%, #333 100%) !important;
    color: #fff !important; border-color: #000 !important;
}

/* --- 9. FOOTER (CANNA DI FUCILE) --- */
#wrapper-footer { 
    background: linear-gradient(to bottom, #555 0%, #333 100%) !important;
    color: #ccc !important; padding: 35px 20px; text-align: center; border-top: 2px solid var(--brand); 
}
#footer a { color: #fff !important; text-decoration: none; font-weight: bold; margin: 0 10px; }
#footer a:hover { color: var(--brand) !important; }

/* --- 10. MODULI EXTRA (Form, Tabelle, Gallery) --- */
.form-container { background: #f9f9f9; padding: 30px; border: 1px solid #ccc; border-radius: 8px; }
.form-control { width: 100%; padding: 12px; border: 1px solid #ccc; background: #fff; }
.is-required { border-left: 4px solid var(--brand); }
.data-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.data-table th { background: #e0e0e0; color: #333; padding: 12px; text-align: left; border-bottom: 2px solid #999; }
.data-table td { border-bottom: 1px solid #eee; padding: 12px; font-size: 14px; }

/* --- 11. RESPONSIVE --- */
@media (max-width: 950px) {
    #wrapper-content { flex-direction: column; padding: 20px; }
    #wrapper-menu-page { width: 100%; order: 2; }
    #content { order: 1; }
    .metal-hub-grid { grid-template-columns: 1fr; }
}