/* Shared styles for Pixit Labs subpages — mirrors the homepage design */
:root {
	--pixit-blue: #0d6efd;
	--pixit-purple: #6610f2;
	--pixit-pink: #e91e8c;
}

body {
	font-family: 'Nunito', sans-serif;
	background-color: #f4f7ff;
	color: #343a40;
}

/* ── Navbar ── */
.navbar {
	background: #fff !important;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.navbar-brand {
	font-family: 'Fredoka One', cursive;
	font-size: 1.6rem;
	background: linear-gradient(135deg, var(--pixit-blue), var(--pixit-purple));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── Page hero ── */
.page-hero {
	background: linear-gradient(135deg, #0d6efd 0%, #6610f2 60%, #e91e8c 100%);
	padding: 55px 20px 65px;
	text-align: center;
	color: white;
	position: relative;
	overflow: hidden;
}

.page-hero::before {
	content: '';
	position: absolute;
	top: -60px; left: -60px;
	width: 300px; height: 300px;
	background: rgba(255,255,255,0.06);
	border-radius: 50%;
}

.page-hero::after {
	content: '';
	position: absolute;
	bottom: -80px; right: -40px;
	width: 400px; height: 400px;
	background: rgba(255,255,255,0.05);
	border-radius: 50%;
}

.page-hero h1 {
	font-family: 'Fredoka One', cursive;
	font-size: 2.8rem;
	letter-spacing: 1px;
	margin: 0;
	position: relative;
	z-index: 1;
}

.page-hero p {
	font-size: 1.1rem;
	opacity: 0.92;
	max-width: 620px;
	margin: 12px auto 0;
	position: relative;
	z-index: 1;
}

/* ── Content card ── */
.policy-card {
	max-width: 960px;
	margin: -35px auto 50px;
	background: white;
	border-radius: 20px;
	border: 2px solid #eef0f8;
	box-shadow: 0 4px 20px rgba(0,0,0,0.07);
	padding: 35px 25px;
	position: relative;
	z-index: 1;
}

.policy-card h3,
.policy-card h4 {
	font-family: 'Fredoka One', cursive;
	color: #1a1a2e;
	font-size: 1.35rem;
	margin-top: 1.2rem;
}

.policy-card h3::after,
.policy-card h4::after {
	content: '';
	display: block;
	width: 45px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(135deg, var(--pixit-blue), var(--pixit-purple));
	margin-top: 6px;
}

.policy-card a {
	color: var(--pixit-blue);
	font-weight: 700;
}

.policy-card li {
	margin-bottom: 0.4rem;
}

.updated-note {
	border: none;
	border-radius: 14px;
	background: linear-gradient(135deg, #cfe2ff, #e0cffc);
	color: #1a1a2e;
	font-weight: 700;
	padding: 18px 24px;
	margin: 25px 15px 5px;
}

/* ── Footer ── */
footer {
	background: #1a1a2e;
	color: rgba(255,255,255,0.6);
	text-align: center;
	padding: 30px 20px;
	font-size: 0.9rem;
}

footer a {
	color: rgba(255,255,255,0.6);
	text-decoration: none;
	margin: 0 10px;
	transition: color 0.2s;
}

footer a:hover { color: white; }

.footer-brand {
	font-family: 'Fredoka One', cursive;
	font-size: 1.4rem;
	background: linear-gradient(135deg, #74b9ff, #a29bfe);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 10px;
}

@media (max-width: 576px) {
	.page-hero h1 { font-size: 2rem; }
	.policy-card { margin-left: 12px; margin-right: 12px; padding: 22px 8px; }
}

/* ── Dark theme (follows system setting) ── */
@media (prefers-color-scheme: dark) {
	:root { color-scheme: dark; }

	body {
		background-color: #0f1020;
		color: #c6cade;
	}

	.navbar {
		background: #181a2e !important;
		box-shadow: 0 2px 12px rgba(0,0,0,0.4);
	}

	.navbar-brand {
		background: linear-gradient(135deg, #6ea8fe, #b197fc);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.navbar-light .navbar-nav .nav-link { color: rgba(255,255,255,0.75); }
	.navbar-light .navbar-nav .nav-link:hover,
	.navbar-light .navbar-nav .nav-link:focus { color: #fff; }
	.navbar-light .navbar-nav .active > .nav-link,
	.navbar-light .navbar-nav .nav-link.active,
	.navbar-light .navbar-nav .show > .nav-link,
	.navbar-light .navbar-nav .nav-link.show { color: #fff; }
	.navbar-light .navbar-toggler { border-color: rgba(255,255,255,0.2); }
	.navbar-light .navbar-toggler-icon { filter: invert(1); }

	.dropdown-menu { background: #1e2138; border-color: #2c3050; }
	.dropdown-item { color: #c6cade; }
	.dropdown-item:hover,
	.dropdown-item:focus { background: #2a2e4d; color: #fff; }

	.policy-card {
		background: #181a2e;
		border-color: #262a45;
		box-shadow: 0 4px 20px rgba(0,0,0,0.35);
	}

	.policy-card h3,
	.policy-card h4 { color: #eef0ff; }

	.policy-card a { color: #6ea8fe; }

	.updated-note {
		background: linear-gradient(135deg, #1f3a68, #3a2a68);
		color: #e8ecff;
	}
}