/*
Theme Name: Bounce Party
Theme URI: https://example.com/bounce-party
Author: Bounce Party
Description: A bright, bouncy and fully animated theme for bounce house, inflatable and party rental businesses. Poppable balloons, a living hero scene, scroll reveals, a filterable rental showcase and one-click demo content built around the Party Rental Simulator scroll-to-build booking planner.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bounce-party
Tags: one-column, custom-logo, custom-menu, custom-colors, editor-style, featured-images, block-patterns, block-styles, theme-options, translation-ready, e-commerce, entertainment
*/

/* =====================================================================
 * 1. Tokens
 * =================================================================== */
:root {
	--bp-primary: #ff5a4e;
	--bp-sun: #ffc93c;
	--bp-sky: #2bb3ff;
	--bp-grass: #3fbf6a;
	--bp-grape: #8b5cf6;
	--bp-pink: #ff8fc7;
	--bp-ink: #211f3d;
	--bp-ink-2: #5b5878;
	--bp-cream: #fff9f1;
	--bp-white: #ffffff;
	--bp-line: rgba(33, 31, 61, .12);

	--bp-primary-d: color-mix(in srgb, var(--bp-primary) 72%, #3a0d10);
	--bp-sky-l: color-mix(in srgb, var(--bp-sky) 16%, #fff);
	--bp-sun-l: color-mix(in srgb, var(--bp-sun) 24%, #fff);
	--bp-pink-l: color-mix(in srgb, var(--bp-pink) 20%, #fff);
	--bp-grape-l: color-mix(in srgb, var(--bp-grape) 14%, #fff);
	--bp-grass-l: color-mix(in srgb, var(--bp-grass) 16%, #fff);

	--bp-head: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
	--bp-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
	--bp-wide: 1240px;
	--bp-narrow: 760px;
	--bp-gutter: clamp(16px, 4vw, 40px);
	--bp-r: 28px;
	--bp-header-h: 78px;
	--bp-admin: var(--wp-admin--admin-bar--height, 0px);
	--bp-spring: cubic-bezier(.3, 1.6, .5, 1);
	--bp-ease: cubic-bezier(.2, .8, .2, 1);
}

/* =====================================================================
 * 2. Base
 * =================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bp-header-h) + var(--bp-admin) + 16px); }
body {
	margin: 0;
	background: var(--bp-cream);
	color: var(--bp-ink);
	font-family: var(--bp-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--bp-primary-d); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--bp-primary); }
:focus-visible { outline: 3px solid var(--bp-sky); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--bp-head); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--bp-ink); margin: 1.4em 0 .5em; }
h1 { font-size: clamp(40px, 6vw, 72px); }
h2 { font-size: clamp(32px, 4.4vw, 56px); }
h3 { font-size: clamp(22px, 2.2vw, 28px); }
p { margin: 0 0 1.1em; }
::selection { background: var(--bp-sun); color: var(--bp-ink); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
	clip: auto; clip-path: none; height: auto; width: auto; z-index: 100000;
	top: 8px; left: 8px; padding: 12px 18px; background: var(--bp-ink); color: #fff; border-radius: 12px; text-decoration: none;
}

.bp-site { overflow-x: clip; min-height: 100vh; display: flex; flex-direction: column; }
.bp-main { flex: 1; }
.bp-container { max-width: var(--bp-wide); margin: 0 auto; padding: 0 var(--bp-gutter); }
.bp-narrow { max-width: var(--bp-narrow); }

/* =====================================================================
 * 3. Buttons
 * =================================================================== */
.bp-btn,
.wp-block-button__link,
.wp-element-button,
input[type=submit],
.bp-search button,
.comment-form .submit {
	--btn: var(--bp-primary);
	--btn-d: var(--bp-primary-d);
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 26px;
	border: 0; border-radius: 999px;
	background: var(--btn); color: #fff;
	font: 800 16px/1.1 var(--bp-body);
	text-decoration: none; cursor: pointer;
	box-shadow: 0 5px 0 var(--btn-d), 0 14px 24px -12px var(--btn-d);
	transform: translateY(0);
	transition: transform .18s var(--bp-ease), box-shadow .18s var(--bp-ease), background .2s;
	-webkit-tap-highlight-color: transparent;
}
.bp-btn:hover, .wp-block-button__link:hover, .wp-element-button:hover, input[type=submit]:hover, .comment-form .submit:hover {
	color: #fff; transform: translateY(-2px); box-shadow: 0 7px 0 var(--btn-d), 0 18px 26px -12px var(--btn-d);
	animation: bp-jelly .55s;
}
.bp-btn:active, .wp-block-button__link:active, .wp-element-button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-d); animation: none; }
.bp-btn-sm { padding: 10px 18px; font-size: 14px; box-shadow: 0 4px 0 var(--btn-d); }
.bp-btn-lg { padding: 18px 32px; font-size: 18px; }
.bp-btn-ghost, .is-style-outline .wp-block-button__link {
	--btn-d: var(--bp-ink);
	background: #fff; color: var(--bp-ink);
	box-shadow: inset 0 0 0 2.5px var(--bp-ink), 0 5px 0 var(--bp-ink);
}
.bp-btn-ghost:hover, .is-style-outline .wp-block-button__link:hover { color: var(--bp-ink); box-shadow: inset 0 0 0 2.5px var(--bp-ink), 0 7px 0 var(--bp-ink); }
.is-style-bp-candy .wp-block-button__link {
	background: repeating-linear-gradient(-45deg, var(--bp-primary) 0 14px, color-mix(in srgb, var(--bp-primary) 82%, #fff) 14px 28px);
	background-size: 200% 100%;
	animation: bp-stripes 3s linear infinite;
}
.bp-btn-ico { width: 20px; height: 20px; animation: bp-nudge 1.6s ease-in-out infinite; }

@keyframes bp-jelly {
	0% { scale: 1 1; } 30% { scale: 1.08 .92; } 50% { scale: .95 1.05; } 70% { scale: 1.03 .97; } 100% { scale: 1 1; }
}
@keyframes bp-stripes { to { background-position: -56px 0; } }
@keyframes bp-nudge { 50% { transform: translateY(4px); } }

/* =====================================================================
 * 4. Header + drawer
 * =================================================================== */
.bp-header {
	position: sticky; top: var(--bp-admin); z-index: 50;
	height: var(--bp-header-h);
	background: color-mix(in srgb, var(--bp-cream) 86%, transparent);
	-webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
	transition: transform .45s var(--bp-ease), box-shadow .3s, background .3s;
}
.bp-front .bp-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; position: fixed; left: 0; right: 0; }
.bp-front .bp-header.is-scrolled, .bp-header.is-scrolled {
	background: color-mix(in srgb, var(--bp-cream) 88%, transparent);
	-webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
	box-shadow: 0 1px 0 var(--bp-line), 0 12px 30px -24px rgba(33,31,61,.5);
}
.bp-header.is-hidden { transform: translateY(calc(-100% - var(--bp-admin) - 4px)); }
.bp-header-inner {
	height: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--bp-gutter);
	display: flex; align-items: center; gap: 24px;
}
.bp-brand { flex: none; display: flex; align-items: center; }
.bp-brand .custom-logo { max-height: 56px; width: auto; display: block; }
.bp-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--bp-ink); }
.bp-logo-mark { display: inline-flex; transition: transform .5s var(--bp-spring); }
.bp-logo:hover .bp-logo-mark { transform: rotate(-12deg) scale(1.12); }
.bp-logo-text { font: 700 24px/1 var(--bp-head); letter-spacing: -.01em; white-space: nowrap; }
.bp-logo-text span { display: inline-block; }
.bp-logo:hover .bp-logo-text span { animation: bp-hop .5s var(--bp-ease) calc(var(--i) * 35ms); }
.bp-logo-text span:nth-child(4n+1) { color: var(--bp-primary); }
@keyframes bp-hop { 40% { transform: translateY(-7px); } }

.bp-nav { flex: 1; display: flex; justify-content: center; }
.bp-menu, .bp-menu ul { list-style: none; margin: 0; padding: 0; }
.bp-menu { display: flex; gap: 2px; align-items: center; }
.bp-menu > li { position: relative; }
.bp-menu a {
	display: block; padding: 9px 14px; border-radius: 999px;
	color: var(--bp-ink); text-decoration: none; font-weight: 800; font-size: 15px; white-space: nowrap;
	transition: background .2s, color .2s, transform .3s var(--bp-spring);
}
.bp-menu a:hover { background: #fff; color: var(--bp-ink); transform: translateY(-2px) rotate(-2deg); }
.bp-menu .current-menu-item > a, .bp-menu .current_page_item > a { background: var(--bp-ink); color: #fff; }
.bp-menu .sub-menu {
	position: absolute; left: 0; top: 100%; min-width: 220px; padding: 8px; background: #fff; border-radius: 18px;
	box-shadow: 0 20px 40px -18px rgba(33,31,61,.4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .25s var(--bp-ease);
}
.bp-menu li:hover > .sub-menu, .bp-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.bp-header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.bp-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--bp-ink); text-decoration: none; font-size: 15px; }
.bp-phone .bp-i { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--bp-sun); color: var(--bp-ink); animation: bp-ring 4s ease-in-out infinite; }
@keyframes bp-ring { 0%, 86%, 100% { transform: rotate(0); } 88% { transform: rotate(-16deg); } 90% { transform: rotate(14deg); } 92% { transform: rotate(-10deg); } 94% { transform: rotate(6deg); } }

.bp-burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--bp-ink); color: #fff; cursor: pointer; padding: 0; position: relative; z-index: 70; }
.bp-burger-lines { display: grid; gap: 5px; width: 20px; margin: auto; }
.bp-burger-lines i { display: block; height: 2.5px; border-radius: 3px; background: currentColor; transition: transform .35s var(--bp-spring), opacity .2s; }
.bp-burger-lines i:nth-child(3) { width: 70%; }
.bp-burger[aria-expanded="true"] { background: #fff; color: var(--bp-ink); }
.bp-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.bp-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.bp-burger[aria-expanded="true"] i:nth-child(3) { width: 100%; transform: translateY(-7.5px) rotate(-45deg); }

.bp-drawer {
	position: fixed; inset: 0; z-index: 45; overflow-y: auto;
	padding: calc(var(--bp-header-h) + var(--bp-admin) + 20px) var(--bp-gutter) 40px;
	background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--bp-sky) 60%, #fff), transparent 50%), linear-gradient(160deg, var(--bp-sky), var(--bp-grape));
	color: #fff; display: flex; flex-direction: column; gap: 28px;
	clip-path: circle(0 at calc(100% - 44px) 40px);
	transition: clip-path .6s var(--bp-ease);
}
.bp-drawer[hidden] { display: none; }
.bp-drawer.is-open { clip-path: circle(150% at calc(100% - 44px) 40px); }
.bp-drawer-menu { list-style: none; margin: 0; padding: 0; }
.bp-drawer-menu li { opacity: 0; transform: translateY(24px); transition: all .5s var(--bp-spring); }
.bp-drawer.is-open .bp-drawer-menu li { opacity: 1; transform: none; }
.bp-drawer.is-open .bp-drawer-menu li:nth-child(1) { transition-delay: .12s; }
.bp-drawer.is-open .bp-drawer-menu li:nth-child(2) { transition-delay: .16s; }
.bp-drawer.is-open .bp-drawer-menu li:nth-child(3) { transition-delay: .2s; }
.bp-drawer.is-open .bp-drawer-menu li:nth-child(4) { transition-delay: .24s; }
.bp-drawer.is-open .bp-drawer-menu li:nth-child(5) { transition-delay: .28s; }
.bp-drawer.is-open .bp-drawer-menu li:nth-child(6) { transition-delay: .32s; }
.bp-drawer.is-open .bp-drawer-menu li:nth-child(n+7) { transition-delay: .36s; }
.bp-drawer-menu a { display: block; padding: 6px 0; color: #fff; text-decoration: none; font: 600 clamp(30px, 8vw, 44px)/1.15 var(--bp-head); }
.bp-drawer-menu a:hover { color: var(--bp-sun); }
.bp-drawer-menu .sub-menu { list-style: none; padding-left: 16px; }
.bp-drawer-menu .sub-menu a { font-size: 22px; }
.bp-drawer-foot { display: grid; gap: 16px; justify-items: start; }
.bp-drawer-phone { color: #fff; font-weight: 800; font-size: 18px; display: inline-flex; gap: 8px; align-items: center; text-decoration: none; }
.bp-drawer-balloons { position: absolute; right: 8%; bottom: 6%; display: flex; gap: 10px; pointer-events: none; }
.bp-drawer-balloons i { width: 46px; height: 56px; border-radius: 50% 50% 46% 54% / 58% 58% 42% 42%; background: var(--bp-sun); animation: bp-bob 3s ease-in-out infinite; }
.bp-drawer-balloons i:nth-child(2) { background: var(--bp-primary); animation-delay: -1s; margin-top: -30px; }
.bp-drawer-balloons i:nth-child(3) { background: var(--bp-pink); animation-delay: -2s; }
@keyframes bp-bob { 50% { transform: translateY(-14px) rotate(4deg); } }
body.bp-drawer-open { overflow: hidden; }
body.bp-drawer-open .bp-header { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.bp-drawer-open .bp-header .bp-logo, body.bp-drawer-open .bp-phone { color: #fff; position: relative; z-index: 70; }

/* Planner on screen: the header steps aside so the scene can pin to the top. */
body.bp-planner-active .bp-header { transform: translateY(calc(-100% - var(--bp-admin) - 4px)); }

@media (max-width: 1280px) {
	.bp-phone span { display: none; }
	.bp-menu a { padding: 9px 10px; font-size: 14.5px; }
	.bp-header-inner { gap: 14px; }
}
@media (max-width: 1100px) {
	.bp-nav { display: none; }
	.bp-burger { display: block; }
}
@media (max-width: 560px) {
	:root { --bp-header-h: 66px; }
	.bp-header-cta { display: none; }
	.bp-logo-text { font-size: 20px; }
	.bp-logo-mark svg { width: 34px; height: 34px; }
}

/* =====================================================================
 * 5. Hero
 * =================================================================== */
.bp-hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: min(920px, max(640px, 100svh));
	padding: calc(var(--bp-header-h) + var(--bp-admin) + 32px) var(--bp-gutter) 150px;
	background: linear-gradient(180deg, color-mix(in srgb, var(--bp-sky) 55%, #bfe8ff) 0%, #d8f1ff 52%, #fff3da 100%);
	display: flex; align-items: center;
}
.bp-hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bp-sun {
	position: absolute; top: calc(var(--bp-header-h) + 10px); right: 7%;
	width: 140px; height: 140px; border-radius: 50%;
	background: radial-gradient(circle, #ffe27a 0 36%, transparent 37%);
}
.bp-sun i {
	position: absolute; inset: -40px; border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(255, 214, 103, .45) 0 9deg, transparent 9deg 22.5deg);
	mask: radial-gradient(circle, transparent 0 34%, #000 35% 70%, transparent 71%);
	-webkit-mask: radial-gradient(circle, transparent 0 34%, #000 35% 70%, transparent 71%);
	animation: bp-spin 40s linear infinite;
}
@keyframes bp-spin { to { transform: rotate(1turn); } }

.bp-cloud {
	position: absolute; width: 160px; height: 52px; border-radius: 60px; background: #fff;
	box-shadow: 0 10px 30px -18px rgba(33,31,61,.3);
	animation: bp-drift 40s linear infinite;
}
.bp-cloud::before, .bp-cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.bp-cloud::before { width: 72px; height: 72px; left: 24px; top: -36px; }
.bp-cloud::after { width: 54px; height: 54px; left: 84px; top: -24px; }
.bp-cloud-1 { top: 20%; left: -10%; }
.bp-cloud-2 { top: 9%; left: 30%; scale: .7; animation-duration: 55s; animation-delay: -20s; opacity: .9; }
.bp-cloud-3 { top: 36%; left: 60%; scale: .55; animation-duration: 48s; animation-delay: -32s; opacity: .8; }
@keyframes bp-drift { from { translate: -20vw 0; } to { translate: 120vw 0; } }

.bp-sprinkles i {
	position: absolute; width: 10px; height: 22px; border-radius: 6px; opacity: .55;
	left: calc(var(--i) * 5.6% + 1%);
	background: var(--bp-primary);
	rotate: calc(var(--i) * 47deg);
	animation: bp-sprinkle 7s ease-in-out infinite;
	animation-delay: calc(var(--i) * -.6s);
}
.bp-sprinkles i:nth-child(5n+2) { background: var(--bp-sun); }
.bp-sprinkles i:nth-child(5n+3) { background: var(--bp-grape); width: 12px; height: 12px; border-radius: 50%; }
.bp-sprinkles i:nth-child(5n+4) { background: var(--bp-grass); }
.bp-sprinkles i:nth-child(5n) { background: var(--bp-pink); }
@keyframes bp-sprinkle { 50% { transform: translateY(-18px) rotate(90deg); } }

.bp-hero-inner {
	position: relative; z-index: 2; width: 100%; max-width: var(--bp-wide); margin: 0 auto;
	display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: center;
}
.bp-hero-kicker { margin: 0 0 18px; }
.bp-hero-kicker span {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 8px 16px 8px 12px; border-radius: 999px; background: #fff;
	font-weight: 800; font-size: 14px; box-shadow: 0 8px 20px -12px rgba(33,31,61,.4);
	animation: bp-pop-in .7s var(--bp-spring) both;
}
.bp-hero-kicker span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bp-grass); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bp-grass) 25%, transparent); animation: bp-pulse 2s infinite; }
@keyframes bp-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--bp-grass) 0%, transparent); } }
@keyframes bp-pop-in { from { opacity: 0; transform: scale(.6) translateY(20px); } }

