/* =============================================================
   NLIGN — Contact Page
   Layout: full-height section · info left · form panel right.
   All colour & type values pulled from tokens.css.
   ============================================================= */

/* ── Section wrapper ─────────────────────────────────────── */
.nlign-contact {
  position:         relative;
  background-color: #1A1A1A;
}

/* ── Inner container ─────────────────────────────────────── */
.nlign-contact__container {
  display:        flex;
  flex-direction: row;
  align-items:    flex-start;  /* columns size to their own content, not each other */
  max-width:      var(--nlign-max-width);
  margin-inline:  auto;
  padding-left:   var(--nlign-section-padding-x);
  padding-right:  var(--nlign-section-padding-x);
}

/* =============================================================
   LEFT COLUMN — Contact Info
   ============================================================= */
.nlign-contact__info {
  flex:            0 0 42%;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             20px;
  /* Left/right page gutters live on .nlign-contact__container (like product-intro). */
  padding:         96px 48px 96px 0;
}

/* ── "CONTACT US" label — hero-scale, orange ────────────── */
.nlign-contact__label {
  font-family:    "InterFace", Helvetica, sans-serif;
  font-style:     normal;
  font-weight:    400;
  font-size:      96px;
  line-height:    100px;
  letter-spacing: 0px;
  color:          var(--nlign-color-orange);
  margin:         0;
}

/* ── "Let's Get In Touch" heading — white ───────────────── */
.nlign-contact__heading {
  font-family:    "InterFace", Helvetica, sans-serif;
  font-style:     normal;
  font-weight:    400;
  font-size:      96px;
  line-height:    100px;
  letter-spacing: 0px;
  color:          #FFFFFF;
  margin:         0;
}

/* ── Orange accent divider ──────────────────────────────── */
.nlign-contact__divider {
  width:      48px;
  height:     3px;
  background: var(--nlign-color-orange);
  border:     none;
  margin:     0;
  opacity:    1;
}

/* ── Phone number ───────────────────────────────────────── */
.nlign-contact__phone {
  font-family: var(--nlign-body-font-family);
  font-weight: 700;
  font-size:   24px;
  line-height: 32px;
  color:       var(--nlign-color-dust-grey);
  margin:      0;
}

.nlign-contact__phone a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--nlign-transition);
}

.nlign-contact__phone a:hover { color: var(--nlign-color-orange); }

/* ── Address ────────────────────────────────────────────── */
.nlign-contact__address {
  font-family: var(--nlign-body-font-family);
  font-weight: var(--nlign-body-font-weight);
  font-size:   var(--nlign-body-font-size);
  line-height: var(--nlign-body-line-height);
  color:       var(--nlign-color-dust-grey);
  font-style:  normal;
  margin:      0;
}

/* ── Email link ─────────────────────────────────────────── */
.nlign-contact__email {
  font-family:     var(--nlign-body-font-family);
  font-size:       var(--nlign-body-font-size);
  color:           var(--nlign-color-dust-grey);
  text-decoration: underline;
  transition:      color var(--nlign-transition);
}

.nlign-contact__email:hover { color: var(--nlign-color-orange); }

/* ── Social icons ─────────────────────────────────────────── */
.nlign-contact__social {
  display:    flex;
  gap:        16px;
  margin-top: 8px;
}

.nlign-contact__social-link {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  background:      rgba(255, 255, 255, 0.08);
  border-radius:   50%;
  transition:      background var(--nlign-transition);
  color:           var(--nlign-color-dust-grey);
  text-decoration: none;
}

.nlign-contact__social-link:hover {
  background: var(--nlign-color-orange);
  color:      #000;
}

.nlign-contact__social-link svg {
  width:  18px;
  height: 18px;
  fill:   currentColor;
}

/* =============================================================
   RIGHT COLUMN — Form Panel
   ============================================================= */
.nlign-contact__form-wrap {
  flex:            1;
  background:      rgba(58, 58, 58, 0.92);
  /* ①② tight top/bottom so heading sits near top edge,
         submit sits near bottom — no large empty gaps */
  padding:         28px 24px;
  margin:          96px 0;        /* top/bottom spacing only */
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;  /* content anchors to top, not centred */
  gap:             14px;
}

