/* ============================================
   formattaz_stili.css
   STILI CENTRALIZZATI PER FORMATTAZIONI
   VALIDI PER ACCORDION, TESTI E OVUNQUE
   Versione unificata con variabili da base.css
   ============================================ */

/* ============================================
   LISTE PUNTATE
   ============================================ */
.testo-contenuto ul,
.accordion-content-inner ul {
    margin: 1.2em 0;
    padding-left: 2em;
    list-style-type: var(--lista-pallino, disc);
}

.testo-contenuto li,
.accordion-content-inner li {
    margin-bottom: 0.5em;
    line-height: var(--line-height, 1.6);
}

/* Liste annidate */
.testo-contenuto ul ul,
.accordion-content-inner ul ul {
    margin: 0.5em 0 0.5em 1.5em;
    list-style-type: circle;
}

.testo-contenuto ul ul ul,
.accordion-content-inner ul ul ul {
    list-style-type: square;
}

/* ============================================
   LISTE NUMERATE
   ============================================ */
.testo-contenuto ol,
.accordion-content-inner ol {
    margin: 1.2em 0;
    padding-left: 2em;
    list-style-type: decimal;
}

/* Liste numerate annidate - gestione automatica dei browser */
.testo-contenuto ol ol,
.accordion-content-inner ol ol {
    list-style-type: lower-alpha;
    margin: 0.5em 0 0.5em 1.5em;
    padding-left: 2.5em;
}

.testo-contenuto ol ol ol,
.accordion-content-inner ol ol ol {
    list-style-type: lower-roman;
    margin-left: 2em;
    padding-left: 3em;
}

.testo-contenuto ol ol ol ol,
.accordion-content-inner ol ol ol ol {
    list-style-type: decimal;
    margin-left: 2.5em;
    padding-left: 3.5em;
}

/* Stile per gli elementi della lista */
.testo-contenuto ol li,
.accordion-content-inner ol li {
    margin-bottom: 0.5em;
    line-height: var(--line-height, 1.6);
}

.testo-contenuto ol li:last-child,
.accordion-content-inner ol li:last-child {
    margin-bottom: 0;
}

/* ============================================
   TABELLE - VERSIONE UNIFICATA (con card view)
   ============================================ */
