/* ============================================================================
   LEGAL CSS - Privacy Policy & Cookie Policy Pages
   Running-X
   Version: 1.2
   Author: RNLS
   Relative Path: django_project\static\django_project\css\legal.css
   Description: Document-style styling for legal pages (privacy, cookie policy)
 =========================================================================== */

/* ============================================================================
   1. LEGAL PAGE BASE LAYOUT
   ============================================================================ */

/* Legal page specific body style - OVERRIDE centratura del custom.css */
body.legal-page {
    background: var(--background-dark);
    font-family: var(--font-body);
    line-height: 1.7;
    color: var(--text-secondary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    text-align: left !important;
}

/* Legal container - document-like appearance */
.legal-container {
    max-width: 900px;
    margin: var(--spacing-3xl) auto;
    padding: var(--spacing-3xl);
    background: var(--background-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    backdrop-filter: blur(10px);
    text-align: left !important;
}

/* Document-like paper effect */
.legal-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--gradient-primary);
    border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
}

/* ============================================================================
   2. LEGAL TYPOGRAPHY - Document Style
   ============================================================================ */

/* Document header */
.legal-container header {
    text-align: center;
    margin-bottom: var(--spacing-3xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 2px solid rgba(0, 217, 163, 0.15);
}

.legal-container header h1 {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}

/* Document sections */
.legal-container section {
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid rgba(0, 217, 163, 0.1);
    text-align: left !important;
}

.legal-container section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Section headings */
.legal-container section h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    letter-spacing: -0.01em;
    text-align: left;
}

.legal-container section h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--primary-color);
    margin: var(--spacing-xl) 0 var(--spacing-md);
    text-align: left;
}

.legal-container section h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
    text-align: left;
}

/* Paragraph text - document style */
.legal-container section p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
    text-align: left;
}

.legal-container section p:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   3. LEGAL LISTS - Structured Document Lists (ALLINEATI A SINISTRA)
   ============================================================================ */

.legal-container ul,
.legal-container ol {
    margin: var(--spacing-lg) 0 var(--spacing-lg) var(--spacing-xl);
    padding-left: var(--spacing-xl);
    text-align: left !important;
}

.legal-container li {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-sm);
    position: relative;
    padding-left: var(--spacing-sm);
    text-align: left !important;
    list-style-position: outside;
}

/* Unordered lists with custom bullets */
.legal-container ul li {
    list-style-type: none;
}

.legal-container ul li::before {
    content: "•";
    color: var(--primary-color);
    font-weight: 700;
    position: absolute;
    left: -1.2rem;
    font-size: 1.2rem;
}

/* Ordered lists with custom numbering */
.legal-container ol {
    counter-reset: legal-counter;
}

.legal-container ol li {
    counter-increment: legal-counter;
    list-style-type: none;
    position: relative;
}

.legal-container ol li::before {
    content: counter(legal-counter) ".";
    color: var(--primary-color);
    font-weight: 600;
    position: absolute;
    left: -2rem;
    width: 1.5rem;
    text-align: right;
}

/* Nested lists */
.legal-container ul ul,
.legal-container ol ol,
.legal-container ul ol,
.legal-container ol ul {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    margin-left: var(--spacing-xl);
    text-align: left !important;
}

/* ============================================================================
   4. LEGAL LINKS
   ============================================================================ */

.legal-container a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px dotted var(--primary-color);
    transition: all var(--transition-fast);
    font-weight: 500;
}

.legal-container a:hover {
    color: var(--secondary-color);
    border-bottom-color: var(--secondary-color);
}

/* Internal document links */
.legal-container a[href^="#"] {
    border-bottom: 1px dashed var(--primary-color);
}

/* External links with icon indicator */
.legal-container a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.9em;
    opacity: 0.7;
}

/* ============================================================================
   5. LEGAL HIGHLIGHTS & EMPHASIS
   ============================================================================ */

.legal-container strong {
    color: var(--text-primary);
    font-weight: 700;
}

.legal-container em {
    color: var(--primary-light);
    font-style: italic;
}

/* Important notices */
.legal-notice {
    background: rgba(0, 217, 163, 0.1);
    border-left: 4px solid var(--primary-color);
    padding: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    text-align: left;
}

.legal-notice p {
    margin-bottom: 0;
    color: var(--text-primary);
    text-align: left;
}

.legal-notice strong {
    color: var(--primary-color);
}