/* ── "SEND A MESSAGE" title ─────────────────────────────── */
.nlign-contact__form-title {
  font-family:    var(--nlign-subhead-font-family);
  font-weight:    var(--nlign-subhead-font-weight);
  font-size:      var(--nlign-subhead-font-size);
  line-height:    var(--nlign-subhead-line-height);
  letter-spacing: var(--nlign-subhead-letter-spacing);
  text-transform: uppercase;
  color:          var(--nlign-color-dust-grey);
  margin:         0;
  width:          100%;
}

/* CF7 wrapper — fills the panel width, no artificial narrowing */
.nlign-contact .wpcf7 {
  width:         100%;
  margin-bottom: 0;
}

/* Strip browser default bottom margin from the <form> element */
.nlign-contact .wpcf7-form {
  margin: 0;
}

/* Hide empty response output before first submission — prevents
   the div from adding phantom space below the submit button */
.nlign-contact .wpcf7-response-output:empty {
  display: none;
}

/* =============================================================
   CSS GRID FORM LAYOUT
   .nlign-form-grid   = grid container  (in CF7 form HTML)
   .nlign-field       = one grid cell   (label + input)
   .nlign-field--full = spans both cols (message, submit)
   ============================================================= */
.nlign-contact .wpcf7-form .nlign-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   14px;           /* ⑤ field-row gap ≤ 14px */
  /* ③ no ghost border from grid container itself */
  border:  none;
  outline: none;
}

/* Full-width cells */
.nlign-contact .wpcf7-form .nlign-field--full {
  grid-column: 1 / -1;
}

/* Each field cell — flex-column, hard no-border so wpcf7
   classes added to span wrappers CANNOT bleed a border here */
.nlign-contact .wpcf7-form .nlign-field {
  display:        flex;
  flex-direction: column;
  gap:            0;
  border:         none !important;
  outline:        none !important;
  box-shadow:     none !important;
}

/* =============================================================
   FIELD LABELS — 4px gap only between label and its input  ④
   ============================================================= */
.nlign-contact .wpcf7-form label {
  display:        block;
  font-family:    var(--nlign-subhead-font-family);
  font-weight:    700;
  font-size:      10px;
  line-height:    1.4;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color:          var(--nlign-color-dust-grey);
  margin-bottom:  4px;   /* ④ exactly 4px — label sits tight above field */
  margin-top:     0;
}

/* ── CF7 span wrappers — ③ strip ALL border/outline/shadow
   CF7 adds wpcf7-not-valid to this span on validation fail;
   without this reset the border-color bleeds full row width  */
.nlign-contact .wpcf7-form span.wpcf7-form-control-wrap {
  display:    block;
  width:      100%;
  border:     none !important;
  outline:    none !important;
  box-shadow: none !important;
}

/* =============================================================
   INPUTS & TEXTAREA
   ============================================================= */

/* ── Text / email / tel ──────────────────────────────────── */
.nlign-contact .wpcf7-form .form-control,
.nlign-contact .wpcf7-form input[type="text"],
.nlign-contact .wpcf7-form input[type="email"],
.nlign-contact .wpcf7-form input[type="tel"] {
  display:          block;
  width:            100%;
  background-color: rgba(14, 14, 14, 0.55);
  border:           1px solid rgba(235, 234, 230, 0.18);
  border-radius:    0;
  color:            var(--nlign-color-dust-grey);
  font-family:      var(--nlign-body-font-family);
  font-size:        14px;
  padding:          8px 12px;
  height:           auto;
  box-shadow:       none;
  transition:       border-color var(--nlign-transition),
                    background-color var(--nlign-transition);
}