.testo-contenuto table,
.accordion-content-inner table,
.accordion-table {  /* <-- AGGIUNTO! */ 
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95rem;
    border: 1px solid var(--accordion-bordo, #dee2e6);
    border-radius: var(--bordo-raggio, 8px);
    overflow: hidden;
    box-shadow: var(--ombra-leggera, 0 2px 8px rgba(0,0,0,0.05));
}

/* Intestazione */
.testo-contenuto table thead,
.accordion-content-inner table thead,
.accordion-table thead {  /* <-- AGGIUNTO! */
    background: var(--accordion-intestazione-sfondo, var(--primario-medio, #2c5282));
    color: var(--accordion-intestazione-testo, white);
}

.testo-contenuto table th,
.accordion-content-inner table th,
.accordion-table th {  /* <-- AGGIUNTO! */
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.testo-contenuto table th:last-child,
.accordion-content-inner table th:last-child,
.accordion-table th:last-child {  /* <-- AGGIUNTO! */
    border-right: none;
}

/* Celle */
.testo-contenuto table td,
.accordion-content-inner table td,
.accordion-table td {  /* <-- AGGIUNTO! */
    padding: 10px 15px;
    border-bottom: 1px solid var(--accordion-bordo, #dee2e6);
}

/* Righe alterne - COMPLETE (pari/dispari) */
.testo-contenuto table tbody tr:nth-child(even),
.accordion-content-inner table tbody tr:nth-child(even),
.accordion-table tbody tr:nth-child(even) {  /* <-- AGGIUNTO! */
    background: var(--accordion-riga-pari, #bcdaee);
}

.testo-contenuto table tbody tr:nth-child(odd),
.accordion-content-inner table tbody tr:nth-child(odd),
.accordion-table tbody tr:nth-child(odd) {  /* <-- AGGIUNTO! */
    background: var(--accordion-riga-dispari, #d9f1f5);
}

/* Hover */
.testo-contenuto table tbody tr:hover,
.accordion-content-inner table tbody tr:hover,
.accordion-table tbody tr:hover {  /* <-- AGGIUNTO! */
    background: var(--accordion-riga-hover, #5dcceb);
    transition: background 0.2s ease;
}

/* Ultima riga senza bordo */
.testo-contenuto table tbody tr:last-child td,
.accordion-content-inner table tbody tr:last-child td,
.accordion-table tbody tr:last-child td {  /* <-- AGGIUNTO! */
    border-bottom: none;
}

/* ============================================
   TABELLE - VERSIONE MOBILE CARD VIEW
   (importata da accordion_frontend.css e migliorata)
   ============================================ */
@media (max-width: 768px) {
    .testo-contenuto table,
    .accordion-content-inner table,
    .accordion-table {  /* <-- AGGIUNTO! */
        display: block;
    }
    
    .testo-contenuto table thead,
    .accordion-content-inner table thead,
    .accordion-table thead {  /* <-- AGGIUNTO! */
        display: none; /* Nasconde l'intestazione */
    }
    
    .testo-contenuto table tbody tr,
    .accordion-content-inner table tbody tr,
    .accordion-table tbody tr {  /* <-- AGGIUNTO! */
        display: block;
        margin-bottom: 20px;
        border: 1px solid var(--accordion-bordo, #e2e8f0);
        border-radius: var(--bordo-raggio, 8px);
        padding: 12px;
        background: white;
        box-shadow: var(--ombra-leggera, 0 2px 6px rgba(0,0,0,0.05));
    }
    
    .testo-contenuto table td,
    .accordion-content-inner table td,
    .accordion-table td {  /* <-- AGGIUNTO! */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        border: none;
        border-bottom: 1px dashed var(--accordion-bordo, #e2e8f0);
        text-align: right;
    }
    
    .testo-contenuto table td:last-child,
    .accordion-content-inner table td:last-child,
    .accordion-table td:last-child {  /* <-- AGGIUNTO! */
        border-bottom: none;
    }
    
    .testo-contenuto table td:before,
    .accordion-content-inner table td:before,
    .accordion-table td:before {  /* <-- AGGIUNTO! */
        content: attr(data-label);
        font-weight: 700;
        color: var(--primario-scuro, #2C3E50);
        text-align: left;
        padding-right: 15px;
        width: 45%;
        font-size: 0.9rem;
    }
    
    /* Effetto hover sulle card */
    .testo-contenuto table tbody tr:hover,
    .accordion-content-inner table tbody tr:hover,
    .accordion-table tbody tr:hover {  /* <-- AGGIUNTO! */
        background-color: var(--accordion-riga-hover, #f8f9fa);
        transform: translateY(-2px);
        transition: all 0.2s ease;
    }
}

/* ============================================
   LINK
   ============================================ */
.testo-contenuto a,
.accordion-content-inner a {
    color: var(--primario-medio, #0066cc);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(44, 82, 130, 0.3);
    font-weight: 500;
    transition: all 0.2s ease;
}

.testo-contenuto a:hover,
.accordion-content-inner a:hover {
    color: var(--primario-scuro, #004080);
    text-decoration-color: currentColor;
}

/* Link telefonici - speciale */
.testo-contenuto a[href^="tel:"],
.accordion-content-inner a[href^="tel:"] {
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    color: var(--primario-medio, #2c5282);
}

.testo-contenuto a[href^="tel:"]:hover,
.accordion-content-inner a[href^="tel:"]:hover {
    text-decoration: underline;
    color: var(--primario-scuro, #1a365d);
}

/* Link con icona (opzionale) */
.testo-contenuto a[target="_blank"]:after,
.accordion-content-inner a[target="_blank"]:after {
    content: " 🔗";
    font-size: 0.8em;
    opacity: 0.7;
}

/* ============================================
   PARAGRAFI E TESTO BASE
   ============================================ */
.testo-contenuto p,
.accordion-content-inner p {
    margin: 1em 0;
    line-height: var(--line-height, 1.7);
    color: var(--grigio-testo, #3a3a3b);
}

.testo-contenuto p:first-child,
.accordion-content-inner p:first-child {
    margin-top: 0;
}

.testo-contenuto p:last-child,
.accordion-content-inner p:last-child {
    margin-bottom: 0;
}

.testo-contenuto strong,
.accordion-content-inner strong {
    font-weight: 700;
    color: var(--primario-scuro, #1a365d);
}

.testo-contenuto em,
.accordion-content-inner em {
    font-style: italic;
}

.testo-contenuto u,
.accordion-content-inner u {
    text-decoration: underline;
}

.testo-contenuto del,
.accordion-content-inner del {
    text-decoration: line-through;
    opacity: 0.7;
}

.testo-contenuto small,
.accordion-content-inner small {
    font-size: 0.85em;
    opacity: 0.8;
}

/* ============================================
   CITAZIONI E NOTE
   ============================================ */
.testo-contenuto blockquote,
.accordion-content-inner blockquote {
    margin: 1.5em 0;
    padding: 15px 20px;
    border-left: 4px solid var(--primario-medio, #2c5282);
    background: var(--grigio-chiarissimo, #f7fafc);
    font-style: italic;
    border-radius: 0 8px 8px 0;
    color: var(--grigio-testo, #3a3a3b);
}

.testo-contenuto blockquote p:last-child,
.accordion-content-inner blockquote p:last-child {
    margin-bottom: 0;
}

/* ============================================
   ALLINEAMENTI
   ============================================ */
.testo-centrato {
    text-align: center;
    display: block;
}

.testo-destra {
    text-align: right;
    display: block;
}

.testo-sinistra {
    text-align: left;
    display: block;
}

.testo-giustificato {
    text-align: justify;
    display: block;
}

/* ============================================
   SFONDI COLORATI (per evidenziazioni)
   ============================================ */
.sfondo-blu {
    background-color: var(--primario-chiaro, #3182ce);
    color: var(--bianco, #ffffff);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

.sfondo-grigio {
    background-color: var(--grigio-chiaro, #e2e8f0);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    color: var(--grigio-scuro, #252628);
}

.sfondo-giallo {
    background-color: #fff3cd;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    color: #856404;
}

.sfondo-verde {
    background-color: #d4edda;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    color: #155724;
}

.sfondo-rosso {
    background-color: #f8d7da;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    color: #721c24;
}

/* ============================================
   BOX INFORMATIVI
   ============================================ */
.box-info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
    padding: 15px;
    border-radius: var(--bordo-raggio, 8px);
    margin: 1.2em 0;
}

.box-warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 15px;
    border-radius: var(--bordo-raggio, 8px);
    margin: 1.2em 0;
}

.box-success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
    padding: 15px;
    border-radius: var(--bordo-raggio, 8px);
    margin: 1.2em 0;
}

.box-error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 15px;
    border-radius: var(--bordo-raggio, 8px);
    margin: 1.2em 0;
}

/* ============================================
   CODICE E PRE-FORMATTATO
   ============================================ */
.testo-contenuto code,
.accordion-content-inner code {
    font-family: 'Courier New', monospace;
    background: var(--grigio-chiarissimo, #f4f4f4);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.9em;
    border: 1px solid var(--grigio-chiaro, #e0e0e0);
    color: var(--primario-scuro, #1a365d);
}

.testo-contenuto pre,
.accordion-content-inner pre {
    background: var(--grigio-chiarissimo, #f4f4f4);
    padding: 15px;
    border-radius: var(--bordo-raggio, 8px);
    overflow-x: auto;
    border: 1px solid var(--grigio-chiaro, #e0e0e0);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 1.2em 0;
    color: var(--grigio-testo, #3a3a3b);
}

.testo-contenuto pre code,
.accordion-content-inner pre code {
    background: none;
    padding: 0;
    border: none;
}

/* ============================================
   IMMAGINI E MEDIA
   ============================================ */
.testo-contenuto img,
.accordion-content-inner img {
    max-width: 100%;
    height: auto;
    border-radius: var(--bordo-raggio, 8px);
    margin: 1em 0;
    box-shadow: var(--ombra-leggera, 0 2px 8px rgba(0,0,0,0.1));
}

.testo-contenuto figure,
.accordion-content-inner figure {
    margin: 1.5em 0;
    text-align: center;
}

.testo-contenuto figcaption,
.accordion-content-inner figcaption {
    font-size: 0.85em;
    opacity: 0.8;
    margin-top: 0.5em;
    font-style: italic;
    color: var(--grigio-medio, #4a5568);
}

/* ============================================
   TITOLI NEL CONTENUTO (h1-h6)
   ============================================ */
.testo-contenuto h1,
.accordion-content-inner h1 {
    font-size: 2em;
    margin: 1em 0 0.5em;
    font-weight: 700;
    color: var(--primario-scuro, #1a365d);
}

.testo-contenuto h2,
.accordion-content-inner h2 {
    font-size: 1.75em;
    margin: 0.9em 0 0.5em;
    font-weight: 600;
    color: var(--primario-medio, #2c5282);
}

.testo-contenuto h3,
.accordion-content-inner h3 {
    font-size: 1.5em;
    margin: 0.8em 0 0.4em;
    font-weight: 600;
    color: var(--primario-chiaro, #3182ce);
}

.testo-contenuto h4,
.accordion-content-inner h4 {
    font-size: 1.25em;
    margin: 0.7em 0 0.3em;
    font-weight: 600;
    color: var(--grigio-scuro, #252628);
}

.testo-contenuto h5,
.accordion-content-inner h5 {
    font-size: 1.1em;
    margin: 0.6em 0 0.2em;
    font-weight: 600;
    color: var(--grigio-medio, #4a5568);
}

.testo-contenuto h6,
.accordion-content-inner h6 {
    font-size: 1em;
    margin: 0.5em 0 0.2em;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
    color: var(--grigio-medio, #4a5568);
}

/* ============================================
   SEPARATORI
   ============================================ */
.testo-contenuto hr,
.accordion-content-inner hr {
    border: none;
    border-top: 1px solid var(--accordion-bordo, #dee2e6);
    margin: 2em 0;
}

/* ============================================
   RESPONSIVE GENERALE
   ============================================ */
@media (max-width: 640px) {
    .testo-contenuto,
    .accordion-content-inner {
        font-size: var(--font-size-base-mobile, 18px);
    }
    
    .testo-contenuto h1,
    .accordion-content-inner h1 {
        font-size: 1.75em;
    }
    
    .testo-contenuto h2,
    .accordion-content-inner h2 {
        font-size: 1.5em;
    }
    
    .testo-contenuto h3,
    .accordion-content-inner h3 {
        font-size: 1.25em;
    }
    
    .testo-contenuto blockquote,
    .accordion-content-inner blockquote {
        padding: 12px 15px;
        margin: 1em 0;
    }
}