@import url("/styles/root.css");
@import url("/styles/header.css");
@import url("/styles/footer.css");

.legal-section {
    background-color: white;
    border-radius: var(--radius-2xl);
    max-width: 900px;
    margin: 0 auto 32px;
    padding: 48px 32px;
    color: var(--text-dark);
    line-height: var(--leading-relaxed);
}

.legal-section h1 {
    font-size: var(--text-4xl);
    color: var(--primary);
    margin-bottom: 8px;
}

.legal-section .legal-updated {
    color: var(--tertiary);
    font-size: var(--text-sm);
    margin-bottom: 32px;
}

.legal-section h2 {
    font-size: var(--text-2xl);
    color: var(--primary);
    margin-top: 32px;
    margin-bottom: 12px;
}

.legal-section h3 {
    font-size: var(--text-lg);
    margin-top: 20px;
    margin-bottom: 8px;
}

.legal-section p,
.legal-section li {
    font-size: var(--text-base);
    margin-bottom: 12px;
}

.legal-section ul {
    padding-left: 24px;
    margin-bottom: 12px;
}

.legal-section a {
    color: var(--secondary);
    word-break: break-word;
}

/* Evidenzia i segnaposto da compilare */
.legal-section .placeholder {
    background-color: #fff3cd;
    padding: 0 4px;
    border-radius: var(--radius-sm);
    font-style: italic;
}

@media (max-width: 650px) {
    .legal-section {
        padding: 32px 20px;
    }

    .legal-section h1 {
        font-size: var(--text-3xl);
    }
}