/*
 * AMK theme: the rules theme.json cannot express.
 * Loaded on the front end and in the editor; rules scoped to .wp-site-blocks
 * only match the front end.
 */

/* ------------------------------------------------------------------ Base */

/* Keep anchors and focused elements clear of the sticky header. */
html {
	scroll-padding-top: 6rem;
}

/* Long URLs and rows of symbols in older posts must not widen the page on phones. */
body {
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

/*
 * Headings are not hyphenated automatically: browsers with a German
 * dictionary would split ordinary words such as "afrikanischen" just to fill
 * a line. Only the big titles on phones may hyphenate, and only very long
 * compounds ("Zukunftswerkstatt", "Entwicklungspolitische"), which would not
 * fit on a line of their own. Browsers that cannot limit hyphenation to long
 * words (Safari) do not hyphenate at all.
 */
:where(h1, h2, h3) {
	overflow-wrap: break-word;
	text-wrap: balance;
}

@supports (hyphenate-limit-chars: 15 6 6) {
	@media (max-width: 600px) {
		:where(.wp-block-post-title, .amk-slide__content .wp-block-heading) {
			hyphens: auto;
			hyphenate-limit-chars: 15 6 6;
		}
	}
}

/* A ring in the current text colour stays visible on light and dark backgrounds. */
:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/*
 * Post content spans the full width so wide and full-width blocks can break
 * out; left/right floated blocks stay at the edges of the text column.
 */
.wp-block-post-content.alignfull > .alignleft {
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

.wp-block-post-content.alignfull > .alignright {
	margin-inline-end: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2));
}

/* Templates with coloured sections and bands: the footer sits right below them. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------- Header */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000; /* Above core's image lightbox trigger (100), below the admin bar. */
	border-bottom: 1px solid #e6ecf2;
}

/*
 * The frosted background sits on a pseudo-element: a backdrop-filter on the
 * header itself would make it the containing block of the fixed overlay
 * menu, which would then be cut off at the header's height.
 */
.wp-site-blocks > header.wp-block-template-part::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgb(255 255 255 / 0.92);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	backdrop-filter: saturate(180%) blur(10px);
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0);
}

/* On very low screens (landscape phones, high zoom) the header scrolls away. */
@media (max-height: 500px) {
	.wp-site-blocks > header.wp-block-template-part {
		position: relative; /* Not static: it stays the frame of its frosted background. */
	}
}

.amk-logo {
	flex-shrink: 0; /* The menu items give way, never the logo. */
}

.amk-logo img {
	display: block;
	width: auto;
	height: 56px;
	aspect-ratio: 640 / 264;
	border-radius: 6px;
}

@media (max-width: 959px) {
	.amk-logo img {
		height: 44px;
	}
}

.amk-header-actions .wp-block-navigation__container {
	gap: 0.25rem;
}

.amk-header-actions .wp-block-navigation-item__content {
	padding: 0.5rem 0.75rem;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.amk-header-actions .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--surface);
}

.amk-header-actions .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--tint);
}

.amk-header-actions .wp-block-button__link {
	min-height: 2.5rem;
	padding: 0.5rem 1.25rem;
	white-space: nowrap;
}

/*
 * Overlay menu (phones): big tap targets. No display value here: core hides
 * the open button on wide screens, and this rule would win over core's.
 */
.amk-header-actions .wp-block-navigation__responsive-container-open,
.amk-header-actions .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

/* Core gives the close button no display value; it only shows inside the open overlay. */
.amk-header-actions .wp-block-navigation__responsive-container-close {
	display: flex;
}

.amk-header-actions .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: 0.75rem 0;
	font-size: 1.375rem;
	font-weight: 700;
	border-radius: 0;
	background: none;
}

@media (max-width: 360px) {
	.wp-site-blocks .amk-header-actions {
		gap: 0.5rem;
	}

	.amk-header-actions .wp-block-button__link {
		padding-inline: 0.875rem;
	}
}

