/*
 * Hero: a full-width group block with the class "ll-wolke-hero" that holds [ll_wolke] plus the key concert info.
 * It fills exactly the rest of the screen below the site header (--ll-hero-top is measured by wolke.js),
 * and the cloud shrinks with the screen height so everything fits without scrolling.
 */
.ll-wolke-hero {
	--ll-wolke-bg: #abd8e8;
	--ll-wolke-ink: #eaf2f6;
	--ll-wolke-accent: #f3686e;
	--ll-wolke-text: #103973;
	--ll-hero-h: calc(100svh - var(--ll-hero-top, 100px));
	/* Room the info text + button need below the cloud. */
	--ll-hero-info: 18rem;
	--ll-wolke-w: max(240px, min(92vw, 1000px, (var(--ll-hero-h) - var(--ll-hero-info)) * 1.75));

	box-sizing: border-box;
	min-height: var(--ll-hero-h);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2svh, 1.5rem);
	margin-block-start: 0 !important;
	padding: clamp(1rem, 4svh, 3rem) 1rem !important;
	background: var(--ll-wolke-bg);
	color: var(--ll-wolke-text);
	text-align: center;
	overflow: hidden;
}

.ll-wolke-hero > * {
	margin-block: 0 !important;
}

.ll-wolke-hero > p {
	/* Same handwriting as the cloud letters ("alphabetized cassette tapes"); it runs small, hence the larger size. */
	font-family: 'LLCassette', var(--wp--preset--font-family--body, sans-serif);
	font-size: clamp(1.7rem, 1.45rem + 0.8vw, 2.1rem);
	line-height: 1.2;
}

/* The font has no bold: the first lines (date, place) stand out by size instead. */
.ll-wolke-hero > p:first-of-type {
	font-size: clamp(1.95rem, 1.65rem + 1vw, 2.5rem);
}

.ll-wolke-hero > p strong {
	font-weight: normal;
}

/* The font has no umlauts: wolke.js wraps ä/ö/ü in .ll-uml and the two dots are drawn here. */
.ll-uml {
	position: relative;
	display: inline-block;
	line-height: 1;
}

.ll-uml::before,
.ll-uml::after {
	content: '';
	position: absolute;
	top: 0.36em;
	width: 0.075em;
	height: 0.075em;
	border-radius: 50%;
	background: currentColor;
}

.ll-uml::before {
	left: 18%;
}

.ll-uml::after {
	right: 18%;
}

.ll-wolke-hero .wp-block-button__link {
	padding: 0.45em 1.4em 0.5em;
	font-family: 'LLCassette', var(--wp--preset--font-family--body, sans-serif);
	font-size: clamp(1.7rem, 1.45rem + 0.8vw, 2.1rem) !important;
	font-weight: normal;
	line-height: 1.1;
}

@media (min-width: 782px) {
	.ll-wolke-hero .wp-block-button__link {
		padding: 0.25em 0.9em 0.3em;
	}
}

/* Cloud + falling letters + date */
.ll-wolke {
	text-align: center;
}

.ll-wolke__svg {
	display: block;
	width: var(--ll-wolke-w, min(1000px, 92vw));
	height: auto;
	margin: 0 auto;
	overflow: visible;
}

.ll-wolke__cloud {
	fill: var(--ll-wolke-ink, #eaf2f6);
}

.ll-wolke__letter line {
	stroke: var(--ll-wolke-ink, #eaf2f6);
	stroke-width: 0.75;
	stroke-linecap: round;
}

.ll-wolke__letter text {
	fill: var(--ll-wolke-ink, #eaf2f6);
	font-family: 'LLCloudLetters', sans-serif;
	font-size: 27px;
}

.ll-wolke__date {
	margin: calc(var(--ll-wolke-w, 92vw) * 0.03) 0 0;
	/* Same handwriting font as the page headings (theme font preset). */
	font-family: var(--wp--preset--font-family--covered-by-your-grace, 'Covered By Your Grace', cursive);
	font-size: calc(var(--ll-wolke-w, 92vw) * 0.13);
	line-height: 1;
	color: var(--ll-wolke-accent, #f3686e);
}

/* Hidden until wolke.js starts the drop (noscript fallback in the shortcode shows them). */
.ll-wolke.is-pending .ll-wolke__letter {
	opacity: 0;
}

/* On pages with the cloud hero, the site header takes the hero's sky blue so they read as one surface. */
body:has(.ll-wolke-hero) header.wp-block-template-part > .has-background {
	background-color: #abd8e8 !important;
}

/* Snowfall (snow.js): the canvas paints the sky behind header + hero, which turn transparent on top of it. */
.ll-snow {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	pointer-events: none;
}

body.ll-snow-on .wp-site-blocks > * {
	position: relative;
	z-index: 1;
}

body.ll-snow-on header.wp-block-template-part > .has-background,
body.ll-snow-on .ll-wolke-hero {
	background-color: transparent !important;
}