/* Converted from src/components/site/ui/Button.module.css (CSS Module): local classes are prefixed "ui-button__". */
/* Buttons of the original Ohio theme (+ the Elementor overrides used on the designed pages). */

.ui-button__button {
  --btn-bg: var(--color-button);
  --btn-fg: var(--color-button-text);
  --btn-border: transparent;
  --btn-h: var(--button-h);
  --btn-px: 1.25rem;
  --btn-icon: 1.4em; /* --clb-icon-size: glyph icons ("arrow", "arrow-forward") */

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: var(--btn-h);
  padding: 0 var(--btn-px);
  font-family: var(--font-heading);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  line-height: 1.6;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition-property: background-color, color, border-color, box-shadow;
  transition-duration: var(--duration);
  transition-timing-function: var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.ui-button__button:disabled,
.ui-button__button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.ui-button__button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.ui-button__button:active {
  box-shadow: 0 0 0 0.3125rem rgb(136 135 137 / 0.15);
}

/* ----- Sizes ----- */
.ui-button__sm {
  --btn-h: var(--button-h-sm);
  --btn-px: 1rem;
  --btn-icon: 1.2em;
  font-size: 0.9em;
}

.ui-button__lg {
  --btn-h: var(--button-h-lg);
  --btn-px: 1.5rem;
  --btn-icon: 1.6em;
}

/* ----- Variants ----- */
/* Dark rounded rectangle — header "Contact us". */
.ui-button__dark:hover {
  --btn-bg: var(--color-brand);
}

/* Brand-green pill — hero "Contact us →". */
.ui-button__brand {
  --btn-bg: var(--color-brand-alt);
  --btn-fg: #fff;
  border-radius: var(--radius-pill);
}

.ui-button__brand:hover {
  --btn-bg: var(--color-brand);
}

/* Outlined pill — "Let's talk →", "Learn more →". Follows the surrounding text color unless a tone is forced. */
.ui-button__outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-heading);
  --btn-border: currentColor;
  border-radius: var(--radius-pill);
}

.ui-button__outline.ui-button__toneLight {
  --btn-fg: #fff;
}

.ui-button__outline.ui-button__toneDark {
  --btn-fg: #000;
}

.ui-button__outline:hover {
  --btn-fg: var(--color-brand);
}

/* Text link with icon — "Read More →", "official website". */
.ui-button__text {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-h: auto;
  --btn-px: 0;
  min-height: 0;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 0.5em transparent;
}

.ui-button__text:hover,
.ui-button__text:focus-visible {
  --btn-fg: var(--color-brand);
  --btn-bg: var(--color-fill);
  box-shadow: 0 0 0 0.65em var(--color-fill);
}

.ui-button__text.ui-button__toneLight {
  --btn-fg: #fff;
}

/* ----- Icon ----- */
.ui-button__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
}

.ui-button__iconRight {
  margin-right: -0.5rem;
}

.ui-button__iconLeft {
  margin-left: -0.5rem;
}

.ui-button__text .ui-button__iconRight,
.ui-button__text .ui-button__iconLeft {
  margin: 0;
}

.ui-button__icon svg {
  display: block;
}

.ui-button__icon .ui-button__glyph {
  width: var(--btn-icon);
  height: var(--btn-icon);
}

@keyframes ui-button__icon-move {
  0% {
    transform: translateX(0);
  }
  30% {
    opacity: 0;
  }
  31% {
    transform: translateX(1.25rem);
  }
  32% {
    transform: translateX(-1.25rem);
  }
  84% {
    opacity: 1;
  }
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .ui-button__button:hover .ui-button__icon {
    animation: ui-button__icon-move var(--duration) ease-out;
  }

  .ui-button__button:hover .ui-button__iconLeft {
    animation-direction: reverse;
  }
}

/* ----- Round icon button (hamburger, search, close, back) ----- */
.ui-button__iconButton {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--circle);
  min-width: var(--circle);
  height: var(--circle);
  padding: 0;
  color: inherit;
  background-color: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
  -webkit-tap-highlight-color: transparent;
  isolation: isolate; /* the click ripple below sits between the background and the icon */
}

/* Click ripple of the theme (body.icon-buttons-animation): a brand disc that grows ×4 and fades
   out (.15 → 0) over .35s. The theme plays it on :focus; here <IconButton> sets data-ripple on
   pointer press, so it keeps playing when the click moves focus into an overlay. Not on keyboard
   activation (which keeps its focus ring, unlike the theme). */
.ui-button__iconButton::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-brand);
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-button__iconButton[data-ripple]::before {
    animation: ui-button__icon-click var(--duration) var(--ease);
  }
}

@keyframes ui-button__icon-click {
  from {
    transform: scale(1);
    opacity: 0.15;
  }
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ui-button__iconButton > * {
  transition-property: transform, opacity;
  transition-duration: var(--duration);
  transition-timing-function: var(--ease);
}

.ui-button__iconButton:hover,
.ui-button__iconButton.ui-button__filled {
  background-color: var(--color-fill);
}

.ui-button__iconButton:hover > * {
  opacity: 0.75;
  transform: scale(1.06);
}

.ui-button__iconButton:active {
  background-color: var(--color-fill);
  box-shadow: inset 0 0 0 0.3125rem rgb(136 135 137 / 0.15);
}

.ui-button__iconButton.ui-button__small {
  --circle: 3rem;
}

.ui-button__iconButton.ui-button__xsmall {
  --circle: 2.5rem;
}