/*
Theme Name: SJB Essen
Description: Block theme for the SJB Essen youth wind orchestra. Child theme of Twenty Twenty-Five.
Author: SJB Essen
Template: twentytwentyfive
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.8.20
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sjb
*/

/*
 * Only CSS that blocks and theme.json cannot express belongs here.
 * Design tokens (colors, fonts, spacing) live in theme.json.
 */

/*
 * Header: mark the current page in the main menu.
 * The navigation block adds .current-menu-item but has no style setting for it.
 */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

/*
 * Mobile menu overlay: left-aligned list with a clear hierarchy.
 * The overlay inherits the desktop menu's right alignment, and the navigation
 * block has no separate alignment setting for the overlay.
 */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
	text-align: left;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	font-weight: 400;
}

/*
 * Header on phones: smaller logo symbol, and the "Mitmachen" button before the
 * menu icon so the icon sits at the edge, where people expect it.
 * The image block has one fixed width, and block order can't differ per screen size.
 * 600px is where the navigation block switches to the mobile menu (the theme shows the
 * menu icon up to 1023px, see "Tablets and narrow windows" below).
 */
/* The logo symbol never shrinks away when space gets tight. */
.sjb-logo {
	flex-shrink: 0;
}

/*
 * Symbol and name both lead to the front page. Blocks can't wrap an image and a
 * paragraph in one link, so the image's link is stretched over the whole brand:
 * still a single link for keyboard and screen reader users.
 * body:not(.editor-styles-wrapper) keeps it out of the editor, where the name must stay editable.
 */
.sjb-brand {
	position: relative;
}

body:not(.editor-styles-wrapper) .sjb-logo a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * No focus ring after a mouse click or tap (it stayed visible until the next page
 * loaded). Twenty Twenty-Five outlines every :focus; keyboard users still get the
 * ring through :focus-visible.
 */
:where(.wp-site-blocks) :focus:not(:focus-visible) {
	outline: none;
}

/* Focus ring around symbol and name, not just the symbol. */
.sjb-brand:has(.sjb-logo a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: 8px;
}

.sjb-logo a:focus-visible {
	outline: none;
}

@media (max-width: 599px) {
	.sjb-logo img {
		width: 52px !important;
	}

	.sjb-header-bar,
	.sjb-header-actions {
		gap: 10px;
	}

	.sjb-brand-name {
		white-space: nowrap;
	}

	.sjb-header-cta {
		order: -1;
	}

	/* Font size and padding are set on the blocks (with !important/inline), hence the overrides. */
	.sjb-brand .sjb-brand-name.has-medium-font-size {
		font-size: 0.8125rem !important;
	}

	.sjb-header-cta .wp-block-button__link {
		white-space: nowrap;
		padding-left: var(--wp--preset--spacing--20) !important;
		padding-right: var(--wp--preset--spacing--20) !important;
	}
}

/* Very narrow phones: the header shows only the symbol next to menu and button. */
@media (max-width: 380px) {
	.sjb-brand .sjb-brand-name {
		display: none;
	}
}

/*
 * Tablets and desktops: on the front page the header lies on top of the hero photo,
 * with the logo on a white tab hanging from the top.
 * Block supports can't position an element over the following block.
 * The admin bar variable keeps it below the toolbar for logged-in users.
 */
@media (min-width: 600px) {
	.sjb-header-overlay {
		position: absolute;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
		z-index: 20;
	}

	/* Top-level menu items in white over the photo; submenus keep their dark text on white. */
	.sjb-header-overlay .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--base);
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	}

	/* A soft shadow makes the white logo tab read as lying on the photo. */
	.sjb-brand-tile {
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	}
}

/*
 * Tablets and narrow windows (600–1023 px, e.g. iPads upright): the menu icon instead of
 * the full menu. With the full menu, below about 965 px the items wrapped into two rows,
 * "Mitmachen" broke mid-word and the name ran out of the white logo tab. The navigation
 * block switches at a fixed 600 px and has no setting for it; 1024 leaves room for a
 * slightly longer menu. As on phones, the button comes first and the icon sits at the edge.
 */
