/**
 * GitHub Markdown CSS (Dark Mode)
 * Dark mode overrides for CrispyTheme
 */

.dark-mode {
    /* CrispyTheme custom properties */
    --crispy-bg: #0d1117;
    --crispy-bg-secondary: #161b22;
    --crispy-fg: #e6edf3;
    --crispy-fg-secondary: #8b949e;
    --crispy-border: #30363d;
    --crispy-primary: #58a6ff;
    --crispy-primary-dark: #79c0ff;

    /* WordPress preset color overrides for dark mode */
    --wp--preset--color--background: #0d1117;
    --wp--preset--color--background-secondary: #161b22;
    --wp--preset--color--foreground: #e6edf3;
    --wp--preset--color--foreground-secondary: #8b949e;
    --wp--preset--color--border: #30363d;
    --wp--preset--color--base: #0d1117;
    --wp--preset--color--base-2: #161b22;
    --wp--preset--color--contrast: #e6edf3;
    --wp--preset--color--contrast-2: #21262d;
    --wp--preset--color--contrast-3: #30363d;
    --wp--preset--color--tertiary: #8b949e;
    --wp--preset--color--secondary: #8b949e;
    --wp--preset--color--primary: #58a6ff;
    --wp--preset--color--primary-dark: #79c0ff;
    --wp--preset--color--accent: #58a6ff;
}

.dark-mode .markdown-body {
    color: var(--crispy-fg);
}

.dark-mode .markdown-body a {
    color: var(--crispy-primary);
}

.dark-mode .markdown-body a:hover {
    color: var(--crispy-primary-dark);
}

.dark-mode .markdown-body h1,
.dark-mode .markdown-body h2,
.dark-mode .markdown-body h3,
.dark-mode .markdown-body h4,
.dark-mode .markdown-body h5,
.dark-mode .markdown-body h6 {
    color: var(--crispy-fg);
}

.dark-mode .markdown-body h1,
.dark-mode .markdown-body h2 {
    border-bottom-color: var(--crispy-border);
}

.dark-mode .markdown-body h6 {
    color: var(--crispy-fg-secondary);
}

.dark-mode .markdown-body blockquote {
    color: var(--crispy-fg-secondary);
    border-left-color: var(--crispy-primary);
}

.dark-mode .markdown-body hr {
    background-color: var(--crispy-border);
}

.dark-mode .markdown-body code {
    background-color: var(--crispy-bg-secondary);
    color: var(--crispy-fg);
}

.dark-mode .markdown-body pre {
    background-color: var(--crispy-bg-secondary);
}

.dark-mode .markdown-body table th,
.dark-mode .markdown-body table td {
    border-color: var(--crispy-border);
}

.dark-mode .markdown-body table tr {
    background-color: var(--crispy-bg);
    border-top-color: var(--crispy-border);
}

.dark-mode .markdown-body table tr:nth-child(2n) {
    background-color: var(--crispy-bg-secondary);
}

.dark-mode .markdown-body kbd {
    color: var(--crispy-fg);
    background-color: var(--crispy-bg-secondary);
    border-color: var(--crispy-border);
    box-shadow: inset 0 -1px 0 var(--crispy-border);
}

.dark-mode .markdown-body mark {
    background-color: #634d00;
    color: var(--crispy-fg);
}

.dark-mode .markdown-body .footnotes {
    border-top-color: var(--crispy-border);
}

/* Dark mode body styles */
.dark-mode {
    background-color: var(--crispy-bg);
    color: var(--crispy-fg);
}

.dark-mode .site-header {
    background-color: var(--crispy-bg);
    border-bottom-color: var(--crispy-border);
}

.dark-mode .site-footer {
    background-color: var(--crispy-bg-secondary) !important;
}

.dark-mode .site-sidebar {
    background-color: var(--crispy-bg-secondary);
}

.dark-mode a {
    color: var(--crispy-primary);
}

.dark-mode a:hover {
    color: var(--crispy-primary-dark);
}

/* Dark mode form elements */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: var(--crispy-bg-secondary);
    border-color: var(--crispy-border);
    color: var(--crispy-fg);
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--crispy-primary);
    outline-color: var(--crispy-primary);
}

/* Dark mode buttons */
.dark-mode .wp-block-button__link {
    background-color: var(--crispy-primary);
    color: var(--crispy-bg);
}

.dark-mode .wp-block-button__link:hover {
    background-color: var(--crispy-primary-dark);
}

/* Dark mode toggle styles */
.crispy-dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.crispy-dark-mode-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.dark-mode .crispy-dark-mode-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.crispy-dark-mode-toggle__icon--dark {
    display: none;
}

.dark-mode .crispy-dark-mode-toggle__icon--light {
    display: none;
}

.dark-mode .crispy-dark-mode-toggle__icon--dark {
    display: inline-flex;
}

/* Smooth transition for dark mode */
body,
.site-header,
.site-footer,
.site-sidebar,
.markdown-body,
a,
input,
textarea,
select {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==========================================================================
   Dark Mode CTA Buttons
   ========================================================================== */

.dark-mode .markdown-body a.button,
.dark-mode .markdown-body a.btn,
.dark-mode .markdown-body a.cta-button {
    background-color: var(--crispy-primary, #58a6ff);
    color: var(--crispy-bg, #0d1117) !important;
}

.dark-mode .markdown-body a.button:hover,
.dark-mode .markdown-body a.btn:hover,
.dark-mode .markdown-body a.cta-button:hover {
    background-color: var(--crispy-primary-dark, #79c0ff);
    color: var(--crispy-bg, #0d1117) !important;
}

.dark-mode .markdown-body a.button-outline,
.dark-mode .markdown-body a.btn-outline {
    border-color: var(--crispy-primary, #58a6ff);
    color: var(--crispy-primary, #58a6ff) !important;
    background-color: transparent;
}

.dark-mode .markdown-body a.button-outline:hover,
.dark-mode .markdown-body a.btn-outline:hover {
    background-color: var(--crispy-primary, #58a6ff);
    color: var(--crispy-bg, #0d1117) !important;
}