/*
 * Core switches the navigation to the overlay menu below 600px. With logo,
 * four menu items, the language switcher and the "Spenden" button the bar
 * needs about 950px (French), so the overlay is used below 960px. These are
 * core's own selectors: re-check after core updates.
 */
@media (max-width: 959px) {
	.wp-site-blocks .amk-header-actions .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: inline-flex;
	}

	.wp-site-blocks .amk-header-actions .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Language switcher (AMK Bausteine): short codes next to the menu. */
.amk-sprachwahl ul {
	display: flex;
	gap: 0.125rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.amk-sprachwahl a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	min-height: 2.25rem;
	padding: 0 0.375rem;
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.amk-sprachwahl a:hover {
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--surface);
}

/* The current language is marked by more than colour: bold and outlined. */
.amk-sprachwahl a[aria-current] {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 800;
	background: var(--wp--preset--color--tint);
	box-shadow: inset 0 0 0 1.5px currentColor;
}

/*
 * In the HTML the switcher comes before the menu, as it appears on phones
 * (logo, languages, menu button). On wide screens the menu moves first.
 */
@media (min-width: 960px) {
	.amk-header-actions > .wp-block-navigation {
		order: -1;
	}
}

/*
 * Small phones: a smaller logo and a tighter switcher keep the bar on one
 * line. The "Spenden" button gives way there; the footer links to the page.
 */
@media (max-width: 420px) {
	.amk-logo img {
		height: 36px;
	}

	.amk-sprachwahl ul {
		gap: 0;
	}

	.amk-sprachwahl a {
		min-width: 2rem;
		padding: 0;
		letter-spacing: 0;
	}

	.amk-header-actions .wp-block-buttons {
		display: none;
	}
}

/* Submenu toggles get at least a 24px target (WCAG 2.5.8). */
.wp-block-navigation .wp-block-navigation-submenu__toggle {
	min-width: 24px;
	min-height: 24px;
}

/* --------------------------------------------------------------- Buttons */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: calc(0.8125rem - 1.5px) calc(1.375rem - 1.5px);
	border: 1.5px solid #cbd5e0;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--surface);
}

/* Text link with an arrow, e.g. "Alle Projekte". */
.amk-more-link a {
	font-weight: 700;
	text-decoration: none;
}

/* The arrow is decoration and not read out. */
.amk-more-link a::after {
	content: " →";
	content: " →" / "";
}

.amk-more-link a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------- Section typography */

/* Paragraph style "Kurzzeile": small blue line above a heading. */
.is-style-amk-eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.is-style-amk-eyebrow + .wp-block-heading {
	margin-block-start: 0.5rem;
}

.amk-section-intro {
	max-width: 40rem;
	color: var(--wp--preset--color--muted);
	font-size: 1.125rem;
	line-height: 1.6;
}

/* Date, place or region in cards and teasers. */
.amk-meta {
	color: var(--wp--preset--color--muted);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* --------------------------------------------------------------- Cards */

/* Group style "Karte": white tile; a photo at the top runs to the edges. */
.is-style-amk-card {
	--amk-card-pad: 1.5rem;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	overflow: hidden;
	padding: var(--amk-card-pad);
	border: 1px solid #e3e9ef;
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* On grey sections a soft shadow separates the tile instead of a line. */
.has-surface-background-color .is-style-amk-card {
	border-color: transparent;
	box-shadow: 0 1px 2px rgb(23 32 43 / 0.05);
}

.is-style-amk-card > * {
	margin-block: 0;
}

.is-style-amk-card > :is(.wp-block-image, .wp-block-post-featured-image):first-child {
	margin: calc(var(--amk-card-pad) * -1) calc(var(--amk-card-pad) * -1) 0.625rem;
}

.is-style-amk-card > :is(.wp-block-image, .wp-block-post-featured-image):first-child img {
	width: 100%;
	border-radius: 0;
}

/* Photos in hand-made cards get one format, so the cards in a row line up. */
.is-style-amk-card > .wp-block-image:first-child img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Cards in a query loop sit inside list items: fill them, so all cards in a row are equally tall. */
.wp-block-post > .is-style-amk-card {
	box-sizing: border-box;
	height: 100%;
}

.is-style-amk-card :is(.wp-block-heading, .wp-block-post-title) {
	font-size: 1.25rem;
	line-height: 1.3;
}

.is-style-amk-card :is(.wp-block-heading, .wp-block-post-title) a {
	color: inherit;
	text-decoration: none;
}

.is-style-amk-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--muted);
}

