/* Free Lunch section CSS. Last resort per docs/block-rules.md §11: every rule
   says which rung of the ladder failed. Scoped to section classes. */

/* ladder: core has no per-word font control; italic (<em>) in the hero
   heading is the editable hook, so editors toggle the bite word with ⌘I. */
.fl-hero h1 em {
	font-family: var(--wp--preset--font-family--bite);
	font-style: normal;
	letter-spacing: -0.03em;
}

/* ladder: blocks can't rotate. The sticker is a paragraph with the
   fl-sticker class; its color and padding come from block settings. */
.fl-hero .fl-sticker {
	display: inline-block;
	transform: rotate(-4deg);
	border-radius: 999px;
}

/* ladder: an image can't overflow its section with block settings; the
   cut-out plant spills past the hero's bottom edge into the shop. */
.fl-hero .fl-hero-plant {
	margin-bottom: calc(-1 * var(--wp--preset--spacing--96));
	position: relative;
	z-index: 1;
}

/* ladder: no block setting themes text selection; picked from the palette. */
.fl-hero ::selection,
.fl-header ::selection {
	background: var(--wp--preset--color--nectar);
	color: var(--wp--preset--color--ink);
}

/* ladder: the hero image block's own max-height has no responsive control. */
.fl-hero .fl-hero-plant img {
	max-height: min(80vh, 46rem);
	width: auto;
	margin-inline: auto;
}

/* ladder: the gap between header, main and footer is the root blockGap,
   which is also every block's default gap, so it can't be zeroed in
   theme.json without collapsing spacing everywhere. Sections butt up. */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}