/*
Theme Name:   ecoloc
Theme URI:    https://ecoloc.org
Description:  Block theme for ecoloc.org: academic, modern, black and white. Design tokens live in theme.json.
Author:       Joscha van der Linden
Author URI:   https://vanderlinden.ch
Version:      0.7.0
Requires at least: 7.1
Text Domain:  ecoloc
*/

::selection {
	background: var(--wp--preset--color--accent);
}

/* Sections are separated by space alone */
.is-style-section {
	padding-top: 0;
	padding-bottom: var(--wp--preset--spacing--50);
}

/* A section starts with a line inside the page margins, then a gap before its title.
   The generous space below a section is what separates it from the rows inside it. */
.is-style-section::before {
	content: "";
	display: block;
	margin-block-end: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line);
}

.wp-block-post-content > .is-style-section:first-child::before,
.is-style-section:has(> h1:only-child)::before,
.home .is-style-section::before {
	display: none;
}

.wp-site-blocks > * + *,
.wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* Event list: one row per event, chronological */
.ecoloc-event-list {
	border-bottom: var(--wp--custom--line);
}

.ecoloc-event-row {
	border-top: var(--wp--custom--line);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.ecoloc-event-row p {
	margin: 0;
}

.ecoloc-event-type {
	color: var(--wp--preset--color--black);
}

/* Small "Event page" link at the end of a row */
.wp-block-read-more {
	text-decoration: underline;
}

.wp-block-post-content > .is-style-section:first-child {
	border-top: 0;
}

.ecoloc-event-list {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ecoloc-event-row .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* Newsletter form */
.ecoloc-newsletter-fields {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	align-items: flex-end;
}

.ecoloc-newsletter-fields p {
	margin: 0;
	flex: 1 1 11rem;
}

.ecoloc-newsletter-fields p:last-child {
	flex: 0 0 auto;
}

.ecoloc-newsletter-fields label {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--black);
}

.ecoloc-newsletter-fields input[type="text"],
.ecoloc-newsletter-fields input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 0.5em 0.6em;
	border: 2px solid var(--wp--preset--color--black);
	border-radius: 0;
	font: inherit;
}

.ecoloc-newsletter-fields input[type="submit"] {
	padding: 0.5em 1em;
	border: 2px solid var(--wp--preset--color--black);
	border-radius: 0;
	background: transparent;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	cursor: pointer;
}

.ecoloc-newsletter-fields input[type="submit"]:hover {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* Navigation */
/* All items on desktop, a full-screen menu on small screens */
.ecoloc-nav {
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

@media (max-width: 900px) {
	.ecoloc-nav {
		font-size: var(--wp--preset--font-size--small);
	}

	.ecoloc-nav .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--20);
	}
}

.ecoloc-nav a {
	text-decoration: none;
}

.ecoloc-nav a:hover {
	text-decoration: underline;
}

.ecoloc-nav .wp-block-navigation__submenu-container {
	padding: var(--wp--preset--spacing--10) 0;
	border: var(--wp--custom--line) !important;
}

.ecoloc-nav .wp-block-navigation__responsive-container-open,
.ecoloc-nav .wp-block-navigation__responsive-container-close {
	font: inherit;
	font-weight: 600;
}

/* Core switches to the menu button at 600px; the nav is wider than that, so it does so below 1000px */
@media (min-width: 600px) and (max-width: 999px) {
	.ecoloc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.ecoloc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Desktop: menu on the left, logo on the right */
@media (min-width: 1000px) {
	.ecoloc-header__bar {
		flex-direction: row-reverse;
	}
}

/* Mobile menu: a white list with lines, sub items open with a plus, the logo stays visible */
.wp-block-site-logo {
	position: relative;
	z-index: 100001;
}

.ecoloc-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0 clamp(20px, 3vw, 48px);
}

.ecoloc-nav .is-menu-open .wp-block-navigation__responsive-close,
.ecoloc-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	width: 100%;
	max-width: none;
}

.ecoloc-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 1.1rem;
}

/* The X sits exactly where the menu button was, and turns in while the menu fades open */
.ecoloc-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--ecoloc-close-top, 25px);
	translate: var(--ecoloc-close-dx, 0) 0;
}

.ecoloc-nav .wp-block-navigation__responsive-container.is-menu-open {
	animation: ecoloc-menu-in 0.25s ease-out;
}

.ecoloc-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
	animation: ecoloc-close-in 0.3s ease-out;
}

@keyframes ecoloc-menu-in {
	from {
		opacity: 0;
	}
}

@keyframes ecoloc-close-in {
	from {
		opacity: 0;
		transform: rotate(-90deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ecoloc-nav .wp-block-navigation__responsive-container.is-menu-open,
	.ecoloc-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
		animation: none;
	}
}

.ecoloc-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	padding-top: var(--ecoloc-menu-pad, 6.5rem) !important;
}

.ecoloc-nav .is-menu-open .wp-block-navigation__container {
	display: block !important;
	width: 100%;
	font-size: var(--wp--preset--font-size--large);
}

.ecoloc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	display: flex;
	flex-flow: row wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100%;
	padding-block: 0;
	border-top: var(--wp--custom--line);
}

.ecoloc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child {
	border-bottom: var(--wp--custom--line);
}

.ecoloc-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	flex: 1;
	padding: 0.7rem 0;
	font-weight: 500;
}

.ecoloc-nav .is-menu-open .wp-block-navigation-submenu__toggle {
	display: block !important;
	order: -1;
	width: 1.75rem;
	margin: 0 !important;
	height: auto;
	padding: 0.7rem 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-align: left;
	cursor: pointer;
}

.ecoloc-nav .is-menu-open .wp-block-navigation-submenu__toggle::before {
	content: "+";
	display: inline-block;
	transition: transform 0.15s ease;
}

.ecoloc-nav .is-menu-open .is-expanded > .wp-block-navigation-submenu__toggle::before {
	transform: rotate(45deg);
}

.ecoloc-nav .is-menu-open .wp-block-navigation-submenu__toggle svg,
.ecoloc-nav .is-menu-open .wp-block-navigation__submenu-icon svg {
	display: none;
}

.ecoloc-nav .is-menu-open .wp-block-navigation__submenu-container {
	display: block !important;
	flex-basis: 100%;
	height: auto !important;
	min-height: 0;
	max-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	border: 0 !important;
	background: transparent !important;
	font-size: inherit;
	visibility: hidden !important;
	opacity: 0 !important;
	transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
}