@media (min-width: 600px) and (max-width: 1023px) {
	.sjb-header-actions .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.sjb-header-actions .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.sjb-header-cta {
		order: -1;
	}

	/* Over the photo on the front page: white icon, like the menu items it replaces. */
	.sjb-header-overlay .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--base);
		filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.45));
	}
}

/*
 * Phones: the front page gets the same white bar as all other pages instead of the
 * tab over the photo, so the header can stick to the top like everywhere else.
 * The header pattern's own padding and tab styles are inline, hence !important.
 */
@media (max-width: 599px) {
	.sjb-header-overlay {
		padding-top: var(--wp--preset--spacing--20) !important;
		background-color: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--custom--color--divider);
	}

	.sjb-header-overlay .sjb-brand-tile {
		padding: 0 !important;
		border-radius: 0 !important;
	}

	/*
	 * The header bar slides out of view when scrolling down and comes back when
	 * scrolling up (assets/js/header.js), so the menu is always one tap away
	 * without taking space while reading. Sticky with a negative top: scrolling
	 * down simply moves it out of view, .sjb-header-shown brings it back.
	 * top instead of transform, because a transform would trap the full-screen
	 * mobile menu (position: fixed) inside the header.
	 * Without JavaScript (no height variable) the header just scrolls away.
	 */
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: calc(-1 * var(--sjb-header-height, 100vh));
		z-index: 100;
		transition: top 0.25s ease-out;
	}

	.wp-site-blocks > header.wp-block-template-part.sjb-header-shown {
		top: 0;
	}
}

@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part {
		transition: none;
	}
}

/*
 * Hero on phones and tablets (2026-09-26): the image scrolls with the page, like the page
 * heads on all other pages. Fixed backgrounds don't work in iOS Safari (core already
 * falls back to scrolling there) and are jumpy on Android; a sticky replacement that kept
 * the whole hero in place felt different from every other page. Desktop keeps the effect.
 */
@media (hover: none) {
	.sjb-hero.has-parallax,
	.sjb-hero .wp-block-cover__image-background.has-parallax {
		background-attachment: scroll;
	}
}

/*
 * Hero image size by screen width (sjb_hero_images() in functions.php sets the
 * variables): phones, tablets and laptops get the 1536 px version (1024 px looked soft
 * on iPhones), large screens 2048 px, instead of the full upload. Breakpoints match the
 * preloads.
 */
.sjb-hero .sjb-hero-sized {
	background-image: var(--sjb-hero-l) !important;
}

@media (max-width: 1440px) {
	.sjb-hero .sjb-hero-sized {
		background-image: var(--sjb-hero-m) !important;
	}
}

@media (max-width: 781px) {
	.sjb-hero .sjb-hero-sized {
		background-image: var(--sjb-hero-s) !important;
	}
}

/*
 * Separator style "Welle": the wavy line from the logo (assets/images/welle.svg),
 * drawn in the separator's color via a mask. Short accent by default, full
 * width when set to wide/full.
 */
.wp-block-separator.is-style-sjb-welle {
	width: 120px;
	max-width: 100%;
	height: 12px;
	margin-left: 0;
	border: 0;
	background-color: currentColor;
	-webkit-mask: url(assets/images/welle.svg) center / 100% 100% no-repeat;
	mask: url(assets/images/welle.svg) center / 100% 100% no-repeat;
}

.wp-block-separator.is-style-sjb-welle:not(.has-background):not(.has-text-color) {
	color: var(--wp--preset--color--primary-light);
}

.wp-block-separator.is-style-sjb-welle.alignwide,
.wp-block-separator.is-style-sjb-welle.alignfull {
	width: 100%;
	height: 20px;
}

/* Setup hint for administrators (missing synced pattern or setting): visible, so nobody overlooks it. */
.sjb-setup-hint {
	padding: var(--wp--preset--spacing--30);
	border: 2px dashed currentColor;
	border-radius: 16px;
}

