/* Blog Post Content Formatting Fixes */

/* Fix paragraph spacing - 0px desktop, 0px mobile */
.blog_details_content p {
    margin: 0 0 10px !important;
    line-height: 28px;
}

@media (max-width: 767px) {
    .blog_details_content p {
        margin: 0 0 10px !important;
        font-size: 16px;
        line-height: 26px;
    }
}

/* Add spacing after paragraphs followed by headings or media */
.blog_details_content p+h1,
.blog_details_content p+h2,
.blog_details_content p+h3,
.blog_details_content p+h4,
.blog_details_content p+h5,
.blog_details_content p+h6,
.blog_details_content p+iframe,
.blog_details_content p+img,
.blog_details_content p+ul,
.blog_details_content p+ol {
    margin-top: 10px;
}

/* Fix list item spacing - increase to 15px for better readability */
.blog_details_content ul li,
.blog_details_content ol li {
    margin-bottom: 10px !important;
    line-height: 26px;
    padding-left: 5px;
}

.blog_details_content ul,
.blog_details_content ol {
    margin: 14px 0 18px !important;
    padding-left: 30px;
}

/* Fix embedded media (images) - make them larger and responsive */
/* Exclude profile/author images and small icons */
.blog_details_content img:not(.admin_image):not([style*="width: 40px"]):not([style*="height: 40px"]) {
    max-width: 100%;
    /*height: auto !important;*/
    border-radius: 12px;
    /*margin: 35px 0 !important;*/
    display: block;
    /*margin: 18px 0 !important;*/
}

/* CRITICAL: Make iframes visible and properly sized */
.blog_details_content iframe {
    display: block !important;
    width: 100% !important;
    min-height: 450px !important;
    height: 450px !important;
    border-radius: 12px;
    margin: 20px 0 !important;
    border: none;
}

@media (max-width: 767px) {
    .blog_details_content iframe {
        min-height: 280px !important;
        height: 280px !important;
    }
}

/* Handle Quill editor video embeds specifically */
.blog_details_content .ql-video {
    display: block !important;
    width: 100% !important;
    min-height: 450px !important;
    height: 450px !important;
    border-radius: 12px;
    margin: 20px 0 !important;
}

/* Fix for oembed containers (YouTube, Vimeo, etc.) from Quill */
.blog_details_content [data-oembed-url],
.blog_details_content [data-oembed],
.blog_details_content .video-container,
.blog_details_content .embed-responsive {
    position: relative;
    display: block !important;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    margin: 20px 0 !important;
    border-radius: 12px;
}

.blog_details_content [data-oembed-url] iframe,
.blog_details_content [data-oembed] iframe,
.blog_details_content .video-container iframe,
.blog_details_content .embed-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border: none;
}

/* Fix heading spacing */
.blog_details_content h1,
.blog_details_content h2,
.blog_details_content h3,
.blog_details_content h4,
.blog_details_content h5,
.blog_details_content h6 {
    margin: 22px 0 10px;
    line-height: 1.4;
}

/* First heading should not have top margin */
.blog_details_content>h1:first-child,
.blog_details_content>h2:first-child,
.blog_details_content>h3:first-child,
.blog_details_content>h4:first-child,
.blog_details_content>h5:first-child,
.blog_details_content>h6:first-child,
.blog_details_content>p:first-child {
    margin-top: 0;
}

/* Fix blockquote spacing */
.blog_details_content blockquote {
    margin: 18px 0;
    padding: 20px 0 20px 25px;
    border-left: 4px solid var(--color-primary-two);
    font-style: italic;
}

.blog_details_content .blog-content {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-heading-two);
    max-width: 100%;
}

.blog_details_content {
    max-width: 820px;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .blog_details_content .blog-content {
        font-size: 16px;
    }
}

.blog_details_content a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog_details_content h1,
.blog_details_content h2,
.blog_details_content h3,
.blog_details_content h4,
.blog_details_content h5,
.blog_details_content h6 {
    scroll-margin-top: 120px;
}

.blog_details_content pre,
.blog_details_content code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.blog_details_content pre {
    background: #0c111d;
    color: #ffffff;
    padding: 18px 18px;
    border-radius: 12px;
    overflow: auto;
    margin: 18px 0;
}

.blog_details_content code {
    background: rgba(15, 83, 220, 0.08);
    padding: 2px 6px;
    border-radius: 6px;
}

.blog_details_content pre code {
    background: transparent;
    padding: 0;
}

/* Ensure video and iframe elements are always visible */
.blog_details_content video {
    display: block !important;
    max-width: 100%;
    height: auto !important;
    border-radius: 12px;
    margin: 20px 0 !important;
}

.blog_details_content p:empty {
    display: none;
}

.blog_details_content .blog-content > *:last-child {
    margin-bottom: 0 !important;
}

/* Remove any potential hiding of embeds */
.blog_details_content iframe,
.blog_details_content video,
.blog_details_content embed,
.blog_details_content object {
    visibility: visible !important;
    opacity: 1 !important;
}