/* Height is set by assets/header.js to the real one; without script the open item shows everything */
.ecoloc-nav .is-menu-open .is-expanded > .wp-block-navigation__submenu-container {
	max-height: 40rem;
	visibility: visible !important;
	opacity: 1 !important;
	transition-delay: 0s;
}

/* Sub items: a line above each one, like the main items */
.ecoloc-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	border-top: var(--wp--custom--line);
}

.ecoloc-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 0.7rem 0 0.7rem 1.75rem !important;
}

.ecoloc-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-weight: 500;
}

.ecoloc-nav .is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.ecoloc-nav .is-menu-open .wp-block-navigation__submenu-container {
		transition: none;
	}
}

/* Hover: quiet, no colour */
.wp-block-site-logo a:hover img {
	opacity: 0.6;
}

.wp-block-post-title a:hover {
	text-decoration: underline;
}

main p a:hover,
main li a:hover {
	text-decoration-thickness: 2px;
}

/* Pages with section navigation: list on the left, content on the right */
html {
	scroll-behavior: smooth;
}

.wp-block-post-content h2[id] {
	scroll-margin-top: calc(var(--ecoloc-sticky-top) + var(--ecoloc-header-offset, 0px) + 3.5rem);
}

@media (min-width: 1100px) {
	.ecoloc-with-nav:has(> .wp-block-ecoloc-section-nav) {
		display: grid;
		grid-template-columns: 14rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--50);
		box-sizing: border-box;
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding-inline: clamp(20px, 3vw, 48px);
	}

	.ecoloc-with-nav:has(> .wp-block-ecoloc-section-nav) .wp-block-post-content > .alignfull {
		margin-inline: 0;
		padding-inline: 0;
		width: auto;
	}

	.wp-block-post-content h2[id] {
		scroll-margin-top: calc(var(--ecoloc-sticky-top) + var(--ecoloc-header-offset, 0px) + 1.5rem);
	}
}

/* Lead paragraph */
.is-style-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

/* Page and event titles: big and tight */
.wp-block-post-content h1 {
	letter-spacing: -0.015em;
	line-height: 1;
}

/* Arrows on links that lead somewhere */
.wp-block-read-more::before,
.is-style-arrow a::before {
	content: "→ ";
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1;
}

.wp-block-read-more {
	text-decoration: none;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

.wp-block-read-more:hover {
	text-decoration: underline;
}

/* Section titles stand alone on a line above the content */
.is-style-section h2 + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.is-style-section * + h2,
.is-style-section * + h3 {
	margin-block-start: var(--wp--preset--spacing--30);
}

.is-style-section h3 + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* Tabs: one clear bar, the active tab is filled */
.wp-block-tabs .wp-block-tab-list {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: none;
	border: 0;
}

.wp-block-tabs [role="tab"] {
	flex: 1 1 auto !important;
	margin: 0 -2px -2px 0;
	padding: 0.75rem var(--wp--preset--spacing--20);
	border: var(--wp--custom--line);
	border-radius: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.wp-block-tabs [role="tab"]:last-child {
	margin-inline-end: 0;
}

.wp-block-tabs [role="tab"]:hover {
	background: var(--wp--preset--color--gray-light);
}

.wp-block-tabs [role="tab"][aria-selected="true"] {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* The core underline of the active tab would be a white line inside the black box */
.wp-block-tabs [role="tab"][aria-selected="true"]::before {
	content: none;
}

.wp-block-tabs [role="tabpanel"] {
	padding-block-start: var(--wp--preset--spacing--30);
}

/* Sticky elements sit below the admin bar; on phones the admin bar scrolls away */
html {
	--ecoloc-sticky-top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	html {
		--ecoloc-sticky-top: 0px;
	}
}

/* Header stays on top, hidden while scrolling down (assets/header.js) */
.ecoloc-header {
	position: sticky;
	top: var(--ecoloc-sticky-top);
	z-index: 20;
	background: var(--wp--preset--color--white);
	transition: transform 0.25s ease;
}

/* On an event image the navigation floats as a white box, elsewhere it is a plain bar */
.wp-site-blocks:has(> .ecoloc-event-hero) > .ecoloc-header:not(.is-past-hero) {
	padding: var(--wp--preset--spacing--20) clamp(20px, 3vw, 48px);
}

.wp-site-blocks:has(> .ecoloc-event-hero) > .ecoloc-header:not(.is-past-hero) > .wp-block-group {
	width: auto;
	margin-inline: 0;
	padding: 0.55rem var(--wp--preset--spacing--20) !important;
	background: var(--wp--preset--color--white);
}

.ecoloc-header.is-hidden {
	transform: translateY(-110%);
}

/* Breadcrumbs */
.ecoloc-breadcrumbs {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.ecoloc-breadcrumbs a {
	text-decoration: none;
}

.ecoloc-breadcrumbs a:hover {
	text-decoration: underline;
}

.ecoloc-breadcrumbs [aria-current] {
	color: var(--wp--preset--color--black);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ecoloc-breadcrumbs + main .is-style-section:first-child {
	padding-top: var(--wp--preset--spacing--30);
}

.is-style-section:has(> h1:only-child) {
	padding-bottom: var(--wp--preset--spacing--30);
}

/* Accessibility */
:focus-visible {
	outline: 2px solid var(--wp--preset--color--black);
	outline-offset: 2px;
}

.ecoloc-nav a,
.wp-block-ecoloc-section-nav a,
.ecoloc-breadcrumbs li {
	align-items: center;
}

.ecoloc-breadcrumbs a,
.ecoloc-breadcrumbs [aria-current] {
	display: flex;
	align-items: center;
	min-height: 24px;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.ecoloc-header,
	.wp-block-ecoloc-section-nav {
		transition: none;
	}
}

/* Event page ---------------------------------------------------------- */

/* Event head: eyebrow, title and lead in one calm column; the facts as three ruled rows */
.ecoloc-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}

.ecoloc-event-head h1 {
	margin-block: var(--wp--preset--spacing--20);
}

.ecoloc-event-head .is-style-lead {
	max-width: 36rem;
	margin: 0;
	font-weight: 400;
}

.ecoloc-event-head .wp-block-column:first-child > :first-child {
	margin-block-start: 0;
}

/* Key facts: date, venue, call to action, one rule between each */
.ecoloc-facts {
	border-top: var(--wp--custom--line);
}

.ecoloc-facts > * {
	margin: 0;
}

.ecoloc-facts > p {
	padding-block: var(--wp--preset--spacing--20);
}

.ecoloc-facts > .ecoloc-facts__date {
	border-bottom: var(--wp--custom--line);
}

.ecoloc-facts .ecoloc-facts__date {
	font-size: var(--wp--preset--font-size--large);
}

.ecoloc-event-head .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Note: a short message that must not be missed: a framed box with a solid square in its corner */
.wp-block-group.is-style-note {
	position: relative;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--30) + 1.25rem);
	margin-block-start: var(--wp--preset--spacing--30);
	border: var(--wp--custom--line);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.is-style-note::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--wp--custom--line-width));
	left: calc(-1 * var(--wp--custom--line-width));
	width: 1.25rem;
	height: 1.25rem;
	background: var(--wp--preset--color--black);
}

