/**
 * Theme Mode - Light/Dark Mode Styles
 *
 * @package Talar
 * @since 1.0.0
 */

/* Dark Mode (Default) */
:root[data-theme="dark"] {
	--theme-bg-primary: #0A0A0A;
	--theme-bg-secondary: #1A1A1A;
	--theme-bg-tertiary: #2A2A2A;
	--theme-text-primary: #FFFFFF;
	--theme-text-secondary: #B8B8B8;
	--theme-accent: #D4AF37;
	--theme-border: #2A2A2A;
	--theme-link-hover: #D2AC67;
}

/* Light Mode */
:root[data-theme="light"] {
	--theme-bg-primary: #F5F1E8;
	--theme-bg-secondary: #FDFBF7;
	--theme-bg-tertiary: #F8F6F0;
	--theme-text-primary: #2C2416;
	--theme-text-secondary: #5A4E3F;
	--theme-accent: #D4AF37;
	--theme-border: #E5DCC8;
	--theme-link-hover: #D2AC67;
}

/* Theme Toggle Button Styles */
#theme-toggle-btn {
	position: fixed !important;
	left: 20px !important;
	bottom: 20px !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	min-height: 56px !important;
	max-width: 56px !important;
	max-height: 56px !important;
	border-radius: 50% !important;
	background: rgba(212, 175, 55, 0.95) !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
	cursor: pointer !important;
	z-index: 9999 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: none !important;
	transition: all 0.3s ease !important;
	backdrop-filter: blur(10px) !important;
	padding: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
	aspect-ratio: 1 / 1 !important;
}

#theme-toggle-btn:hover {
	background: rgba(212, 175, 55, 1);
	transform: scale(1.05);
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
}

#theme-toggle-btn .icon {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	width: 28px !important;
	height: 28px !important;
	fill: #0A0A0A !important;
	transition: transform 0.3s ease, opacity 0.3s ease !important;
	opacity: 0 !important;
	visibility: hidden !important;
	flex-shrink: 0 !important;
}

/* Show sun icon in light mode */
:root[data-theme="light"] #theme-toggle-btn .sun-icon {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Hide moon icon in light mode */
:root[data-theme="light"] #theme-toggle-btn .moon-icon {
	opacity: 0 !important;
	visibility: hidden !important;
}

/* Show moon icon in dark mode */
:root[data-theme="dark"] #theme-toggle-btn .moon-icon {
	opacity: 1 !important;
	visibility: visible !important;
}

/* Hide sun icon in dark mode */
:root[data-theme="dark"] #theme-toggle-btn .sun-icon {
	opacity: 0 !important;
	visibility: hidden !important;
}

#theme-toggle-btn:hover .icon {
	transform: translate(-50%, -50%) rotate(15deg) !important;
}

/* Apply Light Mode colors to html and body */
:root[data-theme="light"] {
	background-color: var(--theme-bg-primary);
}

:root[data-theme="light"] body,
:root[data-theme="light"] html {
	background-color: var(--theme-bg-primary);
	color: var(--theme-text-primary) !important;
}

/* Apply to main elements */
:root[data-theme="light"] main,
:root[data-theme="light"] section,
:root[data-theme="light"] div {
	background-color: transparent;
}

:root[data-theme="light"] .bg-\[#0A0A0A\] {
	background-color: var(--theme-bg-primary) !important;
}

:root[data-theme="light"] .bg-\[#191919\] {
	background-color: var(--theme-bg-primary) !important;
}

/* Apply to text elements in Light Mode */
:root[data-theme="light"] p,
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4,
:root[data-theme="light"] h5,
:root[data-theme="light"] h6,
:root[data-theme="light"] span {
	color: var(--theme-text-primary);
}

/* Apply to links in Light Mode */
:root[data-theme="light"] a {
	color: var(--theme-text-primary);
}

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

/* Header Vector Positioning - Ensure both vectors are in same position */
.header-vector-right,
.header-vector-left {
	position: relative;
}

.header-vector-right img,
.header-vector-left img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Hide/show vectors based on theme mode */
:root[data-theme="dark"] .header-vector-light {
	display: none !important;
}

:root[data-theme="dark"] .header-vector-dark {
	display: block !important;
}

:root[data-theme="light"] .header-vector-dark {
	display: none !important;
}

:root[data-theme="light"] .header-vector-light {
	display: block !important;
}

/* Make SVG vectors visible in Light Mode with stronger contrast */
:root[data-theme="light"] img[src*="right-header-vector.svg"],
:root[data-theme="light"] img[src*="left-header-vector.svg"],
:root[data-theme="light"] .header-vector {
	opacity: 1 !important;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3)) drop-shadow(0 4px 16px rgba(0, 0, 0, 0.2)) brightness(0.85) contrast(1.5) !important;
}

/* Add darker shadow to make it more visible */
:root[data-theme="light"] .header-vector {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* Footer Background Styles for Light Mode */
/* Note: Dynamic background image will be injected via footer_background_dynamic_css() */
/* Only hide default dark mode background, allow custom light mode image */
:root[data-theme="light"] footer::after {
	display: none !important;
}

/* Override all dark background classes in Light Mode */
:root[data-theme="light"] [class*="bg-\[#0A0A0A\]"],
:root[data-theme="light"] [class*="bg-\[#1A1A1A\]"],
:root[data-theme="light"] [class*="bg-\[#191919\]"],
:root[data-theme="light"] [class*="bg-black"] {
	background-color: var(--theme-bg-primary) !important;
}

/* Footer-bg will be styled dynamically via footer_background_dynamic_css() */
/* Keep original styles unless custom color is set */

/* Override text-white class in Light Mode */
:root[data-theme="light"] .text-white {
	color: var(--theme-text-primary) !important;
}

/* Responsive adjustments for toggle button */
@media (max-width: 768px) {
	#theme-toggle-btn {
		left: 10px !important;
		bottom: 10px !important;
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		min-height: 48px !important;
		max-width: 48px !important;
		max-height: 48px !important;
		border-radius: 50% !important;
	}
	
	#theme-toggle-btn .icon {
		width: 24px !important;
		height: 24px !important;
	}
}

/* Additional responsive breakpoints */
@media (min-width: 769px) and (max-width: 1024px) {
	#theme-toggle-btn {
		width: 52px !important;
		height: 52px !important;
		min-width: 52px !important;
		min-height: 52px !important;
		max-width: 52px !important;
		max-height: 52px !important;
	}
	
	#theme-toggle-btn .icon {
		width: 26px !important;
		height: 26px !important;
	}
}