/* Import fonts - Inter for body, Poppins for headings */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

/* CSS Variables for dark mode theming (Flowbite-inspired) */
:root {
	/* Primary colors - adjusted for dark mode */
	--primary-50: #1e3a8a;
	--primary-100: #1d4ed8;
	--primary-400: #60a5fa;
	--primary-500: #3b82f6;
	--primary-600: #2563eb;
	--primary-700: #1d4ed8;
	--primary-800: #1e40af;
	--primary-900: #1e3a8a;

	/* Dark mode gray scale */
	--gray-50: #111827;
	--gray-100: #1f2937;
	--gray-200: #374151;
	--gray-300: #4b5563;
	--gray-400: #6b7280;
	--gray-500: #9ca3af;
	--gray-600: #d1d5db;
	--gray-700: #e5e7eb;
	--gray-800: #f3f4f6;
	--gray-900: #f9fafb;

	/* Dark mode specific colors */
	--dark-bg-primary: #0f172a;
	--dark-bg-secondary: #1e293b;
	--dark-bg-tertiary: #334155;
	--dark-border: #334155;
	--dark-border-light: #475569;

	/* Typography */
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;
	--space-16: 4rem;

	/* Border radius */
	--rounded-lg: 0.5rem;
	--rounded-xl: 0.75rem;

	/* Dark mode shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
	--shadow-md:
		0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
	--shadow-lg:
		0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
	--shadow-glow: 0 0 20px rgb(59 130 246 / 0.15);
}

/* Reset and base styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family:
		"Inter",
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
	background: linear-gradient(
		135deg,
		var(--dark-bg-primary) 0%,
		#0c1426 100%
	);
	color: var(--gray-700);
	line-height: 1.6;
	font-size: var(--text-base);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

/* Container */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--space-6);
}

/* Header - Dark mode Flowbite style */
header {
	background: rgba(30, 41, 59, 0.8);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--dark-border);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 0;
	z-index: 50;
}

header .container {
	padding-top: var(--space-4);
	padding-bottom: var(--space-4);
}

