/* ============================================
   ANTOLOGA LEGAL DOCUMENTS STYLESHEET
   ============================================ */

:root {
    --antologa-primary: #078282;
    --antologa-secondary: #004F71;
    --antologa-terciary: #C45A32;
    --antologa-contrast: #E1A951;
    --antologa-white: #F8F8F8;
    --antologa-light-gray: #E8E8E8;
    --antologa-gray: #9E9E9E;
    --antologa-dark: #282828;
    --font-heading: 'Inter', sans-serif;
    --font-body: 'Nunito', sans-serif;
}

/* ============================================
   PAGE STRUCTURE
   ============================================ */

.legal-documents-page {
    min-height: 100vh;
    background: var(--antologa-white);
}

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

.legal-header {
    background-color: var(--antologa-white) !important;
    border-bottom: 1px solid var(--antologa-light-gray);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 50;
}

    .legal-header .logo {
        height: 48px;
        width: auto;
    }

    .legal-header .tagline {
        color: var(--antologa-gray);
        font-family: var(--font-body);
    }

    .legal-header .back-link {
        color: var(--antologa-primary);
        font-family: var(--font-body);
        font-weight: 500;
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .legal-header .back-link:hover {
            color: var(--antologa-secondary);
        }

/* ============================================
   TABS
   ============================================ */

.tabs-container {
    background-color: var(--antologa-white) !important;
    border-bottom: 1px solid var(--antologa-light-gray);
    margin-bottom: 0;
}

.legal-tabs .mud-tabs-toolbar {
    border-bottom: none !important;
}

.legal-tabs .mud-tab {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    color: var(--antologa-dark);
    padding: 16px 24px;
    transition: all 0.2s ease;
}

    .legal-tabs .mud-tab:hover {
        color: var(--antologa-primary);
    }

.legal-tabs .mud-tab-active {
    color: var(--antologa-primary) !important;
    border-bottom: 2px solid var(--antologa-primary);
}

.tab-panel {
    padding: 0;
}

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

.content-container {
    padding: 48px 16px;
}

.page-title {
    color: var(--antologa-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 16px;
}

/* ============================================
   LEGAL SECTION
   ============================================ */

.legal-section {
    background-color: white;
    border-radius: 8px;
    border: 1px solid var(--antologa-light-gray);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    padding: 32px;
    margin-bottom: 32px;
}

.section-title {
    color: var(--antologa-secondary);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--antologa-primary);
}

.subsection-title {
    color: var(--antologa-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    margin-top: 24px;
    margin-bottom: 12px;
}

.section-content {
    color: var(--antologa-dark);
    font-family: var(--font-body);
    line-height: 1.7;
}

    .section-content p {
        margin-bottom: 16px;
    }

    .section-content strong {
        color: var(--antologa-secondary);
        font-weight: 600;
    }

/* ============================================
   LISTS
   ============================================ */

.mud-list {
    padding: 0;
}

.mud-list-item {
    padding: 8px 0;
    font-family: var(--font-body);
    color: var(--antologa-dark);
}

.definition-list .mud-list-item,
.requirement-list .mud-list-item,
.commission-list .mud-list-item,
.usage-list .mud-list-item,
.retention-list .mud-list-item,
.legal-basis-list .mud-list-item,
.sharing-list .mud-list-item {
    padding-left: 24px;
    position: relative;
}

    .definition-list .mud-list-item::before,
    .requirement-list .mud-list-item::before,
    .commission-list .mud-list-item::before,
    .usage-list .mud-list-item::before,
    .retention-list .mud-list-item::before,
    .legal-basis-list .mud-list-item::before,
    .sharing-list .mud-list-item::before {
        content: "•";
        position: absolute;
        left: 0;
        color: var(--antologa-primary);
        font-weight: 700;
    }

.subscription-list .mud-list-item {
    padding-left: 16px;
    font-size: 14px;
    position: relative;
}

    .subscription-list .mud-list-item::before {
        content: "•";
        position: absolute;
        left: 0;
        color: var(--antologa-primary);
    }

.ai-features-list .mud-list-item {
    padding-left: 24px;
    position: relative;
}

    .ai-features-list .mud-list-item::before {
        content: "•";
        position: absolute;
        left: 0;
        color: var(--antologa-primary);
        font-weight: 700;
    }

/* ============================================
   NOTICES & ALERTS
   ============================================ */

.beta-notice {
    border-left: 4px solid var(--antologa-contrast) !important;
    background-color: rgba(225, 169, 81, 0.1) !important;
}

    .beta-notice strong {
        font-weight: 700;
    }

.warning-notice {
    border-left: 4px solid var(--antologa-terciary) !important;
    background-color: var(--antologa-terciary) !important;
    color: white !important;
}

.law-compliance-banner {
    border-left: 4px solid var(--antologa-primary) !important;
    background-color: rgba(7, 130, 130, 0.1) !important;
    padding: 16px;
    border-radius: 0 8px 8px 0;
}

.compliance-text {
    color: var(--antologa-primary);
    font-family: var(--font-body);
    font-weight: 600;
}

/* ============================================
   CARDS
   ============================================ */

.contact-card {
    background-color: var(--antologa-light-gray);
    padding: 24px;
    border-radius: 8px;
    border: 1px solid var(--antologa-gray);
}

.subscription-category {
    color: var(--antologa-primary);
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 12px;
}

.right-title {
    color: var(--antologa-secondary);
    font-family: var(--font-heading);
    font-weight: 600;
    margin-bottom: 8px;
}

/* ============================================
   BRAND STATEMENT
   ============================================ */

.brand-statement {
    background: linear-gradient(135deg, rgba(7, 130, 130, 0.05) 0%, rgba(0, 79, 113, 0.05) 100%);
    border-radius: 8px;
    padding: 48px 32px;
    margin-top: 48px;
    border: 1px solid var(--antologa-light-gray);
}

/* ============================================
   ACKNOWLEDGMENT
   ============================================ */

.acknowledgment-card {
    background: var(--antologa-light-gray);
    color: var(--antologa-white) !important;
    border-radius: 8px;
    padding: 32px;
    margin-top: 32px;
    margin-bottom: 32px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.acknowledgment-text {
    color: var(--antologa-primary) !important;
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}

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

@media (max-width: 960px) {
    .content-container {
        padding: 32px 16px;
    }

    .legal-section {
        padding: 24px 16px;
    }

    .page-title {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .legal-header .logo {
        height: 40px;
    }

    .legal-header .tagline {
        display: none;
    }

    .content-container {
        padding: 24px 12px;
    }

    .legal-section {
        padding: 20px 12px;
    }

    .acknowledgment-card {
        padding: 2rem 1rem;
    }

    .brand-statement {
        padding: 32px 20px;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.mb-2 {
    margin-bottom: 8px;
}

.mb-3 {
    margin-bottom: 12px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-6 {
    margin-bottom: 24px;
}

.mt-2 {
    margin-top: 8px;
}

.mt-3 {
    margin-top: 12px;
}

.mt-4 {
    margin-top: 16px;
}

.text-center {
    text-align: center;
}