/*
 * Page hero (page/post templates): featured image behind the title.
 * Without a featured image the cover has no photo; show a solid brand color instead
 * (the cover block has no "fallback color" setting).
 */
.sjb-page-hero:not(:has(.wp-block-cover__image-background)) {
	/* No photo to show: a compact title band instead of a tall empty area. */
	min-height: 0 !important;
	background-color: var(--wp--preset--color--primary-dark);
}

.sjb-page-hero:not(:has(.wp-block-cover__image-background)) > .wp-block-cover__background {
	opacity: 0 !important;
}

/* Dates in the hero: theme.json colors them gray for white backgrounds. */
.sjb-page-hero .wp-block-post-date {
	color: inherit;
}

/*
 * Page content below the hero: plain blocks (not full-width sections) get breathing room
 * at the start and end; full-width sections bring their own padding.
 */
.sjb-page-content > :first-child:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--60);
}

.sjb-page-content > :last-child:not(.alignfull) {
	margin-bottom: var(--wp--preset--spacing--70);
}

/*
 * Full-width sections sit directly on top of each other; the block gap would leave
 * white stripes between colored sections.
 */
.wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/*
 * Two sections with the same background in a row: without a color change their paddings
 * add up to one big empty band (up to 180px on desktop). The second one starts closer.
 * Not after a section that already ends with little space (e.g. "Einleitung").
 * !important: the section's padding is an inline style from the pattern.
 */
.wp-block-post-content > .wp-block-group.alignfull:not([class*="is-style-sjb-"]):not([style*="padding-bottom:var(--wp--preset--spacing--30)"]) + .wp-block-group.alignfull:not([class*="is-style-sjb-"]),
.wp-block-post-content > .is-style-sjb-hellgrau:not([style*="padding-bottom:var(--wp--preset--spacing--30)"]) + .is-style-sjb-hellgrau,
.wp-block-post-content > .is-style-sjb-lila + .is-style-sjb-lila,
.wp-block-post-content > .is-style-sjb-dunkellila + .is-style-sjb-dunkellila,
.wp-block-post-content > .is-style-sjb-anthrazit + .is-style-sjb-anthrazit {
	padding-top: var(--wp--preset--spacing--30) !important;
}

/*
 * "Weg ins Orchester": numbered steps in brand circles, connected by the logo's
 * wavy line when all six fit in one row. Paragraph blocks have no width/shape
 * settings for the circles, and a line behind a grid needs a pseudo-element.
 */
/* ".sjb-weg" in front: beats core's padding for paragraphs with a background. */
.sjb-weg .sjb-weg-nr {
	display: flex;
	padding: 0;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0;
	border-radius: 50%;
	line-height: 1;
	position: relative;
	z-index: 1;
}

.sjb-weg-schritt .wp-block-heading a {
	text-decoration: none;
}

.sjb-weg-schritt .wp-block-heading a:hover {
	text-decoration: underline;
}

@media (min-width: 1100px) {
	.sjb-weg {
		position: relative;
	}

	.sjb-weg::before {
		content: "";
		position: absolute;
		top: calc(1.5rem - 8px);
		left: 1.5rem;
		right: 1.5rem;
		height: 16px;
		background-color: var(--wp--preset--color--primary-light);
		-webkit-mask: url(assets/images/welle.svg) center / 100% 100% no-repeat;
		mask: url(assets/images/welle.svg) center / 100% 100% no-repeat;
	}
}

/* Tiles (e.g. instruments): the whole tile reacts on hover, the link is the heading. */
.sjb-kachel {
	transition: background-color 0.15s ease;
}

.sjb-kachel:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--surface)) !important;
}

.sjb-kachel .wp-block-heading a {
	text-decoration: none;
}

/*
 * Front page chooser "Mitmachen, zuhören, unterstützen" (section anchor #mitmachen, set in
 * the pattern): each card is one link. The card's own link ("Zur Musikschule →") is
 * stretched over the whole card, so a tap anywhere opens it; the card reacts like the
 * instrument tiles. Blocks can't make a whole group a link.
 */