.is-style-note > * {
	margin-block: 0 var(--wp--preset--spacing--10);
}

/* Title left, content right */
.is-style-labelled {
	margin-block-start: var(--wp--preset--spacing--30);
}

.is-style-section > .is-style-labelled:first-child {
	margin-block-start: 0;
}

.is-style-section > .is-style-labelled:not(:first-child) {
	border-top: var(--wp--custom--line);
	padding-top: var(--wp--preset--spacing--30);
}

.is-style-labelled > .wp-block-column > :first-child {
	margin-block-start: 0;
}

/* Ruled columns: a black line on top of each, optionally numbered */
.is-style-ruled.wp-block-columns {
	counter-reset: ruled;
	margin-block: var(--wp--preset--spacing--30);
	border-top: var(--wp--custom--line);
}

.is-style-ruled > .wp-block-column {
	counter-increment: ruled;
	padding-top: var(--wp--preset--spacing--20);
}

.is-style-ruled > .wp-block-column > * {
	margin-block: 0 var(--wp--preset--spacing--10);
}

.is-numbered > .wp-block-column::before {
	content: counter(ruled);
	display: block;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Ruled list: one line per item, numbers in the margin for ordered lists */
ul.is-style-ruled,
ol.is-style-ruled {
	list-style: none;
	margin-inline: 0;
	padding: 0;
	border-bottom: var(--wp--custom--line);
	counter-reset: ruled;
}

.is-style-ruled > li {
	border-top: var(--wp--custom--line);
	padding-block: var(--wp--preset--spacing--10);
}

ol.is-style-ruled > li {
	counter-increment: ruled;
	display: grid;
	grid-template-columns: 2rem 1fr;
}

ol.is-style-ruled > li::before {
	content: counter(ruled);
	font-weight: 600;
}

/* Images in overviews */
.ecoloc-event-row .wp-block-post-featured-image {
	margin-block-end: var(--wp--preset--spacing--10);
}

/* Event page: the image starts at the very top, the header floats on it as a white box */
.wp-site-blocks > .ecoloc-event-hero {
	margin-block: calc(-1 * var(--ecoloc-header-height, 100px)) 0;
}

.ecoloc-event-hero img {
	min-height: 18rem;
}

.wp-site-blocks:has(> .ecoloc-event-hero) > .ecoloc-header:not(.is-past-hero) {
	background: none;
}

/* Footer: quiet, on light gray */
.ecoloc-footer .wp-block-image,
.ecoloc-footer p {
	margin: 0;
}

@media (max-width: 781px) {
	.ecoloc-footer .wp-block-columns {
		gap: var(--wp--preset--spacing--20);
	}
}

.ecoloc-footer .ecoloc-footer__legal {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--black);
}

.ecoloc-facts__date {
	font-weight: 600;
	line-height: 1.15;
}

/* Call to action: inverted block, title and form stacked */
.is-style-cta {
	margin-block-end: var(--wp--preset--spacing--40);
	padding-block: clamp(20px, 3vw, 48px);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.ecoloc-with-nav .wp-block-post-content > .is-style-cta {
	margin-block-end: var(--wp--preset--spacing--40);
}

/* On event pages the box is exactly as wide as the text column (its edges meet the section lines),
   and its content is inset by the same distance as the padding above and below */
@media (min-width: 1100px) {
	.ecoloc-with-nav:has(> .wp-block-ecoloc-section-nav) .wp-block-post-content > .is-style-cta.alignfull {
		margin-inline: 0;
		padding-inline: clamp(20px, 3vw, 48px);
	}
}

@media (max-width: 1099px) {
	.ecoloc-with-nav .wp-block-post-content > .is-style-cta {
		padding-inline: clamp(20px, 3vw, 48px);
	}
}

.is-style-cta > .is-style-labelled {
	margin: 0;
}

@media (min-width: 782px) {
	.ecoloc-newsletter > .wp-block-columns {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--40);
		margin: 0;
	}
}

.is-style-cta > .is-style-labelled h2 {
	font-size: var(--wp--preset--font-size--x-large);
}

.is-style-cta h2 {
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.015em;
	line-height: 1;
}

