/* ── Reset & Base ─────────────────────────────────────── */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Fredoka', sans-serif;
	font-size: 16px;
	color: #1a1a1a;
	background: #f5f3ff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.6;
}

a {
	color: #6B46C1;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
}

/* ── Navigation ──────────────────────────────────────── */

nav {
	background: #6B46C1;
	border-bottom: 3px solid #000;
	position: sticky;
	top: 0;
	z-index: 100;
}

.nav-inner {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 64px;
}

.nav-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-weight: 600;
	font-size: 1.2rem;
}

.nav-brand:hover {
	text-decoration: none;
}

.nav-brand img {
	height: 32px;
}

.nav-brand span {
	opacity: 0.85;
	font-weight: 400;
}

.nav-links a:not(.lang-toggle) {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	font-weight: 500;
}

.nav-links a:hover {
	color: #fff;
	text-decoration: none;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 16px;
}

.lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 13px;
	background: transparent;
	color: #FFFFFF;
	border: 3px solid rgba(255, 255, 255, 0.5);
	border-radius: 20px;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.428571429;
	letter-spacing: 0.5px;
	transition: background 0.2s, border-color 0.2s;
}

.lang-toggle:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.lang-icon {
	font-size: 16px;
	opacity: 0.8;
}

.lang-option {
	opacity: 0.45;
	transition: opacity 0.2s;
}

.lang-option.active {
	opacity: 1;
}

.lang-sep {
	opacity: 0.3;
	font-weight: 300;
}

/* ── Hero ────────────────────────────────────────────── */

.hero {
	background: linear-gradient(135deg, #6B46C1 0%, #553399 100%);
	color: #fff;
	text-align: center;
	padding: 60px 20px 50px;
}

.hero h1 {
	font-size: 2.4rem;
	font-weight: 700;
	margin-bottom: 8px;
}

.hero p {
	font-size: 1.1rem;
	opacity: 0.85;
}

/* ── Post List ───────────────────────────────────────── */

.post-list {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 20px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.post-list .empty {
	text-align: center;
	color: #666;
	font-size: 1.1rem;
	padding: 60px 0;
}

.post-card {
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s;
}

.post-card:hover {
	box-shadow: 0 4px 16px rgba(107, 70, 193, 0.15);
}

.post-card-image img {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.post-card-body {
	padding: 24px;
}

.post-tag {
	display: inline-block;
	background: #ede9fe;
	color: #6B46C1;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-right: 8px;
}

.post-card-body time {
	font-size: 0.85rem;
	color: #888;
}

.post-card-body h2 {
	margin: 10px 0 8px;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
}

.post-card-body h2 a {
	color: #1a1a1a;
}

.post-card-body h2 a:hover {
	color: #6B46C1;
	text-decoration: none;
}

.post-card-body p {
	color: #555;
	font-size: 0.95rem;
	margin-bottom: 12px;
}

.read-more {
	font-size: 0.9rem;
	font-weight: 500;
	color: #6B46C1;
}

/* ── Single Post ─────────────────────────────────────── */

.post-content {
	max-width: 720px;
	margin: 40px auto;
	padding: 0 20px;
}

.back-link {
	display: inline-block;
	margin-bottom: 24px;
	font-size: 0.9rem;
	color: #6B46C1;
	font-weight: 500;
}

.post-content header {
	margin-bottom: 24px;
}

.post-content header time {
	font-size: 0.85rem;
	color: #888;
}

.post-content header h1 {
	font-size: 2rem;
	font-weight: 700;
	margin-top: 10px;
	line-height: 1.25;
	color: #1a1a1a;
}

.post-hero-image {
	width: 100%;
	border-radius: 12px;
	margin-bottom: 32px;
}

.post-body {
	font-size: 1.05rem;
	line-height: 1.8;
	color: #333;
}

.post-body h2 {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 32px 0 12px;
	color: #1a1a1a;
}

.post-body h3 {
	font-size: 1.2rem;
	font-weight: 600;
	margin: 24px 0 8px;
	color: #1a1a1a;
}

.post-body p {
	margin-bottom: 16px;
}

.post-body ul, .post-body ol {
	margin: 0 0 16px 24px;
}

.post-body li {
	margin-bottom: 6px;
}

.post-body blockquote {
	border-left: 4px solid #6B46C1;
	margin: 24px 0;
	padding: 12px 20px;
	background: #f5f3ff;
	border-radius: 0 8px 8px 0;
	color: #444;
	font-style: italic;
}

.post-body img {
	border-radius: 8px;
	margin: 16px 0;
}

.post-body code {
	background: #f0ecf9;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 0.9em;
}

/* ── Footer ──────────────────────────────────────────── */

footer {
	text-align: center;
	padding: 40px 20px;
	color: #888;
	font-size: 0.85rem;
}

footer a {
	color: #6B46C1;
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 640px) {
	.hero {
		padding: 40px 20px 32px;
	}

	.hero h1 {
		font-size: 1.8rem;
	}

	.post-card-image img {
		height: 180px;
	}

	.post-card-body {
		padding: 16px;
	}

	.post-card-body h2 {
		font-size: 1.2rem;
	}

	.post-content header h1 {
		font-size: 1.6rem;
	}
}