#mitmachen .is-layout-grid > .has-background {
	position: relative;
	transition: background-color 0.15s ease;
}

#mitmachen .is-layout-grid > .has-background:is(:hover, :active) {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--surface)) !important;
}

#mitmachen .is-layout-grid > .has-background p:last-child a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 16px;
}

/* Keyboard focus: the ring goes around the card, not the (stretched) link text. */
#mitmachen .is-layout-grid > .has-background p:last-child a:focus-visible {
	outline: none;
}

#mitmachen .is-layout-grid > .has-background:has(p:last-child a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/*
 * Phones: six cards one below the other meant a lot of scrolling (feedback 2026-10-12).
 * Two compact tiles per row with only the title and an arrow; the description and the
 * link line are hidden (the link text stays for screen readers, its stretched area
 * makes the tile tappable). Tablets and desktops keep the full cards.
 */
@media (max-width: 599px) {
	#mitmachen .is-layout-grid:has(> .has-background) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#mitmachen .is-layout-grid > .has-background {
		justify-content: space-between !important;
		padding: var(--wp--preset--spacing--30) !important;
	}

	/* Small enough that "Musikunterricht" fits a tile without being hyphenated. */
	#mitmachen .is-layout-grid > .has-background h3 {
		font-size: var(--wp--preset--font-size--medium) !important;
		-webkit-hyphens: manual;
		hyphens: manual;
	}

	#mitmachen .is-layout-grid > .has-background > p:not(:last-child) {
		display: none;
	}

	#mitmachen .is-layout-grid > .has-background p:last-child {
		margin-top: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--x-large);
		line-height: 1;
	}

	/*
	 * Only the arrow stays visible: the label text gets no size, the arrow is drawn instead.
	 * No underline in any state: the theme underlines links on hover and focus, and a tap
	 * briefly showed it under the arrow. The tile's color change is the feedback.
	 */
	#mitmachen .is-layout-grid > .has-background p:last-child a,
	#mitmachen .is-layout-grid > .has-background p:last-child a:is(:hover, :focus, :active) {
		font-size: 0;
		text-decoration: none !important;
	}

	#mitmachen .is-layout-grid > .has-background p:last-child a::before {
		content: "→";
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* Videos: rounded like all images; the embed block has no border radius setting. */
.sjb-video iframe,
.wp-block-embed.is-type-video iframe {
	border-radius: 16px;
}

/*
 * A column that renders empty (an image block without a file, e.g. no portrait yet;
 * WordPress then outputs nothing) disappears, so the text takes the full width.
 */
.wp-block-column:empty {
	display: none;
}

/*
 * Complianz (cookie consent plugin on the site): banner, "manage consent" tab and
 * video placeholders in brand style. Complianz defines its colors as CSS variables on
 * :root; setting them on its own containers overrides the plugin defaults without
 * touching its settings. Has no effect when Complianz isn't installed.
 */
#cmplz-cookiebanner-container,
#cmplz-manage-consent {
	--cmplz_button_accept_background_color: var(--wp--preset--color--primary);
	--cmplz_button_accept_border_color: var(--wp--preset--color--primary);
	--cmplz_button_accept_text_color: var(--wp--preset--color--base);
	--cmplz_button_deny_background_color: var(--wp--preset--color--surface);
	--cmplz_button_deny_border_color: var(--wp--preset--color--surface);
	--cmplz_button_deny_text_color: var(--wp--preset--color--contrast);
	--cmplz_button_settings_background_color: var(--wp--preset--color--surface);
	--cmplz_button_settings_border_color: var(--wp--preset--color--surface);
	--cmplz_button_settings_text_color: var(--wp--preset--color--contrast);
	--cmplz_hyperlink_color: var(--wp--preset--color--primary);
	--cmplz_slider_active_color: var(--wp--preset--color--primary);
	--cmplz_text_color: var(--wp--preset--color--contrast);
	--cmplz_banner_border_radius: 16px;
	--cmplz_button_border_radius: 999px;
	font-family: var(--wp--preset--font-family--roboto);
}