.is-style-cta .wp-block-column + .wp-block-column {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Side by side, both columns start on the same line as the title */
@media (min-width: 782px) {
	.is-style-cta .wp-block-column + .wp-block-column {
		margin-block-start: 0;
	}
}

.is-style-cta .wp-block-column > :first-child,
.is-style-cta .mc4wp-form {
	margin-block-start: 0 !important;
}

.is-style-cta p {
	font-size: var(--wp--preset--font-size--large);
}

.is-style-cta .ecoloc-newsletter-fields {
	margin-block-start: var(--wp--preset--spacing--30);
}

.is-style-cta .ecoloc-newsletter-fields p {
	font-size: inherit;
}

.is-style-cta .ecoloc-newsletter-fields label {
	color: inherit;
}

.is-style-cta .ecoloc-newsletter-fields input[type="text"],
.is-style-cta .ecoloc-newsletter-fields input[type="email"] {
	border-color: var(--wp--preset--color--white);
}

.is-style-cta .ecoloc-newsletter-fields input[type="submit"] {
	border-color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.is-style-cta .ecoloc-newsletter-fields input[type="submit"]:hover {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.is-style-cta :focus-visible {
	outline-color: var(--wp--preset--color--white);
}

.is-style-cta ::selection {
	color: var(--wp--preset--color--black);
}

/* Newsletter closes the page together with the footer */
.ecoloc-newsletter.is-style-cta {
	margin-block-end: 0;
}

/* Front page: space instead of lines */
.home .is-style-section {
	border-top: 0;
	padding-top: 0;
}

.home .wp-block-post-content > :first-child {
	padding-top: var(--wp--preset--spacing--40);
}

.home .is-style-arrow {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Text runs across the full width by default; the block style "Readable width" limits it to a comfortable line length */
.wp-block-paragraph.is-style-readable,
.wp-block-heading.is-style-readable,
.wp-block-list.is-style-readable {
	max-width: 46rem;
	margin-inline: 0 !important;
}

/* Event cards: the whole card is the link, title on the image */
.ecoloc-event-cards {
	margin-block-start: var(--wp--preset--spacing--30);
}

.ecoloc-event-cards .wp-block-post-template {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Two columns from tablet up; a single event keeps half the width instead of a huge banner */
@media (min-width: 600px) {
	.ecoloc-event-cards .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ecoloc-event-cards .wp-block-post {
	position: relative;
	margin: 0;
}

/* The image always fills the card, however long the title is */
.ecoloc-event-cards .wp-block-post-featured-image img {
	height: 100% !important;
}

.ecoloc-event-cards .wp-block-post-featured-image {
	position: static;
	grid-area: 1 / 1;
}

.ecoloc-event-cards .ecoloc-event-caption {
	grid-area: 1 / 1;
	align-self: end;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20);
	background: linear-gradient(to top, rgb(10 10 10 / 0.75), rgb(10 10 10 / 0));
	color: var(--wp--preset--color--white);
}

.ecoloc-event-caption > * {
	margin-block: 0 var(--wp--preset--spacing--10);
}

.ecoloc-event-caption > :last-child {
	margin-block-end: 0;
}

.ecoloc-event-caption .ecoloc-event-type {
	color: inherit;
}

/* Without an image the title stays on white */
.ecoloc-event-media:not(:has(.wp-block-post-featured-image)) .ecoloc-event-caption {
	padding: 0;
	background: none;
	color: var(--wp--preset--color--black);
}

.ecoloc-event-media:not(:has(.wp-block-post-featured-image)) .ecoloc-event-caption .ecoloc-event-type {
	color: var(--wp--preset--color--black);
}

.ecoloc-event-cards .wp-block-post > * {
	margin-block: 0 var(--wp--preset--spacing--10);
}

.ecoloc-event-cards .ecoloc-event-media {
	margin-block-end: var(--wp--preset--spacing--20);
}

.ecoloc-event-cards .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Date as a vertical stack next to the image */
.ecoloc-event-media {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--wp--preset--spacing--20);
	align-items: stretch;
}

.ecoloc-event-media > *,
.ecoloc-event-row .ecoloc-event-media > .wp-block-post-featured-image {
	margin: 0;
}

/* Fills the height of the image: start on top, year at the bottom, a line between */
.ecoloc-date-stack {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-width: 2.75rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
}

.ecoloc-date-stack time,
.ecoloc-date-stack time span {
	display: block;
}

.ecoloc-date-stack__sep {
	flex: 1 1 0;
	width: 2px;
	margin: var(--wp--preset--spacing--10) auto;
	background: var(--wp--preset--color--black);
	font-size: 0;
}

.ecoloc-date-stack__year {
	display: block;
	margin-block-start: var(--wp--preset--spacing--10);
	font-weight: 400;
}

.ecoloc-date-stack__year:first-child {
	margin-block-start: 0;
}

/* On cards the date is a small white label on the image */
.ecoloc-event-cards .ecoloc-event-media {
	grid-template-columns: minmax(0, 1fr);
}

.ecoloc-event-cards .ecoloc-date-stack {
	grid-area: 1 / 1;
	justify-self: end;
	align-self: start;
	margin: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--white);
}

/* One line, so it stays small on every image */
.ecoloc-event-cards .ecoloc-date-stack {
	flex-direction: row;
	gap: 0.3em;
	white-space: nowrap;
}

.ecoloc-event-cards .ecoloc-date-stack time {
	display: flex;
	gap: 0.3em;
}

.ecoloc-event-cards .ecoloc-date-stack__sep {
	flex: none;
	width: auto;
	margin: 0;
	background: none;
	font-size: inherit;
}

.ecoloc-event-cards .ecoloc-date-stack__year {
	margin: 0;
	font-weight: inherit;
}

.ecoloc-event-media:not(:has(.wp-block-post-featured-image)) .ecoloc-date-stack {
	justify-self: start;
	margin: 0 0 var(--wp--preset--spacing--10);
	padding: 0;
}

/* List rows: the whole row is the link, the title link stretches over it */
.ecoloc-event-row {
	position: relative;
}

.ecoloc-event-row .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ecoloc-event-row:hover .wp-block-post-title a,
.ecoloc-event-cards .wp-block-post:hover .wp-block-post-title a {
	text-decoration: underline;
}

.ecoloc-event-row .wp-block-read-more,
.ecoloc-event-row .wp-block-buttons {
	position: relative;
	z-index: 1;
}

@media (min-width: 1000px) {
	/* The box grows outwards, so its text stays on the page's left edge */
	.wp-site-blocks:has(> .ecoloc-event-hero) > .ecoloc-header:not(.is-past-hero) {
		padding-inline: calc(clamp(20px, 3vw, 48px) - var(--wp--preset--spacing--20));
	}

	/* One grid for both rows: 2rem between items, the same distance above, between and below the rows */
	.ecoloc-nav .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30);
	}

	.ecoloc-nav .wp-block-navigation__submenu-icon {
		display: none;
	}

	.ecoloc-header > .wp-block-group {
		padding-block: 0.55rem !important;
	}

	/* Sub navigation: the header grows by a full-width panel instead of a small dropdown */
	.ecoloc-header > .wp-block-group {
		position: relative;
	}

	.ecoloc-nav,
	.ecoloc-nav .wp-block-navigation__responsive-container,
	.ecoloc-nav .wp-block-navigation__responsive-dialog,
	.ecoloc-nav .wp-block-navigation__responsive-container-content,
	.ecoloc-nav .wp-block-navigation__container,
	.ecoloc-nav .wp-block-navigation-item {
		position: static !important;
	}

	/* Keeps the panel open on the way from the item down to it */
	.ecoloc-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		transition: opacity 0.1s linear 0.2s, visibility 0s linear 0.2s;
	}

	.ecoloc-nav .wp-block-navigation__container > .has-child:hover > .wp-block-navigation__submenu-container,
	.ecoloc-nav .wp-block-navigation__container > .has-child:focus-within > .wp-block-navigation__submenu-container {
		transition-delay: 0s;
	}

	.ecoloc-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 1.5rem;
	}

	.ecoloc-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		position: absolute !important;
		top: 100% !important;
		right: 0 !important;
		left: 0 !important;
		display: flex;
		flex-flow: row wrap;
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		width: auto !important;
		min-width: 0 !important;
		padding: 0 clamp(20px, 3vw, 48px) 1.1rem !important;
		border: 0 !important;
		border-bottom: var(--wp--custom--line) !important;
		background: var(--wp--preset--color--white) !important;
		font-size: inherit;
	}

	/* On the event image the box itself grows, so the panel has no line and the box's own padding */
	.wp-site-blocks:has(> .ecoloc-event-hero) > .ecoloc-header:not(.is-past-hero) .wp-block-navigation__submenu-container {
		padding-inline: var(--wp--preset--spacing--20) !important;
		border-bottom: 0 !important;
	}

	.ecoloc-header:not(.is-hidden) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0 !important;
	}
}

