/* ========================================================================== */
/*                                   GENERAL                                  */
/* ========================================================================== */
:root {
  --button-font-size: 1rem;
  --button-line-height: 1.15;
  --button-font-weight: 400;
  --button-letter-spacing: -0.02rem;
  --button-text-transform: uppercase;
  --button-margin-top: 2rem;
  --button-margin-horizontal: 0;
  --button-margin-bottom: 0;
  --button-gap: 1rem;
  --button-padding-vertical: 0.65rem;
  --button-padding-horizontal: 1.5rem;
  --button-border-width: 1px;
  --button-border-radius: 100%;
  --button-box-shadow: none;
  --button-overlay-hover: rgba(0, 0, 0, 0.07);
  /* ----------------------------------- v1 ----------------------------------- */
  --button-text-color: var(--current-color-text);
  --button-background-color: var(--color-3);
  --button-border-default: var(--button-border-width) solid var(--color-1);
  /* -------------------------------- v1 hover -------------------------------- */
  --button-text-color-hover: var(--current-color-text);
  --button-background-color-hover: var(--color-2);
  --button-border-default-hover: var(--button-border-width) solid var(--color-2);
  /* ----------------------------------- v2 ----------------------------------- */
  --button-text-color-v2: var(--current-color-text);
  --button-background-color-v2: transparent;
  --button-border-default-v2: var(--button-border-width) solid var(--current-color-text);
  /* -------------------------------- v2 hover -------------------------------- */
  --button-text-color-v2-hover: var(--color-text);
  --button-background-color-v2-hover: var(--color-3);
  --button-border-default-v2-hover: var(--button-border-width) solid var(--color-1);
}

@media only screen and (max-width: 991px) {
  :root {
    --button-font-size: 1.6rem;
    --button-letter-spacing: -0.032rem;
    --button-padding-vertical: 1.3rem;
    --button-padding-horizontal: 2rem;
  }
}
:is(.wso-button, .button):where(:hover, :focus-visible),
.site-header .wso-menu-cta > a:is(:hover, :focus-visible),
input[type=submit]:is(:hover, :focus-visible),
.nav-link:is(:hover, :focus-visible),
.nav-link.active {
  --button-text-color: var(--button-text-color-hover);
  --button-background-color: var(--button-background-color-hover);
  --button-border-default: var(--button-border-default-hover);
}

.secondary-button,
.wpgb-facet button.wpgb-button {
  --button-text-color: var(--button-text-color-v2);
  --button-background-color: var(--button-background-color-v2);
  --button-border-default: var(--button-border-default-v2);
}

.site .site-header .wso-menu-cta.secondary-button > a:is(:hover, :focus-visible),
.secondary-button:where(:hover, :focus-visible) {
  --button-text-color: var(--button-text-color-v2-hover);
  --button-background-color: var(--button-background-color-v2-hover);
  --button-border-default: var(--button-border-default-v2-hover);
}

.wpgb-facet button.wpgb-button:is(:hover, :focus-visible) {
  --button-text-color: var(--button-text-color-v2-hover);
  --button-background-color: var(--color-2);
  --button-border-default: var(--button-border-default-v2-hover);
}

/* ========================================================================== */
/*                                VIDEO BUTTON                                */
/* ========================================================================== */
:root {
  --video-button-size: 5rem;
  --video-button-background: var(--overlay-light);
  --video-button-color-default: var(--color-2);
  --video-button-margin-bottom: 2rem;
}
@media (max-width: 767px) {
  :root {
    --video-button-size: 4rem;
  }
}

.wso-dark {
  --video-button-background: var(--overlay-dark);
  --video-button-color-default: var(--color-white);
}

