/*
Theme Name: BombonHub Clean
Theme URI: https://bombonhub.com/
Author: BombonHub
Description: A clean, mobile-first WordPress block theme for a video-based language-learning landing page. Every text, menu, button, logo, image, video, color, font, and font size is editable in the Site Editor.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bombonhub
Tags: block-patterns, block-styles, custom-colors, custom-logo, editor-style, education, full-site-editing, one-column, responsive-layout, translation-ready, wide-blocks
*/

:root {
	--bmh-cream: #fffdf9;
	--bmh-paper: #ffffff;
	--bmh-ink: #28122e;
	--bmh-cocoa: #3a211b;
	--bmh-violet: #7452df;
	--bmh-aqua: #42c8c6;
	--bmh-coral: #ff665c;
	--bmh-lilac: #c9b5f4;
	--bmh-muted: #6f636f;
	--bmh-border: rgba(74, 49, 91, 0.12);
	--bmh-glass: rgba(255, 255, 255, 0.78);
	--bmh-shadow: 0 18px 55px rgba(64, 36, 76, 0.09);
	--bmh-radius: 1.5rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
img, video { max-width: 100%; }

.bmh-site-header {
	position: relative;
	z-index: 30;
	padding: 0.75rem 1rem;
	background: rgba(255, 253, 249, 0.88);
	border-bottom: 1px solid var(--bmh-border);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.bmh-header-inner,
.bmh-section,
.bmh-footer-inner {
	width: min(100% - 2rem, 76rem);
	margin-inline: auto;
}

.bmh-brand-row { gap: 0.55rem; }
.bmh-brand-name {
	margin: 0;
	color: var(--bmh-violet);
	font-weight: 800;
	letter-spacing: -0.045em;
}

.bmh-site-header .wp-block-site-logo img { border-radius: 13px; }
.bmh-site-header .wp-block-navigation { color: var(--bmh-ink); }
.bmh-site-header .wp-block-navigation__responsive-container-open {
	padding: 0.55rem;
	background: rgba(255,255,255,.82);
	border: 1px solid var(--bmh-border);
	border-radius: 999px;
}
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem;
	background: var(--bmh-cream);
}
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: 1.15rem;
	font-size: 1.2rem;
}
.bmh-header-cta { display: none !important; }

.bmh-home { position: relative; overflow: hidden; }
.bmh-section { padding-block: clamp(3rem, 7vw, 6rem); }
.bmh-hero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.bmh-hero-grid { display: grid; gap: 2.25rem; align-items: center; }

.bmh-eyebrow {
	display: inline-flex;
	width: fit-content;
	margin: 0 0 1rem;
	padding: .45rem .8rem;
	color: #117d7b;
	font-size: .82rem;
	font-weight: 700;
	background: rgba(66,200,198,.10);
	border: 1px solid rgba(66,200,198,.2);
	border-radius: 999px;
}

.bmh-display {
	max-width: 10ch;
	margin: 0;
	color: var(--bmh-ink);
	font-size: clamp(2.75rem, 12vw, 5.5rem);
	line-height: .98;
	letter-spacing: -.065em;
}
.bmh-display-accent { color: var(--bmh-aqua); }
.bmh-lede {
	max-width: 35rem;
	margin-top: 1.15rem;
	color: var(--bmh-muted);
	font-size: clamp(1.02rem, 2vw, 1.18rem);
	line-height: 1.6;
}
.bmh-button-row { display: grid !important; gap: .8rem 1.2rem; margin-top: 1.5rem; }
.bmh-button-row .wp-block-buttons { width: 100%; }
.bmh-button-row .wp-block-button,
.bmh-button-row .wp-block-button__link { width: 100%; }
.bmh-text-link { margin: .25rem 0 0; text-align: center; font-weight: 700; }
.wp-block-button__link { transition: transform .18s ease, box-shadow .18s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,102,92,.23); }

.bmh-mascot-crop {
	position: relative;
	height: 19rem;
	margin: 0;
	overflow: hidden;
	background:
		radial-gradient(circle at 75% 40%, rgba(66,200,198,.18), transparent 37%),
		radial-gradient(circle at 42% 50%, rgba(201,181,244,.28), transparent 46%);
	border-radius: clamp(1.5rem, 5vw, 3rem);
}
.bmh-mascot-crop img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 76% center;
}

