/* Dark Mode Styles using Template's .invert class */

/* Ensure body has proper background in light mode */
body {
	background-color: #ffffff;
}

/* Explicit light mode styling (overrides system preference) */
body.light-mode {
	background-color: #ffffff !important;
}

/* Body background in dark mode */
body.dark-mode {
	background-color: #1a1a1a;
}

/* Header styles for dark mode (Header is outside #wrapper) */
body.dark-mode #header {
	background-color: rgba(26, 26, 26, 0.975);
	color: #ffffff;
}

body.dark-mode #header nav a {
	color: #ffffff;
}

body.dark-mode #header nav a:hover {
	color: #6D28D9;
}

/* Mobile menu dark mode */
body.dark-mode #overlay-menu {
	background-color: rgba(26, 26, 26, 0.98);
}

body.dark-mode #overlay-menu a {
	color: #ffffff;
	font-size: 1.3rem !important; /* Larger menu links */
}

/* Hover/Active-Farbe kommt aus main.css (.overlay-menu ul li a:hover / :active) —
   dort hover:hover-gegated, damit sie auf Touch-Geräten nicht hängen bleibt.
   Hier bewusst KEINE eigene ungegatete :hover-Regel mehr ergänzen. */

/* Mobile menu light mode - larger links */
#overlay-menu a {
	font-size: 1.3rem !important; /* Larger menu links in both modes */
}

.overlay-menu ul li {
	border-bottom-color: rgba(0, 0, 0, .08);
}

body.dark-mode .overlay-menu ul li {
	border-bottom-color: rgba(255, 255, 255, .12);
}

body.dark-mode .overlay-menu-label {
	opacity: 0.4;
}

body.dark-mode #menu-close {
	color: #ffffff !important;
	opacity: 0.9 !important;
}

body.dark-mode #menu-close:hover {
	opacity: 1 !important;
}

/* Mobile Menu Close Button - Remove outline and ensure proper colors */
/* height/line-height/border-radius/max-width explizit zurücksetzen, sonst erbt der
   Button die 3.75em-Pillenform der allgemeinen button-Regel aus main.css */
#menu-close {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
	background: none;
	color: #000000; /* Black in light mode */
	font-size: 1.3rem !important;
	line-height: 1 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	width: 40px;
	max-width: none;
	border-radius: 50%;
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 0;
	cursor: pointer;
}

#menu-close:hover {
	outline: none !important;
	box-shadow: none !important;
}

#menu-close:active {
	outline: none !important;
	box-shadow: none !important;
}

#menu-close:focus {
	outline: none !important;
	box-shadow: none !important;
}

#menu-close:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

body.dark-mode .menu-backdrop {
	background-color: rgba(0, 0, 0, 0.9);
}

/* main.css setzt global button { color: #000000 !important; } — ohne eigenes
   !important würde der Dark-Mode-Toggle immer schwarz bleiben */
body.dark-mode #dark-mode-toggle {
	color: #ffffff !important;
}

body.dark-mode #menu-open {
	color: #ffffff !important;
	opacity: 0.9 !important;
}

body.dark-mode #menu-open:hover {
	opacity: 1 !important;
}

/* Mobile Menu Button (Hamburger) - Remove outline and adjust size */
/* height/line-height/border-radius/max-width explizit zurücksetzen, sonst erbt der
   Button die 3.75em-Pillenform der allgemeinen button-Regel aus main.css (unsichtbar,
   aber sorgt für eine viel zu hohe Klickfläche und dadurch scheinbar "verrutschte" Icons) */
#menu-open {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
	background: none;
	font-size: 1.15rem !important;
	vertical-align: middle !important;
	line-height: 1 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	width: 44px;
	max-width: none;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
}

#menu-open:hover {
	outline: none !important;
	box-shadow: none !important;
}

#menu-open:active {
	outline: none !important;
	box-shadow: none !important;
}

#menu-open:focus {
	outline: none !important;
	box-shadow: none !important;
}

#menu-open:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Letterbox background for unbeschnittene Bilder (object-fit: contain), passt sich dem Farbschema an */
/* Selector-Spezifität bewusst hoch gehalten, um die object-fit:cover-Regel aus main.css (.spotlight.style1 .image img) zu schlagen */
.spotlight.style1 .image img.letterbox-fit {
	object-fit: contain;
	background-color: #ffffff;
}

body.dark-mode .spotlight.style1 .image img.letterbox-fit {
	background-color: #1a1a1a;
}

