/* CandleBrain Design Polish -- homepage redesign (v2).
 *
 * Token system:
 *   Ink   #241a12  Paper #fff8ee  Ember #e8622c  Wax #f6c453  Char #2b2118
 * Fraunces for display headlines (warm, handmade character), Manrope
 * (already the theme's body font) for everything else -- two clearly
 * distinct families, one job each. Layout is deliberately asymmetric and
 * left-aligned (not the centered-stack-then-uniform-grid default): a
 * split hero on a bold Ember panel, a bento-style feature grid with
 * varied tile sizes/tones, and exactly one dark (Char) full-bleed
 * section before the footer -- the one place this page spends boldness.
 */

:root {
	--cb-ink: #241a12;
	--cb-paper: #fff8ee;
	--cb-ember: #e8622c;
	--cb-wax: #f6c453;
	--cb-char: #2b2118;
}

body.home {
	background: var(--cb-paper);
}

/* The theme's automatic page-title ("Welcome to CandleBrain") is
   replaced by the hero's own <h1> below, so the two don't compete. */
body.home .wp-block-post-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.cb-fraunces {
	font-family: 'Fraunces', Georgia, serif;
}

/* ---------- Hero: asymmetric split, bold Ember panel ---------- */

.cb-hero-v2 {
	background: var(--cb-ember);
	color: var(--cb-paper);
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 40px;
	padding: 72px 48px;
	overflow: hidden;
	position: relative;
}

.cb-hero-v2-text {
	position: relative;
	z-index: 1;
}

.cb-hero-v2-text h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(2.6rem, 4.6vw, 4rem);
	line-height: 1.04;
	font-weight: 600;
	color: var(--cb-paper);
	margin: 0 0 20px;
	max-width: 14ch;
}

.cb-hero-v2-text p {
	font-size: 1.2rem;
	line-height: 1.6;
	max-width: 46ch;
	color: var(--cb-paper);
	opacity: 0.92;
	margin: 0 0 28px;
}

.cb-hero-v2-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.cb-hero-v2-actions .wp-block-button__link {
	border-radius: 999px;
	font-weight: 600;
	padding: 0.9rem 1.8rem;
}

.cb-hero-v2-badge {
	font-size: 0.85rem;
	color: var(--cb-paper);
	opacity: 0.85;
}

.cb-hero-v2-media {
	position: relative;
	z-index: 1;
	text-align: right;
}

.cb-hero-v2-media img {
	width: 100%;
	max-width: 340px;
	height: auto;
	filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.25));
}

@media (max-width: 820px) {
	.cb-hero-v2 {
		grid-template-columns: 1fr;
		padding: 56px 24px;
		text-align: left;
	}
	.cb-hero-v2-media {
		text-align: center;
		order: -1;
	}
	.cb-hero-v2-media img {
		max-width: 220px;
	}
}

/* ---------- Section headings: left-aligned, no eyebrow labels ---------- */

.cb-section-heading {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	color: var(--cb-ink);
	font-weight: 600;
	margin: 0 0 12px;
	max-width: 20ch;
}

.cb-section-sub {
	color: #6b5d4d;
	font-size: 1.05rem;
	max-width: 60ch;
	margin: 0 0 36px;
}

/* ---------- Bento feature grid: varied tile sizes and tones ---------- */

.cb-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(150px, auto);
	gap: 18px;
}

.cb-bento-tile {
	border-radius: 20px;
	padding: 28px 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cb-bento-tile:hover {
	transform: translateY(-4px);
}

.cb-bento-tile--large {
	grid-column: span 2;
	grid-row: span 2;
	background: var(--cb-ink);
	color: var(--cb-paper);
	justify-content: flex-end;
}

.cb-bento-tile--large .cb-bento-title {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 1.7rem;
	color: var(--cb-paper);
}

.cb-bento-tile--large .cb-bento-desc {
	color: var(--cb-paper);
	opacity: 0.85;
}

.cb-bento-tile--cream {
	background: var(--cb-paper);
	border: 1.5px solid rgba(36, 26, 18, 0.08);
	grid-column: span 2;
}

.cb-bento-tile--white {
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(36, 26, 18, 0.08);
	grid-column: span 2;
}

.cb-bento-icon {
	font-size: 1.8rem;
}

.cb-bento-title {
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--cb-ink);
}

.cb-bento-desc {
	font-size: 0.92rem;
	color: #6b5d4d;
	line-height: 1.5;
}

@media (max-width: 820px) {
	.cb-bento {
		grid-template-columns: repeat(2, 1fr);
	}
	.cb-bento-tile--large {
		grid-column: span 2;
		grid-row: span 1;
	}
	.cb-bento-tile--cream,
	.cb-bento-tile--white {
		grid-column: span 2;
	}
}

@media (max-width: 480px) {
	.cb-bento {
		grid-template-columns: 1fr;
	}
	.cb-bento-tile--large,
	.cb-bento-tile--cream,
	.cb-bento-tile--white {
		grid-column: span 1;
	}
}

/* ---------- Closing CTA band: the one dark, centered moment ---------- */

.cb-cta-band {
	background: var(--cb-char);
	color: var(--cb-paper);
	text-align: center;
	padding: 80px 24px;
}

.cb-cta-band h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	color: var(--cb-paper);
	margin: 0 0 14px;
}

.cb-cta-band p {
	color: var(--cb-paper);
	opacity: 0.8;
	max-width: 50ch;
	margin: 0 auto 28px;
	font-size: 1.05rem;
}

.cb-cta-band .wp-block-button__link {
	border-radius: 999px;
	background: var(--cb-ember);
	color: var(--cb-paper);
	font-weight: 600;
	padding: 0.9rem 2rem;
}

/* ---------- Sitewide base ---------- */

html {
	scroll-behavior: smooth;
}

a.wp-block-navigation-item__content,
.wp-block-navigation-item__label {
	position: relative;
}

.wp-block-navigation-item__label::after {
	content: '';
	position: absolute;
	left: 0;
	right: 100%;
	bottom: -4px;
	height: 2px;
	background: currentColor;
	opacity: 0.6;
	transition: right 0.2s ease;
}

.wp-block-navigation-item:hover .wp-block-navigation-item__label::after {
	right: 0;
}

/* ---------- Sticky header with scroll shadow ---------- */

header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--accent-5, #fbfaf3);
	transition: box-shadow 0.2s ease;
}

header.wp-block-template-part.cbdesign-is-stuck {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ---------- Footer ---------- */

footer.wp-block-template-part {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	padding-top: 8px;
}

/* ---------- Buttons (sitewide hover motion) ---------- */

.wp-block-button__link.wp-element-button {
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-button__link.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

/* ---------- Hero entrance: one deliberate page-load moment ---------- */

@media (prefers-reduced-motion: no-preference) {
	.cb-hero-v2-text > *,
	.cb-hero-v2-media {
		animation: cbdesign-fade-up 0.7s ease both;
	}
	.cb-hero-v2-text > *:nth-child(2) { animation-delay: 0.1s; }
	.cb-hero-v2-text > *:nth-child(3) { animation-delay: 0.2s; }
	.cb-hero-v2-media { animation-delay: 0.15s; }

	@keyframes cbdesign-fade-up {
		from { opacity: 0; transform: translateY(18px); }
		to { opacity: 1; transform: translateY(0); }
	}
}