/* DigLTBlue Careers & Contact template — the "Subpages › 3 · Careers &
   Contact" canvas (Figma 212:736), in artboard order: 1 Lead band ·
   2 Request an Estimate + contact card · 3 Careers band · 4 Supplier
   diversity. (The canvas's "Open Roles" column in section 3 was removed on
   request 2026-09-23.) The chrome, the footer and the navy lead band are shared
   partials and need nothing here.

   MOST OF THIS FILE STYLES SOMEONE ELSE'S MARKUP. The form is Contact Form
   7's, so the field, label, placeholder, validation and response selectors
   below are CF7's (`.wpcf7-*`) rather than classes of our own — which is why
   inc/enqueue.php names CF7's stylesheet as a dependency. The theme owns the
   wrapper (.lt-form), the note and the success panel; everything inside
   .wpcf7-form belongs to the plugin and may change when it updates.

   TWO ARTBOARDS EXIST and they disagree. The desktop one (212:748) is newer
   and is what is built; the mobile one (212:877) is an earlier pass with
   shorter copy, a call button in the lead band and a simplified card. The
   narrow layout below is therefore derived from the desktop artboard using
   the About and Safety conventions, NOT transcribed from 212:877.

   Every colour, size and tracking is a tokens.css token — nothing new. */

/* ══ Anchor targets ═══════════════════════════════════════════════════ */
/* The canvas's two audiences, two anchors: #quote is the form and #hiring is
   the careers band. Both land under a bar that nav.js has fixed by the time
   the jump finishes, so they clear it the way the About page's own anchor
   does — the bar is logo-driven and taller than --header-h at every width on
   this install, which is why the bound is the larger of the two. */
.lt-enquiry,
.lt-careers--hiring {
  scroll-margin-top: calc(max(var(--header-h), var(--nav-logo-w)) + 40px);
}

/* ══ 2 Request an Estimate ════════════════════════════════════════════ */
/* Form left, the card held to the content column's right edge. The canvas
   draws the form column 680px and the card 480 at x=859, which with the 86px
   gutter is 680 + 93 + 480 = 1253 inside the 1268 column — it fits, so both
   drawn widths are kept and the gap absorbs the 15px. */
.lt-enquiry__split {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 480px);
  justify-content: space-between;
  gap: 48px;
  align-items: start;
}

.lt-enquiry__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* The canvas runs this rule the full width of the form column rather than the
   heading's own width. .lt-head is a flex column, so the rule stretches. */
.lt-enquiry__head .lt-rule {
  width: 100%;
}

.lt-form__note {
  margin: 0;
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--color-muted-text);
}

/* Editors only — never rendered for a visitor. */
.lt-form__missing {
  margin: 0;
}

/* ── The CF7 form ──────────────────────────────────────────────────────
   CF7 wraps every field in a <p> unless the form markup says otherwise; the
   form used here marks its fields up as .lt-field so they can be laid out.
   The two-up row is Name + Email, as drawn; Phone sits alone at the drawn
   378px and Message runs the full column. */
.lt-form .wpcf7-form > * + * {
  margin-top: 24px;
}

.lt-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

/* The grid's own children must not inherit the 24px stack margin as well. */
.lt-form__grid > * + * {
  margin-top: 0;
}

.lt-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.lt-field--phone {
  max-width: 378px;
}

.lt-field label {
  font-size: var(--fs-nav);
  font-weight: var(--weight-label);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-navy);
}

/* The asterisk the canvas draws after a required label. */
.lt-field .lt-req {
  color: var(--color-orange);
}

/* CF7 inserts a <span class="wpcf7-form-control-wrap"> around every control,
   which would otherwise break the label/field column. */
.lt-field .wpcf7-form-control-wrap {
  display: block;
}

.lt-input,
.lt-field input[type="text"],
.lt-field input[type="email"],
.lt-field input[type="tel"],
.lt-field textarea {
  display: block;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--color-line);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  transition: border-color var(--t-med) var(--ease);
}

