/* smooth-scroll */
/* In-page links (#…) scroll smoothly there, unless the visitor asks for less motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* blog-cards */
/* Blog overview: a post with no featured image (WordPress leaves has-post-thumbnail off its list item)
   is a light yellow card with its text inside, as on the old site; one with an image is unchanged */
.wp-block-post:not(.has-post-thumbnail) .blog-card {
  background-color: var(--mcg-color-surface-accent);
  padding: 40px 30px;
}
.wp-block-post:not(.has-post-thumbnail) .blog-card-image {
  display: none;
}

/* pagination */
/* Page numbers under a post list: the page being shown sits in a light yellow circle, as big as the arrows beside it */
.wp-block-query-pagination-numbers .page-numbers.current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  margin-inline: 0.2em;
  border-radius: 50%;
  background-color: var(--mcg-color-surface-accent);
}

/* language-switcher */
/* The WPML language switcher at the top of the menu panel: as wide as it needs (WPML makes it
   100% !important, which pushed "zurück" onto two lines) and in the menu's type, white */
.kloos-menu-panel-top .wpml-language-switcher-block {
  width: auto !important;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  min-height: 42px;
  align-items: center;
  font-family: Inter, sans-serif;
  font-size: var(--mcg-font-size-menu);
  font-weight: 700;
  line-height: 150%;
  color: var(--mcg-color-text-on-dark);
}
/* Its list of the other languages opens under it (the Navigation block styles that would place it are not loaded), white on the panel, yellow on hover like the menu links */
.kloos-menu-panel-top .wpml-language-switcher-block .wp-block-navigation-submenu {
  position: relative;
}
/* As specific as WPML's own rules (and one class more), which set min-width, padding and background with !important */
.kloos-site-menu-layer .kloos-menu-panel-top .wpml-language-switcher-block .wpml-ls-dropdown ul li.wp-block-navigation-submenu ul.wp-block-navigation__submenu-container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 160px !important; /* covers the menu item under it */
  padding: 4px 0 8px !important;
  background-color: var(--mcg-color-surface-dark) !important;
  color: var(--mcg-color-text-on-dark);
}
.kloos-menu-panel-top .wpml-language-switcher-block .wp-block-navigation__submenu-container a {
  padding: 0;
  color: inherit;
  text-decoration: none;
}
.kloos-menu-panel-top .wpml-language-switcher-block .wp-block-navigation__submenu-container a:hover,
.kloos-menu-panel-top .wpml-language-switcher-block .wp-block-navigation__submenu-container a:focus-visible {
  color: var(--mcg-color-accent);
}

/* long-words */
/* In a post, a link or a piece of code with no spaces (a long URL, a tracking snippet) breaks where
   it has to instead of running past the screen; anything that fits is left as it is */
.wp-block-post-content a,
.wp-block-post-content code {
  overflow-wrap: break-word;
}