/* Blog Post Content Styles - Quill Editor Formatting */
.blog-content {
    background: #fff;
    color: #333;
}

.blog-content p { margin-bottom: 1rem; }
.blog-content strong, .blog-content b { font-weight: 700; }
.blog-content em, .blog-content i { font-style: italic; }
.blog-content u { text-decoration: underline; }
.blog-content s { text-decoration: line-through; }

.blog-content a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 2px solid var(--primary-color);
    transition: opacity 0.3s;
}
.blog-content a:hover { opacity: 0.7; }

.blog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
    display: block;
}

.blog-content ul, .blog-content ol { margin: 1rem 0 1rem 2rem; }
.blog-content li { margin-bottom: 0.5rem; }

.blog-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #666;
}

.blog-content pre {
    background: #f5f5f5;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1rem 0;
}

.blog-content code {
    background: #f5f5f5;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.9em;
}

.blog-content pre code {
    background: none;
    padding: 0;
}

.blog-content h1, .blog-content h2, .blog-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-family: var(--font-heading);
}

/* Quill Alignment Classes */
.blog-content .ql-align-center { text-align: center; }
.blog-content .ql-align-right { text-align: right; }
.blog-content .ql-align-justify { text-align: justify; }

/* Quill Font Size Classes */
.blog-content .ql-size-small { font-size: 0.75em; }
.blog-content .ql-size-large { font-size: 1.5em; }
.blog-content .ql-size-huge { font-size: 2em; }

/* Quill Font Family Classes */
.blog-content .ql-font-arial { font-family: Arial, sans-serif; }
.blog-content .ql-font-georgia { font-family: Georgia, serif; }
.blog-content .ql-font-times { font-family: 'Times New Roman', Times, serif; }
.blog-content .ql-font-courier { font-family: 'Courier New', Courier, monospace; }
.blog-content .ql-font-verdana { font-family: Verdana, sans-serif; }
.blog-content .ql-font-helvetica { font-family: Helvetica, Arial, sans-serif; }
.blog-content .ql-font-trebuchet { font-family: 'Trebuchet MS', sans-serif; }
.blog-content .ql-font-comic { font-family: 'Comic Sans MS', cursive; }
.blog-content .ql-font-impact { font-family: Impact, sans-serif; }
.blog-content .ql-font-palatino { font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; }
.blog-content .ql-font-garamond { font-family: Garamond, serif; }

.blog-content iframe {
    max-width: 100%;
    height: 400px;
    border-radius: 8px;
    margin: 1.5rem 0;
    display: block;
}

@media (max-width: 768px) {
    .blog-content iframe { height: 250px; }
}

/* Dark Mode Overrides */
body.dark-mode .blog-content {
    background: #000 !important;
    color: #fff !important;
}

body.dark-mode .blog-content p,
body.dark-mode .blog-content li,
body.dark-mode .blog-content span,
body.dark-mode .blog-content div {
    color: #fff !important;
}

body.dark-mode .blog-content h1,
body.dark-mode .blog-content h2,
body.dark-mode .blog-content h3,
body.dark-mode .blog-content h4,
body.dark-mode .blog-content h5,
body.dark-mode .blog-content h6 {
    color: #fff !important;
}

body.dark-mode .blog-content a {
    color: var(--primary-color) !important;
    border-bottom-color: var(--primary-color) !important;
}

body.dark-mode .blog-content blockquote {
    color: #ddd !important;
    border-left-color: var(--primary-color) !important;
}

body.dark-mode .blog-content pre {
    background: #1a1a1a !important;
    color: #fff !important;
}

body.dark-mode .blog-content code {
    background: #1a1a1a !important;
    color: #fff !important;
}

body.dark-mode .blog-content img {
    border: 1px solid #333;
}

body.dark-mode .blog-content strong,
body.dark-mode .blog-content b {
    color: #fff !important;
}

body.dark-mode .blog-content em,
body.dark-mode .blog-content i {
    color: #fff !important;
}

/* Title fixes */
.title-container h1 {
    color: #000 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #000 !important;
    background-clip: initial !important;
    font-weight: normal !important;
}

body.dark-mode .title-container h1 {
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: initial !important;
    font-weight: normal !important;
}