.is-style-amk-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/*
 * Front end only (the editor needs every block clickable): the heading link
 * covers the whole card, so the card is one big click target. Other links in
 * the card stay clickable above it.
 */
.wp-site-blocks .is-style-amk-card :is(.wp-block-heading, .wp-block-post-title) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.wp-site-blocks .is-style-amk-card :where(p, li) a {
	position: relative;
	z-index: 1;
}

.is-style-amk-card:has(:is(.wp-block-heading, .wp-block-post-title) a):hover {
	box-shadow: 0 12px 32px rgb(23 32 43 / 0.1);
	transform: translateY(-2px);
}

.is-style-amk-card:has(:is(.wp-block-heading, .wp-block-post-title) a):hover :is(.wp-block-heading, .wp-block-post-title) a {
	color: var(--wp--preset--color--primary-dark);
}

/* Ring around the whole card instead of the heading; browsers without :has() keep the link's own ring. */
@supports selector(:has(*)) {
	.wp-site-blocks .is-style-amk-card :is(.wp-block-heading, .wp-block-post-title) a:focus-visible {
		outline: none;
	}

	.wp-site-blocks .is-style-amk-card:has(:is(.wp-block-heading, .wp-block-post-title) a:focus-visible) {
		outline: 3px solid var(--wp--preset--color--primary);
		outline-offset: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-style-amk-card:has(:is(.wp-block-heading, .wp-block-post-title) a):hover {
		transform: none;
	}
}

/* Overview cards of pages without a featured image: light tile with the logo. */
.amk-card-image--placeholder {
	background: var(--wp--preset--color--tint) url("../images/amk-logo.jpg") center / 5.5rem auto no-repeat;
}

/*
 * … or, when the page has a year, a blue tile with the year in large type.
 * Hand-made cards without a photo can have the same tile: a group with the
 * class "amk-card-tile" holding one paragraph, as the first block of the card.
 */
.is-style-amk-card > .amk-card-tile:first-child {
	aspect-ratio: 3 / 2;
	margin: calc(var(--amk-card-pad) * -1) calc(var(--amk-card-pad) * -1) 0.625rem;
}

.amk-card-image--year,
.amk-card-tile {
	display: flex;
	align-items: flex-end;
	box-sizing: border-box;
	padding: 1.25rem 1.5rem;
	background:
		radial-gradient(circle at 85% 15%, rgb(255 255 255 / 0.16) 0 18%, transparent 18.5%),
		radial-gradient(circle at 100% 0%, rgb(255 255 255 / 0.08) 0 38%, transparent 38.5%),
		linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--primary-dark) 100%);
}

.amk-card-tile > p {
	margin: 0;
}