.lt-field textarea {
  /* CF7 emits rows="10" (~252px). The canvas draws 192; `resize` keeps it
     growable for anyone writing more than the box holds. */
  height: 192px;
  min-height: 192px;
  resize: vertical;
}

.lt-field ::placeholder {
  color: var(--color-muted);
  opacity: 1;
}

.lt-field :is(input, textarea):hover {
  border-color: var(--color-line-strong);
}

/* The canvas annotates the focus state explicitly: 2px orange border plus a
   2px ring at 2px offset. base.css's global :focus-visible ring is an
   outline, which would double up — this is the same shape, drawn once. */
.lt-field :is(input, textarea):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-offset);
  border-color: var(--color-orange);
}

/* ── Validation ────────────────────────────────────────────────────────
   "NO RED — ORANGE IS THE ONLY ACCENT" (canvas annotation). CF7 ships its own
   red borders and red response box; every rule here overrides one of them. */
/* Selector shape mirrors the base border rule above on purpose: that one is
   `.lt-field :is(input, …)` and out-specifies a plain `.wpcf7-not-valid`, so
   matching its weight and coming later in the file is what makes this win. */
.lt-field :is(input, textarea).wpcf7-not-valid,
.lt-field input[type="file"].wpcf7-not-valid {
  border-color: var(--color-orange);
}

.lt-form .wpcf7-not-valid-tip {
  margin-top: 8px;
  color: var(--color-orange);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: var(--lh-meta);
}

/* CF7's form-level banner. Its default is a 2px box, recoloured amber while
   the form is invalid; the canvas's language for a message is the orange left
   edge, so that is what it gets.

   The selector deliberately carries CF7's own `.wpcf7 form` in front of it.
   The plugin ships `.wpcf7 form .wpcf7-response-output` for the box and
   `.wpcf7 form.invalid .wpcf7-response-output` for the amber, and a plain
   `.lt-form .wpcf7-response-output` loses to both on specificity. Matching
   the heavier of the two and loading afterwards is what wins. */
.lt-form .wpcf7 form .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border: 0;
  border-left: 3px solid var(--color-orange);
  background: var(--color-surface-alt);
  color: var(--color-navy);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-meta);
}

/* ── Submit ────────────────────────────────────────────────────────────
   NAVY, not the orange site CTA — both artboards draw it that way. It is the
   page's own action rather than a call to action, and the orange in this
   section is reserved for the rule and for validation.

   THE ONE !important IN THIS THEME, and it is not optional: the BizIQ-era
   `client-plugins` plugin ships
   `.wpcf7-form-control:not(img) { width: 100% !important }`. That is right
   for the text inputs and wrong for the button, and no amount of specificity
   beats `!important` — only another `!important` does. Remove both of these
   if that plugin is ever retired.

   THE NOTE SITS BELOW THE BUTTON, not beside it as the canvas draws. The
   button is inside Contact Form 7's own DOM, so pairing the two in one row
   would mean `display: contents` on a <form> (an accessibility risk), margins
   keyed to the button's height, or rewriting the plugin's rendered HTML —
   all of them more fragile than the 30px of placement they would buy. The
   note says the same thing in the same order either way, and the mobile
   artboard stacks them regardless. */
.lt-form__actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  /* CF7 wraps the submit in a <p>; without this its default bottom margin
     lands between the button and the note. */
  margin-bottom: 0;
}

/* The Turnstile plugin injects its CAPTCHA widget as the FIRST child of that
   same paragraph, so by default it sits inline to the left of the button and
   stretches the row to its own 72px. The site key is live on this install, so
   the widget is real and is not hidden — it just gets a row of its own above
   the button, which is where a challenge belongs. */
.lt-form__actions .cf-turnstile {
  flex: 0 0 100%;
}

.lt-form .wpcf7-submit {
  display: inline-block;
  width: auto !important;
  padding: var(--btn-pad);
  border: 0;
  border-radius: 0;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-nav);
  font-weight: var(--weight-label);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-med) var(--ease);
}