#cmplz-cookiebanner-container .cmplz-title {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-weight: 700;
}

/* Placeholder button on a blocked video: brand button instead of Complianz's gray box. */
.wp-block-embed .cmplz-blocked-content-notice {
	max-width: 22rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	font-family: inherit;
	font-weight: 500;
	line-height: 1.4;
}

.wp-block-embed .cmplz-blocked-content-notice:hover,
.wp-block-embed .cmplz-blocked-content-notice:focus {
	background-color: var(--wp--preset--color--primary-dark);
}

.wp-block-embed .cmplz-placeholder-element {
	border-radius: 16px;
}

/*
 * Desktop dropdowns (main menu): the panel opens under its menu item so the submenu
 * labels start exactly below the parent label, with a fixed minimum width, rounded
 * corners, a soft shadow and brand-colored hover.
 * Core aligns the submenus of a right-aligned menu to the item's right edge, so where
 * the text starts depends on the label lengths; the navigation block has no setting for it.
 * --sjb-menu-inset = panel padding + item padding, so the text columns line up.
 */
@media (min-width: 600px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) {
		--sjb-menu-inset: calc(0.5rem + 0.875rem);
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		left: calc(-1 * var(--sjb-menu-inset)) !important;
		right: auto !important;
		min-width: 17rem !important;
		padding: 0.5rem;
		border: 0 !important;
		border-radius: 12px;
		background-color: var(--wp--preset--color--base) !important;
		box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0.625rem 0.875rem !important;
		border-radius: 8px;
		font-weight: 400;
		white-space: nowrap;
		color: var(--wp--preset--color--contrast) !important;
		text-shadow: none !important;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: color-mix(in srgb, var(--wp--preset--color--primary) 10%, var(--wp--preset--color--base));
		color: var(--wp--preset--color--primary) !important;
	}

	.wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--primary) !important;
		font-weight: 500;
		text-decoration: none;
		background-color: color-mix(in srgb, var(--wp--preset--color--primary) 6%, var(--wp--preset--color--base));
	}
}

/*
 * Footer menu ("Footer-Menü"): theme.json styles the navigation block for the header
 * (Roboto Condensed, medium size, dark links). In the dark footer it has to look like
 * the other footer links: body font and size, white, underlined like text links.
 */
.sjb-footer-nav.wp-block-navigation {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	gap: var(--wp--style--block-gap, 1.2rem);
}

.sjb-footer-nav .wp-block-navigation-item__content,
.sjb-footer-nav .wp-block-navigation-item__content:hover {
	color: inherit;
	text-decoration: underline;
}

.sjb-footer-nav .wp-block-navigation-item__content:hover {
	text-decoration-thickness: 2px;
}

/* Current page in the footer menu: bold instead of the header's purple, which is unreadable on the dark footer. */
.sjb-footer-nav .current-menu-item > .wp-block-navigation-item__content {
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}

/*
 * "Cookie-Einstellungen" in the footer (functions.php, sjb_consent_link()): a button,
 * because it opens a dialog, but it has to look like the links next to it.
 */
