/* ============================================
   Dark Mode Styles for Solo Theme
   ============================================ */

/* CSS Variables for Theme Colors */
:root {
    /* Light mode (default) */
    --color-bg: #ffffff;
    --color-text: #15171a;
    --color-text-secondary: #738a94;
    --color-border: #e3e3e3;
    --color-card-bg: #ffffff;
    --color-header-bg: #ffffff;
    --color-footer-bg: #f9f9f9;
    --color-link: #15171a;
    --color-link-hover: var(--background-color);
    --color-accent: var(--background-color);
    --color-code-bg: #f5f5f5;
    --color-code-text: #15171a;
}

/* Dark mode color scheme */
html.dark-mode,
html.dark-mode body {
    --color-bg: #151719;
    --color-text: #e4e4e7;
    --color-text-secondary: #a1a1aa;
    --color-border: #27272a;
    --color-card-bg: #151719;
    --color-header-bg: #151719;
    --color-footer-bg: #0a0b0c;
    --color-link: #e4e4e7;
    --color-link-hover: #ffffff;
    --color-code-bg: #1c1e21;
    --color-code-text: #e4e4e7;
}

/* Apply colors */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header */
.gh-head {
    background-color: var(--color-header-bg);
    border-bottom-color: var(--color-border);
}

.gh-outer {
    background-color: var(--color-bg);
}

.gh-head.gh-outer {
    background-color: var(--color-header-bg);
}

.gh-head-menu a,
.gh-head-logo {
    color: var(--color-text);
}

.gh-head-menu a:hover {
    color: var(--color-link-hover);
}

.gh-burger::before,
.gh-burger::after {
    background-color: var(--color-text);
}

/* Middle line of burger menu */
.gh-burger span {
    background-color: var(--color-text);
}

/* Footer */
.gh-foot {
    background-color: var(--color-bg);
    border-top-color: var(--color-border);
}

.gh-foot.gh-outer {
    background-color: var(--color-bg);
}

.gh-foot-menu a,
.gh-copyright,
.gh-copyright a {
    color: var(--color-text-secondary);
}

/* Cards and Posts */
.gh-feed {
    background-color: var(--color-bg);
}

.gh-card {
    background-color: var(--color-card-bg);
    border-color: var(--color-border);
}

.gh-card-wrapper {
    background-color: var(--color-bg);
}

.gh-card-link {
    color: var(--color-text);
    background-color: transparent;
}

.gh-card-title {
    color: var(--color-text);
}

.gh-card-excerpt {
    color: var(--color-text-secondary);
}

.gh-card-date {
    color: var(--color-text-secondary);
}

.gh-card:hover {
    background-color: var(--color-card-bg);
}

.gh-card:hover .gh-card-link {
    background-color: transparent;
}

/* Post content */
.gh-content {
    color: var(--color-text);
}

.gh-content a {
    color: var(--color-accent);
}

.gh-content h1,
.gh-content h2,
.gh-content h3,
.gh-content h4,
.gh-content h5,
.gh-content h6 {
    color: var(--color-text);
}

/* Article header */
.gh-article-title,
h1.gh-article-title {
    color: var(--color-text);
}

.gh-article-meta-wrapper,
.gh-author-name-list,
.gh-article-date {
    color: var(--color-text-secondary) !important;
}

.gh-author-name-list a {
    color: var(--color-text-secondary) !important;
}

.gh-author-name {
    color: var(--color-text-secondary) !important;
}

/* Code blocks */
.gh-content pre,
.gh-content code {
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    border-color: var(--color-border);
}

