/* Buttons — the two Webflow components, cut to the design system.
 * ===========================================================================
 *
 * The site ships two button constructions, and the rebuild had been fixing
 * them one section at a time. That is what produced the event-card button:
 * `events.css` restyled the box holding the label and left the two arrow boxes
 * on Webflow's own colours, so at rest the button was two outlined tiles with a
 * ragged 2px crack between them, and on hover the label went dark on sand while
 * the arrow stayed white on sand — nearly invisible.
 *
 * So both components are dressed here, once, for the whole site. Measured
 * inventory of what is actually visible in frontier mode (verify/buttons.mjs):
 *
 *   .btn-bubble-arrow   2 instances — the event cards on the home page
 *   .button             4 instances — the CTA block (all pages), and
 *                       "About Us" / "Apply Now" on /about-us, which were
 *                       still Webflow pills with no hover at all
 *   input[submit]       1 instance  — /contact, already done in contact.css
 *
 * Everything is scoped to [data-mode="frontier"]; the second ported site is
 * served verbatim.
 *
 * Loads after the section files so it settles the shared shape, and before
 * mobile.css, which still gets the last word on tap targets.
 */

/* ===========================================================================
 * 1. .btn-bubble-arrow — the split tag button
 * ===========================================================================
 *
 * Structurally identical to `.fr-tag-split` in frontier.css: a collapsed arrow
 * on the left, the label, and a second arrow pinned right. On hover the left
 * one grows, the label slides right into the space, the right one collapses —
 * the arrow appears to jump sides. That choreography is Webflow IX2 and is
 * kept; only the shape and the colour are ours.
 *
 * The geometry is the one thing that cannot simply be copied from
 * `.fr-tag-split`. There the slide distance is `--fr-split-h + --fr-split-gap`,
 * computed. Here IX2 writes `translateX(-45px)` as an inline style, so the
 * distance is fixed at 45px and the tiles have to be sized to fit it:
 *
 *     tile 39px + gap 6px = 45px
 *
 * which also makes the arrow tile square, exactly as the navbar button's is.
 * Sizing the tiles at Webflow's 2.8rem instead is what left them touching,
 * with only their 2px corners to mark the join — the notch in the middle of
 * the sand slab.
 */