/* ── Textarea — capped at 130px (not half the form) ────── */
.nlign-contact .wpcf7-form textarea.form-control,
.nlign-contact .wpcf7-form textarea {
  display:          block;
  width:            100%;
  background-color: rgba(14, 14, 14, 0.55);
  border:           1px solid rgba(235, 234, 230, 0.18);
  border-radius:    0;
  color:            var(--nlign-color-dust-grey);
  font-family:      var(--nlign-body-font-family);
  font-size:        14px;
  padding:          8px 12px;
  height:           130px;       /* ④ fixed height — no more half-screen */
  min-height:       unset;
  resize:           vertical;
  box-shadow:       none;
  transition:       border-color var(--nlign-transition),
                    background-color var(--nlign-transition);
}

/* ── Focus state ────────────────────────────────────────── */
.nlign-contact .wpcf7-form .form-control:focus,
.nlign-contact .wpcf7-form input[type="text"]:focus,
.nlign-contact .wpcf7-form input[type="email"]:focus,
.nlign-contact .wpcf7-form input[type="tel"]:focus,
.nlign-contact .wpcf7-form textarea:focus {
  outline:          none;
  border-color:     var(--nlign-color-orange);
  background-color: rgba(14, 14, 14, 0.72);
  box-shadow:       none;
  color:            var(--nlign-color-dust-grey);
}

/* ── Invalid field — orange border on the INPUT only ③
   Scoped to input/textarea so the class on the span wrapper
   (where CF7 also places wpcf7-not-valid) never shows a border */
.nlign-contact .wpcf7-form input.wpcf7-not-valid,
.nlign-contact .wpcf7-form textarea.wpcf7-not-valid {
  border-color: var(--nlign-color-orange) !important;
  box-shadow:   none !important;
}

/* Span wrapper with wpcf7-not-valid — explicitly suppress any border */
.nlign-contact .wpcf7-form span.wpcf7-not-valid,
.nlign-contact .wpcf7-form span.wpcf7-form-control-wrap.wpcf7-not-valid {
  border:     none !important;
  outline:    none !important;
  box-shadow: none !important;
}

/* ── Placeholder text ───────────────────────────────────── */
.nlign-contact .wpcf7-form input::placeholder,
.nlign-contact .wpcf7-form textarea::placeholder {
  color:   rgba(235, 234, 230, 0.35);
  opacity: 1;
}

/* ── reCAPTCHA / Turnstile spacing ─────────────────────── */
.nlign-contact .wpcf7-form .g-recaptcha,
.nlign-contact .wpcf7-form .wpcf7-recaptcha,
.nlign-contact .wpcf7-form .wpcf7-form-control.wpcf7-cf-turnstile {
  margin-top: 2px;
}

/* ── Submit button — unchanged per spec ─────────────────── */
.nlign-contact .wpcf7-form input[type="submit"],
.nlign-contact .wpcf7-form .wpcf7-submit {
  display:          block;
  width:            100%;
  background-color: var(--nlign-color-orange);
  color:            #000;
  border:           none;
  border-radius:    0;
  padding:          12px 24px;
  font-family:      var(--nlign-nav-font-family);
  font-weight:      var(--nlign-nav-font-weight);
  font-size:        14px;
  letter-spacing:   1px;
  text-transform:   uppercase;
  cursor:           pointer;
  transition:       background-color var(--nlign-transition);
  margin-top:       2px;
}

.nlign-contact .wpcf7-form input[type="submit"]:hover,
.nlign-contact .wpcf7-form .wpcf7-submit:hover {
  background-color: #d43a14;
}

/* =============================================================
   ⑤  ERROR & VALIDATION MESSAGES — all brand orange (#E8421A / orange token)
   Applied to: inline tips, global banner, all error states.
   ============================================================= */

/* Inline error below each invalid field */
.nlign-contact .wpcf7-not-valid-tip {
  display:     block;
  color:       var(--nlign-color-orange);
  font-family: var(--nlign-body-font-family);
  font-size:   11px;
  font-weight: 600;
  line-height: 1.4;
  margin-top:  3px;
}