/* Teasers in columns: images of one size, links instead of buttons */
.wp-block-image.is-style-cropped img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.wp-block-button.is-style-arrow .wp-block-button__link {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
}

.wp-block-button.is-style-arrow .wp-block-button__link::before {
	content: "→ ";
	font-size: 1.25em;
	line-height: 1;
}

.wp-block-button.is-style-arrow .wp-block-button__link:hover {
	background: none;
	color: inherit;
	text-decoration: underline;
}

/* A page title stands on its own, with less space below than a section */
.is-style-section:has(> h1:only-child) {
	padding-bottom: var(--wp--preset--spacing--30);
}

/* Form fields: outlined, the label sits inside the box above the input.
   Labels stay visible (no placeholder-only fields), one column on phones. */
.ecoloc-newsletter-fields {
	align-items: stretch;
}

.ecoloc-newsletter-fields p:has(input:not([type="submit"])) {
	box-sizing: border-box;
	padding: 0.6rem 0.9rem 0.55rem;
	border: 2px solid var(--wp--preset--color--black);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	transition: background-color 0.15s ease;
}

.ecoloc-newsletter-fields p:has(input:not([type="submit"])):hover {
	background: var(--wp--preset--color--gray-light);
}

.ecoloc-newsletter-fields p:has(input:not([type="submit"])):focus-within {
	outline: 2px solid var(--wp--preset--color--black);
	outline-offset: 2px;
	background: var(--wp--preset--color--white);
}

.ecoloc-newsletter-fields label {
	margin: 0 0 0.15rem;
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

.ecoloc-newsletter-fields input[type="text"],
.ecoloc-newsletter-fields input[type="email"] {
	padding: 0;
	border: 0;
	background: transparent;
	font-size: var(--wp--preset--font-size--medium);
	outline: 0;
}

/* Invalid after the visitor has left the field, never while typing; dashed so it is not colour alone */
.ecoloc-newsletter-fields p:has(input:user-invalid) {
	border-style: dashed;
	border-color: #b3261e;
}

.ecoloc-newsletter-fields p:has(input:user-invalid) label {
	color: #b3261e;
}

.ecoloc-newsletter-fields input[type="submit"] {
	height: 100%;
	padding-inline: 1.5rem;
}

.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])) {
	border-color: var(--wp--preset--color--white);
}

.is-style-cta .ecoloc-newsletter-fields label {
	color: var(--wp--preset--color--black);
}

.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])):focus-within {
	outline-color: var(--wp--preset--color--white);
}

.is-style-cta .ecoloc-newsletter-fields input[type="text"],
.is-style-cta .ecoloc-newsletter-fields input[type="email"] {
	border: 0;
}

@media (max-width: 599px) {
	.ecoloc-newsletter-fields p {
		flex: 1 1 100%;
	}
}

/* List rows: the date stands directly above the title */
.ecoloc-event-meta {
	gap: 0;
	margin: 0 0 var(--wp--preset--spacing--10);
}

.ecoloc-event-row .ecoloc-event-date,
.ecoloc-event-row .ecoloc-event-location {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
}

/* Where it takes place is as important as when: same size, set off by a pin-like marker */
.ecoloc-event-row .ecoloc-event-location::before {
	content: "\2022";
	display: inline-block;
	padding-inline: 0.6em;
	font-weight: 400;
	line-height: 1;
}

/* Teaser columns with images: title, image, text and link line up across the columns */
@media (min-width: 782px) {
	.wp-block-columns.is-style-ruled:has(.wp-block-image) {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
	}

	.wp-block-columns.is-style-ruled:has(.wp-block-image) > .wp-block-column {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		gap: 0;
		flex-basis: auto !important;
		align-content: start;
	}

	.wp-block-columns.is-style-ruled:has(.wp-block-image) > .wp-block-column > * {
		margin-block: 0 var(--wp--preset--spacing--10);
	}
}

/* Newsletter fields stacked: name, email, then a full-width button */
.ecoloc-newsletter-fields {
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--20);
}

.ecoloc-newsletter-fields p,
.ecoloc-newsletter-fields p:last-child {
	flex: none;
	width: 100%;
}

.ecoloc-newsletter-fields input[type="submit"] {
	width: 100%;
	height: auto;
	padding-block: 1rem;
}

.ecoloc-newsletter .ecoloc-newsletter-fields {
	margin-block-start: 0;
}

/* wpautop leaves an empty paragraph after the shortcode form; it would add space at the bottom */
.is-style-cta .wp-block-column > p:empty,
.is-style-cta .wp-block-column > form + p {
	display: none;
}

/* The response area only takes space when there is a message (success, error) */
.mc4wp-response:not(:has(.mc4wp-alert)) {
	display: none;
}

.mc4wp-response .mc4wp-alert p {
	margin: var(--wp--preset--spacing--10) 0 0;
}

/* The honeypot paragraph of the form has no height, but its margin pushed the box open */
.mc4wp-form > p {
	margin: 0;
}

/* Slimmer fields: small label, compact height, the same line as everywhere else.
   On the black blocks they are transparent outlines instead of white slabs. */
.ecoloc-newsletter-fields {
	gap: var(--wp--preset--spacing--10);
}

.ecoloc-newsletter-fields p:has(input:not([type="submit"])) {
	padding: 0.4rem 0.8rem 0.35rem;
}

.ecoloc-newsletter-fields label {
	font-size: 0.8125rem;
	margin: 0;
}

