/* ── Dark mode — overrides GeneratePress CSS custom properties ── */

body.dark-mode {
    --contrast:   #dde4ed;
    --contrast-2: #8a96a8;
    --contrast-3: #4a5568;
    --base:       #1a2332;
    --base-2:     #111827;
    --base-3:     #1e2d3d;
    --accent:     #00B4D8;
}

/* Body & backgrounds */
body.dark-mode {
    background-color: var(--base-2);
    color: var(--contrast);
}

/* Images — slight dim to reduce glare */
body.dark-mode img {
    opacity: .90;
    transition: opacity .2s;
}
body.dark-mode img:hover {
    opacity: 1;
}

/* Links */
body.dark-mode a {
    color: var(--accent);
}
body.dark-mode a:hover,
body.dark-mode a:focus,
body.dark-mode a:active {
    color: var(--contrast);
}

/* Nav & header already use --base-3 via theme vars, but reinforce */
body.dark-mode .site-header,
body.dark-mode .main-navigation,
body.dark-mode .main-navigation ul ul {
    background-color: var(--base-3);
    border-color: rgba(255,255,255,.06);
}

/* Nav links */
body.dark-mode .main-navigation .main-nav ul li a,
body.dark-mode .main-navigation .menu-toggle {
    color: var(--contrast);
}
body.dark-mode .main-navigation .main-nav ul li a:hover {
    color: var(--accent);
}

/* Content area */
body.dark-mode .site-content,
body.dark-mode .entry-content,
body.dark-mode .widget-area .widget {
    background-color: var(--base-3);
    color: var(--contrast);
}

/* Cards / post entries */
body.dark-mode article,
body.dark-mode .entry-header,
body.dark-mode .page-header {
    background-color: var(--base-3);
}

/* Meta / muted text */
body.dark-mode .entry-meta,
body.dark-mode .entry-meta a,
body.dark-mode .post-meta,
body.dark-mode .site-description {
    color: var(--contrast-2);
}

/* Sidebar */
body.dark-mode .widget-title,
body.dark-mode .sidebar .widget_title {
    color: var(--contrast);
    border-color: rgba(255,255,255,.1);
}

/* Footer */
body.dark-mode .site-footer,
body.dark-mode .footer-widgets,
body.dark-mode .footer-bar {
    background-color: var(--base-3);
    color: var(--contrast-2);
    border-top: 1px solid rgba(255,255,255,.06);
}
body.dark-mode .site-footer a,
body.dark-mode .footer-bar a {
    color: var(--accent);
}

/* Inputs & forms */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="search"],
body.dark-mode input[type="url"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--base-2);
    color: var(--contrast);
    border-color: rgba(255,255,255,.12);
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--contrast-3);
}

/* Search modal */
body.dark-mode .search-modal {
    background-color: var(--base-2);
}

/* Code blocks */
body.dark-mode code,
body.dark-mode pre {
    background-color: #0d1117;
    color: #e6edf3;
    border-color: rgba(255,255,255,.08);
}

/* Blockquote */
body.dark-mode blockquote {
    border-left-color: var(--accent);
    color: var(--contrast-2);
}

/* Tables */
body.dark-mode table th {
    background-color: var(--base);
    color: var(--contrast);
}
body.dark-mode table td,
body.dark-mode table th {
    border-color: rgba(255,255,255,.08);
}
body.dark-mode table tr:nth-child(even) {
    background-color: rgba(255,255,255,.03);
}

/* HR / separators */
body.dark-mode hr {
    border-color: rgba(255,255,255,.08);
}

/* Top bar */
body.dark-mode .top-bar {
    background-color: #0d1117;
    color: var(--contrast-2);
}

/* ── Dark mode toggle button ── */
.dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(128,128,128,.35);
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    color: var(--contrast-2);
    transition: border-color .2s, color .2s, background .2s;
    user-select: none;
    white-space: nowrap;
}
.dark-mode-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0,180,216,.08);
}
.dark-mode-toggle .dm-icon {
    font-size: 15px;
    line-height: 1;
}