/* Blog detail CMS content styles.
   Loaded both on the page (no-JS fallback) and INSIDE the shadow root that
   isolates the CMS HTML from site CSS (see blog-content-isolation.js).
   Because the shadow root has no access to site.css / Tailwind preflight /
   prose, this file must be self-contained. */

.blog-detail-content {
    color: #394561;
    font-size: 1.125rem;
    line-height: 1.8;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.blog-detail-content p {
    margin-bottom: 24px;
}

.blog-detail-content .blog-detail-lead {
    font-size: 1.25rem;
    color: #030A18;
    font-weight: 500;
    margin-bottom: 24px;
}

.blog-detail-content h1,
.blog-detail-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #030A18;
    margin-top: 32px;
    margin-bottom: 16px;
}

.blog-detail-content h3,
.blog-detail-content h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #030A18;
    margin-top: 24px;
    margin-bottom: 12px;
}

.blog-detail-content a {
    color: #742EDA;
    text-decoration: underline;
}

.blog-detail-content a:hover {
    color: #5610bc;
}

.blog-detail-content strong,
.blog-detail-content b {
    color: #030A18;
    font-weight: 700;
}

.blog-detail-content blockquote {
    border-left: 4px solid #742EDA;
    padding: 16px;
    padding-left: 16px;
    margin: 32px 0;
    font-style: italic;
    color: #030A18;
    background: rgba(241, 234, 251, 0.3);
    border-radius: 0 8px 8px 0;
}

.blog-detail-content ul {
    list-style: disc;
    padding-left: 24px;
    margin-bottom: 24px;
}

.blog-detail-content ol {
    list-style: decimal;
    padding-left: 24px;
    margin-bottom: 24px;
}

.blog-detail-content li {
    margin-bottom: 8px;
}

.blog-detail-content ul li strong {
    color: #030A18;
}

.blog-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.blog-detail-content hr {
    border: 0;
    border-top: 1px solid #EBE7EB;
    margin: 32px 0;
}

.blog-detail-content code {
    background: #F1EAFB;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Responsive embeds from CMS content (YouTube/Vimeo iframes, <video>, etc.).
   Without these, the editor's fixed width/height attributes overflow the card on mobile. */
.blog-detail-content iframe,
.blog-detail-content video,
.blog-detail-content embed,
.blog-detail-content object {
    max-width: 100%;
    border: 0;
    border-radius: 12px;
}

.blog-detail-content iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.blog-detail-content video {
    width: 100%;
    height: auto;
}

/* Tables scroll horizontally when wider than the container instead of breaking the layout */
.blog-detail-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
}

.blog-detail-content th,
.blog-detail-content td {
    border: 1px solid #EBE7EB;
    padding: 8px 12px;
    text-align: left;
}

.blog-detail-content th {
    background: #F6F6F9;
}

/* Pre/code blocks scroll horizontally instead of overflowing */
.blog-detail-content pre {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #F6F6F9;
    padding: 16px;
    border-radius: 12px;
}

.blog-detail-figure {
    margin: 32px 0;
}

.blog-detail-caption {
    text-align: center;
    font-size: 0.875rem;
    color: #59647A;
    margin-top: 8px;
}