.bmh-glass {
	background: var(--bmh-glass);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: var(--bmh-radius);
	box-shadow: var(--bmh-shadow);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.bmh-demo-section { padding-top: 1rem; }
.bmh-demo-heading { margin: 0 0 1.1rem; font-size: clamp(1.6rem, 4vw, 2.4rem); }
.bmh-demo {
	display: grid;
	gap: 1rem;
	padding: clamp(.8rem, 2vw, 1.35rem);
}
.bmh-video { margin: 0 !important; overflow: hidden; background: #ece5f8; border-radius: 1.15rem; }
.bmh-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.bmh-demo-content { display: grid; gap: .75rem; }
.bmh-line,
.bmh-vocab,
.bmh-exercise {
	padding: 1rem;
	background: rgba(255,255,255,.72);
	border: 1px solid var(--bmh-border);
	border-radius: 1rem;
}
.bmh-line > *, .bmh-vocab > *, .bmh-exercise > * { margin-block: .2rem; }
.bmh-hanzi { font-size: clamp(1.25rem, 4vw, 1.85rem); font-weight: 650; }
.bmh-vocab { width: fit-content; color: var(--bmh-violet); font-weight: 700; }
.bmh-exercise-row { display: grid; gap: .75rem; align-items: center; }
.bmh-mic {
	display: grid;
	width: 3.25rem;
	height: 3.25rem;
	margin: 0;
	color: #fff;
	font-size: 1.4rem;
	background: linear-gradient(135deg, var(--bmh-violet), var(--bmh-aqua));
	border-radius: 50%;
	place-items: center;
}

.bmh-center-heading {
	max-width: 32rem;
	margin: 0 auto 2rem;
	text-align: center;
	font-size: clamp(2rem, 6vw, 3.5rem);
	letter-spacing: -.05em;
}
.bmh-benefit-grid { display: grid; gap: 1rem; }
.bmh-benefit {
	display: grid;
	grid-template-columns: 3.2rem 1fr;
	gap: 1rem;
	align-items: center;
	padding: 1.2rem;
	background: rgba(255,255,255,.75);
	border: 1px solid var(--bmh-border);
	border-radius: 1.25rem;
	box-shadow: 0 10px 28px rgba(64,36,76,.06);
}
.bmh-benefit .wp-block-image { width: 3.2rem; margin: 0; }
.bmh-benefit h3 { margin: 0 0 .25rem; font-size: 1.08rem; }
.bmh-benefit p { margin: 0; color: var(--bmh-muted); font-size: .94rem; line-height: 1.45; }

.bmh-cta {
	display: grid;
	gap: 1.25rem;
	align-items: center;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	background:
		radial-gradient(circle at 10% 100%, rgba(201,181,244,.38), transparent 32%),
		radial-gradient(circle at 95% 10%, rgba(66,200,198,.26), transparent 34%),
		rgba(255,255,255,.82);
	border: 1px solid rgba(255,255,255,.94);
	border-radius: 1.65rem;
	box-shadow: var(--bmh-shadow);
}
.bmh-cta h2 { margin: 0; font-size: clamp(2rem, 6vw, 3.5rem); letter-spacing: -.05em; }
.bmh-cta p { margin-bottom: 0; color: var(--bmh-muted); }
.bmh-cta .wp-block-button,
.bmh-cta .wp-block-button__link { width: 100%; }
.bmh-cta .wp-block-buttons { width: 100%; }

.bmh-footer { padding: 2.5rem 1rem; color: #fff; background: var(--bmh-ink); }
.bmh-footer-grid { display: grid; gap: 1.25rem; }
.bmh-footer a { color: inherit; }
.bmh-footer-nav { display: flex; flex-wrap: wrap; gap: .7rem 1.2rem; }
.bmh-footer p { margin-block: .2rem; }

.bmh-content-shell {
	width: min(100% - 2rem, 48rem);
	margin-inline: auto;
	padding-block: clamp(3rem, 8vw, 6rem);
}

@media (min-width: 480px) {
	.bmh-button-row { display: flex !important; }
	.bmh-button-row .wp-block-buttons { width: auto; }
	.bmh-button-row .wp-block-button,
	.bmh-button-row .wp-block-button__link { width: auto; }
	.bmh-text-link { text-align: left; }
	.bmh-exercise-row { grid-template-columns: 1fr auto; }
	.bmh-cta .wp-block-button,
	.bmh-cta .wp-block-button__link { width: auto; }
	.bmh-cta .wp-block-buttons { width: auto; }
}

@media (min-width: 600px) {
	.bmh-mascot-crop { height: 25rem; }
	.bmh-benefit-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.bmh-benefit-grid > :last-child { grid-column: 1 / -1; width: calc(50% - .5rem); justify-self: center; }
}

@media (min-width: 782px) {
	.bmh-header-cta { display: block !important; }
	.bmh-footer-grid { grid-template-columns: 1fr auto; align-items: end; }
}

@media (min-width: 900px) {
	.bmh-site-header { position: sticky; top: 0; }
	.bmh-hero-grid { grid-template-columns: minmax(0,.82fr) minmax(30rem,1.18fr); gap: 4rem; }
	.bmh-mascot-crop { height: 27rem; }
	.bmh-mascot-crop img { object-position: 72% center; }
	.bmh-demo { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: center; }
	.bmh-benefit-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
	.bmh-benefit-grid > :last-child { grid-column: auto; width: auto; justify-self: stretch; }
	.bmh-cta { grid-template-columns: minmax(0,1fr) auto; }
}

@media (min-width: 1200px) { .bmh-mascot-crop img { object-position: 70% center; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wp-block-button__link { transition: none; }
}