/**
 * Theme Button Styles
 * 
 * This file contains all custom styles related to buttons using the UAGB 
 * button component, especially the `.standard` style variations.
 * 
 * If additional button styles or variations become too large, create a 
 * separate sub-file and name it accordingly (e.g., theme_buttons-outline.css).
 */

.is-root-container .standard .uagb-buttons-repeater,
.standard .uagb-buttons-repeater {
  font-size: 20px;
  font-family: var(--headlinefont);
  color: var(--color-1) !important;
  border: none !important;
  font-weight: 500;
  letter-spacing: 0.02;
  padding: 0.59em 0.9em;
}

.standard .uagb-buttons-repeater {
  position: relative;
}

.standard .uagb-buttons-repeater:hover::after {
  height: 100%;
}

.standard .uagb-buttons-repeater::after {
  content: "" !important;
  display: block !important;
  width: 100%;
  height: 0.9em;
  position: absolute;
  background-color: var(--color-4);
  bottom: 0;
  z-index: 1;
  transition: all 0.5s ease 0s;
}

.standard .uagb-buttons-repeater {
  z-index: 9;
  position: relative;
}

.standard .uagb-button__link {
  z-index: 9;
}

/*------------*/

.chronik-buttons-wrapper > .uagb-buttons__wrap.uagb-buttons-layout-wrap {
  gap: var(--gap-l) !important;
}

.wp-block-button .wp-block-button__link {
  padding: 1.4em 2.1em;
  border-radius: 0;
  font-size: var(--btn-font-size);
  font-weight: 600;
  font-family: var(--mainfont);
  background: transparent !important;
  color: var(--ast-global-color-2) !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: inline-block;
}

.wp-block-button .wp-block-button__link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  border: 2px solid var(--ast-global-color-0);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
  background-color: var(--ast-global-color-0);
}

.wp-block-button .wp-block-button__link:hover::before {
  height: 100%;
}

@media (max-width: 1070px) {
.chronik-buttons-wrapper .uagb-buttons__wrap.uagb-buttons-layout-wrap {
    justify-content: flex-start !important;
}
}

@media (max-width: 990px) {
  /*----------------- ELEMENT -------------*/
  /*----------------- END ELEMENT ---------*/
}
@media (max-width: 767px) {
.read-more-hidden .uagb-buttons__wrap.uagb-buttons-layout-wrap {
    justify-content: flex-start !important;
}
}
@media (max-width: 560px) {
  .chronik-buttons-wrapper > .uagb-buttons__wrap.uagb-buttons-layout-wrap {
    gap: var(--gap-m) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
}