.lt-form .wpcf7-submit:hover {
  background: var(--color-orange);
}

.lt-form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ── Success panel ─────────────────────────────────────────────────────
   Revealed by assets/js/contact.js on CF7's `wpcf7mailsent`. Same wash plate
   and orange left edge as the response banner, one step larger. */
.lt-form__success {
  padding: 32px;
  border-left: 3px solid var(--color-orange);
  background: var(--color-surface-alt);
}

.lt-form__success:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-offset);
}

.lt-form__success-heading {
  margin: 0;
  color: var(--color-navy);
}

.lt-form__success-text {
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--color-navy);
}

/* ══ The contact card ═════════════════════════════════════════════════ */
.lt-card {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 41px;
  background: var(--color-surface-alt);
}

.lt-card__head .lt-rule {
  width: 18px;
}

.lt-card__name {
  margin: 0;
  color: var(--color-navy);
}

.lt-card__block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lt-card__label {
  margin: 0 0 4px;
  font-size: var(--fs-micro);
  font-weight: var(--weight-label);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--color-muted-text);
}

.lt-card__address,
.lt-card__hours {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-meta);
  color: var(--color-navy);
}

/* The one number on the page drawn at display scale — it is the fastest way
   to reach the office and the canvas treats it as the card's headline. */
.lt-card__phone {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-display-sm);
  letter-spacing: var(--ls-display);
  color: var(--color-navy);
  text-decoration: none;
}

.lt-card__phone:hover {
  color: var(--color-orange);
}

.lt-card__link {
  align-self: flex-start;
  margin-top: 6px;
  color: var(--color-orange);
  font-size: var(--fs-meta);
  font-weight: var(--weight-label);
  text-decoration: none;
}

.lt-card__link:hover {
  color: var(--color-navy);
}

/* The arrow nudges on hover, but only for viewers who have not asked for less
   motion — base.css disables transitions globally under that query. */
.lt-card__arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform var(--t-med) var(--ease);
}

.lt-card__link:hover .lt-card__arrow {
  transform: translateX(3px);
}

.lt-card__socials {
  display: flex;
  gap: 12px;
}

/* 38px squares, matching the footer's own at this width (§8.34). */
.lt-card__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: var(--color-white);
  color: var(--color-navy);
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

.lt-card__social:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.lt-card__social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* A hairline shelf at the foot of the card, as drawn. */
.lt-card__licence {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-line);
  font-size: var(--fs-meta);
  font-weight: var(--weight-label);
  color: var(--color-navy);
}

/* ══ 3 Careers band ═══════════════════════════════════════════════════ */
/* The homepage band with the copy CENTRED rather than set to the left.

   The canvas draws a second column here — an "Open Roles" list at the right
   of a 2-up split — and it was removed on request 2026-09-23. With one column
   left, a block pinned to the left edge of a full-bleed photo band reads like
   something failed to load, so the copy is centred on the band the way the
   closing CTA is. `align-items: center` is what carries it: the heading's
   accent rule and the button are flex children, so they centre with the text
   instead of needing rules of their own. */
.lt-hiring__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  min-width: 0;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

/* home.css pins .lt-careers__head to flex-start so the rule tracks the
   heading on the home band's left-aligned copy; here that would leave the
   heading stranded left of the centred paragraph and button. */
.lt-hiring__copy .lt-careers__head {
  align-self: center;
}

.lt-hiring__actions {
  justify-content: center;
  margin-top: 8px;
}

/* ── The résumé form ───────────────────────────────────────────────────
   A white panel under the centred copy, so the CF7 field styles above apply
   unchanged — they are drawn for a white ground, and restyling them for the
   navy scrim would mean a second set of every state. Collapsed by contact.js
   until "Submit Resume" is pressed; visible with JavaScript off. */
.lt-resume {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 24px auto 0;
  padding: 40px;
  background: var(--color-white);
  text-align: left;
}

