/* ==========================================================================
   WalkByFaith - main styles
   ========================================================================== */

:root {
	--wbf-bg: #f7f5f0;
	--wbf-bg-gradient: radial-gradient(circle at 20% 20%, #fffdf8 0%, #f2efe7 45%, #e9e4d8 100%);
	--wbf-card-bg: #ffffff;
	--wbf-text: #2b2b28;
	--wbf-text-soft: #6b675f;
	--wbf-accent: #8a6d3b;
	--wbf-accent-strong: #5c4726;
	--wbf-border: rgba(43, 43, 40, 0.08);
	--wbf-shadow: 0 20px 60px rgba(43, 43, 40, 0.12);
	--wbf-radius: 22px;
	--wbf-transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] {
	--wbf-bg: #14141a;
	--wbf-bg-gradient: radial-gradient(circle at 20% 20%, #23232d 0%, #17171d 55%, #101014 100%);
	--wbf-card-bg: #1e1e26;
	--wbf-text: #f2f0ea;
	--wbf-text-soft: #a7a49b;
	--wbf-accent: #e0c28a;
	--wbf-accent-strong: #f2d9ab;
	--wbf-border: rgba(255, 255, 255, 0.08);
	--wbf-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wbf-bg: #14141a;
		--wbf-bg-gradient: radial-gradient(circle at 20% 20%, #23232d 0%, #17171d 55%, #101014 100%);
		--wbf-card-bg: #1e1e26;
		--wbf-text: #f2f0ea;
		--wbf-text-soft: #a7a49b;
		--wbf-accent: #e0c28a;
		--wbf-accent-strong: #f2d9ab;
		--wbf-border: rgba(255, 255, 255, 0.08);
		--wbf-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: var(--wbf-bg-gradient);
	background-color: var(--wbf-bg);
	color: var(--wbf-text);
	transition: background-color var(--wbf-transition), color var(--wbf-transition);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wbf-wrap {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px 20px 12px;
	gap: 20px;
}

/* ---------- Theme toggle ---------- */

#wbf-theme-toggle {
	position: fixed;
	top: 18px;
	right: 18px;
	z-index: 20;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--wbf-border);
	background: var(--wbf-card-bg);
	color: var(--wbf-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transition: transform 0.25s ease, background-color var(--wbf-transition);
}

#wbf-theme-toggle:hover {
	transform: scale(1.08) rotate(-8deg);
}

#wbf-theme-toggle:active {
	transform: scale(0.94);
}

.wbf-icon-moon {
	display: none;
}

:root[data-theme="dark"] .wbf-icon-sun {
	display: none;
}

:root[data-theme="dark"] .wbf-icon-moon {
	display: inline;
}

/* ---------- Quote card ---------- */

.wbf-card {
	width: 100%;
	max-width: 640px;
	background: var(--wbf-card-bg);
	border: 1px solid var(--wbf-border);
	border-radius: var(--wbf-radius);
	box-shadow: var(--wbf-shadow);
	padding: 48px 40px 40px;
	text-align: center;
	opacity: 1;
	transform: translateY(0);
	animation: wbf-rise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
	transition: background-color var(--wbf-transition), border-color var(--wbf-transition), transform 0.25s ease;
}

.wbf-card:hover {
	transform: translateY(-2px);
}

@keyframes wbf-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wbf-card.wbf-swap {
	animation: wbf-swap 0.45s ease both;
}

@keyframes wbf-swap {
	0% {
		opacity: 1;
	}
	45% {
		opacity: 0;
		transform: translateY(6px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

.wbf-eyebrow {
	margin: 0 0 6px;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wbf-accent);
	font-weight: 600;
}

.wbf-date {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: var(--wbf-text-soft);
	margin-bottom: 28px;
}

.wbf-quote {
	margin: 0 0 20px;
}

.wbf-quote p {
	margin: 0;
	font-size: clamp(22px, 4vw, 30px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.wbf-ref {
	margin: 0 0 32px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--wbf-accent-strong);
}

.wbf-ref-version {
	font-weight: 500;
	opacity: 0.6;
	font-size: 12px;
	letter-spacing: 0.02em;
}

.wbf-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.wbf-btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 22px;
	border-radius: 999px;
	border: 1px solid var(--wbf-border);
	background: transparent;
	color: var(--wbf-text);
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.wbf-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.wbf-btn:active {
	transform: translateY(0);
}

.wbf-btn-primary {
	background: var(--wbf-text);
	color: var(--wbf-card-bg);
	border-color: var(--wbf-text);
}

:root[data-theme="dark"] .wbf-btn-primary {
	background: var(--wbf-accent);
	border-color: var(--wbf-accent);
	color: #1a1a20;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .wbf-btn-primary {
		background: var(--wbf-accent);
		border-color: var(--wbf-accent);
		color: #1a1a20;
	}
}

.wbf-copied {
	min-height: 20px;
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--wbf-accent-strong);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.wbf-copied.wbf-visible {
	opacity: 1;
}

/* ---------- Source note + footer ---------- */

.wbf-source {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--wbf-text-soft);
}

.wbf-source a {
	color: var(--wbf-accent-strong);
}

.wbf-footer {
	text-align: center;
	padding: 28px 20px 32px;
	font-size: 12px;
	color: var(--wbf-text-soft);
}

.wbf-footer a {
	color: var(--wbf-accent-strong);
	text-decoration: none;
}

.wbf-footer a:hover {
	text-decoration: underline;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
	.wbf-card {
		padding: 36px 24px 30px;
		border-radius: 18px;
	}

	.wbf-actions {
		flex-direction: column;
	}

	.wbf-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wbf-card,
	.wbf-card.wbf-swap,
	#wbf-theme-toggle {
		animation: none !important;
		transition: none !important;
	}
}