.amk-card-image--year span,
.amk-card-tile > p {
	color: var(--wp--preset--color--base);
	font-size: clamp(2.5rem, 2rem + 2vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Homepage */

.amk-stats {
	display: grid;
	gap: 1.75rem;
	padding: 2rem;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.amk-stats > *,
.amk-stat > * {
	margin-block: 0;
}

.amk-stat__value {
	color: var(--wp--preset--color--primary);
	font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.amk-stat__label {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.amk-feature {
	align-items: center;
	margin-block-end: var(--wp--preset--spacing--50);
}

.amk-feature .wp-block-image img {
	width: 100%;
	border-radius: 16px;
}

.amk-feature .wp-block-heading {
	font-size: 1.75rem;
	line-height: 1.2;
}

.amk-facts {
	padding-left: 1.25rem;
}

.amk-facts li + li {
	margin-top: 0.25rem;
}

.amk-facts li::marker {
	color: var(--wp--preset--color--accent-dark);
}

/* ----------------------------------------------------------- About page */

.amk-about-hero__title {
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.amk-about-hero__roots {
	color: var(--wp--preset--color--muted);
}

.amk-about-hero__media .wp-block-image img {
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 24px 48px rgb(23 32 43 / 0.14);
}

/* The figures sit in a white band between the hero and the text, each with a light tile. */
.amk-about-stats .amk-stat {
	padding: 1.5rem;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.amk-about-stats .amk-stat__value {
	font-size: clamp(2rem, 1.7rem + 1vw, 2.5rem);
}

/* Phones: two tiles per row instead of four tall ones. */
@media (max-width: 480px) {
	.amk-about-stats .amk-stat {
		padding: 1rem;
	}

	.amk-about-stats .amk-stat__value {
		font-size: 1.625rem;
	}

	.amk-about-stats .amk-stat__label {
		font-size: 0.875rem;
	}
}

.amk-motto {
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 20px;
}

.amk-motto > * {
	margin-block: 0;
}

.amk-motto > * + * {
	margin-block-start: 0.75rem;
}

.amk-motto .amk-motto__label {
	color: rgb(255 255 255 / 0.75);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.amk-motto .amk-motto__text {
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.amk-motto p:last-child {
	color: rgb(255 255 255 / 0.85);
}

/* Small running number above the cards of a numbered grid; decorative, so not read out. */
.amk-numbered {
	counter-reset: amk-card;
}

.amk-numbered > .is-style-amk-card {
	counter-increment: amk-card;
}

.amk-numbered > .is-style-amk-card::before {
	content: counter(amk-card, decimal-leading-zero);
	content: counter(amk-card, decimal-leading-zero) / "";
	color: var(--wp--preset--color--primary);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

/* Dark band with one large sentence. */
.amk-statement .is-style-amk-eyebrow {
	color: rgb(255 255 255 / 0.75);
}

.amk-statement .amk-statement__quote {
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.amk-statement .amk-statement__text {
	color: rgb(255 255 255 / 0.85);
	font-size: 1.125rem;
	line-height: 1.6;
}

/* Lists shown as rounded labels, e.g. networks and funders. */
.amk-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.amk-chips li {
	margin: 0;
	padding: 0.5rem 0.875rem;
	border-radius: 999px;
	color: var(--wp--preset--color--primary-dark);
	background: var(--wp--preset--color--tint);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
}

/* Funders: long names, so tiles in a grid rather than rounded labels. */
.amk-funders {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.amk-funders li {
	margin: 0;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	font-weight: 600;
	line-height: 1.45;
}

.amk-award {
	gap: clamp(1.25rem, 3vw, 2.5rem);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 20px;
}

.amk-award > * {
	margin-block: 0;
}

.amk-award .amk-award__badge {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	font-size: 1.375rem;
	font-weight: 800;
	text-align: center;
}

.amk-award .amk-award__body {
	flex: 1 1 20rem;
}

.amk-award .amk-award__body > * {
	margin-block: 0;
}

/* A section heading of its own, at the size of a card heading. */
.amk-award .amk-award__title {
	font-size: 1.375rem;
	line-height: 1.3;
}

/* Years and steps: the year in its own column, thin grey rules between the steps. */
.amk-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.amk-timeline li {
	display: grid;
	grid-template-columns: 6rem 1fr;
	gap: 1rem;
	margin: 0;
	padding-block: 1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	line-height: 1.55;
}

.amk-timeline li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.amk-timeline strong {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.amk-timeline a {
	font-weight: 600;
}

.amk-timeline .amk-meta {
	display: block;
	margin-top: 0.125rem;
}

@media (max-width: 480px) {
	.amk-timeline li {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
}

/* --------------------------------------------------------- Page heads */

/* Overview pages and normal pages: title (and intro or fact sheet) in a light band. */
.amk-page-head .wp-block-post-title {
	margin: 0;
}

.amk-page-head .amk-page-intro {
	max-width: 40rem;
	color: var(--wp--preset--color--muted);
	font-size: 1.1875rem;
	line-height: 1.6;
}

.amk-page-head .amk-page-intro p {
	margin: 0;
}

/* Normal pages: long titles stay compact. */
.amk-page-head--text .wp-block-post-title {
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
}

/* The fact sheet stands on white inside the grey band. */
.amk-page-head .amk-steckbrief:not(.amk-steckbrief--compact) {
	margin-block-end: 0;
	background: var(--wp--preset--color--base);
}

/* ------------------------------------------------- Project and event pages */

/* Paragraph style "Einleitung": the opening paragraph, a size larger. */
.is-style-amk-lead {
	font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
	line-height: 1.6;
}

/* Photos in page text: rounded like the cards. */
.wp-block-post-content .wp-block-image img,
.wp-block-post-content .wp-block-media-text__media img {
	border-radius: 12px;
}

/* Large photo right below the head, as wide as the cards on overview pages. */
.wp-block-post-content .wp-block-image.amk-titelbild img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 20px;
}

/* Invitation flyer: a small framed picture beside the text; it enlarges on click. */
.wp-block-post-content .wp-block-image.amk-flyer img {
	border-radius: 8px;
	box-shadow: 0 12px 32px rgb(23 32 43 / 0.14);
}

/* The right margin keeps it at the edge of the text column (see .alignright above). */
.wp-block-post-content .wp-block-image.amk-flyer.alignright {
	max-width: min(42%, 15rem);
	margin-block: 0.375rem 1rem;
	margin-inline-start: 2rem;
}

@media (max-width: 600px) {
	.wp-block-post-content .wp-block-image.amk-flyer.alignright {
		float: none;
		max-width: 15rem;
		margin-inline: 0;
	}
}

.wp-block-post-content .wp-block-image.amk-flyer figcaption {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
}

/* Key figures: tiles with a large number and a short line of text. */
.amk-kennzahlen .amk-stat {
	padding: 1.25rem 1.25rem 1.375rem;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.amk-kennzahlen .amk-stat__value {
	font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem);
}

/* Group style "Hinweisbox": light blue box, e.g. for guiding questions or a summary. */
.is-style-amk-box {
	padding: clamp(1.25rem, 3vw, 2rem);
	border-radius: 16px;
	background: var(--wp--preset--color--tint);
}

.is-style-amk-box > * {
	margin-block: 0;
}

.is-style-amk-box > * + * {
	margin-block-start: 0.75rem;
}

.is-style-amk-box > .wp-block-heading {
	font-size: 1.25rem;
	line-height: 1.3;
}

.is-style-amk-box ul {
	padding-left: 1.25rem;
}

.is-style-amk-box li + li {
	margin-top: 0.375rem;
}

.is-style-amk-box li::marker {
	color: var(--wp--preset--color--primary);
}

/* List style "Häkchen": results and achievements, each with a blue tick. */
.is-style-amk-check {
	padding-left: 0;
	list-style: none;
}

.is-style-amk-check li {
	position: relative;
	padding-left: 2.125rem;
}

.is-style-amk-check li + li {
	margin-top: 0.625rem;
}

.is-style-amk-check li::before {
	content: "";
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 1.375rem;
	height: 1.375rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.875rem no-repeat;
}

/*
 * Programme of a day: the time (bold, at the start of each line) in its own
 * column, a second line in italics for speakers or details. The time floats
 * into the left padding; flow-root makes the line grow when a long time
 * ("10:10 a.m.–1:30 p.m.") wraps.
 */
.amk-programm {
	margin: 0;
	padding: 0;
	list-style: none;
}

.amk-programm li {
	display: flow-root;
	margin: 0;
	padding: 0.875rem 0 0.875rem 11.5rem;
	border-top: 1px solid var(--wp--preset--color--border);
	line-height: 1.55;
}

.amk-programm li:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Safari keeps announcing a list without bullets only if its items have generated content. */
.amk-programm li::before {
	content: "\200B";
}

.amk-programm li > strong:first-child {
	float: left;
	width: 10.5rem; /* "14:00–16:00 Uhr" or "17. November 2017" on one line */
	margin-left: -11.5rem;
	color: var(--wp--preset--color--primary-dark);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.amk-programm li em {
	display: block;
	margin-top: 0.125rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	font-style: normal;
}

@media (max-width: 480px) {
	.amk-programm li {
		padding-left: 0;
	}

	.amk-programm li > strong:first-child {
		float: none;
		display: block;
		width: auto;
		margin-left: 0;
	}
}

/* Quote: one key sentence in large blue type. */
.wp-block-post-content .wp-block-quote {
	margin-block: var(--wp--preset--spacing--50);
	padding: 0;
	border: 0;
	color: var(--wp--preset--color--primary-dark);
}

/* A large quotation mark as decoration, not read out. */
.wp-block-post-content .wp-block-quote::before {
	content: "“";
	content: "“" / "";
	display: block;
	height: 2.5rem;
	color: var(--wp--preset--color--primary);
	font-size: 5rem;
	font-weight: 800;
	line-height: 1;
}

.wp-block-post-content .wp-block-quote p {
	font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.wp-block-post-content .wp-block-quote cite {
	display: block;
	margin-top: 0.75rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
	font-style: normal;
	font-weight: 600;
}

/* Funding note at the end of a page: small type below a thin grey rule. */
.wp-block-post-content .amk-foerderhinweis {
	margin-block-start: var(--wp--preset--spacing--50);
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}

/*
 * "More projects/events" band at the end of a project or event page (see
 * amk_theme_related_pages()). It meets the footer, so the page's bottom
 * spacing goes.
 */
main:has(> .amk-related) {
	padding-bottom: 0 !important;
}

.amk-related {
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--60) var(--wp--style--root--padding-right) var(--wp--preset--spacing--60) var(--wp--style--root--padding-left);
	background: var(--wp--preset--color--surface);
}

.amk-related__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

.amk-related__head {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: baseline;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--40);
}

.amk-related__head > * {
	margin: 0;
}

/* auto-fit: the three cards share the full width instead of leaving a fourth column empty. */
.amk-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--wp--preset--spacing--40);
}

/*
 * Galleries: even tiles, captions under the photo instead of a dark band.
 * Core gives the photos of cropped galleries "flex: 1 0 0%", which squeezes
 * them to zero height once the caption sits below them, so the photo keeps
 * its own height here. Core's selector contains an ID, hence the :not().
 */
:is(.wp-site-blocks, .editor-styles-wrapper) .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	flex: none;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	position: static;
	max-height: none;
	overflow: visible;
	padding: 0.5rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	text-align: left;
	text-shadow: none;
	background: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	flex-direction: column;
	justify-content: flex-start;
}

/* --------------------------------------------------------- Contact band */

.amk-contact-band .wp-block-heading {
	margin-block: 0;
}

.amk-contact-band p {
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- Footer */

.amk-footer {
	font-size: 0.9375rem;
}

.amk-footer a {
	text-decoration: none;
}

.amk-footer a:hover,
.amk-footer a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.amk-footer__brand {
	font-size: 1.0625rem;
	font-weight: 700;
}

.amk-footer__text {
	color: rgb(255 255 255 / 0.8);
}

.amk-footer .amk-footer__label {
	margin-block-end: 0.75rem;
	color: rgb(255 255 255 / 0.75);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.amk-footer__links {
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.amk-footer__links li + li {
	margin-top: 0.5rem;
}

.amk-footer__bottom {
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.15);
	color: rgb(255 255 255 / 0.75);
	font-size: 0.875rem;
}

.amk-footer__bottom p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.amk-header-actions .wp-block-navigation-item__content,
	.wp-block-button__link,
	.is-style-amk-card {
		transition: none;
	}
}