/* CSS Custom Properties for Theme Support */
:root {
	/* Color Palette - Define once, reuse everywhere */
	--palette-slate-900: #202020;
	--palette-slate-700: #2c3e50;
	--palette-slate-100: #f4f4f4;
	--palette-white: #ffffff;
	--palette-black: #000000;
	--palette-blue-800: #2950b9;
	--palette-blue-600: #2980b9;
	--palette-blue-500: #3498db;
	--palette-blue-400: #60a5fa;
	--palette-blue-300: #93c5fd;
	--palette-zinc-900: #18181b;
	--palette-zinc-800: #27272a;
	--palette-zinc-700: #3f3f46;
	--palette-zinc-200: #e4e4e7;
	--palette-zinc-100: #fafafa;
	--palette-white-trans: #ffffff99;
	--palette-zinc-800-trans: #151515c5;
	--palette-shadow-light: rgba(0, 0, 0, 0.1);
	--palette-shadow-dark: rgba(1, 1, 1, 0.3);
	--gradient-dark: linear-gradient(150deg,
			rgba(32, 9, 58, 1) 0%,
			rgba(55, 9, 58, 1) 80%,
			rgba(125, 50, 40, 1) 100%);
	--gradient-light: linear-gradient(210deg,
			rgba(100, 89, 252, 1) 0%,
			rgba(137, 89, 252, 1) 40%,
			rgba(240, 170, 100, 1) 100%);
}

/* Dark mode colors (system preference) */
@media (prefers-color-scheme: dark) {
	:root {
		--color-text: var(--palette-zinc-200);
		--color-background: var(--palette-zinc-900);
		--color-surface: var(--palette-zinc-800-trans);
		--color-header-bg: var(--palette-zinc-700);
		--color-header-text: var(--palette-zinc-100);
		--color-heading: var(--palette-zinc-100);
		--color-accent: var(--palette-blue-400);
		--color-accent-hover: var(--palette-blue-300);
		--color-footer-text: var(--palette-white);
		--color-border-main: var(--palette-blue-400);
		--color-border-secn: var(--palette-blue-600);
		--gradient-background: var(--gradient-dark);
		--shadow: var(--palette-shadow-dark);
		--bg-image: url("./pictures/axial_compressor.jpg");
	}
}

[data-theme="dark"] {
	--color-text: var(--palette-zinc-200);
	--color-background: var(--palette-zinc-900);
	--color-surface: var(--palette-zinc-800-trans);
	--color-header-bg: var(--palette-zinc-700);
	--color-header-text: var(--palette-zinc-100);
	--color-heading: var(--palette-zinc-100);
	--color-accent: var(--palette-blue-400);
	--color-accent-hover: var(--palette-blue-300);
	--color-footer-text: var(--palette-white);
	--color-border-main: var(--palette-blue-400);
	--color-border-secn: var(--palette-blue-600);
	--gradient-background: var(--gradient-dark);
	--shadow: var(--palette-shadow-dark);
	--bg-image: url("./pictures/axial_compressor.jpg");
}

/* Manual theme override (higher specificity than media query) */
[data-theme="light"] {
	--color-text: var(--palette-slate-900);
	--color-background: var(--palette-slate-100);
	--color-surface: var(--palette-white-trans);
	--color-header-bg: var(--palette-slate-700);
	--color-header-text: var(--palette-black);
	--color-heading: var(--palette-slate-700);
	--color-accent: var(--palette-blue-800);
	--color-accent-hover: var(--palette-blue-800);
	--color-footer-text: var(--palette-black);
	--color-border-main: var(--palette-slate-900);
	--color-border-secn: var(--palette-slate-700);
	--shadow: var(--palette-shadow-light);
	--gradient-background: var(--gradient-light);
	--bg-image: url("./pictures/turbofan_light.jpg");
}


/* CSS Reset & Body Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: 'JetBrains Mono', monospace;
	line-height: 1.8;
	color: var(--color-text);
	/* Gradients */
	background: var(--gradient-background);
	/* Solid color */
	/* background-color: var(--color-background); */
	/* Picture */
	/* background-image: var(--bg-image); */
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
	transition: color 0.3s ease, background-color 0.3s ease;
}

