/**
 * Dark Mode Toggle Styles
 */

/* Theme Toggle Button */
.theme-toggle-wrapper {
    display: flex !important;
    align-items: center;
    margin-left: auto;
    margin-right: 0.5rem;
    order: 2;
    visibility: visible !important;
    opacity: 1 !important;
}

#theme-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px;
    position: relative;
    visibility: visible !important;
    opacity: 1 !important;
    order: 3;
    margin-left: 0;
}

#theme-toggle:hover {
    background: rgba(0, 0, 0, 0.15);
    transform: scale(1.1);
}

#theme-toggle:active {
    transform: scale(0.95);
}

[data-theme="dark"] #theme-toggle {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] #theme-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
}

#theme-toggle svg {
    width: 28px;
    height: 28px;
    transition: all 0.3s ease;
    color: #1a1a1a;
}

[data-theme="dark"] #theme-toggle svg {
    color: #ffffff;
}

#theme-toggle.toggling svg {
    transform: rotate(360deg);
}

.moon-icon {
    display: block;
}

.sun-icon {
    display: none;
}

/* Adjust header layout for toggle button */
.header__wrapper {
    display: flex;
    flex-wrap: nowrap;
}

.header__navigation-wrapper {
    flex: 1;
}

.theme-toggle-wrapper {
    flex-shrink: 0;
}

.header__buttons-wrapper.search-btn {
    order: 2;
    flex-shrink: 0;
}

.header__burger {
    order: 4;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    #theme-toggle {
        margin-left: auto;
    }
}

/* Make button more prominent on mobile */
@media (max-width: 768px) {
    .theme-toggle-wrapper {
        margin-right: 0.75rem;
    }
    
    #theme-toggle {
        width: 48px;
        height: 48px;
        background: rgba(0, 0, 0, 0.08);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    [data-theme="dark"] #theme-toggle {
        background: rgba(255, 255, 255, 0.15);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    #theme-toggle:hover {
        background: rgba(0, 0, 0, 0.15);
    }
    
    [data-theme="dark"] #theme-toggle:hover {
        background: rgba(255, 255, 255, 0.25);
    }
    
    #theme-toggle svg {
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 480px) {
    .theme-toggle-wrapper {
        margin-right: 0.5rem;
    }
    
    #theme-toggle {
        width: 46px;
        height: 46px;
    }
    
    #theme-toggle svg {
        width: 28px;
        height: 28px;
    }
}

/* Dark Mode Theme Variables */
:root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --heading-color: #000000;
    --link-color: #0066cc;
    --link-hover-color: #004499;
    --border-color: #e0e0e0;
    --card-bg: #ffffff;
    --shadow: rgba(0, 0, 0, 0.1);
    --header-bg: #ffffff;
    --header-text: #1a1a1a;
    --code-bg: #f5f5f5;
    --code-text: #333333;
    --input-bg: #ffffff;
    --input-border: #cccccc;
}

[data-theme="dark"] {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --link-color: #66b3ff;
    --link-hover-color: #99ccff;
    --border-color: #333333;
    --card-bg: #242424;
    --shadow: rgba(0, 0, 0, 0.5);
    --header-bg: #242424;
    --header-text: #ffffff;
    --code-bg: #2d2d2d;
    --code-text: #e0e0e0;
    --input-bg: #2d2d2d;
    --input-border: #444444;
}

