/**
 * Shared rules for the Gutenberg content of PsiFit. Only what belongs to
 * no single block lives here: text rhythm, rows and columns, sections and
 * full width.
 */

/* ------------------------------------------------------------ Text blocks */

/*
 * Inside a text block the tight rhythm applies: no block gap, only the nine
 * pixels below every paragraph. Between two text blocks the normal gap stays.
 */
body .psifit-text > * + * {
	margin-block-start: 0;
}

/*
 * The last paragraph of a column carries nothing below. Salient has that rule
 * as .row .col p:last-child, the column came from WPBakery and is gone now, so
 * the chain starts at the Salient row instead. A trailing heading keeps its
 * padding, the rule only ever applied to paragraphs.
 */
body .container-wrap .row p:last-child,
.editor-styles-wrapper p:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

/*
 * Salient indents a list by 30 pixels with margin-left on the list itself.
 * Inside a constrained layout Gutenberg overrides both side margins with auto
 * and !important, so the indent disappears. The same distance as padding
 * survives that and leaves the content box where it was.
 */
body .container-wrap .is-layout-constrained > ul.wp-block-list,
body .container-wrap .is-layout-constrained > ol.wp-block-list,
.editor-styles-wrapper .is-layout-constrained > ul.wp-block-list,
.editor-styles-wrapper .is-layout-constrained > ol.wp-block-list {
	padding-left: 30px;
}

/*
 * Lists in a text block from WPBakery carry the berry coloured arrow. The rule
 * used to hang on the class wpb_text_column, which is gone after the move. It
 * never applied to the text fields of Elementor, the bullets stay round there.
 */
.psifit-arrow-list ul li {
	list-style-type: none;
	position: relative;
	margin: 9px 0 15px;
	padding-left: 25px;
}

.psifit-arrow-list ul li::before {
	content: "arrow_forward";
	position: absolute;
	left: 0;
	top: 0;
	font-family: "Material Symbols Outlined";
	font-weight: 900;
	color: #881244;
}

/* ---------------------------------------------------------- Rows */

/*
 * A row keeps the margins of its children inside. In WPBakery a row was a
 * flex box, so the distance below one row and the distance above the first
 * element of the next one added up. In normal flow they would collapse into
 * one and the gap between two rows would be too small.
 */
body .psifit-row,
.editor-styles-wrapper .psifit-row {
	display: flow-root;
}

/**
 * Below 1000 pixels Salient scales a row padding with the window, but only
 * where WPBakery holds a percentage for the tablet. The converter marks
 * those rows with psifit-row-pct.
 */
@media (max-width: 999px) {
	body .psifit-row.psifit-row-pct[style*="padding-top:100px"] {
		padding-top: 5.28vw !important;
	}

	body .psifit-row.psifit-row-pct[style*="padding-bottom:100px"] {
		padding-bottom: 5.28vw !important;
	}

	body .psifit-row.psifit-row-pct[style*="padding-top:80px"] {
		padding-top: 4.22vw !important;
	}

	body .psifit-row.psifit-row-pct[style*="padding-bottom:80px"] {
		padding-bottom: 4.22vw !important;
	}
}

/*
 * The main heading of a page. Where no visible heading carries the title of
 * the page, the converter writes one that only a screen reader reaches. The
 * picture of the page stays exactly as it was.
 */
.psifit-nur-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- Heading of a section */

/*
 * The heading element of Salient was a column with the class section-title:
 * text centred, the heading a touch bolder with five pixels below it, the
 * intro a touch larger. The rules hung on .row .col.section-title, the column
 * came from WPBakery and is gone. The distance below sits on the block itself
 * and can be changed in the sidebar.
 */
.psifit-section-title {
	text-align: center;
}

body .psifit-section-title :is(h1, h2),
.editor-styles-wrapper .psifit-section-title :is(h1, h2) {
	font-weight: 600;
	margin-bottom: 5px;
}

/*
 * A bullet list keeps its text on the left even in a centred section title.
 * The live site has that as an inline style on every list item; the list item
 * block has no place for it, so it is one rule here.
 */
body .psifit-section-title li,
.editor-styles-wrapper .psifit-section-title li {
	text-align: left;
}

body .psifit-section-title p,
.editor-styles-wrapper .psifit-section-title p {
	font-size: 20px;
	line-height: 28px;
	padding-bottom: 0;
}

/* ----------------------------------------------------- Heading distances */

