/* Layout and non-typography specific styles from typography.css */

/* Text alignment utilities */
.text-center {
    text-align: center;
}

.text-muted {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
}

/* Long-form content layout */
.article, .page-content, .blog-post, .lesson-resource-content {
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1.7;
}

.article p, .page-content p, .blog-post p, .lesson-resource-content p {
    margin-bottom: 1.8em;
}

/* Blog post specific styling - larger text for better readability */
.blog-post p {
    font-size: 1.25rem;
    line-height: 1.8;
}

/* First paragraph styling for engaging intros */
.lesson-resource-content > div > p:first-of-type {
    font-size: 1.25rem;
    line-height: 1.6;
}

/* List styling for content areas - ensures lists display properly with bullets/numbers */
.article ul, .page-content ul, .blog-post ul, .lesson-resource-content ul,
.article ol, .page-content ol, .blog-post ol, .lesson-resource-content ol {
    margin-bottom: 1.5em;
    padding-left: 2em;
    list-style-position: outside;
}

.article ul, .page-content ul, .blog-post ul, .lesson-resource-content ul {
    list-style-type: disc;
}

.article ol, .page-content ol, .blog-post ol, .lesson-resource-content ol {
    list-style-type: decimal;
}

.article li, .page-content li, .blog-post li, .lesson-resource-content li {
    margin-bottom: 0.5em;
}

/* Nested list styling */
.article ul ul, .page-content ul ul, .blog-post ul ul, .lesson-resource-content ul ul {
    list-style-type: circle;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.article ul ul ul, .page-content ul ul ul, .blog-post ul ul ul, .lesson-resource-content ul ul ul {
    list-style-type: square;
}

.article ol ol, .page-content ol ol, .blog-post ol ol, .lesson-resource-content ol ol {
    list-style-type: lower-alpha;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.article ol ol ol, .page-content ol ol ol, .blog-post ol ol ol, .lesson-resource-content ol ol ol {
    list-style-type: lower-roman;
}

/* List indentation classes (for Word/Docs paste support) */
.article .ql-indent-1, .page-content .ql-indent-1, .blog-post .ql-indent-1, .lesson-resource-content .ql-indent-1 {
    padding-left: 3em;
}
.article .ql-indent-2, .page-content .ql-indent-2, .blog-post .ql-indent-2, .lesson-resource-content .ql-indent-2 {
    padding-left: 6em;
}
.article .ql-indent-3, .page-content .ql-indent-3, .blog-post .ql-indent-3, .lesson-resource-content .ql-indent-3 {
    padding-left: 9em;
}
.article .ql-indent-4, .page-content .ql-indent-4, .blog-post .ql-indent-4, .lesson-resource-content .ql-indent-4 {
    padding-left: 12em;
}
.article .ql-indent-5, .page-content .ql-indent-5, .blog-post .ql-indent-5, .lesson-resource-content .ql-indent-5 {
    padding-left: 15em;
}
.article .ql-indent-6, .page-content .ql-indent-6, .blog-post .ql-indent-6, .lesson-resource-content .ql-indent-6 {
    padding-left: 18em;
}
.article .ql-indent-7, .page-content .ql-indent-7, .blog-post .ql-indent-7, .lesson-resource-content .ql-indent-7 {
    padding-left: 21em;
}
.article .ql-indent-8, .page-content .ql-indent-8, .blog-post .ql-indent-8, .lesson-resource-content .ql-indent-8 {
    padding-left: 24em;
}

/* Table styling for content areas */
.article table, .page-content table, .blog-post table, .lesson-resource-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.article td, .article th,
.page-content td, .page-content th,
.blog-post td, .blog-post th,
.lesson-resource-content td, .lesson-resource-content th {
    border: 1px solid var(--md-sys-color-outline-variant);
    padding: 0.75em;
    text-align: left;
}

.article th, .page-content th, .blog-post th, .lesson-resource-content th {
    background-color: var(--md-sys-color-surface-variant);
    font-weight: 600;
}

/* Blockquote styling */
.article blockquote, .page-content blockquote, .blog-post blockquote, .lesson-resource-content blockquote {
    border-left: 4px solid var(--md-sys-color-primary);
    margin: 1.5em 0;
    padding: 0.5em 0 0.5em 1.5em;
    font-style: italic;
    color: var(--md-sys-color-on-surface-variant);
}

/* Code block styling */
.article pre, .page-content pre, .blog-post pre, .lesson-resource-content pre {
    background-color: var(--md-sys-color-surface-variant);
    padding: 1em;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1.5em 0;
}

.article code, .page-content code, .blog-post code, .lesson-resource-content code {
    font-family: "Consolas", "Monaco", "Andale Mono", monospace;
    font-size: 0.9em;
}

/* Inline code (not in pre) */
.article p code, .page-content p code, .blog-post p code, .lesson-resource-content p code,
.article li code, .page-content li code, .blog-post li code, .lesson-resource-content li code {
    background-color: var(--md-sys-color-surface-variant);
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

/* Quill editor specific styling */
.quill-link {
    text-decoration: underline;
    color: blue;
    cursor: default;
}

/* Make Quill editor match public page styling for better WYSIWYG experience */
.ql-editor {
    font-family: Georgia, serif;
    font-size: 1rem;
    line-height: 1.7;
}

.ql-editor p {
    font-size: 1.25rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.8em !important;
}

.ql-editor h2 {
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
}

.ql-editor h3 {
    margin-top: 1.5em !important;
    margin-bottom: 0.5em !important;
}