/* Apply Dark Mode */
[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .header__logo,
[data-theme="dark"] .header__navigation a,
[data-theme="dark"] .header__list-item a {
    color: var(--header-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .entry-title {
    color: var(--heading-color);
}

[data-theme="dark"] a {
    color: var(--link-color);
}

[data-theme="dark"] a:hover {
    color: var(--link-hover-color);
}

[data-theme="dark"] .entry-site-main,
[data-theme="dark"] .content-area {
    background-color: var(--bg-color);
}

[data-theme="dark"] article,
[data-theme="dark"] .post,
[data-theme="dark"] .page,
[data-theme="dark"] .entry-content {
    background-color: transparent;
    border-color: var(--border-color);
}

[data-theme="dark"] .widget {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .widget-title {
    color: var(--heading-color);
}

[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--code-bg);
    color: var(--code-text);
}

[data-theme="dark"] blockquote {
    background-color: var(--card-bg);
    border-left-color: var(--link-color);
    color: var(--text-color);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"] {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--input-border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #999999;
}

[data-theme="dark"] .footer {
    background-color: var(--header-bg);
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .footer a {
    color: var(--link-color);
}

[data-theme="dark"] .pagenavi a,
[data-theme="dark"] .pagenavi span {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] .pagenavi .current {
    background-color: var(--link-color);
    color: #ffffff;
}

[data-theme="dark"] .pagenavi a:hover {
    background-color: var(--border-color);
}

/* Smooth transitions */
body,
.header,
article,
.post,
.page,
.widget,
input,
textarea,
select,
.footer,
.entry-content {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

a {
    transition: color 0.3s ease;
}

/* Dark mode adjustments for images */
[data-theme="dark"] img {
    opacity: 0.9;
}

[data-theme="dark"] img:hover {
    opacity: 1;
}

/* Dark mode for search icon */
[data-theme="dark"] .header__button svg path {
    fill: #ffffff;
}

/* Dark mode for burger menu */
[data-theme="dark"] .header__burger i {
    background-color: #ffffff;
}

/* Dark mode for comments */
[data-theme="dark"] .comment-list,
[data-theme="dark"] .comment-body {
    border-color: var(--border-color);
}

[data-theme="dark"] .comment-author cite {
    color: var(--heading-color);
}

[data-theme="dark"] .comment-metadata a {
    color: var(--text-color);
}

/* Dark mode for menu items - Tech Blog Style */
[data-theme="dark"] .header__list-item > a,
[data-theme="dark"] .header__list li > a {
    color: #e2e8f0;
}

[data-theme="dark"] .header__list-item > a::before,
[data-theme="dark"] .header__list li > a::before {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
}

[data-theme="dark"] .header__list-item > a:hover,
[data-theme="dark"] .header__list li > a:hover {
    color: #a5b4fc;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .header__list-item.current-menu-item > a,
[data-theme="dark"] .header__list li.current-menu-item > a {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    color: #a5b4fc;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}

/* Dark mode submenu */
[data-theme="dark"] .header__list .sub-menu {
    background: rgba(30, 41, 59, 0.98);
    border-color: rgba(99, 102, 241, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .header__list .sub-menu li a {
    color: #e2e8f0;
}

[data-theme="dark"] .header__list .sub-menu li a::before {
    background: linear-gradient(180deg, #a5b4fc, #c4b5fd);
}

[data-theme="dark"] .header__list .sub-menu li a:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    color: #a5b4fc;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
}

[data-theme="dark"] .header.scrolled {
    background: rgba(15, 23, 42, 0.98) !important;
    box-shadow: 0 8px 40px rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
}

/* Dark mode theme toggle */
[data-theme="dark"] .theme-toggle {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    border-color: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .theme-toggle:hover {
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}

/* Dark mode search button */
[data-theme="dark"] .header__button {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.25);
    color: #e2e8f0;
}

[data-theme="dark"] .header__button:hover {
    border-color: rgba(99, 102, 241, 0.4);
    color: #a5b4fc;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}

/* Dark mode burger menu - Modern Icon Design */
[data-theme="dark"] .header__burger {
	background: #006aff !important;
	box-shadow: none !important;
}

[data-theme="dark"] .header__burger:hover {
	background: #006aff !important;
	box-shadow: none !important;
}

[data-theme="dark"] .header__burger i {
	background: #ffffff !important;
}

[data-theme="dark"] .header__burger.active {
	background: #006aff !important;
	box-shadow: none !important;
}

[data-theme="dark"] .header__burger.active i {
	background: #ffffff !important;
}

/* Dark mode mobile menu items */
[data-theme="dark"] .header__list-item > a,
[data-theme="dark"] .header__list li > a {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
	border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .header__list .sub-menu li a {
	background: rgba(30, 41, 59, 0.8);
	border-color: rgba(99, 102, 241, 0.2);
}

/* Dark mode for "More" menu */
[data-theme="dark"] .header__more-menu > a {
	color: #e2e8f0;
}

[data-theme="dark"] .header__more-menu > a:hover {
	color: #a5b4fc;
}

[data-theme="dark"] .header__more-menu .sub-menu {
	background: rgba(30, 41, 59, 0.98);
	border-color: rgba(99, 102, 241, 0.3);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .header__more-menu .sub-menu li a {
	color: #e2e8f0;
}

[data-theme="dark"] .header__more-menu .sub-menu li a:hover {
	background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
	color: #a5b4fc;
}

/* Dark mode for sidebar */
[data-theme="dark"] .sidebar {
    background-color: var(--card-bg);
}

/* Dark mode for tables */
[data-theme="dark"] table {
    border-color: var(--border-color);
}

[data-theme="dark"] table th,
[data-theme="dark"] table td {
    border-color: var(--border-color);
    color: var(--text-color);
}

[data-theme="dark"] table thead th {
    background-color: var(--card-bg);
    color: var(--heading-color);
}

/* Dark mode for lists */
[data-theme="dark"] ul,
[data-theme="dark"] ol {
    color: var(--text-color);
}

/* Dark mode for HR */
[data-theme="dark"] hr {
    border-color: var(--border-color);
}

/* Dark mode for strong elements in article content */
[data-theme="dark"] .single-post .post .entry-body .entry-content strong {
    color: var(--text-color) !important;
}