/**
 * AXIS Theme - Dark Mode Stylesheet
 * Separate file for better performance
 */

/* Dark mode color overrides */
.dark-mode {
	--axis-text: #E2E8F0;
	--axis-text-secondary: #94A3B8;
	--axis-background: #0F172A;
	--axis-surface: #1E293B;
	--axis-border: #334155;
}

/* Component-specific dark mode adjustments */
.dark-mode {
	/* Header */
	.axis-header {
		background: var(--axis-surface);
		border-bottom-color: var(--axis-border);
	}
	
	/* Footer */
	.axis-footer {
		background: var(--axis-surface);
		border-top-color: var(--axis-border);
	}
	
	/* Cards */
	.axis-article-card,
	.axis-issue-card,
	.axis-most-viewed-item,
	.axis-article-item {
		background: var(--axis-surface);
		border-color: var(--axis-border);
	}
	
	/* Sidebar blocks */
	.axis-sidebar__block {
		background: var(--axis-surface);
		border-color: var(--axis-border);
	}
	
	/* Stats bar */
	.axis-stats-bar {
		background: var(--axis-surface);
		border-color: var(--axis-border);
	}
	
	/* Issue spotlight */
	.axis-issue-spotlight {
		background: var(--axis-surface);
		border-color: var(--axis-border);
	}
	
	/* Buttons need visible borders in dark mode */
	.axis-btn--primary {
		border: 2px solid rgba(255, 255, 255, 0.3);
		
		&:hover {
			border-color: rgba(255, 255, 255, 0.5);
		}
	}
	
	.axis-btn--secondary {
		border-color: var(--axis-primary);
		background: transparent;
		
		&:hover {
			background: var(--axis-primary);
			border-color: var(--axis-primary);
		}
	}
	
	/* Icon buttons */
	.axis-icon-button {
		border-color: var(--axis-border);
		
		&:hover {
			background: rgba(255, 255, 255, 0.05);
		}
	}
	
	/* Forms */
	.axis-search-input,
	.axis-sidebar__search-input {
		background: var(--axis-background);
		border-color: var(--axis-border);
		color: var(--axis-text);
		
		&:focus {
			border-color: var(--axis-primary);
		}
		
		&::placeholder {
			color: var(--axis-text-secondary);
		}
	}
	
	/* Meta sections */
	.axis-article-detail__meta,
	.axis-article-detail__authors {
		background: var(--axis-surface);
	}
	
	/* Archive year header */
	.axis-archive-year__header {
		background: var(--axis-surface);
		
		&:hover {
			background: lighten(#1E293B, 5%);
		}
	}
	
	/* Rich content tables */
	.axis-rich-content,
	.axis-content-block {
		table {
			border-color: var(--axis-border);
			
			th, td {
				border-color: var(--axis-border);
			}
			
			th {
				background: var(--axis-surface);
			}
		}
		
		iframe {
			border-color: var(--axis-border);
		}
	}
	
	/* Keywords */
	.axis-keyword {
		background: var(--axis-surface);
		border-color: var(--axis-border);
	}
	
	/* Citation box */
	.axis-citation-box {
		background: var(--axis-surface);
	}
	
	/* Hero overlay adjustment */
	.axis-hero__overlay {
		background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
	}
	
	/* Back to top button - needs border */
	.axis-back-to-top {
		background: var(--axis-primary);
		border: 2px solid rgba(255, 255, 255, 0.3);
		
		&:hover {
			border-color: rgba(255, 255, 255, 0.5);
		}
	}
	
	/* View count box */
	.axis-view-count {
		background: var(--axis-surface);
		border-color: var(--axis-primary);
	}
	
	/* Galley links adjustment */
	.axis-article-card__galley-link {
		background: var(--axis-surface);
		border-color: var(--axis-border);
		color: var(--axis-text);
		
		&:hover {
			background: var(--axis-primary);
			border-color: var(--axis-primary);
			color: white;
		}
	}
	
	/* Mobile menu toggle */
	.axis-hamburger-line {
		background: var(--axis-text);
	}
	
	/* Language select */
	.axis-select {
		background: var(--axis-surface);
		border-color: var(--axis-border);
		color: var(--axis-text);
	}
	
	/* Section policy blocks */
	.axis-section-policy {
		border-color: var(--axis-border);
	}
	
	/* Empty state icons */
	.axis-empty-state__icon {
		color: var(--axis-text-secondary);
	}
}

/* Smooth transition for dark mode toggle */
.axis-theme,
.axis-theme *,
.axis-theme *::before,
.axis-theme *::after {
	transition: background-color 0.3s ease, 
	            border-color 0.3s ease, 
	            color 0.3s ease;
}

/* ========================================================================
   Glassmorphism for Dark Mode
   ======================================================================== */

/* Hero description glass effect - Dark mode */
body.dark-mode .axis-hero__description-wrapper {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Page description wrapper glass effect - Dark mode */
body.dark-mode .axis-page-description-wrapper {
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}


/* ============================================
   ENHANCED NAVIGATION - DARK MODE
   ============================================ */

/* Navigation links in dark mode - button visible by default */
body.dark-mode .axis-nav-list a {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.15);
    background: transparent;
}

body.dark-mode .axis-nav-list a:hover {
    color: #818CF8;
    border-color: #818CF8;
    background: rgba(129, 140, 248, 0.08);
    box-shadow: 0 0 15px rgba(129, 140, 248, 0.1);
}

/* Active page in dark mode - filled button with glow */
body.dark-mode .axis-nav-list li.current-menu-item > a,
body.dark-mode .axis-nav-list a[aria-current="page"] {
    color: #818CF8;
    background: rgba(129, 140, 248, 0.15);
    border-color: #818CF8;
    box-shadow: inset 0 -3px 0 0 #818CF8,
                0 0 20px rgba(129, 140, 248, 0.15);
}

/* Animated underline in dark mode */
body.dark-mode .axis-nav-list a::before {
    background: linear-gradient(90deg, #818CF8, #A78BFA);
}

/* Dropdown menu in dark mode - enhanced */
body.dark-mode .axis-nav-list ul {
    background: #1E293B;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(129, 140, 248, 0.1);
}

body.dark-mode .axis-nav-list ul a {
    color: rgba(255, 255, 255, 0.85);
}

body.dark-mode .axis-nav-list ul a:hover {
    background: rgba(129, 140, 248, 0.15);
    color: #818CF8;
    box-shadow: 0 2px 8px rgba(129, 140, 248, 0.2);
}

/* Dropdown arrow in dark mode */
body.dark-mode .axis-nav-list > li:has(ul) > a::after {
    color: rgba(255, 255, 255, 0.5);
}

body.dark-mode .axis-nav-list > li:has(ul):hover > a::after {
    color: #818CF8;
}

/* Hamburger menu in dark mode - simple */
body.dark-mode .axis-mobile-menu-toggle {
    border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .axis-hamburger-line {
    background: rgba(255, 255, 255, 0.9);
}

/* Header in dark mode - frosted glass effect */
body.dark-mode .axis-header {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .axis-header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5),
                0 0 40px rgba(129, 140, 248, 0.1);
    border-bottom-color: rgba(129, 140, 248, 0.2);
}

/* Read more link in dark mode */
body.dark-mode .axis-footer__read-more {
    color: #818CF8;
}

body.dark-mode .axis-footer__read-more::before {
    background: #818CF8;
}

body.dark-mode .axis-footer__read-more:hover {
    color: #10B981;
}

body.dark-mode .axis-footer__read-more:hover::before {
    background: #10B981;
}

/* Hero read more link in dark mode */
body.dark-mode .axis-hero__read-more {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
}

body.dark-mode .axis-hero__read-more:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

body.dark-mode .axis-hero__read-more::before {
    background: rgba(255, 255, 255, 0.85);
}

/* ============================================================================

/* ============================================================================
   CUSTOM BLOCKS - DARK MODE (TITLE OUTSIDE)
   ========================================================================== */

body.dark-mode .axis-custom-blocks-section {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-custom-block {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .axis-custom-block-wrapper:hover .axis-custom-block {
    background: rgba(255, 255, 255, 0.05);
    border-color: #818CF8;
    box-shadow: 0 4px 12px rgba(129, 140, 248, 0.15);
}

body.dark-mode .axis-custom-block__title {
    color: #818CF8;
}

body.dark-mode .axis-custom-block-wrapper:hover .axis-custom-block__title {
    color: #34D399;
}

body.dark-mode .axis-custom-blocks-scroll::-webkit-scrollbar-thumb {
    background: rgba(129, 140, 248, 0.5);
}

body.dark-mode .axis-custom-blocks-scroll::-webkit-scrollbar-thumb:hover {
    background: #818CF8;
}

body.dark-mode .axis-custom-block::-webkit-scrollbar-thumb {
    background: #818CF8;  /* Bright indigo */
}

body.dark-mode .axis-custom-block::-webkit-scrollbar-thumb:hover {
    background: #34D399;  /* Bright green */
}

body.dark-mode .axis-custom-block:hover {
    scrollbar-color: #818CF8 rgba(255, 255, 255, 0.05);
}

body.dark-mode .axis-custom-block::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}


/* ============================================================================
   FULL-WIDTH MODE - DARK MODE
   ========================================================================== */

body.dark-mode .axis-custom-blocks-section--full {
    background: rgba(255, 255, 255, 0.01);
    border-bottom-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* ============================================================================
   EARLY VIEW BADGE - DARK MODE
   ========================================================================== */

body.dark-mode .axis-badge--early-view {
    background-color: #064E3B; /* Dark green background */
    color: #6EE7B7; /* Light green text */
    border-color: #6EE7B7; /* Light green border */
}

body.dark-mode .axis-badge--early-view:hover {
    background-color: #6EE7B7;
    color: #064E3B;
}

body.dark-mode .axis-badge--early-view svg {
    stroke: #6EE7B7;
}

body.dark-mode .axis-badge--early-view:hover svg {
    stroke: #064E3B;
}


/* ============================================================================
   FORTHCOMING ISSUE PAGE - DARK MODE
   ========================================================================== */

body.dark-mode .axis-forthcoming-header {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.03) 0%, 
        rgba(255, 255, 255, 0.01) 100%);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .axis-forthcoming-header .axis-page-header__icon {
    background: var(--axis-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .axis-forthcoming-header .axis-page-header__stats {
    border-top-color: rgba(255, 255, 255, 0.1);
}


/* ============================================================================
   ARTICLE DETAIL - EARLY VIEW BADGE - DARK MODE
   ========================================================================== */

body.dark-mode .axis-badge--early-view-detail {
    background-color: #064E3B; /* Dark green background */
    color: #6EE7B7; /* Light green text */
    border-color: #6EE7B7; /* Light green border */
}

body.dark-mode .axis-badge--early-view-detail svg {
    stroke: #6EE7B7;
}

body.dark-mode .axis-badge--early-view-detail:hover {
    background-color: #6EE7B7;
    color: #064E3B;
}

body.dark-mode .axis-badge--early-view-detail:hover svg {
    stroke: #064E3B;
}