/*
Theme Name: Balance Pro
Theme URI: https://bprobrand.com
Description: Block theme for Balance Pro (B-Pro) — the patented contained-fulcrum balance
             board, and the brand's apparel and gear. "Everything in Balance."
Author: Lost Swordfish
Author URI: https://gitea.lostswordfish.com/lostswordfish
Version: 0.3.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bpro-theme
Tags: e-commerce, block-theme, full-site-editing, blog
*/

/* ---------------------------------------------------------------------------
   Design tokens, type and layout all live in theme.json. This file is only for
   what theme.json genuinely cannot express.

   The palette is sampled from the product itself: `graphite` is the ball,
   `maple` is the deck, and `signal` plus the three `way-*` colorways are the
   printed grip sheets. Nothing here was invented.
   --------------------------------------------------------------------------- */


/* --- The wordmark ---------------------------------------------------------
   The mark is the board drawn in profile, and the source vector ships it
   rotated a quarter turn with an opaque white backing — both fixed in
   assets/logo.svg.

   It is painted over the Site Title block rather than replacing it, so the
   words stay in the markup for screen readers and search engines. It cannot be
   a CSS mask: the letterforms have white knockouts inside them, and a mask
   would fill those in. Hence two files rather than one recolourable one.       */

.wp-block-site-title a {
	display: block;
	width: 11rem;
	aspect-ratio: 849 / 294;
	background: center / contain no-repeat url("assets/logo.svg");
	overflow: hidden;
	white-space: nowrap;
	text-indent: 110%;
}

.wp-block-site-title a:hover { opacity: 0.72; }

footer .wp-block-site-title a { width: 9rem; }

/* Anywhere the mark sits on graphite. */
.bpro-on-dark .wp-block-site-title a {
	background-image: url("assets/logo-invert.svg");
}


/* --- The hero -------------------------------------------------------------
   The product is a thing you tilt, so the composition tilts. The board is cut
   out of its studio backdrop, rotated, oversized, bled off the right edge and
   run underneath the headline — the type sits on top of it rather than beside
   it, which is what stops the section reading as a tidy two-column brochure.

   The cut-out is a JPEG plus a separate greyscale mask rather than a PNG with
   alpha: a photographic PNG with alpha came out at 11 MB, and this is 97 KB
   for the same result. The colour layer is matted against graphite so JPEG
   ringing at the edge blends into the band instead of haloing.               */

.bpro-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
	/* The band runs its own gutter: it is a `default` (flow) layout, not a
	   constrained one, because constrained would centre the copy and the whole
	   point is that the copy sits hard left with the board crossing it. */
	padding-inline: clamp(1.25rem, 6vw, 5.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(86vh, 820px);
}

.bpro-hero__art {
	position: absolute;
	z-index: 0;
	top: 47%;
	right: -7%;
	width: min(70%, 1020px);
	transform: translateY(-50%) rotate(-9deg);
	pointer-events: none;
}

.bpro-hero__art img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-mask: center / 100% 100% no-repeat url("assets/board/board-hero-float-mask.png");
	mask: center / 100% 100% no-repeat url("assets/board/board-hero-float-mask.png");
}

/* rem, not ch — ch resolves against this element's own 1rem font-size, not the
   6.5rem headline inside it, which collapses the headline to one word a line. */
.bpro-hero__copy {
	position: relative;
	z-index: 1;
	max-width: min(45rem, 58%);
}

.bpro-eyebrow {
	margin-bottom: var(--wp--preset--spacing--30);
	color: #C9968E;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.bpro-hero__headline {
	margin: 0;
	font-size: clamp(2.75rem, 6vw, 5.5rem);
	line-height: 0.93;
	letter-spacing: -0.035em;
}

.bpro-hero__headline em {
	font-style: normal;
	color: var(--wp--preset--color--signal);
}

.bpro-hero__sub {
	margin-top: var(--wp--preset--spacing--40);
	max-width: 38ch;
	color: #BDB6B0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
}

.bpro-hero__cta { margin-top: var(--wp--preset--spacing--50); }

.bpro-hero__note {
	margin-top: var(--wp--preset--spacing--30);
	color: #8C8580;
	font-size: var(--wp--preset--font-size--tiny);
}

.bpro-btn-ghost .wp-block-button__link {
	border: 1px solid #4E4A47;
	background: transparent;
	color: var(--wp--preset--color--bone);
}