.bp-hero-title { margin: 0 0 20px; font-size: clamp(52px, 7.8vw, 112px); font-weight: 700; line-height: .92; letter-spacing: -.02em; }
.bp-word {
	display: inline-block; color: var(--bp-primary);
	text-shadow: 0 .06em 0 color-mix(in srgb, currentColor 60%, #211f3d);
	animation: bp-word-in .9s var(--bp-spring) both;
	animation-delay: calc(.15s + var(--i) * .14s);
	transition: transform .3s var(--bp-spring);
}
.bp-word:nth-child(3n+2) { color: color-mix(in srgb, var(--bp-sky) 88%, #0b4f7a); }
.bp-word:nth-child(3n) { color: var(--bp-grape); }
.bp-word:hover { animation: bp-jelly .6s; }
@keyframes bp-word-in { from { opacity: 0; transform: translateY(80px) scale(.5) rotate(-8deg); } }

.bp-hero-text { font-size: clamp(18px, 1.6vw, 21px); color: var(--bp-ink-2); max-width: 520px; margin: 0 0 30px; font-weight: 600; animation: bp-fade-up .8s var(--bp-ease) .55s both; }
@keyframes bp-fade-up { from { opacity: 0; transform: translateY(24px); } }
.bp-hero-ctas { display: flex; flex-wrap: wrap; gap: 16px 14px; animation: bp-fade-up .8s var(--bp-ease) .7s both; }
.bp-badges { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bp-badges li {
	display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 999px;
	background: rgba(255,255,255,.75); font-weight: 700; font-size: 14px;
	animation: bp-pop-in .6s var(--bp-spring) both; animation-delay: calc(.9s + var(--i) * .12s);
}
.bp-check { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bp-grass); color: #fff; font-size: 12px; font-weight: 900; }

.bp-hero-art { position: relative; perspective: 900px; animation: bp-pop-in 1s var(--bp-spring) .3s both; }
.bp-hero-scene { width: 100%; max-width: 640px; display: block; margin: 0 auto; overflow: visible; transition: transform .4s var(--bp-ease); transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.bp-mound { fill: color-mix(in srgb, var(--bp-grass) 80%, #fff); }
.bp-hero-castle-wrap { transform-box: fill-box; transform-origin: 50% 100%; animation: bp-castle-in 1.4s cubic-bezier(.2,1.7,.4,1) .4s both; }
@keyframes bp-castle-in { from { transform: scale(1.2, .02); opacity: 0; } 10% { opacity: 1; } }
.bp-kid-bounce { animation: bp-jump 1.1s cubic-bezier(.4, 0, .6, 1) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.bp-kid-2 .bp-kid-bounce { animation-delay: -.55s; }
@keyframes bp-jump { 0%, 100% { transform: translateY(0) scale(1.08, .9); } 15% { transform: translateY(-6px) scale(.95, 1.06); } 50% { transform: translateY(-46px) scale(1); } 85% { transform: translateY(-4px) scale(.96, 1.04); } }
.bp-kid-arm { stroke: #6b4b3a; stroke-width: 4; stroke-linecap: round; fill: none; }
.bp-kid-shirt-1 { fill: var(--bp-sun); }
.bp-kid-shirt-2 { fill: var(--bp-sky); }
.bp-kid-skin-1 { fill: #f2c39b; }
.bp-kid-skin-2 { fill: #a86b46; }
.bp-kid-hair-1 { fill: #5a3a28; }
.bp-kid-hair-2 { fill: none; stroke: #2b1d17; stroke-width: 5; stroke-linecap: round; }
.bp-star path { fill: var(--bp-sun); }
.bp-star { transform-box: fill-box; transform-origin: center; animation: bp-twinkle 2.4s ease-in-out infinite; }
.bp-star-2 { animation-delay: -.8s; } .bp-star-3 { animation-delay: -1.6s; }
.bp-star-2 path { fill: var(--bp-pink); } .bp-star-3 path { fill: #fff; }
@keyframes bp-twinkle { 50% { scale: .6; rotate: 40deg; opacity: .6; } }

/* Balloons */
.bp-balloons { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.bp-balloon {
	position: absolute; left: var(--x); bottom: -160px;
	width: calc(64px * var(--s)); height: calc(80px * var(--s));
	border-radius: 50% 50% 47% 53% / 58% 58% 42% 42%;
	background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.75) 0 8%, transparent 22%), radial-gradient(circle at 60% 70%, color-mix(in srgb, var(--c) 75%, #000) 0, var(--c) 70%);
	box-shadow: inset -8px -10px 0 rgba(0,0,0,.08);
	pointer-events: auto; cursor: pointer;
	animation: bp-rise 19s linear infinite, bp-sway 3.2s ease-in-out infinite alternate;
	animation-delay: var(--d), var(--d);
	transition: scale .14s ease-out, opacity .14s;
}
.bp-balloon::before { content: ""; position: absolute; left: 50%; bottom: -7px; translate: -50% 0; border: 7px solid transparent; border-bottom-color: var(--c); border-top: 0; rotate: 180deg; filter: brightness(.85); }
.bp-balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(110px * var(--s)); background: linear-gradient(rgba(33,31,61,.45), rgba(33,31,61,0)); translate: -50% 6px; transform-origin: top; animation: bp-string 1.6s ease-in-out infinite alternate; }
.bp-balloon:hover { scale: 1.08; }
.bp-balloon.is-popped { scale: 1.6; opacity: 0; pointer-events: none; }
@keyframes bp-rise { from { translate: 0 0; } to { translate: 0 calc(-100vh - 1200px); } }
@keyframes bp-sway { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes bp-string { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

.bp-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 160px; z-index: 1; pointer-events: none; }
.bp-hills svg { width: 100%; height: 100%; display: block; }
.bp-hill-back { fill: color-mix(in srgb, var(--bp-grass) 70%, #fff); }
.bp-hill-front { fill: var(--bp-grass); }

.bp-pop-text {
	position: fixed; z-index: 90; pointer-events: none; translate: -50% -50%;
	font: 700 26px/1 var(--bp-head); color: #fff; -webkit-text-stroke: 2px var(--bp-ink); paint-order: stroke fill;
	animation: bp-pop-text .8s var(--bp-ease) forwards;
}
@keyframes bp-pop-text { from { scale: .4; opacity: 0; } 30% { scale: 1.2; opacity: 1; } to { scale: 1; opacity: 0; translate: -50% -140%; } }
.bp-bit {
	position: fixed; z-index: 89; pointer-events: none; width: 8px; height: 12px; border-radius: 2px;
	animation: bp-burst .9s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes bp-burst { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

@media (max-width: 900px) {
	.bp-hero { padding-bottom: 120px; min-height: 0; }
	.bp-hero-inner { grid-template-columns: 1fr; text-align: center; }
	.bp-hero-text { margin-left: auto; margin-right: auto; }
	.bp-hero-ctas, .bp-badges { justify-content: center; }
	.bp-hero-art { max-width: 460px; margin: 0 auto; width: 100%; }
	.bp-sun { width: 100px; height: 100px; right: 4%; }
}

/* Marquee ribbon */
.bp-marquee {
	position: relative; z-index: 4; margin: -46px -2% 0; padding: 16px 0;
	background: var(--bp-primary); color: #fff; rotate: -1.6deg;
	box-shadow: 0 10px 0 var(--bp-primary-d);
	overflow: hidden;
}
.bp-marquee-track { display: flex; width: max-content; animation: bp-marquee 34s linear infinite; }
.bp-marquee:hover .bp-marquee-track { animation-play-state: paused; }
.bp-marquee-run { display: flex; align-items: center; flex: none; }
.bp-marquee-run span { font: 600 clamp(20px, 2.4vw, 30px)/1 var(--bp-head); padding: 0 22px; white-space: nowrap; }
.bp-marquee-run i { font-style: normal; color: var(--bp-sun); font-size: 22px; display: inline-block; animation: bp-spin 6s linear infinite; }
@keyframes bp-marquee { to { transform: translateX(-50%); } }

/* =====================================================================
 * 6. Content sections (blocks from the demo + patterns)
 * =================================================================== */
.bp-front-content, .bp-entry { display: flow-root; }
.bp-entry > *:not(.wp-block-group):not(.alignfull):not(.alignwide) { max-width: var(--bp-narrow); margin-left: auto; margin-right: auto; padding-left: var(--bp-gutter); padding-right: var(--bp-gutter); }
.bp-entry > .alignwide { max-width: var(--bp-wide); margin-left: auto; margin-right: auto; padding: 0 var(--bp-gutter); }
.bp-entry > .wp-block-group:not(.bp-section):not(.bp-planner-section) { max-width: var(--bp-narrow); margin-left: auto; margin-right: auto; padding-left: var(--bp-gutter); padding-right: var(--bp-gutter); }

.bp-section { position: relative; padding: clamp(70px, 9vw, 120px) var(--bp-gutter); }
.bp-section > * { max-width: var(--bp-wide); margin-left: auto; margin-right: auto; }
.bp-section-tight { padding-top: clamp(30px, 4vw, 56px); padding-bottom: clamp(50px, 6vw, 80px); }
.bp-section > .wp-block-heading { margin-top: 0; }
.bp-section > p:not(.bp-kicker):not(.bp-lead) { max-width: var(--bp-narrow); }

.bp-kicker {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin-bottom: 12px !important; color: var(--bp-primary-d);
	font: 800 14px/1 var(--bp-body); letter-spacing: .14em; text-transform: uppercase;
}
.bp-kicker::before, .bp-kicker::after { content: ""; width: 26px; height: 8px; background: radial-gradient(circle, currentColor 2px, transparent 2.5px) 0 50% / 8px 8px repeat-x; opacity: .7; }
.bp-lead { font-size: clamp(18px, 1.5vw, 20px); color: var(--bp-ink-2); max-width: 640px !important; margin: 0 auto 2.2em !important; font-weight: 600; }
.bp-note { background: var(--bp-sun-l); border: 2px dashed var(--bp-sun); padding: 12px 16px; border-radius: 16px; font-weight: 700; font-size: 15px; }

/* Squiggle heading */
.is-style-bp-squiggle { position: relative; padding-bottom: 26px; margin-bottom: 24px !important; }
.is-style-bp-squiggle::after {
	content: ""; position: absolute; left: 50%; bottom: 0; width: 150px; height: 16px; translate: -50% 0;
	background: var(--bp-sun);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 16'%3E%3Cpath d='M3 10 Q 15 0 27 10 T 51 10 T 75 10 T 99 10 T 123 10 T 147 10' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 16'%3E%3Cpath d='M3 10 Q 15 0 27 10 T 51 10 T 75 10 T 99 10 T 123 10 T 147 10' fill='none' stroke='black' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	transform-origin: left; transition: scale .9s var(--bp-spring) .2s;
}
.bp-js .is-style-bp-squiggle:not(.is-visible)::after { scale: 0 1; }
.is-style-bp-squiggle:not(.has-text-align-center)::after { left: 0; translate: none; }

/* Coloured panels */
.is-style-bp-sky, .is-style-bp-sunny, .is-style-bp-grape {
	margin: 0 clamp(8px, 2vw, 24px);
	border-radius: clamp(32px, 5vw, 64px);
	background-color: var(--bp-sky-l);
	background-image: radial-gradient(color-mix(in srgb, var(--bp-sky) 30%, transparent) 1.6px, transparent 2px);
	background-size: 26px 26px;
}
.is-style-bp-sunny { background-color: var(--bp-sun-l); background-image: radial-gradient(color-mix(in srgb, var(--bp-sun) 55%, transparent) 1.6px, transparent 2px); }
.is-style-bp-grape {
	background-color: var(--bp-grape); color: #fff; overflow: hidden;
	background-image: radial-gradient(rgba(255,255,255,.18) 1.6px, transparent 2px);
}
.is-style-bp-grape h2, .is-style-bp-grape h3 { color: #fff; }
.is-style-bp-grape .bp-lead { color: rgba(255,255,255,.88); }
.is-style-bp-grape .is-style-outline .wp-block-button__link { background: transparent; color: #fff; box-shadow: inset 0 0 0 2.5px #fff, 0 5px 0 rgba(0,0,0,.25); }
.is-style-bp-card { background: #fff; border-radius: var(--bp-r); padding: clamp(22px, 3vw, 36px); box-shadow: 0 20px 40px -30px rgba(33,31,61,.45); }

/* How it works */
.bp-steps { gap: clamp(18px, 3vw, 34px) !important; margin-top: 10px; }
.bp-step {
	--c: var(--bp-primary);
	position: relative; background: #fff; border-radius: var(--bp-r); padding: 34px 28px 30px;
	border: 2.5px solid var(--bp-ink); box-shadow: 8px 8px 0 var(--c);
	transition: transform .35s var(--bp-spring), box-shadow .35s var(--bp-spring);
}
.bp-step-2 { --c: var(--bp-sky); }
.bp-step-3 { --c: var(--bp-grass); }
.bp-step:hover { transform: translate(-4px, -6px) rotate(-1deg); box-shadow: 14px 14px 0 var(--c); }
.bp-step h3 { margin: 18px 0 8px; }
.bp-step p:last-child { margin: 0; color: var(--bp-ink-2); }
.bp-step-num {
	width: 64px; height: 64px; margin: 0 !important; border-radius: 22px; display: grid; place-items: center;
	background: var(--c); color: #fff; font: 700 34px/1 var(--bp-head); rotate: -6deg;
	box-shadow: inset 0 -6px 0 rgba(0,0,0,.14);
}
.bp-step:hover .bp-step-num { animation: bp-jelly .6s; }
@media (min-width: 782px) {
	.bp-step:not(:last-child)::after {
		content: ""; position: absolute; right: calc(-1 * clamp(18px, 3vw, 34px) - 6px); top: 50%; width: clamp(24px, 3.6vw, 44px); height: 20px; z-index: 2;
		background: var(--bp-ink);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cpath d='M2 10 h34 M28 3 l8 7 -8 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='5 5'/%3E%3C/svg%3E") center/contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 20'%3E%3Cpath d='M2 10 h34 M28 3 l8 7 -8 7' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='5 5'/%3E%3C/svg%3E") center/contain no-repeat;
	}
}

/* Features */
.bp-features { gap: 20px !important; }
.bp-feature { --c: var(--bp-primary); background: #fff; border-radius: var(--bp-r); padding: 30px 26px; text-align: left; box-shadow: 0 24px 40px -32px rgba(33,31,61,.5); transition: transform .35s var(--bp-spring); }
.bp-feature:hover { transform: translateY(-8px) rotate(.6deg); }
.bp-feature::before {
	content: ""; display: block; width: 62px; height: 62px; border-radius: 50%;
	background: var(--c) center / 30px 30px no-repeat;
	box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent);
	transition: transform .5s var(--bp-spring);
}
.bp-feature:hover::before { transform: rotate(-14deg) scale(1.1); }
.bp-feature h3 { margin: 22px 0 8px; font-size: 22px; }
.bp-feature p { margin: 0; color: var(--bp-ink-2); font-size: 16px; }
.bp-feature-clean { --c: var(--bp-sky); }
.bp-feature-clean::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M6 18l2.5-2.5M15.5 8.5 18 6'/%3E%3C/svg%3E"); }
.bp-feature-safe { --c: var(--bp-grass); }
.bp-feature-safe::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.bp-feature-time { --c: var(--bp-primary); }
.bp-feature-time::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.bp-feature-price { --c: var(--bp-grape); }
.bp-feature-price::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E"); }

/* FAQ */
.bp-faq-list { max-width: 820px !important; display: grid; gap: 12px; }
.wp-block-details {
	background: #fff; border-radius: 22px; padding: 0; overflow: hidden;
	box-shadow: 0 2px 0 var(--bp-line), 0 18px 30px -28px rgba(33,31,61,.45);
	transition: transform .3s var(--bp-spring);
}
.wp-block-details:hover { transform: translateX(4px); }
.wp-block-details summary {
	list-style: none; cursor: pointer; padding: 20px 64px 20px 24px; position: relative;
	font: 600 19px/1.3 var(--bp-head);
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%;
	width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
	background: var(--bp-sun); color: var(--bp-ink); font: 700 24px/1 var(--bp-head);
	transition: rotate .4s var(--bp-spring), background .3s;
}
.wp-block-details[open] summary::after { rotate: 135deg; background: var(--bp-primary); color: #fff; }
.wp-block-details > :not(summary) { padding: 0 24px; margin: 0 0 20px; color: var(--bp-ink-2); animation: bp-fade-up .45s var(--bp-ease); }

/* Latest posts */
.bp-latest.wp-block-latest-posts { padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.bp-latest.wp-block-latest-posts li {
	margin: 0; width: auto; background: #fff; border-radius: var(--bp-r); padding: 28px; position: relative; overflow: hidden;
	box-shadow: 0 24px 40px -32px rgba(33,31,61,.5); transition: transform .35s var(--bp-spring);
}
.bp-latest.wp-block-latest-posts li::before { content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; background: var(--bp-sun-l); transition: scale .5s var(--bp-spring); }
.bp-latest li:nth-child(3n+2)::before { background: var(--bp-sky-l); }
.bp-latest li:nth-child(3n)::before { background: var(--bp-pink-l); }
.bp-latest.wp-block-latest-posts li:hover { transform: translateY(-6px); }
.bp-latest li:hover::before { scale: 1.6; }
.bp-latest .wp-block-latest-posts__post-title { position: relative; display: block; font: 600 22px/1.2 var(--bp-head); color: var(--bp-ink); text-decoration: none; }
.bp-latest .wp-block-latest-posts__post-title:hover { color: var(--bp-primary); }
.bp-latest .wp-block-latest-posts__post-date { position: relative; display: block; margin-top: 8px; color: var(--bp-ink-2); font-size: 13px; font-weight: 700; }
.bp-latest .wp-block-latest-posts__post-excerpt { position: relative; margin: 10px 0 0; color: var(--bp-ink-2); font-size: 15px; }

/* CTA band */
.bp-cta { text-align: center; margin-bottom: clamp(50px, 6vw, 90px) !important; }
.bp-cta h2 { margin-top: 0; }
.bp-cta::before, .bp-cta::after {
	content: ""; position: absolute; width: 120px; height: 150px; border-radius: 50% 50% 47% 53% / 58% 58% 42% 42%;
	background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6) 0 8%, transparent 22%), var(--bp-sun);
	left: 5%; bottom: 34px; animation: bp-bob 4s ease-in-out infinite; max-width: none;
}
.bp-cta::after { left: auto; right: 6%; top: 40px; bottom: auto; width: 84px; height: 104px; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.6) 0 8%, transparent 22%), var(--bp-pink); animation-delay: -2s; }
.wp-block-buttons { gap: 14px; margin-top: 10px; }
.bp-section > .wp-block-buttons { margin-top: 34px; }

/* Planner section */
.bp-planner-section { scroll-margin-top: 0; padding-top: clamp(30px, 4vw, 60px); position: relative; }
.bp-planner-section > .prs-root { margin-top: 0; }
.bp-planner-missing { max-width: 720px; margin: 30px auto; padding: 22px 26px; border-radius: 22px; background: #fff; border: 2.5px dashed var(--bp-primary); font-weight: 700; text-align: center; }

/* =====================================================================
 * 7. Rental showcase
 * =================================================================== */
.bp-rentals { margin-top: 10px; }
.bp-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; }
.bp-filter {
	border: 2px solid var(--bp-ink); background: #fff; color: var(--bp-ink); cursor: pointer;
	padding: 9px 18px; border-radius: 999px; font: 800 14px/1 var(--bp-body);
	transition: transform .3s var(--bp-spring), background .2s, color .2s;
}
.bp-filter:hover { transform: translateY(-2px) rotate(-2deg); }
.bp-filter[aria-pressed="true"] { background: var(--bp-ink); color: #fff; }

.bp-rental-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.bp-rental {
	--bg: color-mix(in srgb, var(--bp-primary) 10%, #fff); --dot: color-mix(in srgb, var(--bp-primary) 28%, transparent);
	display: flex; flex-direction: column; background: #fff; border-radius: var(--bp-r); overflow: hidden;
	box-shadow: 0 2px 0 var(--bp-line), 0 26px 40px -34px rgba(33,31,61,.55);
	transition: transform .4s var(--bp-spring), box-shadow .4s;
}
.bp-rental--tents { --bg: var(--bp-sun-l); --dot: color-mix(in srgb, var(--bp-sun) 60%, transparent); }
.bp-rental--seating { --bg: var(--bp-pink-l); --dot: color-mix(in srgb, var(--bp-pink) 45%, transparent); }
.bp-rental--decor { --bg: var(--bp-grape-l); --dot: color-mix(in srgb, var(--bp-grape) 30%, transparent); }
.bp-rental--extras { --bg: var(--bp-grass-l); --dot: color-mix(in srgb, var(--bp-grass) 35%, transparent); }
.bp-rental:hover { transform: translateY(-8px) rotate(-.6deg); box-shadow: 0 2px 0 var(--bp-line), 0 36px 50px -34px rgba(33,31,61,.6); }
.bp-rental.is-hidden { display: none; }
.bp-rental.is-entering { animation: bp-card-in .55s var(--bp-spring) both; animation-delay: calc(var(--n, 0) * 50ms); }
@keyframes bp-card-in { from { opacity: 0; transform: translateY(26px) scale(.92); } }
.bp-rental-art {
	position: relative; aspect-ratio: 16 / 10;
	background: var(--bg) radial-gradient(var(--dot) 1.6px, transparent 2px) 0 0 / 20px 20px;
}
.bp-rental-art .bp-illo { position: absolute; inset: 18px 24px 12px; width: calc(100% - 48px); height: calc(100% - 30px); overflow: visible; transition: transform .5s var(--bp-spring); }
.bp-rental:hover .bp-illo { animation: bp-squish .8s var(--bp-ease); }
@keyframes bp-squish { 0% { transform: none; } 25% { transform: scale(1.06, .92) translateY(4px); } 50% { transform: scale(.96, 1.06) translateY(-8px); } 75% { transform: scale(1.02, .98); } 100% { transform: none; } }
.bp-rental-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.bp-rental-name { margin: 4px 0 0; font-size: 21px; }
.bp-rental-desc { margin: 0; font-size: 14px; color: var(--bp-ink-2); }
.bp-rental-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bp-rental-price { font: 700 22px/1 var(--bp-head); }
.bp-rental-price small { font: 600 13px var(--bp-body); color: var(--bp-ink-2); }
.bp-rental .bp-btn.is-added { --btn: var(--bp-grass); --btn-d: color-mix(in srgb, var(--bp-grass) 70%, #000); }
.bp-chip { align-self: flex-start; justify-self: start; display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--bp-cream); font-size: 12px; font-weight: 800; color: var(--bp-ink-2); }

/* Illustration paints (shared with the planner's look) */
.bp-illo .p { fill: var(--bp-primary); }
.bp-illo .s { fill: var(--bp-sun); }
.bp-illo .a { fill: var(--bp-sky); }
.bp-illo .pd { fill: var(--bp-primary-d); }
.bp-illo .sd { fill: color-mix(in srgb, var(--bp-sun) 70%, #211f3d); }
.bp-illo .w { fill: #fff; }
.bp-illo .sh { fill: #17361a; opacity: .14; }
.bp-illo .sh2 { fill: #17361a; opacity: .1; }
.bp-illo .mesh { fill: url(#bp-mesh); }
.bp-illo .hl { fill: none; stroke: #fff; stroke-opacity: .45; stroke-width: 6; stroke-linecap: round; }
.bp-illo .stick { stroke: #6b6f80; stroke-width: 3; }
.bp-illo .water { fill: #86dcff; }
.bp-illo .lane { fill: none; stroke: #fff; stroke-opacity: .6; stroke-width: 4; stroke-dasharray: 12 10; }
.bp-illo .rail-pd { fill: none; stroke: var(--bp-primary-d); stroke-width: 16; stroke-linecap: round; }
.bp-illo .rail-a { fill: none; stroke: var(--bp-sky); stroke-width: 16; stroke-linecap: round; }
.bp-illo .pole { fill: #8d91a6; }
.bp-illo .canvas { fill: #fcfcfe; stroke: #d9dce6; stroke-width: 1.5; }
.bp-illo .canvas-dark { fill: #e2e5ee; }
.bp-illo .cloth { fill: color-mix(in srgb, var(--bp-sun) 40%, #fff); }
.bp-illo .chair { fill: #fdfdfd; stroke: #c3c6d2; stroke-width: 1.2; }
.bp-illo .chair-leg { stroke: #b5b8c8; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.bp-illo .stake { fill: #8a6a4a; }
.bp-illo .ban-text { font: 700 22px var(--bp-head); fill: #fff; letter-spacing: .04em; }
.bp-illo .metal { fill: #c8ccd8; }
.bp-illo .candy { fill: #ffa3d2; }
.bp-illo .candy2 { fill: #a6dcff; }
.bp-illo .wheel { fill: #3b3d52; }
.bp-illo .tile-a { fill: color-mix(in srgb, var(--bp-primary) 60%, #fff); }
.bp-illo .tile-b { fill: #fff; }
.bp-rental:hover .bp-illo .tile-a { animation: bp-disco 1.2s steps(1) infinite; animation-delay: calc(var(--i) * -.15s); }
@keyframes bp-disco { 0% { fill: var(--bp-primary); } 33% { fill: var(--bp-sun); } 66% { fill: var(--bp-sky); } }
.bp-illo .wire { fill: none; stroke: #2d2b45; stroke-width: 2; }
.bp-illo .bulb { fill: #fff3c4; stroke: rgba(0,0,0,.1); }
.bp-illo .glow { fill: #ffd86b; opacity: .5; animation: bp-glow 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.3s); }
@keyframes bp-glow { 50% { opacity: .15; } }
.bp-breath { transform-box: fill-box; transform-origin: 50% 100%; animation: bp-breathe 3s ease-in-out infinite; }
@keyframes bp-breathe { 50% { transform: scale(1.015, .985); } }

/* =====================================================================
 * 8. Inner pages, blog, prose
 * =================================================================== */
.bp-page-hero {
	position: relative; overflow: hidden; text-align: center;
	padding: calc(clamp(50px, 8vw, 100px)) var(--bp-gutter) clamp(90px, 10vw, 130px);
	background: linear-gradient(180deg, #c9ecff, #e9f7ff 70%, var(--bp-cream));
}
.bp-page-hero-inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; }
.bp-page-title { margin: 0; font-size: clamp(42px, 6vw, 78px); font-weight: 700; animation: bp-word-in .9s var(--bp-spring) both; }
.bp-page-sub { margin-top: 14px; font-size: 18px; color: var(--bp-ink-2); font-weight: 600; animation: bp-fade-up .7s var(--bp-ease) .3s both; }
.bp-page-sub p { margin: 0; }
.bp-page-hero .bp-wave { position: absolute; left: 0; right: 0; bottom: -1px; }
.bp-page-hero-deco i { position: absolute; border-radius: 50%; opacity: .9; animation: bp-bob 5s ease-in-out infinite; }
.bp-page-hero-deco i:nth-child(1) { width: 70px; height: 70px; left: 8%; top: 22%; background: var(--bp-sun); }
.bp-page-hero-deco i:nth-child(2) { width: 26px; height: 26px; left: 18%; top: 62%; background: var(--bp-primary); animation-delay: -1s; }
.bp-page-hero-deco i:nth-child(3) { width: 44px; height: 44px; right: 12%; top: 18%; background: var(--bp-pink); animation-delay: -2s; }
.bp-page-hero-deco i:nth-child(4) { width: 18px; height: 18px; right: 22%; top: 64%; background: var(--bp-grape); animation-delay: -3s; }
.bp-page-hero-deco i:nth-child(5) { width: 120px; height: 120px; right: -30px; bottom: 10px; background: color-mix(in srgb, var(--bp-sky) 30%, #fff); animation-delay: -1.5s; }
.bp-wave svg { display: block; width: 100%; height: clamp(40px, 6vw, 80px); }

.bp-page-full .bp-entry > .bp-planner-section { padding-top: 0; }
body.bp-has-planner:not(.bp-front) .bp-main { padding-top: 10px; }

.bp-prose, .bp-prose-entry { font-size: 18px; }
.bp-prose > *, .bp-prose-entry > * { max-width: var(--bp-narrow) !important; }
.bp-prose h2, .bp-prose-entry h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 1.6em; }
.bp-prose ul, .bp-prose-entry ul, .bp-entry ul.wp-block-list { list-style: none; padding-left: 0; }
.bp-prose ul li, .bp-prose-entry ul li, .bp-entry ul.wp-block-list li { position: relative; padding-left: 34px; margin: 0 0 10px; }
.bp-prose ul li::before, .bp-prose-entry ul li::before, .bp-entry ul.wp-block-list li::before {
	content: ""; position: absolute; left: 4px; top: .35em; width: 16px; height: 20px;
	border-radius: 50% 50% 47% 53% / 58% 58% 42% 42%; background: var(--bp-primary);
}
.bp-prose ul li:nth-child(4n+2)::before, .bp-prose-entry ul li:nth-child(4n+2)::before, .bp-entry ul.wp-block-list li:nth-child(4n+2)::before { background: var(--bp-sky); }
.bp-prose ul li:nth-child(4n+3)::before, .bp-prose-entry ul li:nth-child(4n+3)::before, .bp-entry ul.wp-block-list li:nth-child(4n+3)::before { background: var(--bp-sun); }
.bp-prose ul li:nth-child(4n)::before, .bp-prose-entry ul li:nth-child(4n)::before, .bp-entry ul.wp-block-list li:nth-child(4n)::before { background: var(--bp-grape); }
.bp-entry blockquote { border-left: 6px solid var(--bp-sun); margin: 1.6em auto; padding: 4px 0 4px 22px; font: 500 22px/1.4 var(--bp-head); }
.bp-entry img { border-radius: 20px; }
.bp-entry .wp-block-image figcaption { text-align: center; color: var(--bp-ink-2); font-size: 14px; }

.bp-single { padding-bottom: 60px; }
.bp-single .bp-entry > *:first-child { margin-top: 0; }
.bp-single-thumb { max-width: var(--bp-wide); margin: -40px auto 40px; padding: 0 var(--bp-gutter); }
.bp-single-thumb img { width: 100%; border-radius: var(--bp-r); display: block; }
.bp-single-foot { max-width: var(--bp-narrow); margin: 40px auto 0; padding: 0 var(--bp-gutter); }
.bp-single-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; border-radius: var(--bp-r); background: var(--bp-sun-l); border: 2.5px solid var(--bp-ink); box-shadow: 6px 6px 0 var(--bp-sun); margin: 30px 0; }
.bp-single-cta p { margin: 0; flex: 1 1 260px; }
.bp-tags a { display: inline-block; margin: 0 6px 6px 0; padding: 4px 12px; border-radius: 999px; background: #fff; text-decoration: none; font-weight: 700; font-size: 14px; }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.post-navigation a { display: block; padding: 18px 20px; border-radius: 20px; background: #fff; text-decoration: none; color: var(--bp-ink); height: 100%; transition: transform .3s var(--bp-spring); }
.post-navigation a:hover { transform: translateY(-4px); }
.post-navigation .nav-next { text-align: right; }
.bp-nav-label { display: block; font-size: 13px; font-weight: 800; color: var(--bp-primary-d); }
.bp-nav-title { font: 600 18px/1.3 var(--bp-head); }
.bp-meta { color: var(--bp-ink-2); font-weight: 700; font-size: 14px; }

.bp-listing { padding-top: 10px; padding-bottom: 80px; }
.bp-post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; }
.bp-card-post { background: #fff; border-radius: var(--bp-r); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 26px 40px -34px rgba(33,31,61,.55); transition: transform .4s var(--bp-spring); }
.bp-card-post:hover { transform: translateY(-8px) rotate(-.5deg); }
.bp-card-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.bp-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .6s var(--bp-ease); }
.bp-card-post:hover .bp-thumb-img { scale: 1.06; }
.bp-thumb-ph { position: relative; width: 100%; height: 100%; background: var(--bp-sky-l) radial-gradient(rgba(33,31,61,.08) 1.6px, transparent 2px) 0 0 / 20px 20px; }
.bp-thumb-ph .bp-illo { position: absolute; inset: 24px 40px 14px; width: calc(100% - 80px); height: calc(100% - 38px); }
.bp-card-post:hover .bp-illo { animation: bp-squish .8s var(--bp-ease); }
.bp-bg-sun { background-color: var(--bp-sun-l); } .bp-bg-pink { background-color: var(--bp-pink-l); } .bp-bg-grape { background-color: var(--bp-grape-l); } .bp-bg-grass { background-color: var(--bp-grass-l); } .bp-bg-primary { background-color: color-mix(in srgb, var(--bp-primary) 14%, #fff); }
.bp-card-body { padding: 22px 24px 26px; display: grid; gap: 8px; }
.bp-card-title { margin: 0; font-size: 23px; }
.bp-card-title a { color: var(--bp-ink); text-decoration: none; }
.bp-card-title a:hover { color: var(--bp-primary); }
.bp-card-excerpt { margin: 0; color: var(--bp-ink-2); font-size: 15px; }
.pagination, .navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.page-numbers { display: inline-grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--bp-ink); text-decoration: none; font-weight: 800; }
.page-numbers.current { background: var(--bp-ink); color: #fff; }

.bp-empty { text-align: center; padding: 40px 0; }
.bp-empty-emoji { font-size: 60px; margin: 0; animation: bp-bob 3s ease-in-out infinite; }
.bp-search { display: flex; gap: 8px; max-width: 480px; margin: 0 auto; }
.bp-search input { flex: 1; padding: 14px 18px; border-radius: 999px; border: 2px solid var(--bp-line); font: 600 16px var(--bp-body); background: #fff; }
.bp-search input:focus { outline: none; border-color: var(--bp-ink); }
.bp-search button { padding: 0; width: 52px; height: 52px; }
.bp-search button .bp-i { width: 22px; height: 22px; }
.bp-search-again { margin: 0 0 40px; }

/* Contact cards */
.bp-contact-cards { list-style: none; padding: 0; margin: 10px auto 30px !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1000px !important; }
.bp-contact-card { background: #fff; border-radius: 24px; padding: 24px; display: grid; gap: 4px; justify-items: start; box-shadow: 0 24px 40px -32px rgba(33,31,61,.5); transition: transform .35s var(--bp-spring); }
.bp-contact-card:hover { transform: translateY(-6px) rotate(-1deg); }
.bp-contact-ico { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--bp-sun); margin-bottom: 8px; }
.bp-contact-card:nth-child(2) .bp-contact-ico { background: var(--bp-sky); color: #fff; }
.bp-contact-card:nth-child(3) .bp-contact-ico { background: var(--bp-grass); color: #fff; }
.bp-contact-card:nth-child(4) .bp-contact-ico { background: var(--bp-pink); }
.bp-contact-label { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bp-ink-2); }
.bp-contact-value { font: 600 19px/1.3 var(--bp-head); }
.bp-contact-value a { color: var(--bp-ink); text-decoration: none; }

/* Comments */
.bp-comments { padding: 40px 0 70px; }
.bp-comment-list { list-style: none; padding: 0; }
.bp-comment-list .comment-body { background: #fff; border-radius: 20px; padding: 18px 20px; margin-bottom: 14px; }
.comment-form input:not([type=submit]):not([type=checkbox]), .comment-form textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--bp-line); font: 600 16px var(--bp-body); background: #fff; }

/* 404 */
.bp-404 { text-align: center; padding: calc(var(--bp-header-h) + 40px) var(--bp-gutter) 100px; background: linear-gradient(#d8f1ff, var(--bp-cream)); }
.bp-404-num { display: flex; justify-content: center; align-items: flex-end; gap: 10px; margin: 0; font: 700 clamp(110px, 20vw, 220px)/1 var(--bp-head); color: var(--bp-primary); }
.bp-404-ball { width: .62em; height: .62em; border-radius: 50%; margin-bottom: .08em; background: radial-gradient(circle at 30% 30%, #fff8 0 10%, transparent 26%), conic-gradient(var(--bp-sun) 0 25%, var(--bp-sky) 0 50%, var(--bp-grape) 0 75%, var(--bp-grass) 0); animation: bp-ball 1s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
@keyframes bp-ball { from { transform: translateY(-.35em) rotate(0); } to { transform: translateY(0) scale(1.08, .9) rotate(180deg); } }
.bp-404 .bp-hero-ctas { justify-content: center; margin: 26px 0 40px; }

/* =====================================================================
 * 9. Footer
 * =================================================================== */
.bp-footer { position: relative; background: var(--bp-ink); color: rgba(255,255,255,.82); padding-top: 70px; margin-top: 40px; }
.bp-bunting { position: absolute; left: 0; right: 0; top: -2px; height: 70px; pointer-events: none; }
.bp-bunting svg { width: 100%; height: 100%; display: block; }
.bp-bunting-line { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 2; }
.bp-flag { transform-box: fill-box; transform-origin: 50% 0; animation: bp-flap 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.21s); }
@keyframes bp-flap { 50% { transform: rotate(7deg); } }
.bp-footer-inner { max-width: var(--bp-wide); margin: 0 auto; padding: 40px var(--bp-gutter) 40px; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 40px; }
.bp-footer .bp-logo { color: #fff; }
.bp-footer .bp-logo-text span:nth-child(4n+1) { color: var(--bp-sun); }
.bp-footer-brand p { margin: 16px 0 18px; }
.bp-footer-h { margin: 6px 0 16px; font-size: 20px; color: #fff; }
.bp-footer a { color: #fff; text-decoration: none; }
.bp-footer a:hover { color: var(--bp-sun); }
.bp-footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bp-footer-menu a { display: inline-block; transition: transform .3s var(--bp-spring); }
.bp-footer-menu a:hover { transform: translateX(6px); }
.bp-footer-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bp-footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.bp-footer-contact .bp-i { flex: none; width: 20px; height: 20px; color: var(--bp-sun); margin-top: 3px; }
.bp-footer-cta .bp-btn { margin-top: 6px; }
.bp-socials { list-style: none; padding: 0; margin: 0; display: flex; gap: 10px; }
.bp-socials a { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.1); transition: transform .3s var(--bp-spring), background .2s; }
.bp-socials a:hover { background: var(--bp-primary); color: #fff; transform: translateY(-4px) rotate(-8deg); }
.bp-socials .bp-i { width: 20px; height: 20px; }
.bp-footer-bottom { max-width: var(--bp-wide); margin: 0 auto; padding: 22px var(--bp-gutter) 60px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; position: relative; z-index: 1; }
.bp-footer-bottom p { margin: 0; }
.bp-totop { width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; color: var(--bp-ink); background: radial-gradient(circle at 30% 30%, #fff9 0 10%, transparent 26%), var(--bp-sun); display: grid; place-items: center; animation: bp-ball-bounce 1.4s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
.bp-totop .bp-i { width: 22px; height: 22px; }
@keyframes bp-ball-bounce { from { transform: translateY(-10px); } to { transform: translateY(0) scale(1.06, .94); } }
.bp-grass { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: var(--bp-grass); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34'%3E%3Cpath d='M0 34 V22 L5 8 L9 20 L14 2 L18 18 L23 10 L27 22 L32 4 L36 20 L41 12 L45 22 L50 6 L54 20 L60 14 V34Z'/%3E%3C/svg%3E") 0 100% / 60px 34px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 34'%3E%3Cpath d='M0 34 V22 L5 8 L9 20 L14 2 L18 18 L23 10 L27 22 L32 4 L36 20 L41 12 L45 22 L50 6 L54 20 L60 14 V34Z'/%3E%3C/svg%3E") 0 100% / 60px 34px repeat-x; }
@media (max-width: 960px) { .bp-footer-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .bp-footer-inner { grid-template-columns: 1fr; } .bp-footer-bottom { flex-direction: column; text-align: center; } }

/* Toast */
.bp-toast {
	position: fixed; left: 50%; bottom: 22px; z-index: 95; translate: -50% calc(100% + 40px); visibility: hidden;
	padding: 14px 22px; border-radius: 999px; background: var(--bp-ink); color: #fff; font-weight: 800;
	box-shadow: 0 16px 40px -14px rgba(33,31,61,.6);
	transition: translate .5s var(--bp-spring), visibility 0s .5s; pointer-events: none; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
}
.bp-toast.is-on { translate: -50% 0; visibility: visible; transition: translate .5s var(--bp-spring), visibility 0s; }

/* =====================================================================
 * 10. Scroll reveal (only when JS is running)
 * =================================================================== */
.bp-js .bp-reveal { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .7s var(--bp-ease), transform .9s var(--bp-spring); transition-delay: var(--rd, 0ms); }
.bp-js .bp-reveal.is-visible { opacity: 1; transform: none; }

/* WordPress core classes */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption-text, .gallery-caption { font-size: 14px; color: var(--bp-ink-2); }
.sticky .bp-card-title::before { content: "★ "; color: var(--bp-sun); }
.bypostauthor > .comment-body { border-left: 4px solid var(--bp-primary); }

/* =====================================================================
 * 11. Reduced motion
 * =================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.bp-balloon { display: none; }
	.bp-js .bp-reveal { opacity: 1; transform: none; }
}

@media (max-width: 700px) {
	.bp-cta::before, .bp-cta::after { display: none; }
	.bp-marquee { margin-top: -36px; }
}

@media (max-width: 700px) {
	.bp-balloon:nth-child(2n) { display: none; }
	.bp-balloon { width: calc(48px * var(--s)); height: calc(60px * var(--s)); }
	.bp-cloud-1 { scale: .6; top: 30%; }
}