.sjb-consent-link {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	font: inherit;
	text-align: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.sjb-consent-link:hover {
	text-decoration-thickness: 2px;
}

/*
 * Person list (pattern "Vorstand"): the round photo keeps its size next to long
 * names; the image block's width setting alone lets flexbox shrink it.
 */
.sjb-person .sjb-person-foto {
	flex-shrink: 0;
	margin: 0;
}

/*
 * The same entry stands alone in the contact sections: there the divider line and its
 * spacing belong to lists only (entries in a grid). The block's own values are inline.
 */
:where(:not(.is-layout-grid)) > .sjb-person {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-bottom-width: 0 !important;
}

/*
 * Kontakt sections: text on the left, the contact person with button on a card on the
 * right (DESIGN.md §6, variant A). The card is a light veil of the text color, so it
 * works on every section color without an extra palette color.
 */
.sjb-kontakt-karte {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

/*
 * "Adresse kopieren" after the written-out address on contact cards (assets/js/kontakt.js).
 * A small outlined pill in the text color, so it works on every section color and stays
 * quieter than the main "E-Mail schreiben" button.
 */
.sjb-copy-mail {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0.1em 0.75em;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 9999px;
	cursor: pointer;
	vertical-align: baseline;
	white-space: nowrap;
}

.sjb-copy-mail:hover {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.sjb-copy-mail:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* On dark sections the function line is white like the rest of the text, not Lila. */
:is(.is-style-sjb-lila, .is-style-sjb-dunkellila, .is-style-sjb-anthrazit) .sjb-person-funktion {
	color: inherit !important;
}

/*
 * File downloads (e.g. Aufnahmeantrag, Satzung): each file is a card in the style of the
 * contact card next to it (veil of the text color, rounded), file name on the left, the
 * button on the right edge. Before, the buttons followed the file names of different
 * length and didn't line up (feedback 2026-10-12). When the line is too narrow, the button
 * wraps below the name and stays on the right; on phones it sits on the left.
 */
.wp-block-file:not(.wp-element-button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--30);
	border-radius: 16px;
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.wp-block-file > a:not(.wp-block-file__button) {
	font-weight: 500;
}

.wp-block-file .wp-block-file__button {
	margin-left: auto;
	white-space: nowrap;
}

/* Phones: name above, button below on the left, like "E-Mail schreiben" in the contact card. */
@media (max-width: 599px) {
	.wp-block-file .wp-block-file__button {
		margin-left: 0;
	}
}

/*
 * Details block ("aufklappbarer Bereich", e.g. the extended board): the summary reads
 * like a heading, with the toggle arrow in brand color. The block has no typography
 * settings for its summary line.
 */
.wp-block-details > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2;
}

.wp-block-details > summary::marker {
	color: var(--wp--preset--color--primary);
}

.wp-block-details[open] > summary {
	margin-bottom: var(--wp--preset--spacing--30);
}

/*
 * "Einleitung": the lead is a short key statement (at most about eight words, the rest of
 * the intro goes into the text beside it; handbook). It reads as a sub-heading: heading
 * font, bold, in Lila (feedback 2026-10-12). Lila on white and Hellgrau passes AA; an
 * intro on a dark section keeps its white text.
 */
.sjb-page-content > section.alignfull:first-child > .wp-block-group.alignwide > p.has-x-large-font-size:first-child {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-weight: 700;
	line-height: 1.2;
}

.sjb-page-content > section.alignfull:first-child:not(.is-style-sjb-lila, .is-style-sjb-dunkellila, .is-style-sjb-anthrazit) > .wp-block-group.alignwide > p.has-x-large-font-size:first-child {
	color: var(--wp--preset--color--primary);
}

/*
 * "Einleitung" on wide screens (decided 2026-09-26, variant A): the lead text on the left,
 * further text and buttons on the right, like the Textabschnitt sections. Without this
 * the intro filled only the left half of the page. Only when there is more than the lead;
 * phones and tablets keep one column. !important: the constrained layout sets width and
 * margins on every child.
 */
@media (min-width: 1000px) {
	.sjb-page-content > section.alignfull:first-child > .wp-block-group.alignwide:has(> p.has-x-large-font-size:first-child + *) {
		display: grid;
		grid-template-columns: 5fr 7fr;
		column-gap: var(--wp--preset--spacing--60);
		align-items: start;
	}

	.sjb-page-content > section.alignfull:first-child > .wp-block-group.alignwide:has(> p.has-x-large-font-size:first-child + *) > * {
		grid-column: 2;
		max-width: none !important;
		margin: 0 0 var(--wp--preset--spacing--30) !important;
	}

	.sjb-page-content > section.alignfull:first-child > .wp-block-group.alignwide:has(> p.has-x-large-font-size:first-child + *) > p.has-x-large-font-size:first-child {
		grid-column: 1;
		grid-row: 1 / span 20;
		margin: 0 !important;
	}
}

/*
 * The last section sits directly on the footer. The root block gap would leave a white
 * stripe between a colored section and the dark footer. Pages that end with plain
 * text get their space from .sjb-page-content > :last-child above.
 */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/*
 * Images with a fixed aspect ratio but no set width (e.g. teacher cards) fill their
 * column. Without this, a small file (like the 300px placeholder portrait) stays at its
 * own size and the cards in a row don't match. Resized images keep their width.
 */
.wp-block-image:not(.is-resized) img[style*="aspect-ratio"]:not([width]) {
	width: 100%;
}

/*
 * In a vertical stack (teacher card) the figure's height is worked out from the file's
 * own size before the image above is widened, so a small file overlaps the name below.
 * A full-width figure gets the right height.
 */
.is-layout-flex.is-vertical > .wp-block-image:not(.is-resized) {
	width: 100%;
}

/*
 * Phones: long German words ("Instrumentalunterricht", "Hintergrundinformationen") would
 * run over the edge in big text. Headings hyphenate; paragraphs only break a word that
 * doesn't fit at all (automatic hyphenation there also split names like "Essen-Borbeck").
 * The lead text of "Einleitung" (x-large) would fill the whole screen; one step smaller
 * there. !important: the preset class sets the size with !important.
 */
@media (max-width: 599px) {
	h1,
	h2,
	h3 {
		-webkit-hyphens: auto;
		hyphens: auto;
	}

	h1,
	h2,
	h3,
	p {
		overflow-wrap: break-word;
	}

	p.has-x-large-font-size {
		font-size: 1.375rem !important;
	}

	/* Instrument tiles (short labels): two per row instead of a list of twelve. */
	.wp-block-group.is-layout-grid:has(> .sjb-kachel) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Order form (Contact Form 7, ticket orders for the Weihnachtskonzert). CF7 ships
 * unstyled browser fields; theme.json can't reach plugin markup. The form template
 * (CF7 → Formular) uses .sjb-feld per field; CF7 adds no <p>/<br> (functions.php).
 * Field borders use Schiefergrau: input boundaries need 3:1 contrast, the divider
 * token is too faint for that.
 */
.wpcf7-form {
	display: grid;
	gap: 1.5rem;
	max-width: 36rem;
}

.wpcf7-form .sjb-feld {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	min-width: 0;
	border: 0;
}

.wpcf7-form .sjb-feld > label,
.wpcf7-form .sjb-feld > legend {
	padding: 0;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.wpcf7-form .sjb-feld > label {
	margin-bottom: 0;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="number"] {
	box-sizing: border-box;
	width: 100%;
	padding: 0.75rem 1rem;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 0.5rem;
}

.wpcf7-form input[type="number"] {
	width: 7rem;
}

.wpcf7-form input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--primary);
}

.wpcf7-form .sjb-feld-hinweis,
.wpcf7-form .sjb-formular-hinweis {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--secondary);
}

/* Performances as large tappable cards, one per row; the chosen one is outlined in Lila. */
.wpcf7-form .wpcf7-radio {
	display: grid;
	gap: 0.5rem;
}

.wpcf7-form .wpcf7-list-item {
	display: block;
	margin: 0;
}

.wpcf7-form .wpcf7-radio label {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 0.5rem;
	cursor: pointer;
}

.wpcf7-form .wpcf7-radio label:has(input:checked) {
	border-color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}

.wpcf7-form input[type="radio"],
.wpcf7-form input[type="checkbox"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	accent-color: var(--wp--preset--color--primary);
}

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	cursor: pointer;
}

.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 0.2em;
}

.wpcf7-form .sjb-absenden {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.wpcf7-form .wpcf7-submit {
	border-radius: 9999px; /* Pill like the button block; the element style alone is square. */
	cursor: pointer;
}

.wpcf7-form .wpcf7-not-valid-tip {
	font-size: var(--wp--preset--font-size--small);
}

/* CF7's success/error box: same rounded corners as the fields, no extra outer margin. */
.wpcf7-form .wpcf7-response-output {
	margin: 0 !important;
	padding: 1rem !important;
	border-radius: 0.5rem;
}