/*
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.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.1.1
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
*/

/* --------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------
   These custom properties are the reusable colors, borders, shadows, and
   corner radius used throughout the theme. Change a value here only when a
   code-level global change is desired; editors can use Global Styles instead.
*/
: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;
}

/* --------------------------------------------------------------------------
   2. Small, safe browser defaults
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; } /* Include padding and borders inside width. */
html { scroll-behavior: smooth; } /* Animate same-page anchor navigation. */
body { overflow-x: hidden; } /* Prevent decorative content causing side scroll. */
img, video { max-width: 100%; } /* Never let media exceed its parent. */

/* --------------------------------------------------------------------------
   3. Header, brand, navigation, and mobile menu
   -------------------------------------------------------------------------- */
.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; } /* Space between logo and wordmark. */
.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); }

/* Make every header link a comfortable target and animate editable hover rules. */
.bmh-site-header .wp-block-navigation-item__content {
	padding: 0.45rem 0.65rem;
	border-radius: 0.6rem;
	transition: color .18s ease, background-color .18s ease;
}

/* Style the hamburger button shown by the Navigation block on small screens. */
.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;
}

/*
 * Filters may turn a fixed descendant's containing block into the short header
 * box in Safari and some Chromium versions. Disable only the blur below the
 * desktop-navigation range so the open overlay remains viewport-sized.
 */
@media (max-width: 781px) {
	.bmh-site-header {
		background: rgba(255, 253, 249, 0.97);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/*
 * Mobile navigation repair.
 *
 * WordPress supplies the open/close behavior. These rules make the open menu
 * cover the viewport and put scrolling on the complete overlay, not on a short
 * inner window. !important is intentional here because core Navigation styles
 * are loaded after theme CSS in some WordPress/Gutenberg combinations.
 */
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open {
	position: fixed !important;
	inset: 0 !important;
	z-index: 100000 !important;
	display: flex !important;
	width: 100vw !important;
	max-width: none !important;
	height: 100vh !important; /* Fallback for older mobile browsers. */
	min-height: 100vh !important;
	padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
	overflow-x: hidden !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	background: var(--bmh-cream);
	-webkit-overflow-scrolling: touch;
}

/* Dynamic viewport units stay correct when a mobile browser bar expands. */
@supports (height: 100dvh) {
	.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open {
		height: 100dvh !important;
		min-height: 100dvh !important;
	}
}

/* Let the dialog and content use the full width/height of the overlay. */
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100% !important;
	max-width: none !important;
	min-height: calc(100vh - 2.5rem);
	overflow: visible !important;
}

@supports (height: 100dvh) {
	.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
	.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		min-height: calc(100dvh - 2.5rem);
	}
}

/* Keep the close button visible while a long menu is scrolled. */
.bmh-site-header .wp-block-navigation__responsive-container-close {
	position: sticky !important;
	top: 0;
	z-index: 2;
	margin-left: auto;
	padding: 0.65rem;
	background: var(--bmh-paper);
	border: 1px solid var(--bmh-border);
	border-radius: 999px;
}

/* Stack menu items vertically and remove short nested scroll containers. */
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100% !important;
	max-height: none !important;
	gap: 0.35rem;
	overflow: visible !important;
	font-size: 1.2rem;
}

/* Give each mobile item a full-width, finger-friendly row. */
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	width: 100%;
}
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	min-height: 3rem;
	padding: 0.75rem 0.9rem;
	align-items: center;
}

/* Nested submenus flow in the document instead of opening off-screen. */
.bmh-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	width: 100% !important;
	min-width: 0 !important;
	max-height: none !important;
	padding: 0.25rem 0 0.25rem 1rem !important;
	overflow: visible !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* The desktop call-to-action is hidden until the tablet breakpoint below. */
.bmh-header-cta { display: none !important; }

/* --------------------------------------------------------------------------
   4. Homepage frame, reusable section widths, and hero layout
   -------------------------------------------------------------------------- */
.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; }

/* Small pill label displayed above a major heading. */
.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;
}

/* Large hero heading with a readable maximum line length. */
.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;
}
/* Phone layout stacks actions; the 480px query changes this row to horizontal. */
.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; }
/* Button hover remains separate from editable text-link hover settings. */
.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); }

/* Hero artwork frame. object-position keeps the mascot visible while cropping. */
.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;
}

/* Reusable translucent card treatment. */
.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);
}

/* --------------------------------------------------------------------------
   5. Demonstration lesson card
   -------------------------------------------------------------------------- */
.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;
}

/* --------------------------------------------------------------------------
   6. Benefits section
   -------------------------------------------------------------------------- */
.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; }

/* --------------------------------------------------------------------------
   7. Final call-to-action card
   -------------------------------------------------------------------------- */
.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%; }

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.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; }

/* --------------------------------------------------------------------------
   9. Standard pages, posts, archives, and the 404 page
   -------------------------------------------------------------------------- */
.bmh-content-shell {
	width: min(100% - 2rem, 48rem);
	margin-inline: auto;
	padding-block: clamp(3rem, 8vw, 6rem);
}

/* --------------------------------------------------------------------------
   10. Responsive enhancements
   --------------------------------------------------------------------------
   Base rules above are mobile-first. Each query adds space/layout only when the
   viewport can support it, so phones never need to undo desktop assumptions.
*/
@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; }
}

/* Small tablets: taller hero art and a two-column benefits grid. */
@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; }
}

/* WordPress' common tablet breakpoint: reveal the desktop header CTA. */
@media (min-width: 782px) {
	.bmh-header-cta { display: block !important; }
	.bmh-footer-grid { grid-template-columns: 1fr auto; align-items: end; }
}

/* Desktop: sticky header and multi-column content sections. */
@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; }
}

/* Wide desktop: subtly recenter the cropped mascot image. */
@media (min-width: 1200px) { .bmh-mascot-crop img { object-position: 70% center; } }

/* Respect visitors who request less animation in their device settings. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wp-block-button__link,
	.bmh-site-header .wp-block-navigation-item__content { transition: none; }
}