/*
 * Inside a column Salient gives a heading of the third and fourth level
 * eight pixels below, rule .row .col h3, .row .col h4. The column came from
 * WPBakery and is gone, and Gutenberg replaces the margin of every child of a
 * layout with its own, so that distance had disappeared. A heading of the
 * second level carries nothing below, except in a section title.
 */
body .psifit-row :is(h3, h4),
.editor-styles-wrapper .psifit-row :is(h3, h4) {
	margin-bottom: 8px;
}

/* ------------------------------------------------------ Rows and columns */

/*
 * The distance below a row stands on the block itself, written there by the
 * converter: 27 pixels, 1.5em of the base type, the way Salient sets it. A row
 * that runs the whole width carries nothing, otherwise a gap would open
 * between two coloured bands.
 */

/*
 * The distance between two columns sits on the row of columns as a block gap,
 * written there by the converter from the value column_margin of WPBakery. It
 * can be changed in the sidebar. Nothing is needed here.
 */

/*
 * A column of WPBakery could carry a background image. Salient drew it in a
 * div of its own that filled the column. The column block knows no background
 * image, the group does, so the group stands inside the column as a layer of
 * its own and fills it. Picture, section and position sit in the sidebar of
 * the group.
 */
body .psifit-row .wp-block-column:has(> .psifit-column-image),
.editor-styles-wrapper .wp-block-column:has(> .psifit-column-image) {
	position: relative;
}

/* The layer lies behind the padding of the column, the way Salient drew it. */
body .psifit-row .psifit-column-image,
.editor-styles-wrapper .psifit-column-image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/*
 * Once the columns stand below each other the layer has no height of its own
 * and the picture would be gone. Salient keeps about 460 pixels for such a
 * column, measured on the live site between 600 and 900 pixels of window
 * width. Only a column that carries its own padding behaves that way; without
 * padding the live site lets it collapse too, so the marker comes from the
 * converter.
 */
@media (max-width: 781px) {
	body .psifit-row .wp-block-column:has(> .psifit-column-image--tall),
	.editor-styles-wrapper .wp-block-column:has(> .psifit-column-image--tall) {
		min-height: 460px;
	}
}

body .psifit-row .wp-block-column > :not(.psifit-column-image),
.editor-styles-wrapper .wp-block-column > :not(.psifit-column-image) {
	position: relative;
	z-index: 1;
}

/*
 * A child inside an Elementor container is 100 percent wide. If the column is
 * a flex row, a group inside it would otherwise shrink to its content.
 */
body .wp-block-column.is-layout-flex > .wp-block-group {
	width: 100%;
}

/*
 * Gutenberg stacks columns below 782 pixels. Elementor stacks a row already
 * below 1024 as soon as it carries a tablet value.
 */
@media (max-width: 1024px) {
	body .wp-block-columns.psifit-stack-tablet {
		flex-wrap: wrap;
	}

	body .wp-block-columns.psifit-stack-tablet > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Elementor hides single columns on the phone. */
@media (max-width: 767px) {
	body .wp-block-column.psifit-hide-mobile {
		display: none;
	}
}

/* ---------------------------------------------------------- Sections */

/*
 * Full width for sections, even inside the Salient container. Without it the
 * coloured band ends at the content edge instead of the window edge. Front end
 * only, in the editor Gutenberg handles it.
 */
.container-wrap .alignfull,
.entry-content > .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/*
 * A section that runs the full window keeps its content at the width of the
 * Salient container. Above 1000 pixels that is 90 pixels of air on each side,
 * below it 88 percent of the window. The variable content-size alone cannot
 * do both: a section inside the container would lose the 180 pixels a second
 * time. Measured on the live site at ten widths.
 */
.container-wrap .alignfull.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: min(1245px, 100% - 180px);
}

@media (max-width: 999px) {
	.container-wrap .alignfull.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
		max-width: 88%;
	}
}

/*
 * Groups with a berry background carry light text. Elementor had the colour on
 * every text field, one rule on the section is enough here.
 */
.wp-block-group.has-background[style*="#881244"],
.wp-block-group.has-background[style*="rgb(136, 18, 68)"] {
	color: #fff;
}

.wp-block-group.has-background[style*="#881244"] :is(p, li, h1, h2, h3, h4, h5, h6, strong) {
	color: #fff;
}

/*
 * WPBakery knows the row setting text_color light. Salient turns that into
 * light text on a dark background.
 */
