/**
 * Blog light theme – hero card, TOC card, content section: white bg, black text.
 * TOC dropdown icon forced dark so it shows on white. Rest of page stays black.
 */

/* Hero card (67–86): white background, black text */
.blog.theme-light .blog-hero-card {
    background: #ffffff !important;
}

.blog.theme-light .blog-hero-card p,
.blog.theme-light .blog-hero-card span,
.blog.theme-light .blog-hero-card h1 {
    color: #000000 !important;
}

/* TOC card (89–192): white background, black text */
.blog.theme-light .blog-toc-card {
    background: #ffffff !important;
}

.blog.theme-light .blog-toc-card p,
.blog.theme-light .blog-toc-card span,
.blog.theme-light .blog-toc-card button {
    color: #000000 !important;
}

/* TOC dropdown icon – dark so it shows on light background */
.blog.theme-light .blog-toc-card button svg,
.blog.theme-light .blog-toc-card svg {
    color: #000000 !important;
}

/* TOC circle backgrounds – light theme (bg-black/10 not applying, use solid CSS) */
.blog.theme-light .blog-toc-card .w-5.h-5.rounded-full {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* TOC dropdown panel */
.blog.theme-light .blog-toc-card .absolute.account-cards-bg,
.blog.theme-light .blog-toc-card .absolute {
    background: #ffffff !important;
}

.blog.theme-light .blog-toc-card .absolute button,
.blog.theme-light .blog-toc-card .absolute span {
    color: #000000 !important;
}

/* TOC dropdown row hover and selected background */
.blog.theme-light .blog-toc-card .absolute .rounded-lg:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.blog.theme-light .blog-toc-card .absolute .rounded-lg.bg-black\/10,
.blog.theme-light .blog-toc-card .absolute div[class*="bg-black/10"] {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Content section (195–241): white background, black text */
.blog.theme-light .blog-content-section .account-cards-bg {
    background: #ffffff !important;
}

/* Black text for content, but not for elements that have their own inline color */
.blog.theme-light .blog-content-section .blog-content-wrapper h1,
.blog.theme-light .blog-content-section .blog-content-wrapper h2,
.blog.theme-light .blog-content-section .blog-content-wrapper h3,
.blog.theme-light .blog-content-section .blog-content-wrapper h4,
.blog.theme-light .blog-content-section .blog-content-wrapper h5,
.blog.theme-light .blog-content-section .blog-content-wrapper h6 {
    font-weight: 700 !important;
    color: #000000 !important;
}

.blog.theme-light .blog-content-section .blog-content-wrapper,
.blog.theme-light .blog-content-section .blog-content-wrapper p,
.blog.theme-light .blog-content-section .blog-content-wrapper span:not([style*="color"]):not(a span),
.blog.theme-light .blog-content-section .blog-content-wrapper li,
.blog.theme-light .blog-content-section .blog-content-wrapper strong:not(a strong):not(a b),
.blog.theme-light .blog-content-section .blog-content-wrapper b:not(a b):not(a strong) {
    color: #000000 !important;
}

.blog.theme-light .blog-content-wrapper p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

.blog.theme-light .blog-content-section p,
.blog.theme-light .blog-content-section span {
    color: #000000 !important;
}

/* Links: default blue only when no inline color; if <a> or inner <span> has style="color: ...", that color is preserved */
.blog.theme-light .blog-content-section .blog-content-wrapper a:not([style*="color"]) {
    color: #1155cc !important;
    text-decoration: underline;
}

.blog.theme-light .blog-content-section .blog-content-wrapper a:not([style*="color"]):hover {
    opacity: 0.8 !important;
}

/* Spans inside links use link color so black doesn’t win */
.blog.theme-light .blog-content-section .blog-content-wrapper a span {
    color: #1155cc !important;
    -webkit-text-fill-color: inherit;
}

/* Bold inside links or colored spans: use that color, not black */
.blog.theme-light .blog-content-section .blog-content-wrapper a strong,
.blog.theme-light .blog-content-section .blog-content-wrapper a b,
.blog.theme-light .blog-content-section .blog-content-wrapper a span strong,
.blog.theme-light .blog-content-section .blog-content-wrapper a span b,
.blog.theme-light .blog-content-section .blog-content-wrapper span[style*="color"] strong,
.blog.theme-light .blog-content-section .blog-content-wrapper span[style*="color"] b {
    color: #1155cc !important;
    -webkit-text-fill-color: inherit;
}

/* Table borders – light theme */
.blog.theme-light .blog-content-section .blog-content-wrapper table th,
.blog.theme-light .blog-content-section .blog-content-wrapper table td {
    border-color: rgba(0, 0, 0, 0.1);
}

.blog.theme-light .blog-content-section .blog-content-wrapper table {
    border-color: rgba(0, 0, 0, 0.1) !important;
}