/* KlaesLab theme — reproduces the former The7 "slide-out side header" design with core blocks.
   Measurements were taken from the live site (1440px and 390px viewports). */

:root {
	--kl-blue: #003560;
	--kl-navy: #17365c;
	--kl-green: #8dae10;
	--kl-accent: #93c248;
	--kl-text: #333333;
	--kl-heading: #262d37;
	--kl-divider: rgba(51, 51, 51, 0.14);
	--kl-switch: 992px; /* The7 "first switch": below this the mobile header + mobile menu apply */
}

body { margin: 0; line-height: 28px; } /* restated: Tailwind's reset would otherwise win */
.wp-site-blocks { padding: 0; }

/* Content column: The7 .wf-wrap = max 1400px incl. 50px side padding (20px on mobile) */
.kl-main {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 50px;
	box-sizing: border-box;
}
:where(.kl-main) > :where(.wp-block-post-content) { max-width: none; }
:where(.kl-main .wp-block-post-content) > * { max-width: none; }
/* The7 set Arial on the content area, overriding `body { font-family: … }` rules inside hand-written HTML blocks. */
.kl-main { font-family: Arial, Helvetica, Verdana, sans-serif; } /* zero specificity: page/plugin CSS (e.g. People's 1200px column) wins */

/* ---------- Header ---------- */
.kl-header {
	position: sticky;
	top: 0;
	z-index: 100;
	min-height: 113px;
	padding: 20px 30px 20px 50px;
	box-sizing: border-box;
	background: #fff;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.07);
}
.admin-bar .kl-header { top: var(--wp-admin--admin-bar--height, 32px); }
.kl-header__logo img { display: block; width: 120px; height: auto; }

/* Hamburger: three navy bars like The7's side-header toggle */
.kl-nav .wp-block-navigation__responsive-container-open {
	width: 65px;
	height: 56px;
	padding: 18px 15px;
	box-sizing: border-box;
	color: var(--kl-navy);
	position: relative;
}
.kl-nav .wp-block-navigation__responsive-container-open svg { display: none; }
.kl-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	top: 50%;
	height: 3px;
	margin-top: -1.5px;
	border-radius: 2px;
	background: currentColor;
	box-shadow: 0 -9px 0 currentColor, 0 9px 0 currentColor;
}

/* ---------- Slide-out menu (desktop ≥ 992px): 400px panel on the right ---------- */
/* matches core's ":not(.has-background) … :not(.disable-default-overlay)" specificity so the dimmed backdrop wins */
.kl-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 0;
	background-color: rgba(0, 0, 0, 0.4);
	color: var(--kl-text);
	animation: kl-fade 0.25s ease-out;
}
.kl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	position: relative;
	max-width: none;
	width: 400px;
	height: 100%;
	margin: 0 0 0 auto;
	background-color: #e7e7e7;
	background-image: url("../img/pentagon-pattern.svg");
	border-left: 1px solid var(--kl-blue);
	animation: kl-slide 0.35s ease-out;
}
.kl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: static;
	height: 100%;
	overflow-y: auto;
	margin: 0;
}
.kl-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 30px;
	left: -80px;
	right: auto;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: #000;
}
.kl-nav .wp-block-navigation__responsive-container-close svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 1.2px; }
.kl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding: 70px 30px 40px;
	align-items: center;
	gap: 0;
}
.kl-nav .is-menu-open .wp-block-navigation__container { gap: 0; align-items: center; width: 100%; }
.kl-nav .is-menu-open .wp-block-site-logo { margin: 0 0 30px; }
.kl-nav .is-menu-open .wp-block-site-logo img { width: 120px; height: auto; display: block; }
.kl-nav .is-menu-open .wp-block-navigation-item { width: 100%; justify-content: center; text-align: center; }
.kl-nav .is-menu-open .wp-block-navigation-item__content {
	font-family: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
	font-size: 20px;
	line-height: 24px;
	font-weight: 700;
	color: var(--kl-text);
	text-decoration: none;
	padding: 0;
}
.kl-nav .is-menu-open .wp-block-navigation-item:has(> .wp-block-site-logo) + .wp-block-navigation-item::before { display: none; }
.kl-nav .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "";
	display: block;
	width: 26px;
	height: 4px;
	margin: 20px auto;
	background: var(--kl-green);
}
.kl-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--kl-blue); }

@keyframes kl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes kl-slide { from { transform: translateX(100%); } to { transform: none; } }