.bpro-btn-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--bone);
	background: transparent;
}

/* The four printed grip sheets, as a bar across the foot of the band. */
.bpro-waybar {
	position: relative;
	z-index: 1;
	display: flex;
	margin: clamp(2rem, 4vw, 3.25rem) 0 0;
	padding: 0;
	list-style: none;
}

.bpro-waybar > li { flex: 1; height: 6px; }

/* Below the column breakpoint the board stops floating and simply sits under
   the copy, or it would cover the headline on a phone. */
@media (max-width: 781px) {
	.bpro-hero__art {
		position: static;
		width: 118%;
		margin: var(--wp--preset--spacing--50) 0 0 -9%;
		transform: rotate(-6deg);
	}
	.bpro-hero__copy { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
	.bpro-hero__art { transition: none; }
}


/* --- The board page -------------------------------------------------------
   /board/ is the site's primary conversion path in Phase 1, and it has no
   checkout behind it. That shapes the page: it argues, it shows evidence, and
   the only thing it asks for is an email address.                             */

.bpro-boardintro {
	padding-block: clamp(3rem, 6vw, 5.5rem);
	padding-inline: clamp(1.25rem, 6vw, 5.5rem);
}

.bpro-boardintro__inner { max-width: 62rem; margin-inline: auto; }

.bpro-boardintro__title {
	margin: 0;
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
	line-height: 0.96;
	letter-spacing: -0.03em;
}

.bpro-boardintro__lede {
	margin-top: var(--wp--preset--spacing--40);
	max-width: 48ch;
	color: #BDB6B0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
}

.bpro-boardintro__figure { margin-top: var(--wp--preset--spacing--60); }

/* The honest "there is nothing to buy" box. It is a selling point, not a
   disclaimer, so it is stated at full size rather than set in small print. */
.bpro-notsold {
	margin-top: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--40);
	border-left: 3px solid var(--wp--preset--color--signal);
	background: rgba(255, 255, 255, 0.04);
}

.bpro-notsold__head {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bpro-notsold__body {
	margin: 0.5rem 0 0;
	max-width: 54ch;
	color: #BDB6B0;
	font-size: var(--wp--preset--font-size--small);
}


/* --- Two fulcrums ---------------------------------------------------------- */

.bpro-variant__body { margin-top: var(--wp--preset--spacing--30); }

.bpro-variant__for {
	margin-top: var(--wp--preset--spacing--30);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

.bpro-colorways {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--rule);
}

.bpro-colorways__head {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.bpro-colorways__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--tiny);
}


/* --- Who it is for --------------------------------------------------------- */

/* No deck arc on these cards. It only reads at a wide box — its viewBox is
   400x32 and it stretches with preserveAspectRatio="none", so anything near
   square shears the kicked tips upright and it turns into a bracket — and
   three of them in a row is exactly the overuse that empties the device out. */
