/* Global dark mode styles */
html.dark {
    --background-color: #222225;
    --font-color: #e8e9ed;
    --invert-font-color: #222225;
    --secondary-color: #a3abba;
    --tertiary-color: #a3abba;
    --primary-color: #62c4ff;
    --error-color: #ff3c74;
    --progress-bar-background: #3f3f44;
    --progress-bar-fill: #62c4ff;
    --code-bg-color: #3f3f44;
}

html.dark body {
    background-color: #1a1a1a !important;
    color: #e5e7eb !important;
}

html.dark .container {
    background-color: #1a1a1a !important;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6 {
    color: #f3f4f6 !important;
}

html.dark p,
html.dark div:not(.highlight),
html.dark article {
    color: #e5e7eb !important;
}

html.dark a {
    color: #60a5fa !important;
}

html.dark a:hover {
    color: #93c5fd !important;
}

html.dark .post .date {
    color: #9ca3af !important;
}

html.dark .terminal-nav {
    border-color: #374151 !important;
}

html.dark .terminal-prompt a {
    color: #10b981 !important;
}

/* Tag styling for dark mode */
html.dark .bg-blue-100 {
    background-color: #1e3a5f !important;
}

html.dark .text-blue-700 {
    color: #93c5fd !important;
}

html.dark .hover\:bg-blue-200:hover {
    background-color: #2d4a73 !important;
}

html.dark .bg-green-100 {
    background-color: #1e4d3a !important;
}

html.dark .text-green-700 {
    color: #6ee7b7 !important;
}

html.dark .hover\:bg-green-200:hover {
    background-color: #2d6b4e !important;
}

/* Dropdown Navigation Styles */
.terminal-menu .dropdown-nav {
    position: relative;
    display: inline-block;
}

.terminal-menu .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    border: 2px solid #1a95e0;
    border-radius: 4px;
    padding: 0.5rem 0;
    margin: 0;
    margin-top: -2px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    z-index: 9999;
    min-width: 150px;
}

.terminal-menu .dropdown-content a {
    display: block;
    padding: 0.5rem 1rem;
    color: #333 !important;
    text-decoration: none !important;
    transition: background-color 0.2s, color 0.2s;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.9rem;
    border-bottom: 1px solid #e5e7eb;
}

.terminal-menu .dropdown-content a:last-child {
    border-bottom: none;
}

.terminal-menu .dropdown-content a:hover {
    background-color: #e8f4fd;
    color: #1a95e0 !important;
}

.terminal-menu .dropdown-content a::before {
    content: "→ ";
    color: #1a95e0;
    margin-right: 0.5rem;
}

/* Keep dropdown visible when hovering over either the trigger OR the dropdown itself */
.terminal-menu .dropdown-nav:hover > .dropdown-content,
.terminal-menu .dropdown-content:hover {
    display: block !important;
}

/* Dark mode dropdown styles */
html.dark .terminal-menu .dropdown-content {
    background-color: #1a1a1a;
    border-color: #62c4ff;
}

html.dark .terminal-menu .dropdown-content a {
    color: #e5e7eb !important;
    border-bottom-color: #374151;
}

html.dark .terminal-menu .dropdown-content a:hover {
    background-color: #2d3748;
    color: #62c4ff !important;
}

html.dark .terminal-menu .dropdown-content a::before {
    color: #62c4ff;
}

/* Styling for inline code (not syntax-highlighted blocks) */
code:not(.chroma):not([class*="language-"]) {
    background-color: #f3f4f6 !important;
    color: #dc2626 !important;
    padding: 0.125rem 0.375rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.875rem !important;
}

html.dark code:not(.chroma):not([class*="language-"]) {
    background-color: #374151 !important;
    color: #f87171 !important;
}

/* Styling for code blocks with syntax highlighting */
.highlight {
    background-color: #272822 !important;
    border-radius: 0.375rem !important;
}

/* Override Tailwind prose styles */
.prose pre.chroma,
.post-content pre.chroma,
article pre.chroma,
pre.chroma {
    background-color: #272822 !important;
    color: #f8f8f2 !important;
    border-radius: 0.375rem !important;
    padding: 1.5rem !important;
    overflow-x: auto !important;
    border: 1px solid #1e1e1e !important;
}

/* Dark mode */
html.dark pre.chroma {
    border: 1px solid #1e1e1e !important;
}

@media (prefers-color-scheme: dark) {
    pre.chroma {
        border: 1px solid #1e1e1e !important;
    }
}