/* ---------- Mobile (< 992px): white 330px panel, left-aligned items, green close button ---------- */
@media (max-width: 991px) {
	.kl-header { min-height: 93px; padding: 10px 20px 10px 30px; }
	.kl-main { padding: 0 20px; }
	.kl-nav .wp-block-navigation__responsive-container-open { width: 40px; height: 40px; padding: 12px 9px; }
	.kl-nav .wp-block-navigation__responsive-container-open::before { left: 9px; right: 9px; height: 2px; margin-top: -1px; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }

	.kl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		width: 330px;
		max-width: calc(100% - 60px);
		background: #fff;
		border-left: 0;
	}
	.kl-nav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 15px;
		left: auto;
		right: 13px;
		width: 30px;
		height: 30px;
		background: var(--kl-accent);
		color: #fff;
	}
	.kl-nav .wp-block-navigation__responsive-container-close svg { width: 24px; height: 24px; }
	.kl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding: 45px 15px 30px 30px;
		align-items: stretch;
	}
	.kl-nav .is-menu-open .wp-block-navigation-item:has(> .wp-block-site-logo) { display: none; }
	.kl-nav .is-menu-open .wp-block-navigation__container { align-items: stretch; }
	.kl-nav .is-menu-open .wp-block-navigation-item { justify-content: flex-start; text-align: left; }
	.kl-nav .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item::before { display: none; }
	.kl-nav .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item { border-top: 1px solid var(--kl-divider); }
	.kl-nav .is-menu-open .wp-block-navigation-item:has(> .wp-block-site-logo) + .wp-block-navigation-item { border-top: 0; }
	.kl-nav.wp-block-navigation .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 15px 0;
		font-family: Roboto, Helvetica, Arial, Verdana, sans-serif;
		font-size: 16px;
		line-height: 20px;
	}
	.kl-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
	.kl-nav .is-menu-open .wp-block-navigation-item__content[aria-current="page"] { color: var(--kl-accent); }
}