.bpro-audience__head {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.bpro-audience__body {
	margin-top: 0.6rem;
	color: var(--wp--preset--color--graphite-soft);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}


/* --- Waitlist and trade ---------------------------------------------------- */

.bpro-waitlist__body {
	margin-top: var(--wp--preset--spacing--30);
	max-width: 46ch;
	color: #BDB6B0;
}

.bpro-waitlist__spec {
	margin-top: var(--wp--preset--spacing--50);
	border-top-color: rgba(255, 255, 255, 0.18);
}

.bpro-waitlist__spec > li { border-bottom-color: rgba(255, 255, 255, 0.18); }

.bpro-waitlist .bpro-spec__label { color: #8C8580; }

.bpro-trade {
	padding: var(--wp--preset--spacing--40);
	border: 1px solid #3A3735;
}

.bpro-trade__head {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.bpro-trade__body {
	margin-top: var(--wp--preset--spacing--30);
	color: #BDB6B0;
	font-size: var(--wp--preset--font-size--small);
}

.bpro-trade__cta {
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* --- Commerce surfaces ----------------------------------------------------
   Supplier mockups arrive on white, and Stripe fields, WooCommerce blocks and
   Mautic embeds all ship white and resist restyling. Every one of them is a
   visible seam on a tinted ground, so anything transactional gets a clean
   white surface rather than the bone page ground.                             */

.bpro-commerce,
.is-style-card {
	background-color: var(--wp--preset--color--chalk);
}


/* --- Card: the default product / content surface -------------------------- */

.is-style-card {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 2px;
	box-shadow: var(--wp--preset--shadow--card);
}


/* --- Section rule: the heavy top rule that opens a section ----------------- */

.is-style-section-rule {
	border-top: 2px solid var(--wp--preset--color--graphite);
	padding-top: 1rem;
}


/* --- The deck arc ---------------------------------------------------------
   The one borrowed shape in the system. The wordmark is the board drawn in
   profile — a long deck with both tips kicked up — so that silhouette, and
   nothing else, is the section divider. Used sparingly: it stops meaning
   anything if it appears on every break.                                      */

.bpro-arc {
	display: block;
	width: 100%;
	height: 1.75rem;
	background-color: var(--wp--preset--color--rule);
	-webkit-mask: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 32' preserveAspectRatio='none'%3E%3Cpath d='M4 28 C 16 7, 36 4, 62 4 L 338 4 C 364 4, 384 7, 396 28' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	mask: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 32' preserveAspectRatio='none'%3E%3Cpath d='M4 28 C 16 7, 36 4, 62 4 L 338 4 C 364 4, 384 7, 396 28' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.bpro-arc--ink { background-color: var(--wp--preset--color--graphite); }


/* --- Spec list: the technical callout used on the board pages --------------
   Label above, value below, hairline between. Reads as a spec sheet rather
   than marketing copy, which is the register the product is sold in.          */

.bpro-spec {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--rule);
}

.bpro-spec > li {
	padding: 0.9rem 1rem 1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.bpro-spec .bpro-spec__label {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.bpro-spec .bpro-spec__value {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
}


/* --- Colorway swatches ----------------------------------------------------
   The four printed grip sheets. Swatch colours are the sampled ink, so the
   dot on screen is the sheet in the photograph.                               */

.bpro-ways {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bpro-ways > li {
	width: 1.15rem;
	height: 1.15rem;
	border: 1px solid rgba(23, 22, 22, 0.18);
	border-radius: 50%;
}


/* --- Figure caption plate -------------------------------------------------
   Photographs of the prototype carry a caption bar rather than floating text,
   so the claim and the evidence stay attached to each other.                  */

.bpro-figure { margin: 0; }

.bpro-figure img {
	display: block;
	width: 100%;
	height: auto;
}

.bpro-figure figcaption {
	margin: 0;
	padding: 0.6rem 0.85rem;
	background-color: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--bone);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--tiny);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* On a graphite ground the caption bar would vanish, so it inverts. */
.bpro-figure--invert figcaption {
	background-color: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--graphite);
}


/* --- Gear grid ------------------------------------------------------------
   The graphics have wildly different aspect ratios — a wide whale beside a
   square skull — so the art sits in a fixed square box. Without it the card
   titles land at four different heights and the row reads as broken.         */

.bpro-gear .wp-block-columns { align-items: stretch; }

.bpro-gear .wp-block-column { display: flex; }

.bpro-gear .wp-block-column > .is-style-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.bpro-gear .bpro-art img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
}


/* --- Accessibility --------------------------------------------------------- */

/* Block themes do not ship this; the colourway bar needs it to name its swatches. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--graphite);
	color: var(--wp--preset--color--chalk);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--small);
}

/* The graphics are line work on transparency — never let a filter tint them. */
.bpro-art img { filter: none; }


/* --- Source-order fix -----------------------------------------------------
   `.bpro-figure { margin: 0 }` above has the same specificity as the
   `.bpro-boardintro__figure` rule and comes later, so it was silently zeroing
   the gap between the lede and the figure at every width.                    */

.bpro-boardintro .bpro-boardintro__figure { margin-top: var(--wp--preset--spacing--60); }


/* --- Signup form (Contact Form 7, "Signup") --------------------------------
   An email field and a button on one row, the interest choice beneath. Colours
   inherit so the same markup works on the light page and the dark capture band. */

/* Contact Form 7 autop wraps the field and button in one <p> with a <br>. */
.bpro-signup-row { margin-top: var(--wp--preset--spacing--40); }
.bpro-signup-row > p { display: flex; flex-wrap: nowrap; margin: 0; }
.bpro-signup-row br { display: none; }
.bpro-signup-row .wpcf7-form-control-wrap { flex: 1 1 auto; min-width: 0; }
.bpro-signup-row input[type="email"] {
	width: 100%; box-sizing: border-box; margin: 0;
	padding: 0.95rem 1.2rem; font: inherit; font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--graphite); background: var(--wp--preset--color--chalk);
	border: 1px solid var(--wp--preset--color--rule); border-right-width: 0; border-radius: 0;
}
.bpro-signup-row input[type="submit"] {
	margin: 0; padding: 0.95rem 1.6rem; cursor: pointer; border: 0; border-radius: 0;
	font: inherit; font-weight: 700; color: var(--wp--preset--color--chalk);
	background: var(--wp--preset--color--signal);
}
.bpro-signup-row input[type="submit"]:hover { background: var(--wp--preset--color--graphite); }
.bpro-signup-interest { margin: 0.7rem 0 0; font-size: var(--wp--preset--font-size--tiny); color: var(--wp--preset--color--muted); }
.bpro-signup-interest br { display: none; }
.bpro-signup-interest .wpcf7-form-control { display: inline; }
.bpro-signup-interest .wpcf7-list-item { margin: 0 0 0 0.9rem; }
.wpcf7-form .wpcf7-not-valid-tip, .wpcf7-form .wpcf7-response-output { font-size: var(--wp--preset--font-size--tiny); }

/* --- Small screens --------------------------------------------------------
   theme.json cannot express breakpoints, so the phone pass lives here. It was
   checked at a 390px viewport (an iframe, since resize_window does not change
   the real viewport). The big section gaps are halved by redefining the
   spacing presets rather than touching each block; `html body` outranks the
   `body` selector global styles use to declare them.                          */

@media (max-width: 781px) {
	html body {
		--wp--preset--spacing--80: 3.5rem;
		--wp--preset--spacing--70: 3rem;
		--wp--preset--spacing--60: 2.25rem;
		--wp--preset--spacing--50: 1.75rem;
	}

	/* Header: wordmark and the menu/waitlist pair share one row instead of
	   wrapping onto two, and the wordmark gives up some width to let them. */
	header .wp-block-site-title a { width: 8.5rem; }
	header > .wp-block-group { flex-wrap: nowrap; gap: 0.75rem; }
	header > .wp-block-group > .wp-block-group { flex-wrap: nowrap; gap: 0.75rem; flex-shrink: 0; }
	header .wp-block-button__link { padding: 0.7rem 1rem; }

	/* Gear art is a 1:1 box that otherwise fills the full card width, making
	   each card most of a screen tall. */
	.bpro-gear .bpro-art { max-width: 13rem; margin-inline: auto; }

	/* Waitlist capture: field and button stack. */
	.bpro-signup-row > p { flex-direction: column; align-items: stretch; }
	.bpro-signup-row .wpcf7-form-control-wrap input { border-right-width: 1px; }
	.bpro-signup-row input[type="submit"] { width: 100%; }

	/* Menu overlay: core leaves it white, flush to the edge, in 11px type. */
	html body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--bone) !important;
		color: var(--wp--preset--color--graphite);
		padding: var(--wp--preset--spacing--40);
	}
	html body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: var(--wp--preset--spacing--60);
		align-items: flex-start;
	}
	html body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}
	html body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
		justify-content: flex-start;
		border-bottom: 1px solid var(--wp--preset--color--rule);
	}
	html body .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 1rem 0;
		font-size: var(--wp--preset--font-size--large);
		text-align: left;
	}

	/* Footer: link columns sit two-up under the brand, no bullets. */
	footer .wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	}
	footer .wp-block-columns > .wp-block-column { flex-basis: auto !important; min-width: 0; }
	footer .wp-block-columns > .wp-block-column:first-child { grid-column: 1 / -1; }
	footer .wp-block-list { margin: 0.5rem 0 0; padding: 0; list-style: none; }
	footer .wp-block-list li { padding-block: 0.3rem; }
}

@media (max-width: 480px) {
	.bpro-boardintro,
	.bpro-hero { padding-inline: 1.25rem; }
	.bpro-notsold { padding: var(--wp--preset--spacing--30); }
	.bpro-trade { padding: var(--wp--preset--spacing--30); }
}

/* The interest line sits on the dark capture band too, where muted grey is too faint. */
.has-graphite-background-color .bpro-signup-interest { color: #BDB6B0; }