/* Styles for generic content pages like About Us, Privacy Policy, etc. */

.page-content {
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto; /* Center the content */
    padding: var(--spacing-xl) var(--spacing-md); /* Use defined spacing */
}

.page-content .page-header {
    text-align: center;
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 1px solid var(--color-border); /* Use defined variable */
}

.page-content .content-section {
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white background */
    padding: var(--spacing-xl); /* Use larger padding */
    border-radius: var(--border-radius); /* Use standard border radius */
    box-shadow: var(--shadow-md); /* Add a subtle shadow for definition */
    margin: var(--spacing-lg) auto 0 auto; /* Top/Bottom margin + centering */
    line-height: 1.7;
}

.page-content .content-section h2 {
    margin-top: 0; /* Remove extra top margin if it's the first element */
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--color-border); /* Use defined variable */
    color: var(--color-primary-dark); /* Use defined variable */
}

.page-content .content-section h3 {
    margin-top: var(--spacing-lg);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm); /* Add some space below H3 */
}

.page-content .content-section p:first-of-type {
    margin-top: 0;
}

.page-content .content-section ul {
    margin-left: 2em;
    margin-bottom: 1em;
}

.page-content .content-section li {
    margin-bottom: 0.5em;
}

.page-content .content-section strong {
    font-weight: bold;
}

.page-content .content-section a {
    color: var(--color-secondary); /* Use theme secondary color */
    text-decoration: underline;
}

.page-content .content-section a:hover {
    color: var(--color-primary); /* Use theme primary color */
}

body.is-night .page-content h2,
body.is-night .page-content h3 {
    color: var(--color-heading-on-dark, #eee);
    border-bottom-color: var(--color-border-subtle, #555); /* Adjust border for dark mode */
}
body.is-night .page-content p {
     color: var(--color-text-on-dark, #ccc);
}
body.is-night .page-content strong {
     font-weight: bold;
}
body.is-night .page-content .content-section {
    background-color: rgba(40, 40, 40, 0.85); /* Darker background for dark mode */
    box-shadow: var(--shadow-md-dark, 0 3px 6px rgba(0, 0, 0, 0.3));
}