/* ---------- Footer bottom bar ---------- */
.kl-footer {
	margin-top: 0;
	background: var(--kl-blue);
	color: #fff;
	font-size: 15px;
	line-height: 26px;
	min-height: 60px;
	box-sizing: border-box;
	padding: 10px 70px 15px;
}
.kl-footer p, .kl-footer .kl-footer__copy { margin: 0; color: #fff; }
@media (max-width: 777px) { .kl-footer { padding: 10px 20px 15px; text-align: center; } }

.kl-to-top {
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 2px;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s;
	z-index: 90;
}
.kl-to-top.is-visible { opacity: 1; visibility: visible; }
.kl-to-top:hover { background: rgba(0, 0, 0, 0.4); }

/* ---------- Homepage: News and Events carousel (replaces Ultimate Addons carousel + Collapse Magic) ---------- */
.kl-section-title { font-size: 16px; line-height: 68px; font-weight: 700; color: var(--kl-heading); text-align: center; margin: 0; }
.wp-block-separator.kl-rule { border: 0; border-top: 3px solid var(--kl-navy); margin: 60px 10px; opacity: 1; width: auto; max-width: none; }
.kl-news { position: relative; margin: 0 10px 35px; padding: 0 0 20px; }
.kl-news__track {
	display: flex;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.kl-news__track::-webkit-scrollbar { display: none; }
.kl-news .kl-news__item {
	flex: 0 0 20%;
	box-sizing: border-box;
	padding: 0 30px;
	margin: 0;
	scroll-snap-align: start;
	font-size: 16px;
	line-height: 28px;
	color: var(--kl-blue);
}
.kl-news__item > * { margin: 0; }
.kl-news__item .wp-block-image { margin: 28px 0 0; }
.kl-news__item .wp-block-image img { width: 100%; height: auto; display: block; }
.kl-news__item .wp-block-details { margin-top: 0; }
.kl-news__item .wp-block-details summary {
	padding: 8px;
	cursor: pointer;
	list-style: none;
	text-align: center;
}
.kl-news__item .wp-block-details summary::-webkit-details-marker { display: none; }
.kl-news__item .wp-block-details summary::before { content: "▼ "; }
.kl-news__item .wp-block-details[open] summary::before { content: "▲ "; }
.kl-news__item .wp-block-details > :not(summary) { margin: 0; }
.kl-news__arrow {
	position: absolute;
	top: 50%;
	margin-top: -10px;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 20px;
	line-height: 20px;
	color: var(--kl-text);
	cursor: pointer;
}
.kl-news__arrow--prev { left: -15px; }
.kl-news__arrow--next { right: -15px; }
.kl-news__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; padding: 0; list-style: none; }
.kl-news__dots button {
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-size: 0;
}
.kl-news__dots button::before { content: ""; display: block; width: 8px; height: 8px; margin: 6px; border-radius: 50%; background: #333; opacity: 0.25; }
.kl-news__dots button[aria-current="true"]::before { opacity: 0.75; }
@media (max-width: 1025px) { .kl-news .kl-news__item { flex-basis: 33.3333%; } }
@media (max-width: 759px) {
	.kl-news .kl-news__item { flex-basis: 50%; padding: 0 15px; }
	.kl-news__arrow--prev { left: -10px; }
	.kl-news__arrow--next { right: -10px; } /* stays inside the 390px viewport */
}

/* ---------- Contact form (Contact Form 7 styled like the former The7 form) ---------- */
.kl-contact-intro { font-size: 16px; line-height: 30px; color: var(--kl-heading); text-align: center; margin: 0 0 28px; }
.kl-contact .wpcf7 input[type="text"],
.kl-contact .wpcf7 input[type="email"],
.kl-contact .wpcf7 input[type="tel"],
.kl-contact .wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	height: 40px;
	margin: 0 0 10px;
	padding: 5px 15px;
	font: 16px/28px Arial, Helvetica, Verdana, sans-serif;
	color: #777;
	background: #fdfdfd;
	border: 1px solid var(--kl-divider);
	border-radius: 1px;
}
.kl-contact .wpcf7 textarea { display: block; height: 170px; margin-bottom: 20px; } /* The7 default size, 20px above the terms */
/* The7 "message height" in rows (converter adds kl-msg-rows-N): N × 28px line + padding and border */
.kl-contact .wpcf7 form[class*="kl-msg-rows-"] textarea { height: calc(var(--kl-msg-rows) * 28px + 12px); }
.kl-contact .wpcf7 form.kl-msg-rows-5 { --kl-msg-rows: 5; }
.kl-contact .wpcf7 form.kl-msg-rows-6 { --kl-msg-rows: 6; }
.kl-contact .wpcf7 form.kl-msg-rows-7 { --kl-msg-rows: 7; }
.kl-contact .wpcf7 form.kl-msg-rows-8 { --kl-msg-rows: 8; }
.kl-contact .wpcf7 form.kl-msg-rows-10 { --kl-msg-rows: 10; }
.kl-contact .wpcf7 p { margin: 0; }
.kl-contact .wpcf7 br { display: none; } /* CF7 puts a <br> between label rows; The7's form had none */
.kl-contact .wpcf7-form-control-wrap { display: block; }
.kl-contact .wpcf7-acceptance { display: block; margin: 0 0 20px; }
.kl-contact .wpcf7-list-item { margin: 0; }
.kl-contact .wpcf7-acceptance .wpcf7-list-item-label { font-size: 15px; } /* The7 .form-terms-text */
.kl-contact .wpcf7-submit {
	padding: 14px 28px;
	border: 0;
	border-radius: 100px;
	background: var(--kl-accent);
	color: #fff;
	font: 700 14px/16px "Open Sans", Helvetica, Arial, Verdana, sans-serif;
	cursor: pointer;
}
.kl-contact .wpcf7-submit:hover { background: #89ae43; }
.kl-contact .wpcf7-spinner { vertical-align: middle; }
.kl-contact { margin-bottom: 20px; }

/* Customizer "Additional CSS" from the old theme is moved here so links/buttons in content keep working. */
/*button für allg links mit text*/
.link-button {
    display: block;
    /*margin auto setzt element in die container mitte, backgrond is RUB grün und text is weiß*/
    text-align: center;
    line-height: 50px;
    background-color: #8dae10;
    color: #ffffff;
    border: 1px solid #8dae10;
    border-radius: 3px;
    font-weight: bold;
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    /*etwas shadow für depth*/
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    /*die folgende Zeile entfernt das underline vom Text*/
    text-decoration: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    /*für den hover effekt*/
}

.link-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/*Linked in button wie auf H+ Seite, nur ohne position properties*/
.linkedin-button {
    display: block;
    width: 50px;
    height: 50px;
    background-color: transparent;
/*die linkedin logo url*/
    background-image:  url(https://klaeslab.de/wp-content/uploads/2023/08/In-white-logo-no-back.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center; 
    border: 1px solid #17365c;
    cursor: pointer;
/*etwas shadow für depth*/
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
/*für den hover effekt*/
  }
  .linkedin-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  } 
/*und für Twitter*/
.twitter-button {
    display: block;
    width: 50px;
    height: 50px;
    background-color: transparent;
/*die logo url*/
    background-image:  url(https://klaeslab.de/wp-content/uploads/2023/05/2021-Twitter-logo-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center; 
    border: 1px solid #17365c;
    cursor: pointer;
/*etwas shadow für depth*/
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
/*für den hover effekt*/
  }
  .twitter-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }  
/*YouTube gibts ja auch noch*/
.yt-button {
    display: block;
    width: 50px;
    height: 50px;
    background-color: transparent;
/*die logo url*/
    background-image:  url(https://klaeslab.de/wp-content/uploads/2023/05/yt_logo_mono_dark.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center; 
    border: 1px solid #17365c;
    cursor: pointer;
/*etwas shadow für depth*/
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
/*für den hover effekt*/
  }
  .yt-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }   
/* E mail button */
.mail-button  {
    display: block;
    width: 35px;
    height: 35px;
    background-color: transparent;
/*die mail icon-white png url*/
    background-image:  url(https://healthplus.ruhr-uni-bochum.de/wp-content/uploads/2023/04/email-icon-white.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center; 
    border: 1px solid #17365c;
    cursor: pointer;
/*etwas shadow für depth*/
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
/*für den hover effekt*/
  }
  .mail-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  }   
/*class für hidden content, wenn man content mit buttons togglebar machen will*/
.hidden-content {
  display: none;
}
/*button für homepage verlinkungen*/
.home-button {
  display: inline-block;
  width: 50px;
  height: 50px;
/*background soll transparent bleiben*/  
  background-color: transparent;
/*img url für homepage icon*/
  background-image: url(https://healthplus.ruhr-uni-bochum.de/wp-content/uploads/2023/07/home.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  border: 1px solid #8dae10;
  border-radius: 3px;
  cursor: pointer;
/*shadow of depth, siehe oben*/
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: transform 0.2s ease-in-out;
  box-shadow: 0.2s ease-in-out;
}
/*hover effect again*/
.home-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
} 
/*für code displays*/
.code-container {
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-family: monospace;
  white-space: pre-wrap;
  display: none; /* Hidden by default */
}
/*ein button für allgemeine verlinkungen*/
.common-button {
/*width und height jeweils im code machen, da das hier ein allg template ist*/
  background-color: transparent;
/*hier fehlt die background-image property absichtlich, im code jeweils einfügen*/
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
	box-shadow: none;
	margin: 0;
  border: 2px solid #002b4c;
  outline: 1px solid #003f74;
/*für den hover effekt*/
}
.common-button:hover {
  transform: translateY(-2px);
} 
/*begone, white line on top of my content. You wont be missed*/
body #main {
  padding: 0;
}

/* ---------- Converted WPBakery content (migration/convert-wpbakery.php) ----------
   Reproduces The7 + WPBakery spacing: 50px column gutters, no gap between stacked elements,
   10px paragraph spacing, The7 heading colours. Every selector is wrapped in :where() (zero
   specificity) so the CSS inside your own HTML blocks always wins, exactly as it did under The7. */
:where(.kl-main .wp-block-post-content, .kl-main .wp-block-group) > * { margin-block-start: 0; margin-block-end: 0; }
:where(.kl-main .wp-block-post-content) :where(p) { margin: 0 0 10px; }
:where(.kl-main .wp-block-post-content) :where(p:last-child) { margin-bottom: 0; }
:where(.kl-main .wp-block-post-content) :where(h1, h2, h3, h4, h5, h6) { margin: 0 0 10px; color: var(--kl-heading); }
:where(.kl-main .wp-block-post-content) :where(ul.wp-block-list, ol.wp-block-list) { margin: 0 0 10px; padding-left: 1.5em; }
:where(.kl-row) { margin: 0; }
/* Same rule and specificity as WPBakery's `.wpb_text_column :last-child` — page CSS was written against it. */
.kl-text :last-child { margin-bottom: 0; }
.wp-block-columns.kl-row { gap: 50px; margin-bottom: 0; }
.kl-row--stretch_row,
.kl-row--stretch_row_content { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(50px, calc(50vw - 650px)); padding-right: max(50px, calc(50vw - 650px)); }
.kl-bg-e7e7e7 { background: #e7e7e7; }
:where(.kl-main) :where(.wp-block-image) { margin: 0 0 10px; }
:where(.kl-main) :where(.wp-block-image img) { height: auto; }
/* Embeds (YouTube, maps) carry fixed width attributes; The7 kept them inside the column, as here. */
:where(.kl-main) :where(iframe, embed, object, video) { max-width: 100%; }
:where(.kl-main) :where(iframe[src*="youtube.com"], iframe[src*="youtu.be"]) { height: auto; aspect-ratio: 16 / 9; }
:where(.kl-main) :where(.wp-block-image.aligncenter) { text-align: center; }
:where(.kl-main) :where(.wp-block-image.aligncenter img) { margin: 0 auto; }

/* Separators: WPBakery "vc_separator" (border width classes) and plain <hr> */
.kl-main .wp-block-separator { border: 0; border-top: 1px solid var(--kl-divider); margin: 0; opacity: 1; width: 100%; max-width: none; }
.kl-main .wp-block-separator.kl-sep-2 { border-top: 2px solid var(--kl-navy); }
.kl-main .wp-block-separator.kl-sep-3 { border-top: 3px solid var(--kl-navy); }

/* Ultimate Addons headings (converted): size, colour and spacing classes written by convert-wpbakery.php */
.kl-main .kl-uvc-heading { margin-bottom: 0; }
.kl-main .kl-uvc-subheading p { margin: 0; }
/* Subheadings written as several <p> kept The7's 10px paragraph spacing (even after the last one). */
.kl-main .kl-uvc-subheading p:not(:only-child) { margin-bottom: 10px; }
.kl-main .kl-uvc-line.wp-block-separator { width: 150px; border-top: 1px solid var(--kl-accent); margin: 0; }
.kl-main .wp-block-separator.kl-uvc-line--center { margin-left: auto; margin-right: auto; }
.kl-main .wp-block-separator.kl-uvc-line--right { margin-left: auto; }
.kl-main .wp-block-separator.kl-w-120 { width: 120px; }
.kl-main .wp-block-separator.kl-w-150 { width: 150px; }
.kl-main .wp-block-separator.kl-h-2 { border-top-width: 2px; }
.kl-main .wp-block-separator.kl-h-3 { border-top-width: 3px; }
.kl-main .wp-block-separator.kl-accent-line { border-top-color: var(--kl-accent); }
.kl-main .kl-accent { color: var(--kl-accent); }
.kl-main .kl-c-rub-blue { color: var(--kl-blue); }
.kl-main .kl-c-navy { color: var(--kl-navy); }
.kl-main .kl-bold, .kl-main .kl-bold p { font-weight: 700; }
.kl-main .kl-align-center { text-align: center; }
.kl-main .kl-align-right { text-align: right; }
.kl-main .kl-fs-16 { font-size: 16px; } .kl-main .kl-lh-28 { line-height: 28px; }
.kl-main .kl-fs-18 { font-size: 18px; } .kl-main .kl-lh-30 { line-height: 30px; }
.kl-main .kl-fs-20 { font-size: 20px; }
.kl-main .kl-fs-24 { font-size: 24px; } .kl-main .kl-lh-34 { line-height: 34px; }
.kl-main .kl-mb-15 { margin-bottom: 15px; }
.kl-main .kl-mb-20 { margin-bottom: 20px; }
.kl-main .kl-mb-30 { margin-bottom: 30px; }
.kl-main .wp-block-separator.kl-mb-30 { margin-bottom: 30px; }
.kl-main .wp-block-separator.kl-mb-20 { margin-bottom: 20px; }
@media (max-width: 767px) {
	.kl-main .kl-fs-ml-18 { font-size: 18px; } .kl-main .kl-lh-ml-28 { line-height: 28px; }
	.kl-main .kl-fs-ml-24 { font-size: 24px; } .kl-main .kl-lh-ml-34 { line-height: 34px; }
}

/* The7 fancy image fills its column */
.kl-main .wp-block-image.kl-fancy-image img { width: 100%; object-fit: cover; }
.kl-main .kl-ratio-1200-1200 img, .kl-main .kl-ratio-800-800 img, .kl-main .kl-ratio-600-600 img { aspect-ratio: 1 / 1; }
.kl-main .kl-ratio-1500-1000 img { aspect-ratio: 3 / 2; }

/* WPBakery "phone-reverse-col": on phones the second column (e.g. the image) comes first */
@media (max-width: 781px) { .wp-block-columns.phone-reverse-col { flex-direction: column-reverse; } }

/* The7 fancy title (old Publications page) */
.kl-main .kl-fancy-title { margin: 0 0 10px; }
.kl-main .wp-block-separator.kl-fancy-title-sep { border-top: 2px solid var(--kl-accent); margin: 0 0 20px; }

@media (max-width: 781px) {
	.wp-block-columns.kl-row { gap: 0; }
	.kl-row--stretch_row,
	.kl-row--stretch_row_content { padding-left: 20px; padding-right: 20px; }
}