/* Darken color sections in dark mode for better contrast */
body.dark-mode #wrapper > .color7 {
	background-color: #2d5040 !important; /* Darker green for better contrast */
}

body.dark-mode #wrapper > .color1 {
	background-color: #1f2428 !important; /* Darker gray-blue */
}

body.dark-mode #wrapper > .color2 {
	background-color: #8b5a5f !important; /* Darker red-pink */
}

body.dark-mode #wrapper > .color3 {
	background-color: #6b4a6b !important; /* Darker purple */
}

body.dark-mode #wrapper > .color4 {
	background-color: #553d6d !important; /* Darker violet */
}

body.dark-mode #wrapper > .color5 {
	background-color: #4a5f87 !important; /* Darker blue */
}

body.dark-mode #wrapper > .color6 {
	background-color: #3e6873 !important; /* Darker teal */
}

/* Dark Mode Toggle Button */
/* height/line-height/border-radius/max-width explizit zurücksetzen, sonst erbt der
   Button die 3.75em-Pillenform der allgemeinen button-Regel aus main.css (unsichtbar,
   aber sorgt für eine viel zu hohe Klickfläche und dadurch scheinbar "verrutschte" Icons) */
#dark-mode-toggle {
	position: relative;
	background: none;
	border: none;
	font-size: 1.05rem;
	cursor: pointer;
	padding: 0;
	margin: 0;
	color: inherit;
	transition: opacity 0.2s ease;
	opacity: 0.7;
	line-height: 1;
	vertical-align: middle;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	width: 44px;
	max-width: none;
	border-radius: 50%;
	outline: none !important; /* Remove focus outline */
	box-shadow: none !important; /* Remove any box shadow */
	border: none !important; /* Ensure no border */
}

/* Desktop: Toggle sitzt sonst bündig am linken Header-Rand (0 Abstand), während
   #header nav rechts einen 0.5em-Abstand zum Rand hat (main.css) — für optische
   Symmetrie hier denselben Abstand spiegeln. Nur ab dem Desktop-Breakpoint, sonst
   bricht die space-between-Symmetrie der mobilen Kopfzeile (main.css). */
@media screen and (min-width: 737px) {
	#dark-mode-toggle {
		margin-left: 0.5em;
	}
}

#dark-mode-toggle:hover {
	opacity: 1;
	outline: none !important;
	box-shadow: none !important;
}

#dark-mode-toggle:active {
	opacity: 0.5;
	outline: none !important;
	box-shadow: none !important;
}

#dark-mode-toggle:focus {
	outline: none !important; /* Remove focus outline */
	box-shadow: none !important;
}

#dark-mode-toggle:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

/* Icons for toggle - using Unicode symbols */
.dark-mode-icon {
	display: inline-block;
	transition: opacity 0.2s ease;
	line-height: 1;
	vertical-align: baseline;
}

body:not(.dark-mode) .dark-mode-icon.moon {
	display: inline;
}

body:not(.dark-mode) .dark-mode-icon.sun {
	display: none;
}

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

body.dark-mode .dark-mode-icon.sun {
	display: inline;
}

/* Auto Dark Mode based on system preference - DISABLED */
/* Site now defaults to Light Mode always, users can manually toggle */
/*
@media (prefers-color-scheme: dark) {
	body:not(.light-mode):not(.dark-mode) {
		background-color: #1a1a1a;
	}

	body:not(.light-mode):not(.dark-mode) #header {
		background-color: rgba(26, 26, 26, 0.975);
		color: #ffffff;
	}

	body:not(.light-mode):not(.dark-mode) #header nav a {
		color: #ffffff;
	}

	body:not(.light-mode):not(.dark-mode) #header nav a:hover {
		color: #6D28D9;
	}

	body:not(.light-mode):not(.dark-mode) #overlay-menu {
		background-color: rgba(26, 26, 26, 0.98);
	}

	body:not(.light-mode):not(.dark-mode) #overlay-menu a {
		color: #ffffff;
	}

	body:not(.light-mode):not(.dark-mode) #overlay-menu a:hover {
		color: #6D28D9;
	}

	body:not(.light-mode):not(.dark-mode) #menu-close {
		color: #ffffff;
	}

	body:not(.light-mode):not(.dark-mode) #menu-open {
		color: #ffffff;
	}
}
*/

/* iframe styling for dark mode */
body.dark-mode iframe {
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	background-color: #000000;
}

/* Responsive adjustments */
@media screen and (max-width: 736px) {
	#dark-mode-toggle {
		font-size: 0.9rem;
	}
}