/* ========================================================================== */
/*                              HIGHLIGHT BUTTON                              */
/* ========================================================================== */
:root {
  --highlight-button-size: 13rem;
  --highlight-button-color: var(--color-white);
  --highlight-button-outer-border-width: 0;
  --highlight-button-rotation: -10deg;
  /* text */
  --highlight-button-text-1-font-family: var(--p-font-family);
  --highlight-button-text-1-font-size: var(--p-font-size);
  --highlight-button-text-1-line-height: 1.5;
  --highlight-button-text-1-text-transform: none;
  --highlight-button-text-1-letter-spacing: 0;
  --highlight-button-text-1-font-weight: 500;
  --highlight-button-text-1-color-default: var(--highlight-button-color);
  --highlight-button-text-1-hyphens-default: var(--p-hyphens-default);
  --highlight-button-text-1-text-decoration: none;
  /* text in <strong> */
  --highlight-button-text-2-font-family: inherit;
  --highlight-button-text-2-font-size: 2.105em;
  --highlight-button-text-2-line-height: 1.1;
  --highlight-button-text-2-text-transform: inherit;
  --highlight-button-text-2-letter-spacing: inherit;
  --highlight-button-text-2-font-weight: 200;
  --highlight-button-text-2-color-default: inherit;
  --highlight-button-text-2-hyphens-default: inherit;
  --highlight-button-text-2-text-decoration: none;
  /* line spacer */
  --highlight-button-line-width: calc(var(--highlight-button-size) * 0.55);
  --highlight-button-line-margin-vertical: 1rem;
  --highlight-button-line-thickness: 1px;
  --highlight-button-line-color: currentColor;
}
@media only screen and (max-width: 991px) {
  :root {
    --highlight-button-size: 10rem;
    --highlight-button-text-1-font-size: 0.7rem;
  }
}
@media only screen and (max-width: 575px) {
  :root {
    --highlight-button-size: 8rem;
    --highlight-button-text-1-font-size: 0.7rem;
    --highlight-button-text-2-font-size: 1.5em;
    --highlight-button-line-width: 3em;
    --highlight-button-line-margin-vertical: 0.5rem;
  }
}

/* ========================================================================== */
/*                                   BUTTONS                                  */
/* ========================================================================== */
/* ------------------------------- button-list ------------------------------ */
.wso-buttons,
.wp-grid-builder .wpgb-card .wso-buttons {
  margin-top: var(--button-margin-top);
  margin-bottom: var(--button-margin-bottom);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: var(--current-justify-content);
  flex-wrap: wrap;
  gap: var(--button-gap);
}

/* --------------------------------- button --------------------------------- */
.site-content .jig-loadMoreButton,
.site .site-header .ast-main-header-wrap .wso-menu-cta > a,
.wpcf7 input[type=submit],
.wpgb-facet button.wpgb-button,
.nav-link,
.site-content a:is(.wso-button, .button),
.accordion-button.collapsed,
.accordion-button:not(.collapsed),
.accordion-button:is(:hover, :focus),
.accordion-button.collapsed:is(:hover, :focus),
.nav-tabs .nav-link,
.site-content .wso-services-accordion-item .wso-buttons .wso-button {
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  font-weight: var(--button-font-weight);
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-text-transform);
  margin: 0 var(--button-margin-horizontal) 0;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  color: var(--button-text-color);
  background-color: var(--button-background-color);
  border: var(--button-border-default);
  border-radius: var(--button-border-radius);
  box-shadow: var(--button-box-shadow);
  transition: var(--transition-normal);
  text-decoration: none;
}
.site-content .jig-loadMoreButton:disabled,
.site .site-header .ast-main-header-wrap .wso-menu-cta > a:disabled,
.wpcf7 input[type=submit]:disabled,
.wpgb-facet button.wpgb-button:disabled,
.nav-link:disabled,
.site-content a:is(.wso-button, .button):disabled,
.accordion-button.collapsed:disabled,
.accordion-button:not(.collapsed):disabled,
.accordion-button:is(:hover, :focus):disabled,
.accordion-button.collapsed:is(:hover, :focus):disabled,
.nav-tabs .nav-link:disabled {
  filter: grayscale(1);
  opacity: 0.5;
}

.site-content .jig-loadMoreButton,
.site .site-header .ast-main-header-wrap .wso-menu-cta > a,
.wpcf7 input[type=submit],
.wpgb-facet button.wpgb-button,
.nav-link,
.site-content a:is(.wso-button, .button) {
  display: inline-block;
}

.visually-hidden {
  --button-font-size: 0;
  --button-line-height: 0;
  --button-letter-spacing: 0;
  --button-margin-top: 0rem;
  --button-margin-horizontal: 0;
  --button-margin-bottom: 0;
  --button-gap: 0;
  --button-padding-vertical: 0;
  --button-padding-horizontal: 0;
  --button-text-color: transparent;
  --button-background-color: transparent;
  --button-border-width: 0;
  --button-border-default: var(--button-border-width) solid transparent;
  --button-border-radius: 0rem;
  --button-box-shadow: none;
  --button-overlay-hover: transparent;
}

.site-content a:is(.wso-button, .button)::after {
  display: none;
}

.site-content a:is(.wso-button, .button) .button_label {
  padding: 0;
  text-decoration: none;
}

