/* ========================================
   LEGAL PAGES - PatriMapp Design System
   Help & Privacy Pages
   Uses --pm-* CSS variables from base.css
   ======================================== */

/* Container */
.help-container,
.privacy-container {
    min-height: calc(100vh - 200px);
    background: linear-gradient(135deg, var(--pm-surface-2) 0%, var(--pm-surface-3) 100%);
    padding: var(--pm-space-6) 0;
}

/* Page Header */
.page-header {
    margin-bottom: var(--pm-space-8);
}

.page-header h1 {
    color: var(--pm-dark);
    font-weight: 700;
    margin-bottom: var(--pm-space-4);
}

.page-header h1 i {
    color: var(--pm-primary);
}

.page-header .lead {
    font-size: 1.25rem;
    margin-bottom: 0;
}

.last-updated {
    margin-top: var(--pm-space-4);
    padding: var(--pm-space-3);
    background: var(--pm-secondary-light);
    border-radius: var(--pm-radius-lg);
    display: inline-block;
}

/* Search Box */
.search-box {
    margin-bottom: var(--pm-space-6);
}

.search-box .input-group-text {
    background: var(--pm-surface-1);
    border-right: none;
    color: var(--pm-primary);
}

.search-box .form-control {
    border-left: none;
    box-shadow: var(--pm-shadow-md);
    border-radius: 0 var(--pm-radius-lg) var(--pm-radius-lg) 0;
}

.search-box .input-group-text {
    border-radius: var(--pm-radius-lg) 0 0 var(--pm-radius-lg);
}

/* Navigation Sidebar */
.help-navigation,
.privacy-navigation {
    background: var(--pm-surface-1);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    box-shadow: var(--pm-shadow-lg);
    top: var(--pm-space-6);
}

.nav-title {
    color: var(--pm-dark);
    font-weight: 600;
    margin-bottom: var(--pm-space-5);
    padding-bottom: var(--pm-space-2);
    border-bottom: 2px solid var(--pm-surface-3);
}

.help-navigation .nav-link,
.privacy-navigation .nav-link {
    color: var(--pm-muted);
    padding: var(--pm-space-3) var(--pm-space-4);
    border-radius: var(--pm-radius-lg);
    margin-bottom: var(--pm-space-2);
    transition: all var(--pm-transition-base);
    display: flex;
    align-items: center;
    gap: var(--pm-space-3);
}

.help-navigation .nav-link:hover,
.privacy-navigation .nav-link:hover,
.help-navigation .nav-link.active,
.privacy-navigation .nav-link.active {
    background: linear-gradient(135deg, var(--pm-primary), var(--pm-primary-dark));
    color: white;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(139, 122, 184, 0.3);
}

.help-navigation .nav-link i,
.privacy-navigation .nav-link i {
    width: 16px;
    flex-shrink: 0;
}

.help-navigation .badge {
    margin-left: auto;
    font-size: 0.7rem;
}

/* Support Contact Box */
.support-contact {
    background: var(--pm-primary-light);
    padding: var(--pm-space-5);
    border-radius: var(--pm-radius-lg);
    border: 1px solid rgba(139, 122, 184, 0.1);
}

.support-contact h6 {
    color: var(--pm-primary);
    margin-bottom: var(--pm-space-4);
    font-weight: 600;
}

/* FAQ Section */
.faq-section {
    background: var(--pm-surface-1);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-6);
    box-shadow: var(--pm-shadow-lg);
    margin-bottom: var(--pm-space-6);
}

.section-title {
    color: var(--pm-dark);
    font-weight: 700;
    margin-bottom: var(--pm-space-6);
    display: flex;
    align-items: center;
    gap: var(--pm-space-3);
}

.section-title i {
    color: var(--pm-secondary);
}

.faq-item {
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    height: 100%;
    transition: transform var(--pm-transition-base);
}

.faq-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--pm-shadow-md);
}

.faq-question {
    color: var(--pm-dark);
    font-weight: 600;
    margin-bottom: var(--pm-space-3);
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
}

.faq-question i {
    color: var(--pm-primary);
}

.faq-answer {
    color: var(--pm-muted);
    margin: 0;
    line-height: 1.6;
}

/* Help Sections */
.help-section,
.privacy-section {
    scroll-margin-top: var(--pm-space-6);
}

.section-header h2,
.privacy-section h2 {
    color: var(--pm-dark);
    font-weight: 700;
    margin-bottom: var(--pm-space-6);
    display: flex;
    align-items: center;
    gap: var(--pm-space-3);
    padding-bottom: var(--pm-space-2);
    border-bottom: 2px solid var(--pm-surface-3);
}

.section-header h2 i,
.privacy-section h2 i {
    color: var(--pm-primary);
}

/* Article Cards */
.articles-grid {
    display: grid;
    gap: var(--pm-space-5);
}

.article-card {
    background: var(--pm-surface-1);
    border-radius: var(--pm-radius-lg);
    box-shadow: var(--pm-shadow-sm);
    overflow: hidden;
    transition: all var(--pm-transition-base);
}

.article-card:hover {
    box-shadow: var(--pm-shadow-lg);
    transform: translateY(-2px);
}