.lt-resume[hidden] {
  display: none;
}

.lt-resume__head {
  margin-bottom: 24px;
}

.lt-resume__head .lt-heading {
  color: var(--color-navy);
}

.lt-resume__note {
  margin-top: 24px;
}

/* "(optional)" after the LinkedIn label — not shouted like the label. */
.lt-field .lt-opt {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-muted-text);
}

.lt-field__hint {
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  color: var(--color-muted-text);
}

/* The file picker gets the text inputs' box so the column reads as one form.
   The button inside it is the browser's, restyled as a small navy chip. */
.lt-field input[type="file"] {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px dashed var(--color-line-strong);
  background: var(--color-surface-alt);
  color: var(--color-navy);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  cursor: pointer;
}

.lt-field input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 8px 14px;
  border: 0;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--weight-label);
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-med) var(--ease);
}

.lt-field input[type="file"]:hover::file-selector-button {
  background: var(--color-orange);
}

.lt-field input[type="file"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-offset);
  border-color: var(--color-orange);
}

/* The empty photo slot centres its "CREW PHOTO" label, which was harmless
   while the copy sat in the left column — it landed in the empty right half.
   Centred copy runs straight over it, so on this band the label goes to the
   bottom-left corner instead. It still tells the client a photo is owed; it
   just no longer prints itself through the paragraph. Once an image is set
   the label is not rendered at all and this rule matches nothing. */
.lt-careers--hiring .lt-careers__media .lt-slot__label {
  position: absolute;
  left: var(--pad-x);
  bottom: 16px;
  padding: 0;
}

/* ══ 4 Supplier diversity ═════════════════════════════════════════════ */
/* The canvas draws this rule at 858px — wider than the prose, narrower than
   the content column — so it is neither the heading rule nor a full-width one. */
.lt-rule--wide {
  width: 100%;
  max-width: 858px;
}

.lt-diversity__prose {
  max-width: 848px;
}

/* Four short paragraphs since the client's 2026-09-28 copy. base.css's
   `.lt-prose p { margin: 0 }` (0,1,1) outweighs its own `> * + *` gap
   (0,1,0), so without this they would print as one block. Scoped here on
   purpose: the global rule is a separate decision. */
.lt-diversity__prose p + p {
  margin-top: 18px;
}

/* A flex child of .lt-stack, so it would stretch to the column without this. */
.lt-diversity__button {
  align-self: flex-start;
}

/* ══ Tablet (<1200px) ═════════════════════════════════════════════════ */
/* The card is the first thing to cost the form its measure, so both splits go
   fluid before they stack. */
@media (max-width: 1199px) {
  .lt-enquiry__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
    gap: 32px;
  }

  .lt-card {
    padding: 32px;
  }
}

/* ══ Tablet (<1024px) ═════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Card under the form. */
  .lt-enquiry__split {
    grid-template-columns: minmax(0, 1fr);
  }

  .lt-diversity__prose {
    max-width: none;
  }
}

/* ══ Mobile (<640px) ══════════════════════════════════════════════════ */
@media (max-width: 639px) {
  /* Name and Email stop sharing a row — neither has a usable measure left. */
  .lt-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .lt-field--phone {
    max-width: none;
  }

  .lt-field textarea {
    min-height: 150px;
  }

  /* Full-width submit, the one thing the mobile artboard and the theme's own
     <640px button rule agree on. The note drops below it. */
  .lt-form__actions {
    align-items: stretch;
    gap: 16px;
  }

  /* Full width on mobile — stated rather than left to the plugin's own
     !important, so the button keeps this shape if that plugin goes away. */
  .lt-form .wpcf7-submit {
    width: 100% !important;
    text-align: center;
  }

  .lt-card {
    padding: 24px;
  }

  .lt-form__success {
    padding: 24px;
  }

  .lt-hiring__actions {
    align-self: stretch;
  }

  .lt-hiring__actions .lt-btn {
    text-align: center;
  }

  .lt-resume {
    padding: 24px;
  }
}