/* Legal Pages Styling - Privacy Policy & Terms of Use */

/* Override body styles for legal pages - allow scrolling and text selection */
body {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--pd-xl, 24px);
    overflow-y: auto;
}

/* Content wrapper for legal pages - wider and scrollable */
.content-wrapper {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

/* Card styling for legal content */
.card {
    max-width: 100%;
    padding: var(--card-padding-lg, 48px);
    gap: var(--pd-xl, 24px);
}

/* Main title styling */
.common-title {
    font-size: var(--text-xl, 24px);
    font-weight: 600;
    color: var(--print-highlight, #CBE1F0);
    margin-bottom: var(--pd-lg, 18px);
    line-height: var(--leading-tight, 1.25);
}

/* Section headers (h3 inside header elements) */
header {
    margin-top: var(--pd-2xl, 36px);
    margin-bottom: var(--pd-md, 12px);
}

header:first-of-type {
    margin-top: var(--pd-lg, 18px);
}

header h3 {
    font-size: var(--text-lg, 20px);
    font-weight: 600;
    color: var(--print-highlight, #CBE1F0);
    line-height: var(--leading-tight, 1.25);
    margin: 0;
}

/* Direct h3 headings (for terms of use numbered sections) */
h3 {
    font-size: var(--text-lg, 20px);
    font-weight: 600;
    color: var(--print-highlight, #CBE1F0);
    line-height: var(--leading-tight, 1.25);
    margin-top: var(--pd-2xl, 36px);
    margin-bottom: var(--pd-md, 12px);
}

h3:first-of-type {
    margin-top: var(--pd-lg, 18px);
}

/* Paragraph styling */
p {
    color: var(--print-normal, #C8D3DB);
    font-size: var(--text-md, 16px);
    line-height: var(--leading-relaxed, 1.625);
    margin-bottom: var(--pd-md, 12px);
    text-align: left;
}

/* Links within paragraphs */
p a {
    color: var(--button-link-secondary-print, #718EDF);
    text-decoration: underline;
    font-size: inherit;
    font-weight: inherit;
}

p a:hover {
    color: var(--button-link-secondary-print-hover, #8CA0E5);
    text-decoration: underline;
}

p a:active {
    color: var(--button-link-secondary-print-active, #255CB2);
}

/* Unordered lists */
ul {
    list-style: disc;
    padding-left: var(--pd-xl, 24px);
    margin-bottom: var(--pd-md, 12px);
    color: var(--print-normal, #C8D3DB);
}

ul li {
    font-size: var(--text-md, 16px);
    line-height: var(--leading-relaxed, 1.625);
    margin-bottom: var(--pd-sm, 6px);
    padding-left: var(--pd-xs, 8px);
}

/* Nested lists */
ul ul {
    list-style: circle;
    margin-top: var(--pd-sm, 6px);
    margin-bottom: var(--pd-sm, 6px);
}

/* Ordered lists */
ol {
    list-style: decimal;
    padding-left: var(--pd-xl, 24px);
    margin-bottom: var(--pd-md, 12px);
    color: var(--print-normal, #C8D3DB);
}

ol li {
    font-size: var(--text-md, 16px);
    line-height: var(--leading-relaxed, 1.625);
    margin-bottom: var(--pd-sm, 6px);
    padding-left: var(--pd-xs, 8px);
}

/* Special list classes */
ul.bullets {
    list-style: disc;
}

ol.oh-so-legal {
    list-style: lower-alpha;
}

ol.oh-so-legal li {
    margin-bottom: var(--pd-md, 12px);
}

/* Strong/bold text */
strong {
    font-weight: 600;
    color: var(--print-highlight, #CBE1F0);
}

/* Links in lists */
ul a,
ol a {
    color: var(--button-link-secondary-print, #718EDF);
    text-decoration: underline;
}

ul a:hover,
ol a:hover {
    color: var(--button-link-secondary-print-hover, #8CA0E5);
}

ul a:active,
ol a:active {
    color: var(--button-link-secondary-print-active, #255CB2);
}

/* Email links */
a[href^="mailto:"] {
    color: var(--button-link-secondary-print, #718EDF);
    text-decoration: underline;
}

a[href^="mailto:"]:hover {
    color: var(--button-link-secondary-print-hover, #8CA0E5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .content-wrapper {
        max-width: 100%;
    }
    
    .card {
        padding: var(--card-padding-md, 24px);
    }
    
    .common-title {
        font-size: var(--text-lg, 20px);
    }
    
    header h3,
    h3 {
        font-size: var(--text-md, 16px);
    }
    
    p,
    ul li,
    ol li {
        font-size: var(--text-sm, 14px);
    }
}