.article-header {
    padding: var(--pm-space-5);
    cursor: pointer;
    background: var(--pm-surface-2);
    transition: background-color var(--pm-transition-base);
}

.article-header:hover {
    background: var(--pm-surface-3);
}

.article-title {
    margin: 0;
    color: var(--pm-dark);
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.collapse-icon {
    transition: transform var(--pm-transition-base);
    color: var(--pm-muted);
    font-size: 0.9rem;
}

.article-content {
    border-top: 1px solid var(--pm-surface-3);
}

.article-body {
    padding: var(--pm-space-5);
    color: #495057;
    line-height: 1.7;
}

.article-body h6 {
    color: var(--pm-primary);
    font-weight: 600;
    margin-top: var(--pm-space-5);
    margin-bottom: var(--pm-space-3);
}

.article-body ul,
.article-body ol {
    margin-bottom: var(--pm-space-4);
}

.article-body li {
    margin-bottom: var(--pm-space-2);
}

.article-body .row {
    margin-top: var(--pm-space-4);
}

/* Privacy Page Specific Styles */
.content-block {
    background: var(--pm-surface-1);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-6);
    box-shadow: var(--pm-shadow-sm);
    margin-bottom: var(--pm-space-6);
}

.important-notice {
    background: linear-gradient(135deg, #FFF5F1 0%, #FFD4C7 100%);
    border: 1px solid var(--pm-secondary);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin: var(--pm-space-5) 0;
}

.important-notice h6 {
    color: var(--pm-secondary-dark);
    margin-bottom: var(--pm-space-3);
    font-weight: 600;
}

.important-notice h6 i {
    color: var(--pm-secondary);
}

.important-notice p {
    color: var(--pm-secondary-dark);
    margin: 0;
}

/* Data Categories */
.data-categories {
    margin-top: var(--pm-space-6);
    padding-top: var(--pm-space-5);
    border-top: 1px solid var(--pm-surface-3);
}

.data-category {
    background: var(--pm-surface-2);
    padding: var(--pm-space-5);
    border-radius: var(--pm-radius-lg);
    height: 100%;
    margin-bottom: var(--pm-space-4);
}

.data-category strong {
    color: var(--pm-primary);
    display: block;
    margin-bottom: var(--pm-space-3);
}

.data-category ul {
    margin: 0;
    padding-left: var(--pm-space-4);
}

/* Usage Purposes */
.usage-purposes {
    display: grid;
    gap: var(--pm-space-5);
    margin-top: var(--pm-space-5);
}

.purpose-item {
    background: var(--pm-surface-2);
    border-left: 4px solid var(--pm-primary);
    padding: var(--pm-space-5);
    border-radius: 0 var(--pm-radius-lg) var(--pm-radius-lg) 0;
}

.purpose-item h6 {
    color: var(--pm-dark);
    margin-bottom: var(--pm-space-4);
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
}

.purpose-item ul {
    margin-bottom: var(--pm-space-4);
}

.base-legal {
    color: var(--pm-muted);
    font-style: italic;
    font-size: 0.85rem;
    background: var(--pm-primary-light);
    padding: var(--pm-space-1) var(--pm-space-2);
    border-radius: var(--pm-radius-sm);
    display: inline-block;
}

/* Sharing Policy */
.sharing-policy {
    margin-top: var(--pm-space-5);
}

.no-sharing-notice {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 1px solid var(--pm-primary);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin-bottom: var(--pm-space-6);
}

.no-sharing-notice h6 {
    color: #155724;
    margin-bottom: var(--pm-space-3);
    font-weight: 600;
}

.no-sharing-notice h6 i {
    color: var(--pm-primary);
}

.no-sharing-notice p {
    color: #155724;
    margin: 0;
}

.sharing-category {
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin-bottom: var(--pm-space-5);
    border-left: 4px solid var(--pm-muted);
}

.sharing-category h6 {
    color: var(--pm-dark);
    margin-bottom: var(--pm-space-3);
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
}

.sharing-category small {
    color: var(--pm-muted);
    font-style: italic;
    display: block;
    margin-top: var(--pm-space-2);
    background: rgba(108, 117, 125, 0.1);
    padding: var(--pm-space-1) var(--pm-space-2);
    border-radius: var(--pm-radius-sm);
}

/* Security Measures */
.security-measures {
    margin: var(--pm-space-5) 0;
}

.security-item {
    background: var(--pm-surface-2);
    padding: var(--pm-space-5);
    border-radius: var(--pm-radius-lg);
    height: 100%;
    margin-bottom: var(--pm-space-4);
}

.security-item h6 {
    color: var(--pm-dark);
    margin-bottom: var(--pm-space-4);
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
}

.security-item ul {
    margin: 0;
    padding-left: var(--pm-space-4);
}

/* Data Retention */
.data-retention {
    background: var(--pm-primary-light);
    border: 1px solid rgba(139, 122, 184, 0.2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin-top: var(--pm-space-6);
}

.data-retention h6 {
    color: var(--pm-primary);
    margin-bottom: var(--pm-space-4);
    font-weight: 600;
}

.data-retention ul {
    margin: 0;
}

/* User Rights */
.user-rights {
    display: grid;
    gap: var(--pm-space-5);
    margin: var(--pm-space-5) 0;
}

.right-item {
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    border-left: 4px solid var(--pm-primary);
}

.right-item h6 {
    color: var(--pm-dark);
    margin-bottom: var(--pm-space-3);
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
}

.right-item p {
    margin-bottom: var(--pm-space-2);
}

.right-item small {
    color: var(--pm-muted);
    font-style: italic;
    font-size: 0.85rem;
}

.exercise-rights {
    background: var(--pm-primary-light);
    border: 1px solid rgba(139, 122, 184, 0.2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin-top: var(--pm-space-6);
}

.exercise-rights h6 {
    color: var(--pm-primary);
    margin-bottom: var(--pm-space-4);
    font-weight: 600;
}

/* Cookies Types */
.cookies-types {
    margin: var(--pm-space-5) 0;
}

.cookie-type {
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin-bottom: var(--pm-space-5);
    border-left: 4px solid var(--pm-secondary);
}

.cookie-type h6 {
    color: var(--pm-dark);
    margin-bottom: var(--pm-space-3);
    display: flex;
    align-items: center;
    gap: var(--pm-space-2);
}

.cookie-type small {
    color: var(--pm-muted);
    font-style: italic;
    display: block;
    margin-top: var(--pm-space-2);
}

.cookie-management {
    background: var(--pm-secondary-light);
    border: 1px solid rgba(255, 154, 118, 0.3);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin-top: var(--pm-space-5);
}

.cookie-management h6 {
    color: var(--pm-secondary-dark);
    margin-bottom: var(--pm-space-4);
    font-weight: 600;
}

/* Contact Section */
.contact-info {
    background: var(--pm-surface-2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin-bottom: var(--pm-space-6);
}

.contact-details {
    margin-top: var(--pm-space-4);
}

.contact-details p {
    margin-bottom: var(--pm-space-2);
}

.complaint-process {
    background: var(--pm-danger-light);
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin: var(--pm-space-5) 0;
}

.complaint-process h6 {
    color: var(--pm-danger);
    margin-bottom: var(--pm-space-4);
    font-weight: 600;
}

.cnil-info {
    background: rgba(255, 154, 118, 0.05);
    border: 1px solid rgba(255, 154, 118, 0.2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin: var(--pm-space-5) 0;
}

.cnil-info h6 {
    color: var(--pm-secondary);
    margin-bottom: var(--pm-space-4);
    font-weight: 600;
}

.policy-updates {
    background: var(--pm-primary-light);
    border: 1px solid rgba(139, 122, 184, 0.2);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-5);
    margin-top: var(--pm-space-6);
}

.policy-updates h6 {
    color: var(--pm-primary);
    margin-bottom: var(--pm-space-4);
    font-weight: 600;
}

/* Still Need Help Section */
.still-need-help {
    background: linear-gradient(135deg, var(--pm-primary-light) 0%, var(--pm-secondary-light) 100%);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-8) var(--pm-space-6);
    text-align: center;
    margin-top: var(--pm-space-8);
}

.still-need-help h3 {
    color: var(--pm-primary);
    margin-bottom: var(--pm-space-4);
    font-weight: 700;
}

.contact-options {
    margin: var(--pm-space-6) 0;
}

.contact-options .btn-primary {
    background-color: var(--pm-primary);
    border-color: var(--pm-primary);
}

.contact-options .btn-primary:hover {
    background-color: var(--pm-primary-dark);
    border-color: var(--pm-primary-dark);
}

.support-info {
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--pm-radius-lg);
    padding: var(--pm-space-4);
    display: inline-block;
}

/* Search Highlights */
mark {
    background: var(--pm-secondary);
    padding: 2px 4px;
    border-radius: 3px;
    color: white;
}

/* Responsive Design */
@media (max-width: 992px) {
    .help-navigation,
    .privacy-navigation {
        position: static !important;
        margin-bottom: var(--pm-space-6);
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .usage-purposes {
        grid-template-columns: 1fr;
    }

    .user-rights {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .help-container,
    .privacy-container {
        padding: var(--pm-space-4) 0;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .article-header,
    .article-body,
    .content-block {
        padding: var(--pm-space-4);
    }

    .still-need-help {
        padding: var(--pm-space-6) var(--pm-space-4);
    }

    .contact-options .btn {
        display: block;
        width: 100%;
        margin: var(--pm-space-2) 0;
    }

    .section-header h2,
    .privacy-section h2 {
        font-size: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pm-space-2);
    }
}

@media (max-width: 576px) {
    .search-box .input-group {
        flex-direction: column;
    }

    .search-box .input-group-text,
    .search-box .form-control {
        border-radius: var(--pm-radius-lg);
        border: 1px solid var(--pm-border-medium);
        margin-bottom: var(--pm-space-2);
    }

    .faq-item {
        padding: var(--pm-space-4);
    }

    .article-title {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pm-space-2);
    }

    .purpose-item,
    .right-item,
    .sharing-category {
        padding: var(--pm-space-4);
    }
}