.ecoloc-newsletter-fields input[type="text"],
.ecoloc-newsletter-fields input[type="email"] {
	font-size: 1rem;
	line-height: 1.4;
}

.ecoloc-newsletter-fields input[type="submit"] {
	padding-block: 0.65rem;
	font-size: 1rem;
}

.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])) {
	background: transparent;
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
}

.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])):hover {
	background: rgb(255 255 255 / 0.08);
	border-color: var(--wp--preset--color--white);
}

.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])):focus-within {
	background: transparent;
	border-color: var(--wp--preset--color--white);
}

.is-style-cta .ecoloc-newsletter-fields label {
	color: rgb(255 255 255 / 0.7);
}

.is-style-cta .ecoloc-newsletter-fields input[type="text"],
.is-style-cta .ecoloc-newsletter-fields input[type="email"] {
	color: var(--wp--preset--color--white);
	caret-color: var(--wp--preset--color--white);
}

.is-style-cta .ecoloc-newsletter-fields input:-webkit-autofill {
	-webkit-text-fill-color: var(--wp--preset--color--white);
	transition: background-color 9999s ease-out;
}

/* Name and email share one row when there is room, the button spans the full width below */
.ecoloc-newsletter-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--10);
}

/* Two fields share the row as soon as the form is wide enough, and then always fill it completely */
.mc4wp-form {
	container-type: inline-size;
}

@container (min-width: 30rem) {
	.ecoloc-newsletter-fields {
		grid-template-columns: 1fr 1fr;
	}
}

.ecoloc-newsletter-fields p:last-child {
	grid-column: 1 / -1;
}

/* Text that follows a list: a clear step down, so it reads as its own paragraph */
.wp-block-post-content ul.wp-block-list + p,
.wp-block-post-content ul.wp-block-list + .wp-block-paragraph {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-post-content p + ul.wp-block-list {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* One line system: full width lines separate rows and column groups,
   a list that opens a row does not draw a second line under that one */
.is-style-labelled > .wp-block-column > ul.wp-block-list:first-child > li:first-child {
	border-top: 0;
}

/* A sentence in the title column, set like a section title */
.ecoloc-label-text {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.is-style-labelled .wp-block-column > .wp-block-columns + p {
	margin-block-start: var(--wp--preset--spacing--30);
}

.is-style-labelled .wp-block-column > .is-style-ruled.wp-block-columns {
	margin-block-start: 0;
}

.is-style-labelled > .wp-block-column > .is-style-ruled.wp-block-columns:first-child {
	border-top: 0;
}

/* Location photo in the title column */
.ecoloc-location-image {
	margin-block: var(--wp--preset--spacing--20) 0;
}

.ecoloc-location-image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* The logo stays small and uncropped */
.ecoloc-organiser-logo {
	margin-block: var(--wp--preset--spacing--20) 0;
}

.ecoloc-organiser-logo img {
	width: 150px;
	aspect-ratio: auto;
	object-fit: contain;
}

/* Core blocks in the theme's language: one line weight, black and white, square corners ---------- */

/* Buttons: Fill is solid black, Outline is the line */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--black);
	border: var(--wp--custom--line);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

/* Quote: a line on the left; Plain without it; Large as a statement */
.wp-block-quote {
	margin-block: var(--wp--preset--spacing--30);
	margin-inline: 0;
	padding: 0 0 0 var(--wp--preset--spacing--30);
	border-left: var(--wp--custom--line);
}

.wp-block-quote p {
	margin-block: 0 var(--wp--preset--spacing--10);
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
}

.wp-block-quote.is-style-plain {
	padding-left: 0;
	border-left: 0;
}

.wp-block-quote.is-style-large {
	padding-left: 0;
	border-left: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.wp-block-pullquote {
	margin-block: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--30) 0;
	border-block: var(--wp--custom--line);
	text-align: left;
}

.wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
}

.wp-block-pullquote p {
	font-size: inherit;
	margin: 0;
}

/* Table: rules between rows, left aligned; Stripes use a light gray instead of rules */
.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20) var(--wp--preset--spacing--10) 0;
	border: 0;
	border-bottom: var(--wp--custom--line);
	text-align: left;
	vertical-align: top;
}

.wp-block-table thead th {
	border-block: var(--wp--custom--line);
	font-weight: 600;
}

.wp-block-table thead {
	border: 0;
}

.wp-block-table.is-style-stripes {
	border: 0;
}

.wp-block-table.is-style-stripes td {
	border-bottom: 0;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
	background: var(--wp--preset--color--gray-light);
}

.wp-block-table.is-style-stripes th,
.wp-block-table.is-style-stripes td {
	padding-left: var(--wp--preset--spacing--10);
}

.wp-block-table figcaption,
.wp-block-image figcaption {
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--small);
	text-align: left;
}

/* Separator: the same line; Default is short, Wide runs across, Dots stay dots */
.wp-block-separator {
	height: 0;
	margin-block: var(--wp--preset--spacing--30);
	border: 0;
	border-top: var(--wp--custom--line);
	background: none;
	color: var(--wp--preset--color--black);
	opacity: 1;
}

.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
	width: 6rem;
	margin-inline: 0 auto !important;
}

.wp-block-separator.is-style-wide {
	width: 100%;
}

.wp-block-separator.is-style-dots {
	height: auto;
	border: 0;
	color: var(--wp--preset--color--black);
	line-height: 1;
	text-align: left;
}

.wp-block-separator.is-style-dots::before {
	padding-left: 0;
}