/* Global response banner — error default */
.nlign-contact .wpcf7-response-output {
  font-family:   var(--nlign-body-font-family);
  font-size:     13px;
  line-height:   1.5;
  padding:       10px 14px;
  margin-top:    10px;
  border-radius: 0;
  border:        1px solid var(--nlign-color-orange);
  color:         var(--nlign-color-orange);
  background:    rgba(243, 73, 27, 0.08);
}

/* Success state — green so it reads differently from errors */
.nlign-contact .wpcf7-mail-sent-ok.wpcf7-response-output {
  border-color: #4caf50;
  color:        #4caf50;
  background:   rgba(76, 175, 80, 0.08);
}

/* Validation / required-field errors */
.nlign-contact .wpcf7-validation-errors.wpcf7-response-output,
.nlign-contact .wpcf7-acceptance-missing.wpcf7-response-output {
  border-color: var(--nlign-color-orange);
  color:        var(--nlign-color-orange);
  background:   rgba(243, 73, 27, 0.08);
}

/* Send failure / spam blocked */
.nlign-contact .wpcf7-mail-sent-ng.wpcf7-response-output,
.nlign-contact .wpcf7-spam-blocked.wpcf7-response-output {
  border-color: var(--nlign-color-orange);
  color:        var(--nlign-color-orange);
  background:   rgba(243, 73, 27, 0.08);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

/* ── Large desktop (≤ 1399px) ────────────────────────────── */
@media (max-width: 1399.98px) {
  .nlign-contact__label,
  .nlign-contact__heading {
    font-size:   80px;
    line-height: 86px;
  }
}

/* ── Large tablet (≤ 1199px) ─────────────────────────────── */
@media (max-width: 1199.98px) {
  .nlign-contact__container { padding-left: 60px; padding-right: 60px; }

  .nlign-contact__info { padding-left: 0; padding-right: 32px; }

  .nlign-contact__label,
  .nlign-contact__heading {
    font-size:   64px;
    line-height: 70px;
  }

  .nlign-contact__form-wrap {
    padding: 28px 20px;   /* ①② keep tight at this breakpoint */
    margin:  0;
  }
}

/* ── Tablet (≤ 991px) — stack columns vertically ────────── */
@media (max-width: 991.98px) {
  .nlign-contact__container {
    flex-direction: column;
    padding-left:   120px;
    padding-right:  120px;
  }

  .nlign-contact__info {
    flex:            unset;
    padding:         64px 0 48px;
    justify-content: flex-start;
  }

  .nlign-contact__label,
  .nlign-contact__heading {
    font-size:   52px;
    line-height: 58px;
  }

  .nlign-contact__form-wrap {
    flex:    unset;
    padding: 28px 24px;   /* ①② consistent tight padding stacked layout */
    margin:  32px 0;      /* keep only vertical spacing when stacked */
  }
}

/* ── Mobile (≤ 600px) — grid collapses to single column ─── */
@media (max-width: 600px) {
  .nlign-contact .wpcf7-form .nlign-form-grid {
    grid-template-columns: 1fr;   /* all pairs stack to single column */
  }

  .nlign-contact .wpcf7-form .nlign-field--full {
    grid-column: 1;
  }

  .nlign-contact__label,
  .nlign-contact__heading {
    font-size:   40px;
    line-height: 46px;
  }

  .nlign-contact__phone {
    font-size: 20px;
  }

  .nlign-contact__form-wrap {
    padding: 24px 16px;   /* ①② minimum at mobile */
    margin:  20px 0;      /* minimum vertical spacing at mobile */
  }
}

.cf7-submit-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
    margin-left: -36px;
}

.cf7-submit-wrapper .wpcf7-spinner{
    order:-1;
    margin:0 !important;
    display:inline-flex !important;
    vertical-align:middle;
}

.cf7-submit-wrapper .wpcf7-form-control.wpcf7-submit{
    width:auto !important;
    min-width:auto !important;
    padding:10px 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    border-radius:8px;
    font-weight:600;
}

.wpcf7-form .form-control{
    border-radius:8px;
    padding:12px;
}

.wpcf7-form label{
    margin-bottom:6px;
}

.wpcf7-response-output{
    margin:1em 0 0 !important;
}