/* OmniDB Revival - Main Stylesheet */

:root {
	/* Light Theme Variables */
	--white: #ffffff;
	--light-blue: #8199bf;
	--dark-blue: #192e4d;
	--text-main: #2d3748;
	--text-muted: #4a5568;
	--bg-light: #f4f7f9;
	--border-color: #e2e8f0;
	--card-bg: #ffffff;

	/* Logo defaults (Light Mode) */
	--logo-wrapper-bg: transparent;
	--logo-wrapper-padding: 20px 0;
	--logo-wrapper-radius: 0;
	--logo-wrapper-shadow: none;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Dark Theme Variables */
		--white: #1a202c;
		--light-blue: #a0aec0;
		--dark-blue: #63b3ed;
		--text-main: #f7fafc;
		--text-muted: #cbd5e0;
		--bg-light: #2d3748;
		--border-color: #4a5568;
		--card-bg: #2d3748;

		/* Logo specifics for Dark Mode */
		--logo-wrapper-bg: #ffffff;
		/* Pure white oval */
		--logo-wrapper-padding: 20px 50px;
		--logo-wrapper-radius: 100px;
		--logo-wrapper-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	}
}

/* Global Styles */
body {
	font-family: 'Inter', sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--white);
	color: var(--text-main);
	line-height: 1.7;
	transition: background-color 0.3s ease, color 0.3s ease;
}

header {
	padding: 60px 20px 40px;
	text-align: center;
}

/* Logo Wrapper - Changes appearance based on mode */
.logo-wrapper {
	display: inline-block;
	background-color: var(--logo-wrapper-bg);
	padding: var(--logo-wrapper-padding);
	border-radius: var(--logo-wrapper-radius);
	box-shadow: var(--logo-wrapper-shadow);
	transition: all 0.3s ease;
}

.logo-wrapper:hover {
	transform: translateY(-3px);
}

.logo {
	max-width: 100%;
	height: auto;
	width: 400px;
	display: block;
	/* No filters or dimming as per request */
	filter: none !important;
}

/* Hero & Main Content */
.hero {
	max-width: 900px;
	margin: 0 auto;
	padding: 20px;
	text-align: center;
}

h1 {
	color: var(--dark-blue);
	font-size: 3rem;
	font-weight: 800;
	margin-bottom: 24px;
	letter-spacing: -0.03em;
}

h2 {
	color: var(--dark-blue);
	font-size: 2rem;
	margin: 60px 0 30px;
}

.lead {
	font-size: 1.3rem;
	color: var(--text-muted);
	max-width: 750px;
	margin: 0 auto 40px;
}

/* Revival Announcement Box */
.revival-box {
	background-color: var(--bg-light);
	border-left: 6px solid var(--light-blue);
	padding: 30px;
	margin: 50px 0;
	text-align: left;
	border-radius: 0 12px 12px 0;
}

.revival-box h3 {
	margin-top: 0;
	color: var(--dark-blue);
}

.pg-link {
	color: var(--dark-blue);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid var(--light-blue);
}

/* Features Grid */
.features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
	margin: 40px 0;
	text-align: left;
}

.feature-card {
	padding: 30px;
	background-color: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	transition: all 0.3s ease;
}

.feature-card:hover {
	transform: translateY(-5px);
	border-color: var(--light-blue);
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

.feature-card h3 {
	color: var(--dark-blue);
	margin-top: 0;
	font-size: 1.4rem;
}

/* Buttons */
.button-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin: 50px 0;
	flex-wrap: wrap;
}

.btn {
	text-decoration: none;
	padding: 16px 36px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 1.1rem;
	transition: all 0.3s ease;
}

.btn-primary {
	background-color: var(--dark-blue);
	color: #ffffff !important;
	box-shadow: 0 5px 15px rgba(25, 46, 77, 0.3);
}

.btn-primary:hover {
	opacity: 0.9;
	transform: translateY(-2px);
}

.btn-outline {
	border: 2px solid var(--dark-blue);
	color: var(--dark-blue);
}

.btn-outline:hover {
	background-color: var(--dark-blue);
	color: #ffffff !important;
}

/* Footer */
footer {
	background-color: #0f172a;
	color: #f8fafc;
	padding: 80px 20px;
	text-align: center;
	margin-top: 100px;
}

footer a {
	color: var(--light-blue);
	text-decoration: none;
	font-weight: 600;
}

footer .author-info strong {
	color: var(--light-blue);
	font-weight: 800;
}

footer p a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Utilities */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
	h1 {
		font-size: 2.2rem;
	}

	.button-group {
		flex-direction: column;
	}

	.logo {
		width: 280px;
	}

	/* Keeping the oval padding balanced on mobile */
	@media (prefers-color-scheme: dark) {
		.logo-wrapper {
			padding: 15px 30px;
		}
	}
}

.get-started {
	text-align: center;
	margin: 3rem auto 5rem;
	max-width: 720px;
	padding: 0 1.5rem;
}

.install-block {
	margin: 2rem auto;
	max-width: 620px;
}

.install-label {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--dark-blue);
	margin: 1.8rem 0 0.8rem;
	text-align: left;
}

.install-command {
	background: var(--bg-light);
	border: 1px solid var(--border-color);
	border-radius: 10px;
	padding: 1.1rem 1.4rem;
	margin: 0;
	font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--text-main);
	white-space: pre;
	overflow-x: auto;
	text-align: left;
	box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.install-command {
		background: rgba(45, 55, 72, 0.65);
		border-color: #4a5568;
		color: #e2e8f0;
	}
}

@media (max-width: 600px) {
	.install-command {
		font-size: 0.9rem;
		padding: 1rem 1.2rem;
		line-height: 1.7;
	}

	.install-label {
		font-size: 1rem;
	}
}