/* Code and preformatted: a light block */
.wp-block-code,
.wp-block-preformatted {
	margin-block: var(--wp--preset--spacing--20);
	padding: var(--wp--preset--spacing--20);
	border: 0;
	background: var(--wp--preset--color--gray-light);
	color: var(--wp--preset--color--black);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Details: ruled rows with a fine plus. One line between rows, never two */
.wp-block-details {
	margin-block: 0 !important;
	border: 0;
	border-block-start: var(--wp--custom--line);
}

.wp-block-details:not(:has(+ .wp-block-details)) {
	border-block-end: var(--wp--custom--line);
	margin-block-end: var(--wp--preset--spacing--20) !important;
}

.wp-block-details:not(.wp-block-details + .wp-block-details) {
	margin-block-start: var(--wp--preset--spacing--20) !important;
}

.wp-block-details summary {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--10);
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Plus and minus drawn as 1.5px lines, so they stay fine at a larger size */
.wp-block-details summary::before {
	content: "";
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
}

.wp-block-details[open] summary::before {
	background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

.wp-block-details > :not(summary) {
	padding-inline-start: calc(0.85rem + var(--wp--preset--spacing--10));
}

.wp-block-details > :last-child {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* People: portrait cards, the whole card is the link */
.ecoloc-people .wp-block-post-template {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecoloc-people .wp-block-post {
	position: relative;
	margin: 0;
}

.ecoloc-people .wp-block-post > * {
	margin-block: 0 var(--wp--preset--spacing--10);
}

.ecoloc-people .wp-block-post-featured-image {
	margin-block-end: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--gray-light);
}

.ecoloc-people .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.ecoloc-people .wp-block-post-title {
	line-height: 1.15;
}

.ecoloc-people .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ecoloc-people .wp-block-post:hover .wp-block-post-title a {
	text-decoration: underline;
}

.ecoloc-people__function {
	color: var(--wp--preset--color--black);
}

/* Person page: portrait left, name, function and bio right, contact as arrow links */
.ecoloc-person .ecoloc-person__portrait {
	background: var(--wp--preset--color--gray-light);
}

.ecoloc-person .ecoloc-person__portrait img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.ecoloc-person h1 {
	margin-block: 0 var(--wp--preset--spacing--10);
}

.ecoloc-person .is-style-lead {
	margin-block: 0 var(--wp--preset--spacing--30);
}

.ecoloc-person__contact {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--10);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: var(--wp--custom--line);
}

/* Back link below the content: a quiet line of its own, arrow pointing back */
.ecoloc-person__back {
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: var(--wp--custom--line);
}

.wp-block-button.is-style-arrow.ecoloc-back .wp-block-button__link::before {
	content: "\2190 ";
}

/* Right column of an event row: the short name and the call to action share one size; the link is a real button */
.ecoloc-event-row .ecoloc-event-type {
	color: var(--wp--preset--color--black);
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600;
}

.ecoloc-event-row .wp-block-read-more {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--10);
	padding: 0.3em 0.8em;
	border: var(--wp--custom--line);
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600;
	text-decoration: none;
}

.ecoloc-event-row .wp-block-read-more::before {
	content: none;
}

.ecoloc-event-row .wp-block-read-more:hover,
.ecoloc-event-row:hover .wp-block-read-more {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

/* History: the period is the large title of its section */
.ecoloc-period {
	font-size: var(--wp--preset--font-size--xx-large);
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Short pages: newsletter and footer sit at the bottom edge of the window */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

@media (max-width: 599px) {
	.wp-block-group.is-style-note {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) calc(var(--wp--preset--spacing--20) + 1.25rem);
	}
}


/* Call to action: a quiet panel instead of a black block. White fields with the page's line, a solid button.
   Inside a page it is light gray; the newsletter above the footer is white with a line, the footer below is gray. */
.is-style-cta {
	background: var(--wp--preset--color--gray-light);
	color: var(--wp--preset--color--black);
}

.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])) {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--black);
}

.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])):hover,
.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])):focus-within {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--black);
}

.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])):focus-within {
	outline-color: var(--wp--preset--color--black);
}

.is-style-cta .ecoloc-newsletter-fields label {
	color: var(--wp--preset--color--black);
}

.is-style-cta .ecoloc-newsletter-fields input[type="text"],
.is-style-cta .ecoloc-newsletter-fields input[type="email"] {
	color: var(--wp--preset--color--black);
	caret-color: var(--wp--preset--color--black);
}

.is-style-cta .ecoloc-newsletter-fields input[type="submit"] {
	border-color: var(--wp--preset--color--black);
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.is-style-cta .ecoloc-newsletter-fields input[type="submit"]:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
}

.is-style-cta :focus-visible {
	outline-color: var(--wp--preset--color--black);
}

.is-style-cta ::selection {
	color: inherit;
}

.ecoloc-newsletter.is-style-cta {
	background: var(--wp--preset--color--white);
}

/* Footer: white, separated from the page by the same line as everything else */
.ecoloc-footer {
	position: relative;
}

/* Event pages: images in the content are square */
.single-event .wp-block-post-content .wp-block-image:not(.ecoloc-organiser-logo) img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Home: the tagline is a statement, not a page title */
.home .wp-block-post-content h1 {
	font-size: clamp(1.9rem, 4vw, 3rem);
	letter-spacing: -0.035em;
	line-height: 1.05;
}

/* Event list: one grid, image square, text and call to action start on the image's top edge,
   every row has the same padding above and below */
.ecoloc-event-row > .wp-block-columns {
	margin: 0;
	align-items: start;
}

.ecoloc-event-row .wp-block-column > :first-child {
	margin-block-start: 0;
}

.ecoloc-event-row .wp-block-post-featured-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
}

.ecoloc-event-row .wp-block-post-featured-image,
.ecoloc-event-row .ecoloc-event-media {
	margin: 0;
	width: 100%;
}

.ecoloc-event-row .wp-block-read-more {
	white-space: nowrap;
}

@media (max-width: 781px) {
	.ecoloc-event-row .ecoloc-event-media {
		max-width: 12rem;
	}

	.ecoloc-event-row > .wp-block-columns {
		gap: var(--wp--preset--spacing--10);
	}
}

@media (min-width: 782px) {
	.ecoloc-event-row > .wp-block-columns {
		display: grid;
		grid-template-columns: 14rem minmax(0, 1fr) 13rem;
		column-gap: var(--wp--preset--spacing--20);
	}

	.ecoloc-event-row > .wp-block-columns > .wp-block-column:nth-child(2) {
		padding-inline-end: var(--wp--preset--spacing--30);
	}

	.ecoloc-event-row > .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		width: auto;
		min-width: 0;
	}
}

