/* Beautiful content styling for blog posts */

/* Import coding fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap');

/* Base typography */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #e0e0e0;
    background: #0a0a0a;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    color: #00ff00;
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-weight: 600;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }

/* Paragraphs */
p {
    margin: 1.2em 0;
    color: #d0d0d0;
}

/* Links - green theme */
a {
    color: #00ff88;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

a:hover {
    color: #66ffaa;
    text-decoration: none;
    border-bottom: 1px solid #66ffaa;
}

/* Special link styling for content */
#markdown a {
    color: #00ff88;
    text-decoration: underline;
    text-decoration-color: rgba(0, 255, 136, 0.3);
    text-underline-offset: 3px;
}

#markdown a:hover {
    color: #66ffaa;
    text-decoration-color: #66ffaa;
    text-shadow: 0 0 8px rgba(102, 255, 170, 0.3);
}

/* Inline code - beautiful coding font */
code:not(pre code) {
    background: linear-gradient(135deg, #1a2a1a 0%, #2a3a2a 100%);
    color: #00ff88;
    padding: 0.25em 0.5em;
    border-radius: 4px;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    font-size: 0.95em;
    font-weight: 500;
    border: 1px solid #334433;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
    letter-spacing: 0.5px;
}

code:not(pre code):hover {
    background: linear-gradient(135deg, #2a3a2a 0%, #3a4a3a 100%);
    border-color: #445544;
}

/* Code blocks - clean terminal-style with copy button */
pre {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    border: 1px solid #30363d;
    border-radius: 8px;
    padding: 1.5em;
    margin: 2em 0;
    overflow-x: auto;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Hide line numbers completely */
pre span[style*="color:#7f7f7f"],
pre span[style*="user-select:none"],
pre span[style*="margin-right:0.4em"] {
    display: none !important;
}

/* Copy button */
pre::before {
    content: 'copy';
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #1a2a1a 0%, #2a3a2a 100%);
    color: #888;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid #334433;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 10;
}

pre:hover::before {
    opacity: 1;
}

pre::before:hover {
    background: linear-gradient(135deg, #2a3a2a 0%, #3a4a3a 100%);
    color: #00ff88;
    border-color: #445544;
}

pre code {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    color: #f0f6fc;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', 'Consolas', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.3px;
    overflow-x: auto;
}

/* Language-specific code styling */
.language-logs pre code {
    color: #fbbf24;
}

.language-bash pre code,
.language-sh pre code {
    color: #4ade80;
}

.language-python pre code {
    color: #e4e4e7;
}

.language-javascript pre code,
.language-js pre code {
    color: #f7df1e;
}

.language-css pre code {
    color: #06b6d4;
}

.language-json pre code {
    color: #a855f7;
}

.language-yaml pre code,
.language-yml pre code {
    color: #f59e0b;
}

.language-go pre code {
    color: #00add8;
}

.language-rust pre code {
    color: #dea584;
}

.language-java pre code {
    color: #ed8b00;
}

.language-docker pre code {
    color: #0db7ed;
}

.language-sql pre code {
    color: #336791;
}

/* Code language label styling */
.code-language-label {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #1a2a1a 0%, #2a3a2a 100%);
    color: #888;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid #334433;
    z-index: 9;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

pre:hover .code-language-label {
    opacity: 1;
}

/* Lists */
ul, ol {
    margin: 1em 0;
    padding-left: 2em;
}

li {
    margin: 0.5em 0;
    color: #d0d0d0;
}

/* Blockquotes */
blockquote {
    border-left: 4px solid #00ff00;
    background: linear-gradient(135deg, #0f1f0f 0%, #1a2a1a 100%);
    padding: 1em 1.5em;
    margin: 1.5em 0;
    border-radius: 0 6px 6px 0;
    color: #b0b0b0;
    font-style: italic;
}

blockquote p {
    margin: 0.5em 0;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    background: #111;
    border-radius: 6px;
    overflow: hidden;
}

th, td {
    padding: 0.75em 1em;
    text-align: left;
    border-bottom: 1px solid #333;
}

th {
    background: #1a1a1a;
    color: #00ff00;
    font-weight: 600;
}

tr:hover {
    background: #1a1a1a;
}

/* Horizontal rules */
hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, #333, transparent);
    margin: 2em 0;
}

/* Selection */
::selection {
    background: #00ff00;
    color: #000;
}

/* Aggressive cleanup of broken syntax highlighting */
pre span[style*="color:#7f7f7f"],
pre span[style*="color:#f92672"],
pre span[style*="color:#ae81ff"],
pre span[style*="color:#66d9ef"],
pre span[style*="user-select:none"],
pre span[style*="margin-right"],
pre span[style*="padding:0"],
pre span[style*="display:flex"],
pre span[style*="white-space:pre"],
pre span[style*="-webkit-user-select:none"],
pre .linenumbers,
pre .lineno {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    font-size: 0 !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Force clean pre display */
pre {
    background: #1a1a1a !important;
    color: #e0e0e0 !important;
    border: 1px solid #333 !important;
    border-radius: 6px !important;
    padding: 20px !important;
    overflow-x: auto !important;
    white-space: pre !important;
}

/* Clean code display */
pre code {
    background: transparent !important;
    color: inherit !important;
    font-family: 'Fira Code', 'JetBrains Mono', monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    white-space: pre !important;
}

/* Force override all inline styles on spans inside pre */
pre span {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Override all span elements that contain style attributes */
pre span[style] {
    display: none !important;
    visibility: hidden !important;
}

/* Hide flex spans completely */
pre span[style*="display:flex"] {
    display: none !important;
}

/* Reading progress indicator */
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #111;
    z-index: 1000;
    border-bottom: 1px solid #333;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00ff88 0%, #66ffaa 100%);
    width: 0%;
    transition: width 0.1s ease;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

/* Progress percentage indicator */
.progress-indicator {
    position: fixed;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.8);
    color: #00ff88;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    border: 1px solid #333;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1001;
}

.progress-indicator.visible {
    opacity: 1;
}

/* Hide progress on mobile to avoid clutter */
@media (max-width: 768px) {
    .progress-indicator {
        display: none;
    }
}

/* Table of Contents */
.table-of-contents {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    border: 1px solid #30363d;
    border-radius: 8px;
    margin: 2em 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.toc-header {
    background: linear-gradient(135deg, #21262d 0%, #30363d 100%);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #444c56;
    cursor: pointer;
    transition: all 0.2s ease;
}

.toc-header:hover {
    background: linear-gradient(135deg, #2a3a2a 0%, #3a4a3a 100%);
}

.toc-title {
    color: #f0f6fc;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 500;
}

.toc-toggle {
    background: none;
    border: none;
    color: #7d8590;
    cursor: pointer;
    padding: 4px;
    border-radius: 3px;
    transition: color 0.2s ease;
}

.toc-toggle:hover {
    color: #f0f6fc;
    background: rgba(255,255,255,0.1);
}

.toc-nav {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-item {
    margin: 0;
}

.toc-link {
    display: block;
    color: #8b949e;
    text-decoration: none;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.4;
    border-left: 2px solid transparent;
    padding-left: 8px;
    transition: all 0.2s ease;
}

.toc-link:hover {
    color: #00ff88;
    border-left-color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    padding-left: 12px;
    text-shadow: 0 0 5px rgba(0, 255, 136, 0.3);
}

.toc-link.active {
    color: #00ff88;
    border-left-color: #00ff88;
    background: rgba(0, 255, 136, 0.1);
    padding-left: 12px;
}

/* TOC hierarchy indentation */
.toc-h1 .toc-link { padding-left: 8px; }
.toc-h2 .toc-link { padding-left: 20px; }
.toc-h3 .toc-link { padding-left: 32px; }
.toc-h4 .toc-link { padding-left: 44px; }
.toc-h5 .toc-link { padding-left: 56px; }
.toc-h6 .toc-link { padding-left: 68px; }

.toc-h1 .toc-link.active { padding-left: 12px; }
.toc-h2 .toc-link.active { padding-left: 24px; }
.toc-h3 .toc-link.active { padding-left: 36px; }
.toc-h4 .toc-link.active { padding-left: 48px; }
.toc-h5 .toc-link.active { padding-left: 60px; }
.toc-h6 .toc-link.active { padding-left: 72px; }

.toc-h1 .toc-link:hover {
    padding-left: 12px;
    border-radius: 0 4px 4px 0;
}
.toc-h2 .toc-link:hover {
    padding-left: 24px;
    border-radius: 0 4px 4px 0;
}
.toc-h3 .toc-link:hover {
    padding-left: 36px;
    border-radius: 0 4px 4px 0;
}
.toc-h4 .toc-link:hover {
    padding-left: 48px;
    border-radius: 0 4px 4px 0;
}
.toc-h5 .toc-link:hover {
    padding-left: 60px;
    border-radius: 0 4px 4px 0;
}
.toc-h6 .toc-link:hover {
    padding-left: 72px;
    border-radius: 0 4px 4px 0;
}

/* Collapsed state */
.table-of-contents.collapsed {
    margin-bottom: 1em;
}

/* Scrollbar for TOC */
.toc-nav::-webkit-scrollbar {
    width: 6px;
}

.toc-nav::-webkit-scrollbar-track {
    background: #0d1117;
}

.toc-nav::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 3px;
}

.toc-nav::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 1em 0;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

#markdown img {
    display: block;
    max-width: 100%;
    max-height: 600px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 2em auto;
    padding: 6px;
    background: #0f0f0f;
    border: 1px solid #1f3320;
    border-radius: 8px;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 255, 136, 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

#markdown img:hover {
    border-color: #2a4a2c;
    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 255, 136, 0.15);
}

#markdown p:has(> img:only-child) {
    text-align: center;
    margin: 2em 0;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Focus states */
pre:focus-within {
    border-color: #00ff00;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }

    pre {
        padding: 1em;
        margin: 1em -1em;
        border-radius: 0;
    }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.4rem; }
    h3 { font-size: 1.2rem; }
}

/* Dark theme enhancements */
.prose {
    color: #e0e0e0;
}

.prose strong {
    color: #ffffff;
}

.prose em {
    color: #cccccc;
}