body .psifit-inverted,
body .psifit-inverted :is(p, li, h1, h2, h3, h4, h5, h6, strong, em, td, th) {
	color: #fff;
}

.psifit-inverted a:not(.wp-block-button__link) {
	color: #fff;
	text-decoration: underline;
}

/*
 * If a section carries its own font size or family, it applies to paragraphs
 * and lists inside as well. The theme.json sets 18 pixels otherwise.
 */
body .wp-block-group[style*="font-size"] :is(p, li) {
	font-size: inherit;
	line-height: inherit;
}

/*
 * A second typeface, previously set on the Elementor element. Lato is loaded
 * by the site's own CSS, the notice box below the contact form uses it.
 */
.psifit-font-lato,
.psifit-font-lato :is(p, li, h1, h2, h3, h4, h5, h6) {
	font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------- Page edges */

/*
 * Four pages ran in Elementor with header, content, footer and nothing else.
 * The Salient page template puts 40 pixels of padding and the 1425 pixel
 * container around that. Those pages carry the class psifit-no-container.
 */
body.psifit-no-container .container-wrap,
body.psifit-no-container[data-header-resize="0"] .container-wrap,
body.psifit-no-container[data-header-resize="1"] .container-wrap {
	padding-top: 0;
	padding-bottom: 0;
	background-color: transparent;
}

body.psifit-no-container .container-wrap > .container.main-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/*
 * If the content starts or ends with a full width section, the container
 * padding falls away there. The coloured band met the header and the footer
 * directly in WPBakery too.
 */
body.psifit-flush-top .container-wrap,
body.psifit-flush-top[data-header-resize="0"] .container-wrap,
body.psifit-flush-top[data-header-resize="1"] .container-wrap {
	padding-top: 0;
}

body.psifit-flush-bottom .container-wrap {
	padding-bottom: 0;
}

/* ------------------------------------------------------------- Images */

/*
 * Salient stretches every content image in a full width row to 100 percent,
 * rule body .container-wrap [class*=wp-block].alignfull img. The chain here
 * therefore starts at body as well.
 */
body .container-wrap .psifit-row figure.wp-block-image > img,
body .container-wrap .psifit-text figure.wp-block-image > img,
body .container-wrap .psifit-column figure.wp-block-image > img,
.editor-styles-wrapper .psifit-row figure.wp-block-image > img,
.editor-styles-wrapper .psifit-text figure.wp-block-image > img,
.editor-styles-wrapper .psifit-column figure.wp-block-image > img {
	width: auto;
	max-width: 100%;
	height: auto;
}

/*
 * An image that fills its cell and gets cropped, in Elementor height together
 * with object-fit cover. The link around it is only as wide as its content.
 */
body figure.wp-block-image.psifit-image-cover,
body figure.wp-block-image.psifit-image-cover > a {
	display: block;
	width: 100%;
}

body figure.wp-block-image.psifit-image-cover img {
	width: 100%;
	max-width: 100%;
}

/*
 * Below 1025 pixels Elementor gives these images a fixed height of 250 pixels
 * instead of a share of the column. The width then follows the aspect ratio,
 * so the picture sits narrower and centred, three of them below each other.
 * The height travels in the inline style of the image, which is why these two
 * declarations need the weight.
 */
@media (max-width: 1024px) {
	body figure.wp-block-image.psifit-image-cover,
	body figure.wp-block-image.psifit-image-cover > a {
		width: fit-content;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	body figure.wp-block-image.psifit-image-cover img {
		width: auto !important;
		max-width: 100%;
		height: 250px !important;
	}
}

/*
 * Images that had the Fade In setting in Salient appear while scrolling.
 * Duration and easing as in the theme.
 */
.psifit-fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.8s cubic-bezier(0.12, 0.75, 0.4, 1), transform 0.8s cubic-bezier(0.12, 0.75, 0.4, 1);
}

.psifit-fade-in.is-visible {
	opacity: 1;
	transform: none;
}

/* In the editor and without Javascript the image is there right away. */
.editor-styles-wrapper .psifit-fade-in,
.no-js .psifit-fade-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.psifit-fade-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------- Accordion */

/*
 * A row of the question list, the way Salient drew it: a light grey bar with
 * a round plus in front of the question and twenty pixels of air below. The
 * details element brings its own marker, a small triangle, which has to go.
 * The plus is drawn as a picture instead of a glyph, so no icon font has to
 * travel with the page. Values measured on the live site.
 */
details.psifit-accordion {
	/* Der Block bringt selbst zwoelf Pixel Polster mit, die Zeile hat keines. */
	margin: 27px 0 20px;
	padding: 0;
	border: 0;
}

/*
 * Zwischen zwei Zeilen stehen zwanzig Pixel, zwischen der Abschnitts-
 * ueberschrift und der ersten Zeile siebenundzwanzig. Beides kam bei Salient
 * aus der Huelle um die Zeilen, die es hier nicht mehr gibt.
 */
details.psifit-accordion + details.psifit-accordion {
	margin-top: 0;
}

details.psifit-accordion > summary {
	position: relative;
	display: block;
	padding: 13px 16px 13px 48px;
	background: rgba(0, 0, 0, 0.043);
	color: rgba(0, 0, 0, 0.65);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

details.psifit-accordion > summary::-webkit-details-marker {
	display: none;
}

details.psifit-accordion > summary::marker {
	content: '';
}

details.psifit-accordion > summary::before {
	content: '';
	position: absolute;
	left: 16px;
	top: 50%;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Ccircle cx=%279%27 cy=%279%27 r=%279%27 fill=%27%23888888%27/%3E%3Cpath d=%27M7.8 3.6h2.4v3.6h3.6v2.4h-3.6v3.6H7.8v-3.6H4.2V7.2h3.6z%27 fill=%27%23ffffff%27/%3E%3C/svg%3E") center center / 18px 18px no-repeat;
}

details.psifit-accordion[open] > summary::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 18 18%27%3E%3Ccircle cx=%279%27 cy=%279%27 r=%279%27 fill=%27%23888888%27/%3E%3Cpath d=%27M4.2 7.2h9.6v2.4H4.2z%27 fill=%27%23ffffff%27/%3E%3C/svg%3E");
}

/* The question carries the text, so it takes the type of the bar. */
.psifit-accordion__title {
	margin: 0;
	display: inline;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}

/*
 * Below 1000 pixels Salient sets size and line height on every heading with
 * !important. The question would then read two pixels bigger than the bar it
 * sits in, longer ones would break into a second line, and with 36 rows the
 * page ran several hundred pixels long. Hence the same weight here.
 */
@media (max-width: 999px) {
	.psifit-accordion__title {
		font-size: inherit !important;
		line-height: inherit !important;
		font-weight: inherit !important;
	}
}

/* --------------------------------------------- Course image in the list */

/*
 * The preview image of the course list is 255 pixels wide. The Events Calendar
 * would otherwise compute the width as 37.5 percent of its wrapper and the
 * image ends up 96 pixels small.
 */
body .tribe-events .custom-event-image .tribe-events-calendar-list__event-featured-image-wrapper,
body .tribe-common .custom-event-image .tribe-events-calendar-list__event-featured-image-wrapper {
	width: 255px;
	margin-bottom: 0;
}

/**
 * Button of the Elementor pages. Elementor placed it with align-self in
 * its container, which is why the converter writes a justification on the
 * row of buttons.
 */
body .psifit-button .wp-block-button__link {
	border-radius: 3px;
}

body .psifit-button--shadow .wp-block-button__link {
	transition: box-shadow 0.3s ease;
}

body[data-button-style] .psifit-button--shadow .wp-block-button > .wp-block-button__link:hover,
body[data-button-style] .psifit-button--shadow .wp-block-button > .wp-block-button__link:focus-visible {
	/* Salient legt auf jeden Knopf seinen eigenen Schatten mit !important. */
	color: #fff;
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
	transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
	body .psifit-button--shadow .wp-block-button__link {
		transition: none;
	}
}

/*
 * The MailPoet form on the newsletter page.
 *
 * In WPBakery it sat right below the heading with no gap. A Gutenberg flow
 * layout gives every child 24 pixels on top, which pushed the whole form and
 * everything under it down.
 */
.container-wrap .wp-block-group > div.mailpoet_form {
	margin-top: 0;
}

/*
 * A block right after an image inside a row.
 *
 * WPBakery left 15 pixels below an image, the flow of Gutenberg gives the next
 * block 24. That is the nine pixel difference that showed up on every page
 * whose row starts with a picture.
 */
.psifit-row > .wp-block-image + *,
.psifit-row > .psifit-column > .wp-block-image + * {
	margin-top: 15px;
}