/* ========================================
   LLM CONTENT STYLES
   Stili per contenuti editoriali generati
   Allineati allo stile generale del sito
   ======================================== */

/* Contenitore principale del contenuto */
.llm-content {
    font-family: 'Inter', sans-serif;
    color: var(--font-color);
    line-height: 1.7;
    margin: 0 auto;
}

/* Header del documento */
.llm-content header {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--borderline);
}

.llm-content header h1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--activeColor);
    margin-bottom: 16px;
    line-height: 1.3;
}

.llm-content header p {
    font-size: 14px;
    color: var(--mediumgrey2);
    margin: 0;
}

.llm-content header p strong {
    font-weight: 600;
    color: var(--font-color);
}

.llm-content header p em {
    font-style: italic;
}

/* Meta description e intro */
.llm-content #intro p,
.llm-content section > p:first-child {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Sezioni del contenuto */
.llm-content section {
    margin-bottom: 48px;
}

.llm-content section:last-child {
    margin-bottom: 0;
}

/* Titoli delle sezioni */
.llm-content h2 {
    font-size: 26px;
    font-weight: 700;
    color: var(--activeColor);
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--mediumgrey);
    line-height: 1.3;
}

.llm-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--activeColor);
    margin-top: 32px;
    margin-bottom: 16px;
    line-height: 1.4;
}

.llm-content h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--activeColor);
    margin-top: 24px;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Paragrafi */
.llm-content p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
    color: var(--font-color);
}

/* Enfasi e grassetto */
.llm-content strong {
    font-weight: 600;
    color: var(--activeColor);
}

.llm-content em {
    font-style: italic;
    color: var(--font-color);
}

/* Liste */
.llm-content ul,
.llm-content ol {
    margin-bottom: 20px;
    padding-left: 24px;
}

.llm-content ol {
    list-style: none;
}

.llm-content ul li,
.llm-content ol li {
    font-size: 15px;
    line-height: 1.7;
    color: var(--font-color);
}

.llm-content ul li::marker {
    color: var(--activeColor40);
}

.llm-content ol li::marker {
    color: var(--activeColor);
    font-weight: 600;
}

/* Liste annidate */
.llm-content ul ul,
.llm-content ul ol,
.llm-content ol ul,
.llm-content ol ol {
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 20px;
}

.llm-content ul li strong,
.llm-content ol li strong {
    color: var(--activeColor);
    font-weight: 600;
}

/* Link */
.llm-content a {
    color: rgb(87, 87, 87);
    text-decoration: underline;
    transition: all 0.3s ease-in-out;
    border-bottom: 1px solid transparent;
    margin-bottom: 10px;
}

.llm-content a:hover {
    color: rgb(87, 87, 87);
    border-bottom: 1px solid rgb(87, 87, 87);
}

.llm-content a[rel*="nofollow"] {
    color: var(--mediumgrey2);
}

.llm-content a[rel*="nofollow"]:hover {
    color: var(--activeColor);
}

.llm-content .btn.btn-outline, .llm-content .btn, .llm-content .cta {
    border: 1px solid var(--white);
    background: var(--activeColor);
    color: var(--white);
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
}

/* Sezioni FAQ */
.llm-content #faq h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--activeColor);
    margin-top: 24px;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid var(--activeColor);
}

.llm-content #faq > div {
    margin-bottom: 24px;
    padding: 20px;
    background-color: var(--lightgrey);
    border-radius: 8px;
    border: 1px solid var(--borderline);
    transition: all 0.3s ease-in-out;
}

.llm-content #faq > div:hover {
    background-color: var(--white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Procedura operativa (liste ordinate) */
.llm-content section#uso-manutenzione ol,
.llm-content section[id*="howto"] ol {
    counter-reset: step-counter;
    list-style: none;
    padding-left: 0;
}

.llm-content section#uso-manutenzione ol li,
.llm-content section[id*="howto"] ol li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 50px;
    margin-bottom: 20px;
}

.llm-content section#uso-manutenzione ol li::before,
.llm-content section[id*="howto"] ol li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background-color: var(--brandblu2);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

