/* ==========================================================================
   Premium Blog Content Styling
   Supported Themes: Light & Dark
   ========================================================================== */

.blog-content {
    /* Base Typography & Layout */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.125rem; /* 18px */
    line-height: 1.8;
    
    /* Default to Dark Mode variables with fallbacks */
    color: var(--text-secondary, #bdc1c6);
    
    max-width: 100%;
    margin: 0 auto;
    word-wrap: break-word;
}

/* Light Mode Overrides */
[data-theme="light"] .blog-content {
    color: var(--text-secondary, #374151); /* Dark grey for light mode */
}

/* ==========================================================================
   Headings
   ========================================================================== */
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-content h5,
.blog-content h6 {
    color: var(--text-primary, #f8f9fa);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2em;
    margin-bottom: 0.75em;
    letter-spacing: -0.02em;
    position: relative;
}

[data-theme="light"] .blog-content h1,
[data-theme="light"] .blog-content h2,
[data-theme="light"] .blog-content h3,
[data-theme="light"] .blog-content h4,
[data-theme="light"] .blog-content h5,
[data-theme="light"] .blog-content h6 {
    color: var(--text-primary, #111827); /* Almost black for light mode */
}

.blog-content h1 {
    font-size: 2.25rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .blog-content h1 {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-content h2 {
    font-size: 1.875rem;
    padding-bottom: 0.3rem;
    background: linear-gradient(90deg, var(--accent-primary, #4F46E5), transparent);
    background-size: 100% 2px;
    background-position: bottom;
    background-repeat: no-repeat;
    display: inline-block;
}

.blog-content h3 {
    font-size: 1.5rem;
    margin-top: 2.5em;
}

.blog-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ==========================================================================
   Text Elements
   ========================================================================== */
.blog-content p {
    margin-bottom: 1.5em;
    margin-top: 0;
}

.blog-content strong {
    color: var(--text-primary, #fff);
    font-weight: 600;
}

[data-theme="light"] .blog-content strong {
    color: var(--text-primary, #000);
}

.blog-content em {
    font-style: italic;
    color: var(--text-muted, #9ca3af);
}

[data-theme="light"] .blog-content em {
    color: var(--text-muted, #6b7280);
}

/* Links */
.blog-content a {
    color: var(--accent-secondary, #06b6d4);
    text-decoration: none;
    border-bottom: 1px solid rgba(6, 182, 212, 0.3);
    transition: all 0.2s ease;
}

.blog-content a:hover {
    color: var(--accent-primary, #4f46e5);
    border-bottom-color: var(--accent-primary, #4f46e5);
}

.blog-content a code {
    color: inherit;
    text-decoration: none;
}

/* ==========================================================================
   Lists
   ========================================================================== */
.blog-content ul,
.blog-content ol {
    margin-bottom: 1.5em;
    padding-left: 1.2em;
}

.blog-content ul li,
.blog-content ol li {
    margin-bottom: 0.5em;
    padding-left: 0.2em;
}

.blog-content ul li::marker {
    color: var(--accent-secondary, #06b6d4);
}

/* ==========================================================================
   Code Blocks & Inline Code
   ========================================================================== */
/* Inline Code */
.blog-content code {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #e2e8f0);
    padding: 0.15em 0.4em;
    border-radius: 6px;
    font-size: 0.875em;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    vertical-align: baseline;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .blog-content code {
    background: rgba(219, 39, 119, 0.1); /* Brighter pink background */
    color: #be185d; /* Darker magenta for maximum contrast */
    border: 1px solid rgba(219, 39, 119, 0.2);
    font-weight: 500; /* Slightly bolder for better visibility */
}

/* Code Blocks Container - Always Dark for Code */
.blog-content pre {
    background: #0f111a; /* Keep dark even in light mode for code blocks */
    border-radius: 12px;
    margin: 2em 0;
    padding: 3rem 1.25rem 1.25rem 1.25rem;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Dark mode border */
}

/* In light mode, make the code block stand out properly */
[data-theme="light"] .blog-content pre {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0,0,0,0.15);
}

.blog-content pre::before {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff5f56;
    box-shadow: 20px 0 0 #ffbd2e, 40px 0 0 #27c93f;
    opacity: 0.8;
}

.blog-content pre[data-language]::after {
    content: attr(data-language);
    position: absolute;
    top: 10px;
    right: 15px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

[data-theme="light"] .blog-content pre[data-language]::after {
    color: rgba(255, 255, 255, 0.5); /* Slightly brighter for visibility */
}

.blog-content pre code {
    background: none;
    color: #e2e8f0; /* Force light text for code blocks in both themes */
    padding: 0;
    border: none;
    font-size: 0.9em;
    white-space: pre;
    display: block;
}

/* Syntax Highlighting - Dracula Theme with Complete Token Support */
.blog-content .highlight { background: #282a36 !important; color: #f8f8f2 !important; }
.blog-content .highlight .hll { background-color: #44475a }
.blog-content .highlight .c { color: #6272a4; font-style: italic } /* Comment */
.blog-content .highlight .err { color: #f8f8f2 } /* Error */
.blog-content .highlight .g { color: #f8f8f2 } /* Generic */
.blog-content .highlight .k { color: #ff79c6; font-weight: bold } /* Keyword */
.blog-content .highlight .l { color: #f8f8f2 } /* Literal */
.blog-content .highlight .n { color: #f8f8f2 } /* Name */
.blog-content .highlight .o { color: #ff79c6 } /* Operator */
.blog-content .highlight .x { color: #f8f8f2 } /* Other */
.blog-content .highlight .p { color: #f8f8f2 } /* Punctuation */
.blog-content .highlight .cm { color: #6272a4; font-style: italic } /* Comment.Multiline */
.blog-content .highlight .cp { color: #ff79c6 } /* Comment.Preproc */
.blog-content .highlight .c1 { color: #6272a4; font-style: italic } /* Comment.Single */
.blog-content .highlight .cs { color: #6272a4; font-style: italic } /* Comment.Special */
.blog-content .highlight .gd { color: #ff5555 } /* Generic.Deleted */
.blog-content .highlight .ge { font-style: italic } /* Generic.Emph */
.blog-content .highlight .gr { color: #ff5555 } /* Generic.Error */
.blog-content .highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */
.blog-content .highlight .gi { color: #50fa7b } /* Generic.Inserted */
.blog-content .highlight .go { color: #6272a4 } /* Generic.Output */
.blog-content .highlight .gp { color: #f8f8f2 } /* Generic.Prompt */
.blog-content .highlight .gs { font-weight: bold } /* Generic.Strong */
.blog-content .highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */
.blog-content .highlight .gt { color: #ff5555 } /* Generic.Traceback */
.blog-content .highlight .kc { color: #ff79c6 } /* Keyword.Constant */
.blog-content .highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */
.blog-content .highlight .kn { color: #ff79c6 } /* Keyword.Namespace */
.blog-content .highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */
.blog-content .highlight .kr { color: #ff79c6 } /* Keyword.Reserved */
.blog-content .highlight .kt { color: #8be9fd } /* Keyword.Type */
.blog-content .highlight .ld { color: #f8f8f2 } /* Literal.Date */
.blog-content .highlight .m { color: #bd93f9 } /* Literal.Number */
.blog-content .highlight .s { color: #f1fa8c } /* Literal.String */
.blog-content .highlight .na { color: #50fa7b } /* Name.Attribute */
.blog-content .highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */
.blog-content .highlight .nc { color: #50fa7b } /* Name.Class */
.blog-content .highlight .no { color: #f8f8f2 } /* Name.Constant */
.blog-content .highlight .nd { color: #f8f8f2 } /* Name.Decorator */
.blog-content .highlight .ni { color: #f8f8f2 } /* Name.Entity */
.blog-content .highlight .ne { color: #f8f8f2 } /* Name.Exception */
.blog-content .highlight .nf { color: #50fa7b } /* Name.Function */
.blog-content .highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */
.blog-content .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.blog-content .highlight .nx { color: #f8f8f2 } /* Name.Other */
.blog-content .highlight .py { color: #f8f8f2 } /* Name.Property */
.blog-content .highlight .nt { color: #ff79c6 } /* Name.Tag */
.blog-content .highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */
.blog-content .highlight .ow { color: #ff79c6 } /* Operator.Word */
.blog-content .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.blog-content .highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */
.blog-content .highlight .mf { color: #bd93f9 } /* Literal.Number.Float */
.blog-content .highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */
.blog-content .highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */
.blog-content .highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */
.blog-content .highlight .sa { color: #f1fa8c } /* Literal.String.Affix */
.blog-content .highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */
.blog-content .highlight .sc { color: #f1fa8c } /* Literal.String.Char */
.blog-content .highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */
.blog-content .highlight .sd { color: #f1fa8c } /* Literal.String.Doc */
.blog-content .highlight .s2 { color: #f1fa8c } /* Literal.String.Double */
.blog-content .highlight .se { color: #f1fa8c } /* Literal.String.Escape */
.blog-content .highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */
.blog-content .highlight .si { color: #f1fa8c } /* Literal.String.Interpol */
.blog-content .highlight .sx { color: #f1fa8c } /* Literal.String.Other */
.blog-content .highlight .sr { color: #f1fa8c } /* Literal.String.Regex */
.blog-content .highlight .s1 { color: #f1fa8c } /* Literal.String.Single */
.blog-content .highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */
.blog-content .highlight .bp { color: #f8f8f2; font-style: italic } /* Name.Builtin.Pseudo */
.blog-content .highlight .fm { color: #50fa7b } /* Name.Function.Magic */
.blog-content .highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */
.blog-content .highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */
.blog-content .highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */
.blog-content .highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */
.blog-content .highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */

/* ==========================================================================
   Blockquotes
   ========================================================================== */
.blog-content blockquote {
    margin: 2em 0;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--accent-primary, #4F46E5);
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: var(--text-primary, #e5e7eb);
}

[data-theme="light"] .blog-content blockquote {
    background: rgba(79, 70, 229, 0.05); /* Slight tint for light mode */
    color: var(--text-primary, #374151);
}

/* ==========================================================================
   Tables
   ========================================================================== */
.blog-content table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
    font-size: 0.95em;
    overflow-x: auto;
    display: block;
}

.blog-content table {
    display: table;
    min-width: 100%;
}

.blog-content th {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #fff);
    font-weight: 600;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .blog-content th {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary, #000);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-content td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
}

[data-theme="light"] .blog-content td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.blog-content tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

[data-theme="light"] .blog-content tr:hover td {
    background: rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   Images
   ========================================================================== */
.blog-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2.5em auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.blog-content figcaption {
    text-align: center;
    font-size: 0.875em;
    color: var(--text-muted, #9ca3af);
    margin-top: 0.75em;
}

/* ==========================================================================
   Other Elements
   ========================================================================== */
.blog-content hr {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 3em 0;
}

[data-theme="light"] .blog-content hr {
    background: rgba(0, 0, 0, 0.1);
}