/* Custom CSS for DevBlog */

/* Markdown Content Styling */
.prose-editor {
    color: #d4d4d4;
}

.prose-editor h1 {
    color: #569cd6;
    font-size: 2.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #2d2d30;
    padding-bottom: 0.5rem;
}

.prose-editor h2 {
    color: #569cd6;
    font-size: 1.875rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #2d2d30;
    padding-bottom: 0.25rem;
}

.prose-editor h3 {
    color: #569cd6;
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

.prose-editor h4 {
    color: #569cd6;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.prose-editor h5 {
    color: #569cd6;
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.prose-editor h6 {
    color: #569cd6;
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.prose-editor p {
    margin-bottom: 1rem;
    line-height: 1.75;
}

.prose-editor ul, .prose-editor ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.prose-editor li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.prose-editor blockquote {
    border-left: 4px solid #007acc;
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6a9955;
    background-color: rgba(0, 122, 204, 0.1);
    padding: 1rem;
    border-radius: 0.25rem;
}

.prose-editor code {
    background-color: #2d2d30;
    color: #ce9178;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
}

.prose-editor pre {
    background-color: #272822;
    border: 1px solid #3e3d32;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.prose-editor pre code {
    background-color: transparent;
    color: #f8f8f2;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    font-family: 'Fira Code', 'Monaco', 'Consolas', 'Courier New', monospace;
}

/* Code block language indicator */
.prose-editor pre::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 1rem;
    background-color: #3e3d32;
    color: #75715e;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0 0.5rem 0 0.5rem;
    font-family: 'Fira Code', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Line numbers styling */
.highlight .linenos {
    background-color: #3e3d32;
    border-right: 1px solid #49483e;
    padding-right: 0.75rem;
    margin-right: 0.75rem;
    color: #75715e;
    font-size: 0.75rem;
    user-select: none;
}

.highlight .linenos .linenodiv {
    background-color: transparent;
}

.highlight .linenos .linenodiv pre {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.highlight .linenos .linenodiv pre::before {
    display: none;
}

.prose-editor a {
    color: #007acc;
    text-decoration: underline;
    text-decoration-color: rgba(0, 122, 204, 0.3);
}

.prose-editor a:hover {
    color: #40a9ff;
    text-decoration-color: rgba(64, 169, 255, 0.5);
}

.prose-editor strong {
    color: #ffffff;
    font-weight: 600;
}

.prose-editor em {
    color: #6a9955;
    font-style: italic;
}

.prose-editor hr {
    border: none;
    border-top: 1px solid #2d2d30;
    margin: 2rem 0;
}

.prose-editor table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.prose-editor th, .prose-editor td {
    border: 1px solid #2d2d30;
    padding: 0.75rem;
    text-align: left;
}

.prose-editor th {
    background-color: #2d2d30;
    color: #569cd6;
    font-weight: 600;
}

.prose-editor tr:nth-child(even) {
    background-color: rgba(45, 45, 48, 0.3);
}

/* Code highlighting with Monokai theme */
.highlight {
    background-color: #272822;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #3e3d32;
}

.highlight pre {
    margin: 0;
    padding: 1rem;
    background-color: transparent;
    border: none;
}

/* Monokai theme colors for syntax highlighting */
.highlight .hll { background-color: #49483e }
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #960050; background-color: #1e0010 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #75715e } /* Comment.Hashbang */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .gd { color: #f92672 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gi { color: #a6e22e } /* Generic.Inserted */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #75715e } /* Generic.Subheading */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #f92672 } /* Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #ae81ff } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */

/* Inline code styling */
.prose-editor :not(pre) > code {
    background-color: #3e3d32;
    color: #e6db74;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
    border: 1px solid #49483e;
}

/* Code block scrollbar styling */
.prose-editor pre::-webkit-scrollbar {
    height: 8px;
}

.prose-editor pre::-webkit-scrollbar-track {
    background: #3e3d32;
    border-radius: 4px;
}

.prose-editor pre::-webkit-scrollbar-thumb {
    background: #75715e;
    border-radius: 4px;
}

.prose-editor pre::-webkit-scrollbar-thumb:hover {
    background: #a6a599;
}

/* List styling */
.prose-editor ul {
    list-style-type: disc;
}

.prose-editor ol {
    list-style-type: decimal;
}

.prose-editor ul ul, .prose-editor ol ol {
    margin-top: 0.5rem;
}

/* Image styling */
.prose-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .prose-editor h1 {
        font-size: 1.875rem;
    }
    
    .prose-editor h2 {
        font-size: 1.5rem;
    }
    
    .prose-editor h3 {
        font-size: 1.25rem;
    }
}

/* Better pre styling to handle all code blocks */
.prose-editor pre {
    background-color: #1e1e1e !important;
    border: 1px solid #3e3d32;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    line-height: 1.4;
}

/* Ensure code inside pre is properly styled */
.prose-editor pre code {
    background-color: transparent !important;
    color: #f8f8f2;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    font-family: 'Fira Code', 'Monaco', 'Consolas', 'Courier New', monospace;
    border: none;
}

/* Style for code blocks without syntax highlighting */
.prose-editor pre:not(.highlight) {
    background-color: #1e1e1e;
}

.prose-editor pre:not(.highlight) code {
    color: #d4d4d4;
}

/* Highlight container should not add extra padding */
.highlight {
    background-color: #1e1e1e;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #3e3d32;
    margin: 1.5rem 0;
}

.highlight pre {
    margin: 0;
    padding: 1rem;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/* Copy button styling (optional enhancement) */
.prose-editor pre {
    position: relative;
}

.prose-editor pre::after {
    content: 'Copy';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background-color: #3e3d32;
    color: #d4d4d4;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    font-family: system-ui, -apple-system, sans-serif;
}

.prose-editor pre:hover::after {
    opacity: 1;
}

/* Language label styling - only show if data-language attribute exists */
.prose-editor pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    left: 1rem;
    background-color: #3e3d32;
    color: #75715e;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-family: 'Fira Code', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Remove the generic ::before rule that was showing on all pre elements */
.prose-editor pre:not([data-language])::before {
    display: none;
}

/* Language label styling for code blocks */
.prose-editor .highlight[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(135deg, #007acc, #005999);
    color: #ffffff;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0 0.5rem 0 0.5rem;
    font-family: 'Fira Code', monospace;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* Language-specific colors and labels */
.prose-editor .highlight[data-language="dockerfile"]::before {
    background: linear-gradient(135deg, #0db7ed, #0aa0c7);
    content: "Dockerfile";
}

.prose-editor .highlight[data-language="python"]::before {
    background: linear-gradient(135deg, #3776ab, #2d5aa0);
    content: "Python";
}

.prose-editor .highlight[data-language="javascript"]::before {
    background: linear-gradient(135deg, #f7df1e, #d4c71a);
    color: #333333;
    content: "JavaScript";
}

.prose-editor .highlight[data-language="bash"]::before {
    background: linear-gradient(135deg, #4eaa25, #3d8b1f);
    content: "Bash";
}

.prose-editor .highlight[data-language="shell"]::before {
    background: linear-gradient(135deg, #4eaa25, #3d8b1f);
    content: "Shell";
}

.prose-editor .highlight[data-language="yaml"]::before,
.prose-editor .highlight[data-language="yml"]::before {
    background: linear-gradient(135deg, #cb171e, #a01419);
    content: "YAML";
}

.prose-editor .highlight[data-language="json"]::before {
    background: linear-gradient(135deg, #000000, #333333);
    content: "JSON";
}

.prose-editor .highlight[data-language="html"]::before {
    background: linear-gradient(135deg, #e34f26, #c73e1d);
    content: "HTML";
}

.prose-editor .highlight[data-language="css"]::before {
    background: linear-gradient(135deg, #1572b6, #0f5a8a);
    content: "CSS";
}

.prose-editor .highlight[data-language="sql"]::before {
    background: linear-gradient(135deg, #336791, #2a5373);
    content: "SQL";
}

.prose-editor .highlight[data-language="go"]::before {
    background: linear-gradient(135deg, #00add8, #007d9c);
    content: "Go";
}

.prose-editor .highlight[data-language="rust"]::before {
    background: linear-gradient(135deg, #ce422b, #a6341f);
    content: "Rust";
}

.prose-editor .highlight[data-language="php"]::before {
    background: linear-gradient(135deg, #777bb4, #5d5d87);
    content: "PHP";
}

.prose-editor .highlight[data-language="java"]::before {
    background: linear-gradient(135deg, #ed8b00, #ca7700);
    content: "Java";
}

.prose-editor .highlight[data-language="c"]::before {
    background: linear-gradient(135deg, #555555, #333333);
    content: "C";
}

.prose-editor .highlight[data-language="cpp"]::before,
.prose-editor .highlight[data-language="c++"]::before {
    background: linear-gradient(135deg, #00599c, #004080);
    content: "C++";
}

.prose-editor .highlight[data-language="ruby"]::before {
    background: linear-gradient(135deg, #cc342d, #a02622);
    content: "Ruby";
}

.prose-editor .highlight[data-language="typescript"]::before {
    background: linear-gradient(135deg, #3178c6, #2a5d9f);
    content: "TypeScript";
}

/* Make sure highlight containers have relative positioning for absolute labels */
.prose-editor .highlight {
    position: relative;
}