/* Best practice */
.llm-content section#best-practice ul li {
    padding-left: 12px;
    border-left: 3px solid var(--activeColor15);
    margin-bottom: 16px;
}

/* Box informativo (prezzi, brand, etc) */
.llm-content section#prezzi,
.llm-content section#brand {
    background-color: var(--lightgrey);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--borderline);
}

/* Fonti e credenziali autore */
.llm-content section#fonti-autore {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 2px solid var(--borderline);
    background-color: var(--lightgrey);
    padding: 30px;
    border-radius: 12px;
}

.llm-content section#fonti-autore p strong {
    color: var(--activeColor);
}

/* Call to action */
.llm-content section#cta {
    background: linear-gradient(135deg, var(--brandblu1) 0%, var(--brandblu2) 100%);
    color: var(--white);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    margin-top: 60px;
}

.llm-content section#cta h2 {
    color: var(--white);
    border-bottom: none;
    margin-top: 0;
}

.llm-content section#cta p {
    color: var(--white);
    opacity: 0.95;
    font-size: 16px;
}

.llm-content section#cta a {
    color: var(--white);
    border-bottom-color: var(--white);
    font-weight: 600;
}

.llm-content section#cta a:hover {
    opacity: 0.8;
}

/* Tag interni [INTERNAL: ...] */
.llm-content a[href*="INTERNAL"] {
    display: inline-flex;
    align-items: center;
    background-color: var(--activeColor7);
    color: var(--activeColor);
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--activeColor15);
    margin: 0 4px;
}

.llm-content a[href*="INTERNAL"]:hover {
    background-color: var(--activeColor15);
    border-color: var(--activeColor40);
}

.llm-content a[href*="INTERNAL"]::before {
    content: "→";
    margin-right: 6px;
    font-weight: 700;
}

/* Tabelle (se presenti) */
.llm-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    background-color: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.llm-content table thead {
    background-color: var(--activeColor);
    color: var(--white);
}

.llm-content table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
}

.llm-content table tbody tr {
    border-bottom: 1px solid var(--borderline);
}

.llm-content table tbody tr:last-child {
    border-bottom: none;
}

.llm-content table tbody td {
    padding: 12px 16px;
    font-size: 14px;
}

.llm-content table tbody tr:hover {
    background-color: var(--lightgrey);
}

/* Codice inline */
.llm-content code {
    background-color: var(--lightgrey);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    color: var(--activeColor);
    border: 1px solid var(--borderline);
}

/* Blocchi di codice */
.llm-content pre {
    background-color: var(--activeColor);
    color: var(--white);
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 24px 0;
}

.llm-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--white);
}

/* Citazioni */
.llm-content blockquote {
    border-left: 4px solid var(--brandblu2);
    padding-left: 20px;
    margin: 24px 0;
    font-style: italic;
    color: var(--activeColor80);
}

/* Immagini e media */
.llm-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 24px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Divider visivo */
.llm-content hr {
    border: none;
    border-top: 1px solid var(--borderline);
    margin: 40px 0;
}

.llm-content .badge {
    white-space: wrap;
    text-align: left;
}

/* Responsive */
@media (max-width: 768px) {
    .llm-content {
        padding: 24px 16px;
    }
    
    .llm-content header h1 {
        font-size: 26px;
    }
    
    .llm-content h2 {
        font-size: 22px;
    }
    
    .llm-content h3 {
        font-size: 18px;
    }
    
    .llm-content section#prezzi,
    .llm-content section#brand,
    .llm-content section#fonti-autore {
        padding: 20px;
    }
    
    .llm-content section#cta {
        padding: 24px;
    }
    
    .llm-content section#uso-manutenzione ol li,
    .llm-content section[id*="howto"] ol li {
        padding-left: 40px;
    }
    
    .llm-content section#uso-manutenzione ol li::before,
    .llm-content section[id*="howto"] ol li::before {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
}

/* Print styles */
@media print {
    .llm-content {
        max-width: 100%;
        padding: 0;
    }
    
    .llm-content section#cta {
        background: none;
        color: var(--font-color);
        border: 1px solid var(--borderline);
    }
    
    .llm-content a {
        color: var(--activeColor);
        text-decoration: underline;
    }
}