/* ==========================================================================
   careers-callout.css — careers additions for employment-form.html
   Two pieces, both hand-authored (no Webflow code), same approach as faq.css:
     1. "Join Our Talent Network" heading + intro above the general resume form
     2. The "View Current Opportunities" callout under the form, pointing to
        the AcqCentric job board hosted by Paylocity
   All classes are new, so nothing here can regress an existing Webflow
   component. .talent-network-title is a MODIFIER on the shared .heading-132
   (also used by general-inquiry-form.html and partnership-form.html), so the
   base rule is left untouched.
   ========================================================================== */

/* ==========================================================================
   1. Talent network intro — sits above the general resume submission form
   ========================================================================== */

/* Base .heading-132 has margin-bottom: 40px, which was the gap to the first
   form field. With supporting copy underneath, that gap moves to the intro. */
.talent-network-title {
  margin-bottom: 12px;
}

.talent-network-sub {
  max-width: 62ch;
  margin: 0 0 32px;
  color: #333;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
}

@media screen and (max-width: 479px) {
  .talent-network-sub { font-size: 15px; line-height: 23px; }
}

/* ==========================================================================
   2. "View Current Opportunities" callout
   ========================================================================== */

.careers-callout {
  width: 90vw;
  max-width: 1440px;
  margin: 70px auto 0;
}

.careers-callout-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  background-color: #fff;
  border-left: 10px solid #e6232b;
  padding: 40px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.careers-callout-copy {
  max-width: 760px;
}

.careers-callout-eyebrow {
  margin: 0 0 6px;
  color: #e6232b;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}

.careers-callout-title {
  margin: 0;
  color: #031236;
  text-transform: uppercase;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
}

.careers-callout-text {
  margin: 12px 0 0;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
}

/* ---- The button -------------------------------------------------------- */
.careers-callout-btn {
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 55px;
  padding: 0 32px;
  background-color: #e6232b;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  transition: background-color 0.2s ease;
}

.careers-callout-btn:hover,
.careers-callout-btn:focus {
  background-color: #c31c23;
  color: #fff;
}

.careers-callout-btn:focus-visible {
  outline: 2px solid #031236;
  outline-offset: 3px;
}

.careers-callout-btn svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Responsive — stack the copy above the button on tablet & phone
   ========================================================================== */
@media screen and (max-width: 991px) {
  .careers-callout { margin-top: 40px; }
  .careers-callout-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding: 28px;
    border-left-width: 8px;
  }
  .careers-callout-title { font-size: 26px; }
  .careers-callout-btn { width: 100%; }
}

@media screen and (max-width: 479px) {
  .careers-callout-title { font-size: 22px; }
  .careers-callout-text { font-size: 15px; line-height: 23px; }
  .careers-callout-btn { padding: 0 18px; font-size: 15px; }
}