/*
Theme Name: .kloos Theme
Theme URI: https://www.vonblock.com
Author: .kloos digital GmbH
Description: Custom theme for .kloos digital GmbH website
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vonblock-builder-theme

Requires Plugin: Von Block Builder
*/
.wp-block-post-terms.taxonomy-post_tag {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 2em;
  background-color: var(--mcg-color-surface-accent);
}

.wp-block-post-terms.taxonomy-post_tag a {
  font-family: Inter, Sans-Serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--mcg-color-text-main);
  border: 2px solid var(--mcg-color-text-main);
  border-radius: 50px;
  padding-inline: 1.5em;
  padding-block: 0.5em;
}

/* Pagination Icons */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-size: 0; /* Hide text */
}

.wp-block-query-pagination-numbers {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 20px;
}

.wp-block-query-pagination-previous::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 34px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.7419 9.28963L12.0645 16.9999L19.7419 24.6774' stroke='%230F172A' stroke-width='2'/%3E%3Cpath d='M17 33C8.16345 33 1 25.8366 1 17C1 8.16345 8.16345 1 17 1C25.8366 1 33 8.16345 33 17C33 25.8366 25.8366 33 17 33Z' stroke='%230F172A' stroke-width='2'/%3E%3C/svg%3E");
}

.wp-block-query-pagination-next::after {
	content: "";
	display: inline-block;
	width: 34px;
	height: 34px;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.2581 24.7104L21.9355 17.0001L14.2581 9.32263' stroke='%230F172A' stroke-width='2'/%3E%3Cpath d='M17 1C25.8366 1 33 8.16345 33 17C33 25.8366 25.8366 33 17 33C8.16344 33 1 25.8366 1 17C1 8.16344 8.16345 1 17 1Z' stroke='%230F172A' stroke-width='2'/%3E%3C/svg%3E");
}

/* ==========================================================
   BUTTONS
   A Button block's look is a Von Block typography style picked for its text: btn (the yellow
   pill with the arrow), btn-light (the same, regular weight), btn-contact (a profile's contact
   buttons). Von Block writes :hover and ::after, but not the two together; that, and "no hover
   effect on touch screens", is here.
   ========================================================== */
/* A button is never wider than the column it is in. Weightless, so a class on the block (a
   typography style's min-width) says otherwise */
:where(.wp-block-buttons > .wp-block-button) {
  max-width: 100%;
  min-width: 0;
}

.mcg-typo-btn:hover::after,
.mcg-typo-btn-light:hover::after {
  transform: translateX(6px);
}

/* :root — the styles' own :hover comes later in the framework at the weight of one class. A
   button with custom styles of its own (the Home hero) keeps its own hover colours */
@media (hover: none), (pointer: coarse) {
  :root .mcg-typo-btn:not([data-mcg-custom-style-id]):hover,
  :root .mcg-typo-btn-light:not([data-mcg-custom-style-id]):hover,
  :root .mcg-typo-btn-contact:not([data-mcg-custom-style-id]):hover {
    background-color: var(--mcg-color-primary-action);
    border-color: transparent;
  }
  :root .mcg-typo-btn:not([data-mcg-custom-style-id]):hover,
  :root .mcg-typo-btn-light:not([data-mcg-custom-style-id]):hover {
    color: #000;
  }
  :root .mcg-typo-btn:hover::after,
  :root .mcg-typo-btn-light:hover::after {
    transform: none;
  }
}

/* ==========================================================
   MOBILE: KEIN HORIZONTALES SEITEN-SCROLLING
   Interne horizontale Scroller wie .jump-nav-track bleiben nutzbar.
   ========================================================== */
@media (max-width: 782px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip !important;
  }

  .wp-site-blocks,
  main,
  .wp-block-post-content {
    max-width: 100% !important;
    overflow-x: clip;
  }

  /* Verhindert, dass breite Block-/Builder-Wrapper den Viewport verbreitern. */
  .wp-site-blocks > *,
  .wp-block-post-content > * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Die Sprungnavigation darf intern weiterhin horizontal scrollen. */
  .jump-nav,
  .jump-nav-track {
    max-width: 100%;
    box-sizing: border-box;
  }

  .jump-nav-track {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* Site-wide rules that were in the Site Editor's "Additional CSS" */
html {
overflow-x: hidden;
}

.a-hover-orange a:hover {
color: var(--mcg-color-accent);
}

.no-underline {
text-decoration: none;
}


figure.wp-block-post-featured-image  {
  height: 100%;
}

figure.wp-block-post-featured-image img {
  height: 100%;
}