/* ========================================
   Legal Pages - Privacy Policy & Terms
   Optimized for long-form reading
   ======================================== */

/* ========================================
   Legal Hero Section
   ======================================== */

.legal-hero {
    padding-top: calc(73px + var(--space-2xl));
    padding-bottom: var(--space-xl);
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.legal-header {
    max-width: 800px;
    margin: 0 auto var(--space-xl);
    text-align: center;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    text-decoration: none;
    margin-bottom: var(--space-md);
    transition: transform var(--transition-fast);
}

.back-link:hover {
    transform: translateX(-4px);
}

.legal-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.legal-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.legal-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin: 0;
}

/* ========================================
   Table of Contents
   ======================================== */

.toc {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--color-bg-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
}

.toc-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-xs);
}

.toc-list li {
    margin: 0;
}

.toc-list a {
    display: block;
    padding: var(--space-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
}

.toc-list a:hover {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    transform: translateX(4px);
}

/* ========================================
   Legal Content
   ======================================== */

.legal-content {
    padding: var(--space-3xl) 0;
    background-color: var(--color-bg-primary);
}

.legal-article {
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
}

/* ========================================
   Legal Sections
   ======================================== */

.legal-section {
    margin-bottom: var(--space-2xl);
    padding-top: var(--space-lg);
    scroll-margin-top: 100px; /* Account for fixed nav */
}

.section-number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
    padding-bottom: var(--space-md);
    border-bottom: 2px solid var(--color-accent);
}

.legal-section h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.legal-section h4 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.legal-section p {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.legal-section ul,
.legal-section ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-lg);
}

.legal-section li {
    font-size: var(--font-size-base);
    line-height: 1.8;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

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

.legal-section a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: all var(--transition-fast);
}

.legal-section a:hover {
    color: var(--color-accent-hover);
    text-decoration-thickness: 2px;
}

/* ========================================
   Special Content Boxes
   ======================================== */

.legal-intro-box {
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-bg-accent));
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    margin-bottom: var(--space-2xl);
    border-left: 4px solid var(--color-accent);
}

.legal-intro-box h2,
.legal-intro-box h3 {
    margin-top: 0;
    color: var(--color-text-primary);
}

.legal-intro-box p {
    margin-bottom: var(--space-md);
}

.legal-intro-box p:last-child {
    margin-bottom: 0;
}

.highlight-box {
    background-color: var(--color-bg-secondary);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.highlight-box.warning {
    background-color: #fff8e1;
    border-color: var(--color-warning);
}

.highlight-box p {
    margin-bottom: var(--space-sm);
}

.highlight-box p:last-child {
    margin-bottom: 0;
}

.highlight-box ul {
    margin-bottom: 0;
}

.highlight-box strong {
    color: var(--color-text-primary);
}

.crisis-box {
    background-color: #ffebee;
    border: 2px solid var(--color-error);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.crisis-box h4 {
    margin-top: 0;
    color: var(--color-error);
    font-size: var(--font-size-lg);
}

.crisis-box p {
    margin-bottom: var(--space-sm);
    color: var(--color-text-primary);
}

.crisis-box a {
    color: var(--color-error);
    font-weight: var(--font-weight-semibold);
}

.contact-box {
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.contact-box p {
    margin-bottom: var(--space-sm);
    font-family: 'Courier New', monospace;
}

.contact-box p:last-child {
    margin-bottom: 0;
}

.contact-box strong {
    color: var(--color-accent);
}

/* ========================================
   Related Links Sidebar
   ======================================== */

.legal-related {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--color-bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
}

.legal-related h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.legal-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.legal-related li {
    margin-bottom: var(--space-sm);
}

.legal-related a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-accent);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
}

.legal-related a:hover {
    transform: translateX(4px);
    color: var(--color-accent-hover);
}

/* ========================================
   Reading Experience Enhancements
   ======================================== */

/* Better line length for readability */
.legal-article p,
.legal-article li {
    max-width: 70ch; /* Optimal line length for reading */
}

/* Subtle section dividers */
.legal-section + .legal-section {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: var(--space-2xl);
}

/* Code snippets or technical terms */
code,
.technical-term {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

/* Definition lists */
dl {
    margin-bottom: var(--space-lg);
}

dt {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
    margin-top: var(--space-md);
}

dd {
    margin-left: var(--space-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .nav,
    .footer,
    .legal-related,
    .back-link,
    .toc {
        display: none;
    }

    .legal-hero {
        padding-top: 0;
        border: none;
    }

    .legal-content {
        padding: 0;
    }

    .legal-section {
        page-break-inside: avoid;
    }

    .section-number {
        page-break-after: avoid;
    }

    body {
        background: white;
        color: black;
    }

    a {
        text-decoration: underline;
        color: black;
    }
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
    .legal-hero {
        padding-top: calc(73px + var(--space-xl));
    }

    .legal-title {
        font-size: var(--font-size-2xl);
    }

    .toc-list {
        grid-template-columns: 1fr;
    }

    .legal-section {
        scroll-margin-top: 80px;
    }

    .section-number {
        font-size: var(--font-size-xl);
    }

    .legal-intro-box,
    .highlight-box,
    .crisis-box,
    .contact-box {
        padding: var(--space-md);
    }
}

/* ========================================
   Accessibility Enhancements
   ======================================== */

/* Focus styles for keyboard navigation */
.toc-list a:focus-visible,
.legal-section a:focus-visible,
.back-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

/* Ensure sufficient color contrast */
@media (prefers-contrast: high) {
    .legal-section p,
    .legal-section li {
        color: var(--color-text-primary);
    }

    .highlight-box {
        border-width: 3px;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .toc-list a,
    .back-link,
    .legal-related a {
        transition: none;
    }

    .toc-list a:hover,
    .back-link:hover,
    .legal-related a:hover {
        transform: none;
    }
}

/* ========================================
   Dark Mode Support (Future Enhancement)
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Reserved for future dark mode implementation */
    /* Can be enabled by uncommenting and adjusting colors */

    /*
    :root {
        --color-bg-primary: rgb(20, 20, 20);
        --color-bg-secondary: rgb(30, 30, 30);
        --color-text-primary: rgb(240, 240, 240);
        --color-text-secondary: rgb(180, 180, 180);
    }

    .highlight-box {
        background-color: rgba(255, 255, 255, 0.05);
    }
    */
}