/* ─────────────────────────────────────────────────────────────────────────
   custom.css — responsive fixes + light polish layered on top of the Webflow
   export. Loaded AFTER legalstream.css, so these win by source order /
   specificity without editing the 115 KB original file.
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Keep the primary "Start Hiring" CTA visible on tablet & mobile.
      Webflow hid .nav-button below 768px, but the navbar has no hamburger
      menu to replace it — so the site's main conversion button disappeared
      entirely on phones. Re-show it and let it sit opposite the logo. */
@media screen and (max-width: 767px) {
  .navbar .nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 10px 18px;
    white-space: nowrap;
  }
  .navbar .nav-button .button-text {
    font-size: 11px;
    letter-spacing: 2px;
    white-space: nowrap;
  }
  .navigation-content {
    justify-content: space-between;
    column-gap: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  /* Base .nav-right is a grid wider than the button, leaving an 18px dead gap
     on the button's right. Use flex so it hugs the button and sits flush with
     the edge — aligning the logo and CTA with the body content at 19px. */
  .nav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto;
  }
  .brand {
    flex: 0 1 auto;
    min-width: 0;
  }
  .brand .text-block {
    white-space: nowrap;
  }
}

/* On phones there isn't room for the logo, wordmark, AND the CTA on one row
   without overlap (tested down to 320px). Keep the recognizable logo mark +
   the "Start Hiring" CTA, and drop the wordmark text — the standard mobile
   pattern. The wordmark returns at tablet width and up. */
@media screen and (max-width: 479px) {
  .brand .text-block {
    display: none;
  }
}

/* 2. Contact form field widths. Webflow only let the Message field span the
      full 2-column row — Email and Phone were left at half-width, so on desktop
      they had an awkward empty gap to the right, and on mobile they collapsed
      to half. Make Email / Phone / Message all span the full form width at
      every breakpoint. (First/Last name stay side-by-side in their own row.) */
#email,
#phone,
#field {
  grid-column: 1 / -1;
}

/* On phones, stack First and Last name as well, so every field is on its own
   line. They return to side-by-side at tablet width and up. */
@media screen and (max-width: 767px) {
  #name,
  #last-name {
    grid-column: 1 / -1;
  }
}

/* On phones (<=479px) the form wrapper had 36px left padding but 0 right, so
   the form sat lopsided AND the text/fields were flush against the white
   panel's right edge. Give it equal padding on both sides so the heading,
   labels and fields have breathing room inside the panel instead of touching
   its edges. */
@media screen and (max-width: 479px) {
  .contact-form-wrapper {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Below desktop, Webflow center-aligned the intro copy and the field labels,
   while the heading and the inputs stay left-aligned. Left-align them too so
   the form reads as one consistent column (matching the desktop layout). */
@media screen and (max-width: 767px) {
  .contact-page .sticky-intro .body-display,
  .contact-page .field-wrapper .subtitle {
    text-align: left;
  }
}

/* The .light-fill div whitened ONLY the right gutter of the contact section,
   so the white form panel bled to the right edge while the left kept a grey
   gutter — a lopsided white strip down the right side. Make it transparent so
   the white panel is centered with symmetric gutters on both sides. */
.contact-page .light-fill {
  background-color: transparent;
}

/* Tighten the contact section — it rendered as a tall, mostly-empty white
   panel: the form column is ~600px tall while the intro is only ~150px, so the
   left column had ~450px of dead white space, plus very generous section
   padding. Center the intro beside the form and trim the excess padding. */
@media screen and (min-width: 992px) {
  .contact-page .sticky-intro {
    align-self: center;
  }
  .contact-page .contact-form-wrapper {
    padding-top: 40px;
  }
  .contact-page .contact-info-wrapper {
    padding-bottom: 40px;
  }
  .section.grey.contact-page {
    padding-bottom: 80px;
  }
}

/* Same on phones: trim the white space above the heading and below the submit
   button so the form doesn't float in a tall empty panel. */
@media screen and (max-width: 767px) {
  .contact-page .contact-form-wrapper {
    padding-top: 24px;
  }
  .contact-page .contact-info-wrapper {
    padding-bottom: 24px;
  }
  .section.grey.contact-page {
    padding-bottom: 40px;
  }
}

/* The nav "Legal Stream" wordmark is white — correct over the dark homepage
   hero, but invisible on the light contact page (white-on-light). Make the
   wordmark dark on the contact page only (matched by its unique page id),
   so the homepage hero keeps the white text. */
html[data-wf-page="65e3fea525b0d4343d9fab31"] .navbar .text-block {
  color: var(--legal-blue, #122442);
}

/* 3. Light polish: a clear focus state on form fields for accessibility and
      a more finished feel (the export had none). */
.contact-page .text-field:focus {
  border-color: var(--legal-blue, #14213d);
  box-shadow: 0 0 0 2px rgba(20, 33, 61, 0.12);
  outline: none;
}