/* Data retention or important dates */
.legal-date {
    display: inline-block;
    background: var(--background-light);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* ============================================================================
   6. LEGAL TABLES (for structured data)
   ============================================================================ */

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-xl) 0;
    background: var(--background-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.legal-table th {
    background: var(--gradient-primary);
    color: white;
    font-weight: 600;
    padding: var(--spacing-md);
    text-align: left;
    font-size: 0.95rem;
}

.legal-table td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    text-align: left;
}

.legal-table tr:last-child td {
    border-bottom: none;
}

.legal-table tr:hover td {
    background: rgba(0, 217, 163, 0.05);
}

/* ============================================================================
   7. LEGAL FOOTER - CENTRATO (VERSIONE CON CLASSE)
   ============================================================================ */

.legal-footer {
    text-align: center;
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 2px solid rgba(0, 217, 163, 0.15);
    font-size: 0.95rem;
    color: var(--text-muted);
    width: 100%;
}

/* Testo copyright */
.copyright-text {
    margin-bottom: var(--spacing-md);
    color: var(--text-muted);
    text-align: center;
}

/* Contenitore link */
.legal-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

/* Stile link */
.legal-links a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px dotted var(--text-muted);
    transition: all var(--transition-fast);
    padding: var(--spacing-xs) 0;
}

.legal-links a:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Separatore */
.legal-links .separator {
    color: var(--text-muted);
    font-weight: 300;
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 576px) {
    .legal-links {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .legal-links .separator {
        display: none;  /* Nasconde il separatore su mobile */
    }
}

/* ============================================================================
   8. RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Tablet */
@media (max-width: 991px) {
    .legal-container {
        max-width: 95%;
        padding: var(--spacing-2xl);
        margin: var(--spacing-xl) auto;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .legal-container {
        padding: var(--spacing-xl);
        margin: var(--spacing-lg) auto;
        border-radius: var(--radius-lg);
    }

    .legal-container section {
        margin-bottom: var(--spacing-xl);
        padding: var(--spacing-md) 0;
    }

    .legal-container section h2 {
        font-size: 1.5rem;
    }

    .legal-container section h3 {
        font-size: 1.25rem;
    }

    .legal-container ul,
    .legal-container ol {
        margin-left: var(--spacing-md);
        padding-left: var(--spacing-md);
    }

    .legal-container ul li::before {
        left: -1rem;
    }

    .legal-container ol li::before {
        left: -1.5rem;
        width: 1.2rem;
    }
    
    .legal-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Footer mobile adjustments */
    .legal-footer a:first-of-type::after {
        margin-left: var(--spacing-sm);
        margin-right: var(--spacing-xs);
    }
}

/* Small mobile */
@media (max-width: 576px) {
    .legal-container {
        padding: var(--spacing-lg);
        margin: var(--spacing-md) auto;
        border-radius: var(--radius-md);
    }

    .legal-container header h1 {
        font-size: 1.75rem;
    }

    .legal-container section p,
    .legal-container li {
        font-size: 0.95rem;
    }

    /* Footer su mobile - impila i link */
    .legal-footer {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .legal-footer a:first-of-type::after {
        content: none;  /* Rimuovi il separatore su mobile */
    }

    .legal-footer a {
        margin: 0;
        display: block;
    }
}

/* ============================================================================
   9. PRINT STYLES - For official document printing
   ============================================================================ */

@media print {
    body.legal-page {
        background: white;
        color: black;
        text-align: left;
    }

    .legal-container {
        max-width: 100%;
        margin: 0;
        padding: 1.5cm;
        background: white;
        border: none;
        box-shadow: none;
        text-align: left;
    }

    .legal-container::before {
        display: none;
    }

    .legal-container a {
        color: black;
        text-decoration: underline;
        border-bottom: none;
    }

    .legal-container a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
        font-style: italic;
    }

    .legal-container a[href^="#"]::after,
    .legal-container a[href^="/"]::after {
        display: none;
    }

    .legal-footer {
        border-top: 1px solid black;
        text-align: center;
    }
}

/* ============================================================================
   10. UTILITY CLASSES FOR LEGAL PAGES
   ============================================================================ */

/* Last updated text */
.last-updated {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: var(--spacing-sm);
    text-align: right;
}

/* Definition terms */
.legal-term {
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 1px dotted var(--primary-color);
    cursor: help;
}

/* Important legal concepts */
.legal-concept {
    background: rgba(0, 217, 163, 0.05);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

/* ============================================================================
   END OF LEGAL CSS
 =========================================================================== */