/* Justified Image Grid Button */
.site-content .jig-loadMoreButton {
  position: relative;
  max-width: 100%;
  display: inline-block;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--button-text-color);
  background: var(--button-background-color);
}

.jig-loadMoreButton-inner {
  position: relative;
  z-index: 1;
}

/* Button Hover */
.site-content .jig-loadMoreButton::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transition: all var(--transition-short);
  background: var(--button-overlay-hover);
  opacity: 0;
}

.site-content .jig-loadMoreButton:is(:hover, :focus-visible)::after {
  opacity: 1;
}

/* ------------------------------ video button ------------------------------ */
.site-content .wso-video-button {
  transition: all var(--transition-short) ease-in-out;
  position: relative;
  display: inline-block;
  height: var(--video-button-size);
  width: var(--video-button-size);
  margin: auto auto var(--video-button-margin-bottom) auto;
  color: var(--video-button-color-default);
  border-radius: 50%;
  background: var(--video-button-background);
  padding: 0;
}
.site-content .wso-video-button:hover, .site-content .wso-video-button:focus-visible {
  transform: scale(1.1);
  --video-button-color-default: var(--color-black);
  --video-button-background: var(--color-white);
}
.site-content .wso-video-button svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.site-content .wso-column-image .wso-video-button {
  --video-button-margin-bottom: 0rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.site-content .wso-column-image .wso-video-button:hover, .site-content .wso-column-image .wso-video-button:focus-visible {
  transform: translate(-50%, -50%) scale(1.1);
}

/* ---------------------------- highlight button ---------------------------- */
.site .wso-highlight-button {
  width: var(--highlight-button-size);
  height: var(--highlight-button-size);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  box-sizing: border-box;
  border: var(--highlight-button-outer-border-width) solid var(--highlight-button-color);
  rotate: var(--highlight-button-rotation);
}
.site .wso-highlight-button .wso-column-attr {
  display: contents;
}
.site .wso-highlight-button p {
  width: calc(var(--highlight-button-size) - var(--highlight-button-outer-border-width) * 2);
  height: calc(var(--highlight-button-size) - var(--highlight-button-outer-border-width) * 2);
  display: flex;
  align-items: center;
  align-content: center;
  aspect-ratio: 1/1;
  display: block;
  margin: 0;
  padding: 0.5em 1.5em;
  border-radius: 50%;
  box-sizing: border-box;
  background-color: var(--color-2);
  text-align: center;
  font-family: var(--highlight-button-text-1-font-family);
  font-size: var(--highlight-button-text-1-font-size);
  line-height: var(--highlight-button-text-1-line-height);
  text-transform: var(--highlight-button-text-1-text-transform);
  letter-spacing: var(--highlight-button-text-1-letter-spacing);
  font-weight: var(--highlight-button-text-1-font-weight);
  color: var(--highlight-button-text-1-color-default);
  -webkit-hyphens: var(--highlight-button-text-1-hyphens-default);
  hyphens: var(--highlight-button-text-1-hyphens-default);
  -webkit-text-decoration: var(--highlight-button-text-1-text-decoration);
  text-decoration: var(--highlight-button-text-1-text-decoration);
}
.site .wso-highlight-button p strong {
  display: block;
  font-family: var(--highlight-button-text-2-font-family);
  font-size: var(--highlight-button-text-2-font-size);
  line-height: var(--highlight-button-text-2-line-height);
  text-transform: var(--highlight-button-text-2-text-transform);
  letter-spacing: var(--highlight-button-text-2-letter-spacing);
  font-weight: var(--highlight-button-text-2-font-weight);
  color: var(--highlight-button-text-2-color-default);
  -webkit-hyphens: var(--highlight-button-text-2-hyphens-default);
  hyphens: var(--highlight-button-text-2-hyphens-default);
  -webkit-text-decoration: var(--highlight-button-text-2-text-decoration);
  text-decoration: var(--highlight-button-text-2-text-decoration);
}
.site .wso-highlight-button p strong::after {
  content: " ";
  display: block;
  width: var(--highlight-button-line-width);
  margin: var(--highlight-button-line-margin-vertical) auto;
  border-bottom: var(--highlight-button-line-thickness) solid var(--highlight-button-line-color);
}
.site .wso-highlight-button p br {
  display: none;
}

/* ========================================================================== */
/*                                    CLOSE                                   */
/* ========================================================================== */
button.btn-close,
.btn-close {
  --bs-btn-close-color: var(--color-black);
  /*	--bs-btn-close-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e);
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  */
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border-radius: 0;
}