/* ==========================================================================
   Components: buttons and links.
   Requires tokens.css and typography.css.
   ========================================================================== */

/* ---------- Noise texture ----------
   The animated noise strip used in section label bars and card banners.
   The CSS background is the static texture (and the fallback without
   JavaScript); murmuration.js animates it. --texture-y picks which part of
   the texture shows (0 to about -370px for a 60px strip), so neighboring
   strips don't look identical.
   Usage: <div class="texture" style="--texture-y: -140px" data-murmuration aria-hidden="true"></div> */

.texture {
  position: relative;
  background: var(--color-light-gray) url("../assets/textures/noise.webp") 0 var(--texture-y, -140px) / 440px auto;
}
.texture canvas { position: absolute; inset: 0; width: 100%; height: 100%; }


/* ---------- Shared arrow ----------
   The arrow is site/assets/icons/icon-arrow.svg, used as a mask so it takes
   the text color. Anything with .has-arrow gets it after its label; on hover
   or keyboard focus the arrow slides 8px to the right. */

.has-arrow::after {
  content: "";
  flex: none;
  width: 23px; height: 14px;
  background: currentColor;
  -webkit-mask: url("../assets/icons/icon-arrow.svg") center / contain no-repeat;
          mask: url("../assets/icons/icon-arrow.svg") center / contain no-repeat;
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.has-arrow:hover::after,
.has-arrow:focus-visible::after { transform: translateX(8px); }

/* .has-arrow-back: the same arrow pointing left, before the label (e.g.
   "Back to All Jobs"); on hover it slides 8px to the left. */
.has-arrow-back::before {
  content: "";
  flex: none;
  width: 23px; height: 14px;
  background: currentColor;
  -webkit-mask: url("../assets/icons/icon-arrow.svg") center / contain no-repeat;
          mask: url("../assets/icons/icon-arrow.svg") center / contain no-repeat;
  transform: scaleX(-1);
  transition: transform .25s cubic-bezier(.2, .7, .3, 1);
}
.has-arrow-back:hover::before,
.has-arrow-back:focus-visible::before { transform: scaleX(-1) translateX(8px); }

@media (prefers-reduced-motion: reduce) {
  .has-arrow::after,
  .has-arrow-back::before,
  .text-link.has-arrow { transition: none; }
  .has-arrow:hover::after,
  .has-arrow:focus-visible::after { transform: none; }
  .has-arrow-back:hover::before,
  .has-arrow-back:focus-visible::before { transform: scaleX(-1); }
}


/* ---------- Buttons ----------
   .button            outline (transparent, black border)
   .button--primary   Sand fill; Dark Sand on hover
   .button--small     32px tall (header Contact); same H5 text as other buttons
   .has-arrow         adds the arrow and a minimum width */

.button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-24);
  height: 40px;
  padding: 0 var(--space-16);
  border: var(--line-width) solid var(--color-black);
  background: transparent;
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: var(--text-h5-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h5-leading);
  letter-spacing: var(--text-h5-tracking);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease;
}
.button:hover, .button:focus-visible { background: var(--color-sand); }

/* On a Sand section, the outline hover uses Dark Sand so the change stays visible. */
.section--sand .button:hover, .section--sand .button:focus-visible { background: var(--color-dark-sand); }

.button--primary { background: var(--color-sand); }
.button--primary:hover, .button--primary:focus-visible { background: var(--color-dark-sand); }

.button.has-arrow { min-width: 160px; }

.button--small {
  height: 32px;
  padding: 0 var(--space-24);
}

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-20); }


/* ---------- Text links ----------
   .text-link   underlined H5 link, e.g. "Contact Us"; add .has-arrow for the arrow.
                With an arrow, the underline stretches 8px on hover to follow it.
   Links inside running text are underlined; the underline thickens on hover. */

.text-link {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding-bottom: 4px;
  border-bottom: var(--line-width) solid currentColor;
  color: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-h5-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h5-leading);
  text-decoration: none;
}
.text-link.has-arrow { transition: padding-right .25s cubic-bezier(.2, .7, .3, 1); }
.text-link.has-arrow:hover,
.text-link.has-arrow:focus-visible { padding-right: 8px; }   /* the underline extends with the arrow */

p a:not([class]) {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
p a:not([class]):hover { text-decoration-thickness: 2px; }


/* ---------- Tag ----------
   Small uppercase label in a Mid Gray pill, e.g. "Design & Development".
   .tag--sand   Sand pill, e.g. the product group tags on the Products page. */

.tag {
  display: inline-block;
  margin: 0;
  padding: var(--space-8) var(--space-16);   /* 16px sides at every size */
  border-radius: 999px;
  background: var(--color-mid-gray);
  font-family: var(--font-mono);
  font-size: var(--text-h6-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h6-leading);
  letter-spacing: var(--text-h6-tracking);
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--sand { background: var(--color-sand); }

/* A row of tags, e.g. on job listings: wraps, 16px apart side by side and
   between rows. */
.tag-list {
  display: flex; flex-wrap: wrap; gap: var(--space-16);
  margin: 0; padding: 0; list-style: none;
}


/* ---------- Pills ----------
   Black pills with Sand H5 text, e.g. certifications. */

.pill-list {
  display: flex; flex-wrap: wrap; gap: var(--space-16);
  margin: 0; padding: 0; list-style: none;
}
.pill-list li {
  padding: var(--space-8) var(--space-16);   /* 16px sides at every size */
  border-radius: 999px;
  background: var(--color-black);
  color: var(--color-sand);
  font-family: var(--font-mono);
  font-size: var(--text-h5-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h5-leading);
}


/* ---------- Caption pill ----------
   A black pill with a Green dot and Mid Gray H6 text, captioning a photo,
   e.g. "C-RAM Radar System" on the Products page. */

.caption-pill {
  display: inline-flex; align-items: center; gap: var(--space-16);
  padding: var(--space-8) var(--space-20);
  border-radius: 999px;
  background: var(--color-black);
  color: var(--color-mid-gray);
  font-family: var(--font-mono);
  font-size: var(--text-h6-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h6-leading);
  text-transform: uppercase;
}
.caption-pill::before {
  content: ""; flex: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-green);
}