/* ==========================================================================
   CTA paragraph
   ========================================================================== */

/* .paragraph-cta {
  margin-top: 2.5rem;
} */

/* Shared CTA base (link + button) */
.paragraph-cta__link,
button.cta,
div.alpine-link a {
  display: inline-flex;
  align-items: center;
  /* gap: 0.75rem; */
  background-color: var(--steal);
  padding: 0.35rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Remove default button styling */
button.cta {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

/* Text */
.paragraph-cta__text,
button.cta .cta__text,
div.alpine-link a {
  display: inline-block;
  color: white;
  font-size: 1rem;
  line-height: normal;
  padding: 10px 35px 7px 35px
}

/* Icon */
.paragraph-cta__icon,
button.cta .cta__icon {
  display: inline-block;
  transition: transform 0.2s ease;
  color: white;
}

.paragraph-cta__icon svg {
  position: relative;
  top: -2px;
}

/* Hover / focus */
.paragraph-cta__link:hover,
.paragraph-cta__link:focus-visible,
button.cta:hover,
button.cta:focus-visible {
  text-decoration: none;
}

/* Icon animation */
.paragraph-cta__link:hover .paragraph-cta__icon,
.paragraph-cta__link:focus-visible .paragraph-cta__icon,
button.cta:hover .cta__icon,
button.cta:focus-visible .cta__icon {
  /* transform: translateX(4px); */
}

/* Accessibility */
.paragraph-cta__link:focus-visible,
button.cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}



/* Use this to style a straightforward  a tag */


a.alpine-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--steal);
  background-color: var(--steal);
  color: #fff;
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  text-transform: uppercase;
  transition: opacity 0.3s ease;
  font-family: var(--font-body);
  font-size: 0.7rem;
}

a.alpine-link:hover {
  opacity: 0.95;
}

/* a.alpine-link::after {
  content: "";
  display: inline-block;
  width: 41px;
  height: 9px;
  margin-left: 0.5rem;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateX(0);
  transition: transform 0.35s ease;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40.98 8.18'><line y1='4.09' x2='39.89' y2='4.09' fill='none' stroke='%23ffffff' stroke-width='1'/><polygon points='36.58 8.18 35.9 7.45 39.51 4.09 35.9 .73 36.58 0 40.98 4.09 36.58 8.18' fill='%23ffffff'/></svg>");
}

a.alpine-link:hover::after {
  transform: translateX(6px);
} */


/* END Use this to style a straightforward  a tag */










div.alpine-link a:hover {
  transition: all 0.5s ease;
  opacity: 0.95;
}




/* div.alpine-link a::after {
  content: "";
  display: inline-block;
  width: 41px;
  height: 9px;
  margin-left: 0.5rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40.98 8.18'><line y1='4.09' x2='39.89' y2='4.09' fill='none' stroke='%23ffffff' stroke-width='1'/><polygon points='36.58 8.18 35.9 7.45 39.51 4.09 35.9 .73 36.58 0 40.98 4.09 36.58 8.18' fill='%23ffffff'/></svg>");
} */