/* Blockquotes */
.gh-content blockquote {
    border-left-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* Tables */
.gh-content table {
    border-color: var(--color-border);
}

.gh-content th,
.gh-content td {
    border-color: var(--color-border);
}

.gh-content th {
    background-color: var(--color-card-bg);
}

/* Horizontal rule */
.gh-content hr {
    border-color: var(--color-border);
}

/* About section */
.gh-about {
    background-color: var(--color-header-bg);
}

.gh-about-primary,
.gh-about-secondary {
    color: var(--color-text);
}

/* Search */
.gh-search {
    color: var(--color-text);
}

/* Tag pages */
.gh-tag-header {
    color: var(--color-text);
}

/* Author pages */
.gh-author-header {
    color: var(--color-text);
}

/* Pagination */
.gh-pagination a {
    color: var(--color-text);
    border-color: var(--color-border);
}

.gh-pagination a:hover {
    background-color: var(--color-card-bg);
}

/* Dark mode toggle button */
.dark-mode-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-left: 12px;
}

.dark-mode-toggle:hover {
    border-color: var(--color-accent);
    transform: scale(1.05);
}

.dark-mode-toggle svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--color-text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 0.3s ease;
}

.dark-mode-toggle .moon-icon path {
    fill: var(--color-text);
    stroke: none;
}

.dark-mode-toggle .sun-icon circle {
    fill: none;
    stroke: var(--color-text);
    stroke-width: 2;
}

.dark-mode-toggle .sun-icon line {
    stroke: var(--color-text);
    stroke-width: 2;
}

/* Hide moon in light mode, sun in dark mode */
.dark-mode-toggle .sun-icon {
    display: none;
}

html.dark-mode .dark-mode-toggle .sun-icon {
    display: block;
}

html.dark-mode .dark-mode-toggle .moon-icon {
    display: none;
}

/* Mobile menu */
.gh-burger-box {
    background-color: transparent !important;
}

@media (max-width: 767px) {
    .gh-head-menu {
        background-color: var(--color-bg) !important;
    }

    .gh-head-menu.is-open {
        background-color: var(--color-bg) !important;
    }

    .gh-head-menu .nav {
        background-color: var(--color-bg) !important;
    }

    .gh-head-menu a {
        color: var(--color-text) !important;
    }

    .gh-head-brand {
        background-color: var(--color-header-bg) !important;
    }

    .gh-head-inner {
        background-color: var(--color-header-bg) !important;
    }

    .gh-head-brand-wrapper {
        background-color: var(--color-header-bg) !important;
    }

    .gh-head-actions {
        background-color: var(--color-header-bg) !important;
    }

    .gh-head.gh-outer {
        background-color: var(--color-header-bg) !important;
    }

    .gh-outer {
        background-color: var(--color-bg) !important;
    }

    .gh-head-menu::before,
    .gh-head-menu::after {
        background-color: var(--color-bg) !important;
    }

    /* Remove transitions for instant dark mode switch */
    #gh-head,
    .gh-head,
    .gh-head.gh-outer,
    .gh-outer,
    .gh-head-menu,
    .gh-head-menu *,
    .gh-head-brand,
    .gh-head-brand *,
    .gh-head-inner,
    .gh-head-inner *,
    .gh-head-actions,
    .gh-head-actions * {
        transition: none !important;
    }

    .dark-mode-toggle {
        width: 36px;
        height: 36px;
        margin-left: 8px;
    }

    .dark-mode-toggle svg {
        width: 18px;
        height: 18px;
    }

    /* Scale down logo on small viewports */
    .gh-head-logo {
        max-width: 160px;
    }

    .gh-head-logo img {
        max-height: 42px;
        width: auto;
    }
}

/* Extra small viewports */
@media (max-width: 400px) {
    .gh-head-logo {
        max-width: 140px;
    }

    .gh-head-logo img {
        max-height: 38px;
        width: auto;
    }
}

/* Smooth transitions for all color changes */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

/* Exclude certain elements from transition */
img,
video,
iframe,
.gh-canvas,
svg,
path,
circle,
line {
    transition: none !important;
}

/* Re-enable SVG transitions for dark mode toggle */
.dark-mode-toggle svg,
.dark-mode-toggle svg * {
    transition: all 0.3s ease !important;
}