/* H1 - Poppins with lighter weight */
header h1,
h1 {
	font-family: "Poppins", sans-serif;
	font-size: var(--text-4xl);
	font-weight: 600;
	color: var(--gray-900);
	letter-spacing: -0.02em;
	line-height: 1.2;
	background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Main content */
main {
	padding-top: var(--space-8);
	padding-bottom: var(--space-16);
}

/* Section spacing */
section {
	margin-bottom: var(--space-12);
}

section:last-child {
	margin-bottom: 0;
}

/* H2 - Poppins with medium weight */
h2 {
	font-family: "Poppins", sans-serif;
	font-size: var(--text-2xl);
	font-weight: 500;
	color: var(--gray-900);
	margin-bottom: var(--space-4);
	letter-spacing: -0.01em;
	line-height: 1.3;
	background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* H3 - Poppins with regular weight */
h3 {
	font-family: "Poppins", sans-serif;
	font-size: var(--text-xl);
	font-weight: 500;
	color: var(--gray-800);
	margin-bottom: var(--space-3);
	letter-spacing: 0;
	line-height: 1.4;
	background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* H4, H5, H6 - Lighter Poppins weights */
h4,
h5,
h6 {
	font-family: "Poppins", sans-serif;
	color: var(--gray-800);
	margin-bottom: var(--space-2);
	letter-spacing: 0;
	line-height: 1.4;
}

h4 {
	font-size: var(--text-lg);
	font-weight: 500;
}

h5 {
	font-size: var(--text-base);
	font-weight: 500;
}

h6 {
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

p {
	font-size: var(--text-base);
	line-height: 1.75;
	color: var(--gray-600);
	margin-bottom: var(--space-4);
}

p:last-child {
	margin-bottom: 0;
}

/* Links - Dark mode style */
a {
	color: var(--primary-400);
	text-decoration: none;
	font-weight: 500;
	transition: all 0.15s ease-in-out;
	position: relative;
}

a:hover {
	color: #60a5fa;
	text-decoration: underline;
	text-decoration-color: var(--primary-400);
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
	text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}

a:focus {
	outline: 2px solid var(--primary-400);
	outline-offset: 2px;
	border-radius: var(--space-1);
}

/* Lists - Enhanced with better emoji spacing for dark mode */
ul {
	list-style: none;
	margin-bottom: var(--space-6);
}

li {
	font-size: var(--text-base);
	line-height: 1.75;
	color: var(--gray-600);
	margin-bottom: var(--space-3);
	padding-left: var(--space-8);
	position: relative;
	transition: all 0.15s ease-in-out;
}

li:hover {
	transform: translateX(4px);
	color: var(--gray-700);
}

li:before {
	content: attr(data-emoji);
	position: absolute;
	left: 0;
	top: 0;
	font-size: 1.1em;
	line-height: 1.75;
	filter: brightness(1.2);
}

/* Utility classes */
.mt-8 {
	margin-top: var(--space-8);
}

.mt-4 {
	margin-top: var(--space-4);
}

/* Card-like sections for dark mode */
section {
	background: linear-gradient(
		135deg,
		var(--dark-bg-secondary) 0%,
		rgba(51, 65, 85, 0.8) 100%
	);
	border-radius: var(--rounded-xl);
	padding: var(--space-8);
	box-shadow: var(--shadow-md);
	border: 1px solid var(--dark-border);
	transition: all 0.15s ease-in-out;
	backdrop-filter: blur(8px);
}

section:hover {
	box-shadow: var(--shadow-lg), var(--shadow-glow);
	transform: translateY(-4px);
	border-color: var(--dark-border-light);
	background: linear-gradient(
		135deg,
		rgba(30, 41, 59, 0.9) 0%,
		rgba(51, 65, 85, 0.9) 100%
	);
}

/* Footer - Enhanced dark mode */
footer {
	background: linear-gradient(
		135deg,
		var(--dark-bg-primary) 0%,
		#020617 100%
	);
	color: var(--gray-500);
	text-align: center;
	padding: var(--space-8) 0;
	margin-top: var(--space-16);
	border-top: 1px solid var(--dark-border);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

/* Details and Summary styling for dark mode */
details {
	background: rgba(51, 65, 85, 0.6);
	border: 1px solid var(--dark-border);
	border-radius: var(--rounded-lg);
	padding: var(--space-4);
	margin: var(--space-4) 0;
	transition: all 0.15s ease-in-out;
}

details:hover {
	background: rgba(51, 65, 85, 0.8);
	border-color: var(--dark-border-light);
}

details[open] {
	background: rgba(30, 41, 59, 0.8);
	box-shadow: var(--shadow-md);
}

summary {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-size: var(--text-base);
	color: var(--gray-700);
	cursor: pointer;
	padding: var(--space-2);
	border-radius: var(--rounded-lg);
	transition: all 0.15s ease-in-out;
	list-style: none; /* Remove default triangle on some browsers */
	position: relative;
	padding-left: var(--space-8);
}

summary:hover {
	color: var(--gray-800);
	background: rgba(96, 165, 250, 0.1);
}

summary:focus {
	outline: 2px solid var(--primary-400);
	outline-offset: 2px;
}

/* Custom triangle */
summary::before {
	content: "▶";
	position: absolute;
	left: var(--space-2);
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-400);
	font-size: 0.8em;
	transition: transform 0.15s ease-in-out;
}

details[open] summary::before {
	transform: translateY(-50%) rotate(90deg);
}

/* Hide default triangle in WebKit browsers */
summary::-webkit-details-marker {
	display: none;
}

/* Content inside details when expanded */
details[open] > *:not(summary) {
	animation: slideDown 0.2s ease-out;
	margin-top: var(--space-3);
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Style lists inside details */
details ul {
	margin-top: var(--space-3);
	background: rgba(15, 23, 42, 0.3);
	border-radius: var(--rounded-lg);
	padding: var(--space-4);
}

details li {
	color: var(--gray-600);
	margin-bottom: var(--space-2);
}

details li:last-child {
	margin-bottom: 0;
}

footer p {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--gray-500);
}

/* Responsive design */
@media (max-width: 768px) {
	.container {
		padding: 0 var(--space-4);
	}

	header h1,
	h1 {
		font-size: var(--text-3xl);
	}

	h2 {
		font-size: var(--text-xl);
	}

	h3 {
		font-size: var(--text-lg);
	}

	section {
		padding: var(--space-6);
		margin-bottom: var(--space-8);
	}

	main {
		padding-top: var(--space-6);
		padding-bottom: var(--space-12);
	}
}

@media (max-width: 480px) {
	.container {
		padding: 0 var(--space-3);
	}

	header h1,
	h1 {
		font-size: var(--text-2xl);
	}

	h2 {
		font-size: var(--text-lg);
	}

	section {
		padding: var(--space-4);
	}

	li {
		padding-left: var(--space-6);
	}
}

/* Enhanced focus states for accessibility in dark mode */
*:focus {
	outline: 2px solid var(--primary-400);
	outline-offset: 2px;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Selection styling for dark mode */
::selection {
	background: rgba(96, 165, 250, 0.3);
	color: var(--gray-900);
}

::-moz-selection {
	background: rgba(96, 165, 250, 0.3);
	color: var(--gray-900);
}

/* Scrollbar styling for dark mode */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--dark-bg-primary);
}

::-webkit-scrollbar-thumb {
	background: var(--dark-border-light);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--gray-400);
}

/* Print styles for dark mode */
@media print {
	body {
		background: white;
		color: black;
	}

	header {
		position: static;
		box-shadow: none;
		background: white;
		border-bottom: 1px solid #ccc;
	}

	header h1,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: black;
		background: none;
		-webkit-text-fill-color: initial;
	}

	section {
		background: white;
		box-shadow: none;
		border: 1px solid #ccc;
		break-inside: avoid;
	}

	p,
	li {
		color: black;
	}

	a {
		color: #0066cc;
		text-decoration: underline;
	}

	footer {
		background: white;
		color: black;
		border-top: 1px solid #ccc;
	}
}