[data-mode="frontier"] .btn-bubble-arrow {
  --btn-tile: 2.4375rem; /* 39px — see above; 39 + 6 = IX2's 45px shift */
  --btn-gap: 0.375rem;
  --btn-accent: var(--site-accent, #c4b798);
  --btn-line: rgba(255, 255, 255, 0.28);
  --btn-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  margin-left: 0;
  border-radius: 0;
  color: #fff;
  font-size: 0.75rem;
}

/* One rule for all three tiles, so they cannot drift apart again — the
   original had a filled left arrow, an outlined right arrow and an outlined
   label, three different treatments inside one button. */
[data-mode="frontier"] .btn-bubble-arrow__arrow,
[data-mode="frontier"] .btn-bubble-arrow__arrow.is--duplicate,
[data-mode="frontier"] .btn-bubble-arrow__arrow.is-light,
[data-mode="frontier"] .btn-bubble-arrow__arrow.is--duplicate.is-light,
[data-mode="frontier"] .btn-bubble-arrow__content,
[data-mode="frontier"] .btn-bubble-arrow__content.is-light {
  height: var(--btn-tile);
  background-color: transparent;
  border: 1px solid var(--btn-line);
  border-radius: var(--fr-radius, 2px);
  color: #fff;
  /* `transform` has to be named here. Webflow drives the slide from a rule in
     the page's own <style> block, not from an inline IX2 style, and it carries
     its own transition — which a shorthand listing only the colours silently
     replaced, so the label jumped the full 45px in one frame. Measured against
     the navbar button, which travels over 684ms on the same curve every other
     motion in the design system uses. */
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1),
    background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

[data-mode="frontier"] .btn-bubble-arrow__arrow,
[data-mode="frontier"] .btn-bubble-arrow__arrow.is--duplicate {
  width: var(--btn-tile);
  flex: 0 0 auto;
}

/* The glyph turns to point up-right as the arrow changes sides, on the same
   curve, so the two read as one gesture rather than two. */
[data-mode="frontier"] .btn-bubble-arrow__arrow-svg {
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
}

/* The left tile carries the gap; the right one is absolutely positioned and
   sits flush to the button's right edge, so the label's own travel opens the
   same 6px on that side. */
[data-mode="frontier"] .btn-bubble-arrow__arrow {
  margin-right: var(--btn-gap);
}

[data-mode="frontier"] .btn-bubble-arrow__arrow.is--duplicate {
  margin-right: 0;
}

[data-mode="frontier"] .btn-bubble-arrow__content,
[data-mode="frontier"] .btn-bubble-arrow__content.is-light {
  padding: 0 0.875rem;
  font-family: var(--btn-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

[data-mode="frontier"] .btn-bubble-arrow__content-text {
  color: inherit;
  /* Webflow paints this span; on hover it inherited the sand fill and drew a
     rectangle of it behind the label, inside the tile. */
  background-color: transparent;
}

/* 40% of the tile gave a 15.6px glyph against the navbar button's 13px. */
[data-mode="frontier"] .btn-bubble-arrow__arrow-svg {
  width: 0.8125rem;
  height: 0.8125rem;
}

/* --- Hover ---------------------------------------------------------------
 *
 * Both tiles, together. The arrow glyph is `fill="currentColor"`, so it turns
 * with the label rather than staying white on sand — the second half of the
 * reported bug. Written for the anchor's :hover, not the tile's, because the
 * label tile slides out from under the pointer as it animates. */
[data-mode="frontier"] .btn-bubble-arrow:hover .btn-bubble-arrow__arrow,
[data-mode="frontier"] .btn-bubble-arrow:hover .btn-bubble-arrow__content,
[data-mode="frontier"] .btn-bubble-arrow:focus-visible .btn-bubble-arrow__arrow,
[data-mode="frontier"] .btn-bubble-arrow:focus-visible .btn-bubble-arrow__content {
  background-color: var(--btn-accent);
  border-color: var(--btn-accent);
  color: #0b0b0b;
}

/* ===========================================================================
 * 2. .button — the tag button
 * ===========================================================================
 *
 * Webflow's pill: a white slab at 10em radius with a black arrow disc. The CTA
 * block was re-cut in cta-block.css, but the two on /about-us were never
 * reached — they sat on the old shape with no hover state whatsoever, the last
 * two buttons on the site still speaking the old language.
 *
 * Ink is a pair of properties rather than a fixed colour, because the four
 * instances do not share a ground: the CTA block and `.section_home-mission`
 * (#151515) are dark, and the careers block on /about-us is the one part of
 * that page still on #f2f2f2. A rule written for either one is invisible on
 * the other — the same failure the PDF button and the event button had, and it
 * bit twice more while this file was being written. Both readings are now
 * checked by verify/buttons.mjs, which measures the painted ground rather than
 * the section's own background property; `.section_work` declares none and
 * inherits the light one from a wrapper above it.
 */

[data-mode="frontier"] .button {
  --btn-ink: #fff;
  --btn-ground: #0b0b0b;

  display: inline-flex;
  align-items: center;
  min-height: 2.4375rem;
  padding: 0 1.125rem;
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--btn-ink) 30%, transparent);
  border-radius: var(--fr-radius, 2px);
  color: var(--btn-ink);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 0.24s ease, border-color 0.24s ease, color 0.24s ease;
}

/* The careers block — the last light section on the site. */
[data-mode="frontier"] .section_work .button {
  --btn-ink: #0b0b0b;
  --btn-ground: #ffffff;
}

[data-mode="frontier"] .button:hover,
[data-mode="frontier"] .button:focus-visible {
  background-color: var(--btn-ink);
  border-color: var(--btn-ink);
  color: var(--btn-ground);
}

/* `overflow: visible` here as well as on .button-icon below: the wrap is only
   as tall as its content (13px), so the turned arrow overflows it too. Freeing
   the icon alone just moved the cut one level up — the audit caught that on
   the second pass. */
[data-mode="frontier"] .button .button-inner-wrap {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
}

/* The label is in the markup twice, the second copy purely so Webflow can
   slide one out and the other in. One is enough. */
[data-mode="frontier"] .button .button-text-wrap {
  overflow: visible;
  height: auto;
}

[data-mode="frontier"] .button .buton-text.button-text-hover {
  display: none;
}

/* `!important` because the slide is not CSS: IX2 writes the transform inline,
   where no ordinary rule outranks it. Without this the remaining label slides
   12px up on hover into a button with nothing behind it. */
[data-mode="frontier"] .button .buton-text,
[data-mode="frontier"] .button:hover .buton-text,
[data-mode="frontier"] .button:focus-visible .buton-text {
  transform: none !important;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* The arrow loses its disc and simply travels. `color: inherit` is the load-
   bearing line: the container is Webflow's dark disc with a white glyph, and
   the white is set here, not on the svg — without it the arrow stayed white
   while the label followed the button's ink. */
[data-mode="frontier"] .button .button-arrow-container {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: inherit;
}

/* `overflow: visible` matters: the box is 13x13 and IX2 turns the glyph 45
   degrees on hover, which needs 13 x sqrt(2) = 18.4px. Webflow clipped it
   because the hover-swap copy slides in from left: -100% and had to be hidden
   until it arrives — that copy is display: none above, so there is nothing
   left to clip and the corners of the turned arrow were being cut off. */
[data-mode="frontier"] .button .button-icon {
  width: 0.8125rem;
  height: 0.8125rem;
  overflow: visible;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-mode="frontier"] .button .button-icon-svg {
  overflow: visible;
}

[data-mode="frontier"] .button:hover .button-icon {
  transform: translateX(3px);
}

/* Webflow ships a second copy of the glyph for its own hover swap. */
[data-mode="frontier"] .button .button-icon-svg.is-hover-svg-icon {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-mode="frontier"] .button .button-icon,
  [data-mode="frontier"] .btn-bubble-arrow__arrow,
  [data-mode="frontier"] .btn-bubble-arrow__content {
    transition-duration: 0.01ms;
  }
}