/* Right column: the short name on the top line of the row, the button on its bottom edge, level with the image */
@media (min-width: 782px) {
	.ecoloc-event-row > .wp-block-columns {
		align-items: stretch;
	}

	.ecoloc-event-row > .wp-block-columns > .wp-block-column:last-child {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.ecoloc-event-row > .wp-block-columns > .wp-block-column:last-child > * {
		margin: 0;
	}
}

/* The short name repeats the title, the list leaves it out; the network label stays */
.ecoloc-event-row .ecoloc-event-type.only-ecoloc {
	display: none;
}

@media (min-width: 782px) {
	.ecoloc-event-row > .wp-block-columns > .wp-block-column:last-child {
		justify-content: flex-end;
	}
}

/* The button stands under the text, level with the bottom edge of the image */
@media (min-width: 782px) {
	.ecoloc-event-row > .wp-block-columns {
		grid-template-columns: 14rem minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		align-items: start;
	}

	.ecoloc-event-row > .wp-block-columns > .wp-block-column:first-child {
		grid-row: 1 / 3;
	}

	.ecoloc-event-row > .wp-block-columns > .wp-block-column:nth-child(2) {
		grid-column: 2;
		grid-row: 1;
		padding-inline-end: 0;
	}

	.ecoloc-event-row > .wp-block-columns > .wp-block-column:last-child {
		grid-column: 2;
		grid-row: 2;
		align-self: end;
		padding-block-start: var(--wp--preset--spacing--10);
	}
}

/* Event list as a table: the date is the label on the left, title, place, teaser and link on the right */
.ecoloc-event-line {
	position: relative;
	border-top: var(--wp--custom--line);
	padding-block: var(--wp--preset--spacing--30);
}

.ecoloc-event-line p,
.ecoloc-event-line h2 {
	margin: 0;
}

.ecoloc-event-line .wp-block-columns {
	margin: 0;
}

.ecoloc-event-line .wp-block-column > * + * {
	margin-block-start: var(--wp--preset--spacing--10);
}

.ecoloc-event-line .ecoloc-event-date {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.ecoloc-event-line .wp-block-post-title {
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.ecoloc-event-line .wp-block-post-title a {
	text-decoration: none;
}

.ecoloc-event-line .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.ecoloc-event-line:hover .wp-block-post-title a {
	text-decoration: underline;
}

.ecoloc-event-line .ecoloc-event-location {
	font-weight: 600;
}

.ecoloc-event-line .ecoloc-event-type {
	color: var(--wp--preset--color--black);
}

.ecoloc-event-line .wp-block-read-more {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--20);
	padding: 0.3em 0.8em;
	border: var(--wp--custom--line);
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ecoloc-event-line .wp-block-read-more:hover,
.ecoloc-event-line:hover .wp-block-read-more {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.ecoloc-event-line .wp-block-buttons {
	position: relative;
	z-index: 1;
	margin-block-start: var(--wp--preset--spacing--20);
}

.ecoloc-event-list:has(.ecoloc-event-line) {
	border-bottom: 0;
	margin-block-end: calc(-1 * var(--wp--preset--spacing--50));
}

@media (max-width: 781px) {
	.ecoloc-event-line .wp-block-columns {
		gap: var(--wp--preset--spacing--10);
	}
}

/* Lines above the newsletter and the footer run inside the page margins like every other line */
.ecoloc-newsletter.is-style-cta,
.ecoloc-footer {
	position: relative;
}

.ecoloc-newsletter.is-style-cta::before,
.ecoloc-footer::before {
	content: "";
	position: absolute;
	top: 0;
	inset-inline: clamp(20px, 3vw, 48px);
	border-top: var(--wp--custom--line);
}

/* Event list: a square image closes the row on the right */
.ecoloc-event-line__image .wp-block-post-featured-image {
	margin: 0;
}

.ecoloc-event-line__image .wp-block-post-featured-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
}

@media (min-width: 782px) {
	.ecoloc-event-line > .wp-block-columns {
		display: grid;
		grid-template-columns: 30% minmax(0, 1fr) 11rem;
		column-gap: var(--wp--preset--spacing--30);
		align-items: start;
	}

	.ecoloc-event-line > .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		min-width: 0;
	}
}

@media (max-width: 781px) {
	.ecoloc-event-line > .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--20);
		row-gap: var(--wp--preset--spacing--10);
		align-items: start;
	}

	.ecoloc-event-line > .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		min-width: 0;
	}

	.ecoloc-event-line > .wp-block-columns > .wp-block-column:nth-child(1) {
		grid-column: 1;
		grid-row: 1;
	}

	.ecoloc-event-line > .wp-block-columns > .wp-block-column:nth-child(2) {
		grid-column: 1;
		grid-row: 2;
	}

	.ecoloc-event-line > .wp-block-columns > .wp-block-column:nth-child(3) {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.ecoloc-event-line .wp-block-post-title {
		font-size: var(--wp--preset--font-size--large) !important;
	}

	.ecoloc-event-line .wp-block-read-more {
		padding-inline: 0.4em;
		letter-spacing: -0.01em;
		font-size: var(--wp--preset--font-size--small) !important;
	}
}

/* Navigation a little heavier */
.ecoloc-nav .wp-block-navigation-item__content {
	font-weight: 600;
}

/* A quote that is the only content of a section is the page's opening statement:
   directly under the title, no line of its own, no bar, and no extra margins on top of the section spacing */
.is-style-section > .wp-block-quote:first-child {
	margin-block-start: 0;
}

.is-style-section > .wp-block-quote:last-child {
	margin-block-end: 0;
}

.is-style-section:has(> .wp-block-quote:only-child)::before {
	display: none;
}

.is-style-section > .wp-block-quote:only-child {
	padding-left: 0;
	border-left: 0;
}

.is-style-section > .wp-block-quote:only-child h2,
.is-style-section > .wp-block-quote:only-child p {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.08;
	max-width: 28em;
}

/* Active form field: one frame, thickened from the inside, instead of a second frame around the first */
.ecoloc-newsletter-fields p:has(input:not([type="submit"])):focus-within,
.is-style-cta .ecoloc-newsletter-fields p:has(input:not([type="submit"])):focus-within {
	outline: 0;
	box-shadow: inset 0 0 0 2px var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
}

/* Logo and language switcher: the same distance between them as between the logo and the page edge.
   On the desktop bar the logo is on the right and the switcher sits directly to its left. */
.wp-block-group.ecoloc-header__brand {
	gap: clamp(20px, 3vw, 48px) !important;
	column-gap: clamp(20px, 3vw, 48px) !important;
}

@media (min-width: 1000px) {
	.ecoloc-header__brand {
		flex-direction: row-reverse;
	}
}

/* WPML language switcher (settings: WPML > Settings > Language Switchers): small, active language bold and underlined */
.wpml-ls-statics-shortcode_actions.wpml-ls {
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.wpml-ls-statics-shortcode_actions .wpml-ls-link {
	color: inherit;
	text-decoration: none;
}

.wpml-ls-statics-shortcode_actions .wpml-ls-link:hover {
	text-decoration: underline;
}

.wpml-ls-statics-shortcode_actions .wpml-ls-current-language .wpml-ls-link {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.25em;
}