/* Header Styles */
header {
	background-color: var(--color-surface);
	backdrop-filter: blur(13px);
	color: var(--color-header-text);
	box-shadow: 0 2px 5px var(--shadow);
	padding: 10px 60px 10px 10px;
	border-radius: 8px;
	margin-bottom: 20px;
	transition: background-color 0.3s ease;
	position: relative;
}

/* Subtitle */
.subtitle {
	text-align: center;
	font-weight: bold;
	font-size: 0.9rem;
	color: var(--color-text);
	margin-top: 0;
	margin-bottom: 0;
	opacity: 0.8;
}


header h1 {
	font-size: 2rem;
	text-align: center;
	margin-bottom: 0.25rem;
	padding-right: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}


/* Theme Toggle Button */
#theme-toggle {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid var(--color-header-text);
	background: linear-gradient(to right, var(--color-header-text) 50%, transparent 50%);
	cursor: pointer;
	transition: all 0.3s ease;
	padding: 0;
}

#theme-toggle:hover {
	opacity: 0.7;
	transform: translateY(-50%) scale(1.1);
}

#theme-toggle.dark {
	transform: translateY(-50%) rotate(180deg);
}

#theme-toggle.dark:hover {
	transform: translateY(-50%) rotate(180deg) scale(1.1);
}

/* Main Content */
main {
	background-color: var(--color-surface);
	padding: 30px;
	border-radius: 8px;
	box-shadow: 0 2px 5px var(--shadow);
	backdrop-filter: blur(10px);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Typography */
h2 {
	font-size: 1.3rem;
	color: var(--color-heading);
	margin-top: 20px;
	margin-bottom: 10px;
	border-bottom: 2px solid var(--color-border-main);
	padding-bottom: 5px;
	transition: color 0.3s ease, border-color 0.3s ease;
}

h3 {
	font-size: 1.05rem;
	color: var(--color-heading);
	margin-top: 4px;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--color-border-secn);
	padding-bottom: 1px;
	transition: color 0.3s ease, border-color 0.3s ease;
}

/* p { */
/* margin-bottom: 15px; */
/* } */

/* Links */
a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--color-accent-hover);
	text-decoration: underline;
}

/* Lists */
ul {
	margin-left: 20px;
	margin-bottom: 15px;
}

li {
	margin-bottom: 5px;
}

/* Caption */
figure {
	text-align: center;
	font-style: italic;
	font-size: 0.8rem;
	color: var(--color-text);
	margin-top: 10px;
	margin-bottom: 10px;
	opacity: 1.0;

	img.scaled {
		object-fit: cover;
		border-radius: 10px;
	}
}

/* Figure row container */
.figure-row {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	margin: 20px 0;
}

.figure-row figure {
	flex: 1;
	max-width: 50%;
	margin: 0;
}

.figure-row img {
	max-width: 100%;
	/* height: auto; */
}

/* Mobile responsiveness for figure rows */
@media (max-width: 640px) {
	.figure-row {
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}

	.figure-row figure {
		max-width: 100%;
	}
}

/* Date Range Flexbox */
.date-range {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

/* Mobile responsiveness for date ranges */
@media (max-width: 640px) {
	.date-range {
		flex-direction: column;
		gap: 0;
	}

	.date-range span:last-child {
		font-size: 0.85rem;
		opacity: 0.8;
	}
}

/* Header responsiveness */
@media (max-width: 768px) {
	header {
		padding: 10px 50px 10px 10px;
	}

	header h1 {
		font-size: 1.75rem;
	}

	#theme-toggle {
		right: 15px;
		width: 26px;
		height: 26px;
	}
}

@media (max-width: 480px) {
	header {
		padding: 10px 45px 10px 10px;
	}

	header h1 {
		font-size: 1.5rem;
	}

	#theme-toggle {
		right: 10px;
		width: 24px;
		height: 24px;
	}
}

/* Footer */
footer {
	text-align: center;
	margin-top: 20px;
	padding: 15px;
	color: var(--color-footer-text);
	font-size: 0.9rem;
	transition: color 0.3s ease;
}