/*
Theme Name: MCG Builder Theme
Theme URI: https://www.mcgcss.com
Author: Martin Bory
Author URI: https://www.mcgcss.com
Description: Just a minimal WordPress theme to be customized by you.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mcg-builder-theme
Requires Plugin: Von Block Builder
*/
.wp-block-post-terms.taxonomy-post_tag {
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 2em;
  background-color: var(--wp--preset--color--light-yellow);
}

.wp-block-post-terms.taxonomy-post_tag a {
  font-family: Inter, Sans-Serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--wp--preset--color--dark-gray);
  border: 2px solid var(--wp--preset--color--dark-gray);
  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 !important; /* Hide text */
}

.wp-block-query-pagination-numbers {
  display: flex;
  flex-flow: row;
  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");
}

.blog-categories-list {
  list-style: none;
  display: flex;
  flex-flow: row;
  gap: 20px;
  flex-wrap: wrap;
  font-weight: 300 !important;
  padding: 0;
}
/* ==========================================================
   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 */
.wp-block-buttons > .wp-block-button {
  max-width: 100%;
  min-width: 0;
}

.has-btn-font-size:hover::after,
.has-btn-light-font-size:hover::after {
  transform: translateX(6px);
}

/* :root — the styles' own :hover comes later in the framework at the weight of one class */
@media (hover: none), (pointer: coarse) {
  :root .has-btn-font-size:hover,
  :root .has-btn-light-font-size:hover,
  :root .has-btn-contact-font-size:hover {
    background-color: var(--wp--preset--color--yellow);
    border-color: transparent;
  }
  :root .has-btn-font-size:hover,
  :root .has-btn-light-font-size:hover {
    color: #000;
  }
  :root .has-btn-font-size:hover::after,
  :root .has-btn-light-font-size: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% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

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

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

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

  .jump-nav__track {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
}

/* ==========================================================
   RESPONSIVE IMAGE WIDTH – V4
   Put class "responsive-image-width" DIRECTLY on the Gutenberg
   Image block (figure.wp-block-image).

   < 1220px: 220px
   >= 1220px: 250px

   The image itself always fills that figure. This avoids the huge
   tablet images caused by width:100% between 769px and 1219px.
   ========================================================== */

html body figure.wp-block-image.responsive-image-width {
  width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  box-sizing: border-box !important;
}

html body figure.wp-block-image.responsive-image-width img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

@media (min-width: 1220px) {
  html body figure.wp-block-image.responsive-image-width {
    width: 250px !important;
    max-width: 250px !important;
    flex-basis: 250px !important;
  }
}

/* Fallback if the class is placed directly on the <img>. */
html body img.responsive-image-width {
  display: block !important;
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
}

@media (min-width: 1220px) {
  html body img.responsive-image-width {
    width: 250px !important;
    max-width: 250px !important;
  }
}

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

.a-hover-orange a:hover {
color: var(--wp--preset--color--amber);
}

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


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

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