/* --------------------------------------------------------------------------
   Link Button
   An L-shaped bracket with a rounded inner corner — a hairline down the left
   turning along the bottom. Hover skews the whole element -10deg (the same
   motion as the hero CTA) and extends the bottom rule to full width.

   Geometry measured from the 4x mocks: stroke 4px -> 1px, corner radius 14px
   -> 3.5px, stub 154px -> ~38px. The hover left edge shifts 13px over 72px,
   atan(13/72) = 10.2deg.
   -------------------------------------------------------------------------- */

:host {
  /* Webflow sets display: contents on <code-island> inline, so :host layout is
     unreliable — everything that matters lives on .lb. */
  display: inline-block;
}

.lb {
  --lb-polynesian-blue: #0e4c92;
  --lb-celestial-blue: #469dc8;
  --lb-syracuse-orange: #d34e24;
  --lb-font: "Aptos", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Hairlines stay 1px at every size rather than scaling to fractional pixels. */
  --lb-stroke: 1px;
  /* Everything else is in em so the bracket tracks the type across breakpoints. */
  --lb-radius: 0.22em;
  --lb-stub: 2.375em;
  --lb-skew: -10deg;

  /* Desktop. Override --lb-font-size from Webflow (a variable set on any
     ancestor inherits through the shadow boundary) to drive this from your own
     Body variable instead of these breakpoints. */
  --lb-font-size: 20px;

  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 0 0.31em 0.5em;
  font-family: var(--lb-font);
  font-weight: 500;
  font-size: var(--lb-font-size);
  line-height: 1.2;
  color: var(--lb-polynesian-blue);
  text-decoration: none;
  overflow-wrap: anywhere;

  transform: skewX(0deg);
  transform-origin: bottom left;
  transition: transform 0.25s ease, color 0.25s ease;
}

.lb *,
.lb::after {
  box-sizing: border-box;
}

/* One element draws the whole bracket: left border, bottom border, and the
   rounded corner joining them. Two separate bars could not round the joint.
   Animating its width extends the bottom rule while the left bar stays put. */
.lb::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--lb-stub);
  border-left: var(--lb-stroke) solid var(--lb-celestial-blue);
  border-bottom: var(--lb-stroke) solid var(--lb-celestial-blue);
  border-bottom-left-radius: var(--lb-radius);
  pointer-events: none;
  transition: width 0.25s ease;
}

/* Webflow breakpoints. Tablet is <= 991px, mobile <= 767px. */
@media (max-width: 991px) {
  .lb { --lb-font-size: 15px; }
}

@media (max-width: 767px) {
  .lb { --lb-font-size: 14px; }
}

/* Guarded: a tap on a touch screen applies :hover and leaves it stuck. */
@media (hover: hover) {
  .lb:hover {
    transform: skewX(var(--lb-skew));
    color: var(--lb-syracuse-orange);
  }

  .lb:hover::after {
    width: 100%;
  }
}

/* Keyboard parity — a hover-only affordance is invisible to keyboard users. */
.lb:focus-visible {
  transform: skewX(var(--lb-skew));
  color: var(--lb-syracuse-orange);
  outline: 2px solid var(--lb-celestial-blue);
  outline-offset: 4px;
}

.lb:focus-visible::after {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .lb,
  .lb::after {
    transition: none;
  }
}