/**
 * Privacy Policy Page Styles
 *
 * @package Biolocus
 * @version 1.0.0
 */

/* ========================================
   PRIVACY PAGE
   ======================================== */

.privacy-page {
    padding-bottom: var(--spacing-3xl);
}

.privacy-article {
    padding: var(--spacing-xl) 0;
}

/* ========================================
   HEADER
   ======================================== */

.privacy-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--card-border);
}

.privacy-header__title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-extrabold);
    color: var(--text-dark);
    margin: 0 0 var(--spacing-md);
}

.privacy-header__updated {
    font-size: var(--font-size-sm);
    color: var(--text-light);
    margin: 0;
}

.privacy-header__updated time {
    color: var(--text-mid);
}

/* ========================================
   LAYOUT
   ======================================== */

.privacy-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--spacing-2xl);
    align-items: start;
}

/* ========================================
   TABLE OF CONTENTS
   ======================================== */

.privacy-toc {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-lg));
}

.privacy-toc__inner {
    background: var(--section-alt);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
}

.privacy-toc__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    color: var(--text-dark);
    margin: 0 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--card-border);
}

.privacy-toc__nav {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.privacy-toc__link {
    display: block;
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--text-mid);
    line-height: var(--line-height-normal);
    transition: all var(--transition-fast);
}

.privacy-toc__link:hover {
    background: var(--card-bg);
    color: var(--primary);
}

.privacy-toc__link.is-active {
    background: var(--primary);
    color: var(--text-inverse);
}

/* ========================================
   CONTENT
   ======================================== */



.privacy-content section {
    margin-bottom: var(--spacing-2xl);
    scroll-margin-top: calc(var(--header-height) + var(--spacing-lg));
}

.privacy-content h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-bold);
    color: var(--text-dark);
    margin: 0 0 var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--primary-light);
}

.privacy-content h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-semibold);
    color: var(--text-dark);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
}

.privacy-content p {
    font-size: var(--font-size-base);
    color: var(--text-mid);
    line-height: var(--line-height-relaxed);
    margin: 0 0 var(--spacing-md);
}

.privacy-content ul,
.privacy-content ol {
    margin: 0 0 var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.privacy-content li {
    font-size: var(--font-size-base);
    color: var(--text-mid);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-sm);
}

.privacy-content li strong {
    color: var(--text-dark);
}

.privacy-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(127, 193, 67, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--transition-fast);
}

.privacy-content a:hover {
    text-decoration-color: var(--primary);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 1024px) {
    .privacy-layout {
        grid-template-columns: 240px 1fr;
        gap: var(--spacing-xl);
    }
}

@media (max-width: 768px) {
    .privacy-layout {
        grid-template-columns: 1fr;
    }
    
    .privacy-toc {
        position: static;
        order: -1;
    }
    
    .privacy-toc__inner {
        padding: var(--spacing-md);
    }
    
    .privacy-toc__nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }
    
    .privacy-toc__link {
        padding: var(--spacing-xs) var(--spacing-sm);
        background: var(--card-bg);
        border-radius: var(--radius-full);
        white-space: nowrap;
    }
    
    .privacy-header__title {
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 480px) {
    .privacy-header__title {
        font-size: var(--font-size-xl);
    }
    
    .privacy-content h2 {
        font-size: var(--font-size-lg);
    }
}