/* ===== THERMON FOOTER NEWSLETTER — CLEANED SPACING + INPUT STYLE ===== */

/* Band width + remove extra vertical padding at the top */
footer .top-footer{ position:relative; z-index:2; padding-top:0 !important; }
footer .top-footer .container{
  max-width:1280px; margin:0 auto;
  padding-left:24px; padding-right:24px;
  padding-top:0 !important;           /* was causing the tall top gap */
}

/* Scope form tokens */
footer .top-footer form.marketingForm{
  --cta:#da291c;
  --input-bg:#fff;
  --input-br:#000;                    /* darker border per mock */
  --input-h:56px;
  --radius: 5px;                      /* rounder corners per mock */
  --gap: 10px;
  color:#fff;
}

/* Remove Dynamics’ 600px cap */
footer .top-footer .marketingForm [data-layout="true"],
footer .top-footer .marketingForm .outer,
footer .top-footer .marketingForm .tbContainer{width:100% !important;margin-bottom: 0;}

/* Section spacing: hug the band */
footer .top-footer .marketingForm [data-layout="true"] > [data-section="true"]:first-child{
  display:block !important;
  padding: 0px 0 16px !important;      /* tighten top/bottom */
  position:relative;
}

/* Headline + subcopy (keep margins tight) */
footer .top-footer .marketingForm h1{
  margin:0 0 6px !important;
  color:#fff !important;
  font:800 32px/1.2 "Montserrat",system-ui,Arial,sans-serif !important;
  font-size: 19.5px !important;
  font-family: "Montserrat", sans-serif !important;
}
footer .top-footer .marketingForm p{
  margin:0 !important;
  color:#fff !important; opacity:.95;
  font:500 20px/1.35 "Montserrat",system-ui,Arial,sans-serif !important;
}

/* Inputs — match mock look */
footer .top-footer .marketingForm .textFormFieldBlock{ margin:0 !important; padding:0 !important; }
footer .top-footer .marketingForm .textFormFieldBlock label{ display:none !important; }
footer .top-footer .marketingForm input[type="text"],
footer .top-footer .marketingForm input[type="email"]{
  background:var(--input-bg) !important;
  border:3px solid var(--input-br) !important;  /* thicker, dark */
  border-radius:var(--radius) !important;
  height:var(--input-h) !important;
  padding:0 16px !important;
  font:700 18px/1 "Montserrat",system-ui,Arial,sans-serif !important;
  color:#000 !important;
  width:100% !important;
  box-shadow: inset 0 2px 0 rgba(0,0,0,.35);     /* subtle inner bevel */
}
footer .top-footer .marketingForm input::placeholder{
  color:#1a1a1a; opacity:.95; font-weight:700;
}
footer .top-footer .marketingForm input:focus{
  outline:2px solid #fff; outline-offset:2px;
}

/* Button + reCAPTCHA */
footer .top-footer .marketingForm .submitButtonWrapper{
  margin:0 !important;
  display:flex !important;
  /* align-items:center; */
  gap:10px;
  padding: 0;
}
footer .top-footer .marketingForm .submitButton{
  background:var(--cta) !important;
  /* color:#fff !important; */
  /* border:none !important; */
  /* border-radius:var(--radius) !important; */
  /* height:var(--input-h) !important; */
  /* padding:0 28px !important; */
  /* font:800 18px/1 "Montserrat",system-ui,Arial,sans-serif !important; */
}
footer .top-footer #g-recaptcha-container{ flex:0 0 304px; min-width:304px; }
footer .top-footer #g-recaptcha-container > div{ transform:none !important; } /* keep true height */

/* Hide prefilled consent/mapping section */
footer .top-footer .marketingForm [data-section="true"]:nth-of-type(2){ display:none !important; }

/* ===== CORE LAYOUT — use GRID on the single <tr> with 5 columns ===== */
footer .top-footer .marketingForm
  [data-layout="true"] > [data-section="true"]:first-child .tbContainer.multi > tbody{
  display:block !important;
  width:100% !important;
}
footer .top-footer .marketingForm
  [data-layout="true"] > [data-section="true"]:first-child .tbContainer.multi > tbody > tr{
  display:grid !important;
  align-items:center;
  column-gap:var(--gap);
  row-gap:0;
  width:100% !important;
}
footer .top-footer .marketingForm
  [data-layout="true"] > [data-section="true"]:first-child .columnContainer{
  display:block !important; width:auto !important; padding:0 !important; border:0 !important;
}

/* ----- WIDE DESKTOP (single-row inline) ----- */
@media (min-width:1400px){
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .tbContainer.multi > tbody > tr{
    grid-template-columns: minmax(420px,1fr) 280px 280px 280px max-content;
  }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(1){ grid-column:1; min-width:420px; }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(2){grid-column:2;}
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(3){grid-column:3;}
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(4){ grid-column:4; }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(5){
    grid-column:5; justify-self:end; display:flex !important; gap:10px; min-height:90px;
  }
}

/* ----- MEDIUM (laptops): actions drop to a clean 2nd line ----- */
@media (min-width:992px) and (max-width:1399.98px){
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .tbContainer.multi > tbody > tr{
    grid-template-columns: minmax(380px,1fr) 1fr 1fr 1fr;
    row-gap:12px;
  }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(1){ grid-column:1; }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(2){ grid-column:2; }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(3){ grid-column:3; }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(4){ grid-column:4; }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .columnContainer:nth-child(5){
    grid-column:1 / -1; justify-self:end; display:flex !important; gap:10px; min-height:90px; margin-top:4px;
  }
}

/* ----- MOBILE: fully stacked like the mock ----- */
@media (max-width:991.98px){
  footer .top-footer .marketingForm h1{
    font-size:19.5px !important; text-align:center !important; margin-top:8px !important;
  }
  footer .top-footer .marketingForm p{
    font: size 17.5px !important; text-align:center !important; margin:8px 0 12px !important;
  }
  footer .top-footer .marketingForm
    [data-layout="true"] > [data-section="true"]:first-child .tbContainer.multi > tbody > tr{
    display:block !important;
  }
  /* footer .top-footer .marketingForm .textFormFieldBlock{ margin:0 12px !important; } */
  footer .top-footer .marketingForm .submitButtonWrapper{ padding:0 12px; flex-direction: column; }
  footer .top-footer .marketingForm .submitButton{ width:100%; }
  footer .top-footer #g-recaptcha-container{ order:-1; margin:0 12px 8px; }
}
footer .top-footer .row{ margin-top:0 !important; margin-bottom:0 !important; }
/* --- make the headline column wider on wide screens so it doesn't wrap --- */
@media (min-width:1400px){
  footer .top-footer .marketingForm
  [data-layout="true"] > [data-section="true"]:first-child .tbContainer.multi > tbody > tr{
    /* widen text track from 420px -> 640px */
    /* grid-template-columns: minmax(527px,1fr) 188px 188px 188px max-content; */
    grid-template-columns: minmax(358px,1fr) 188px 188px 188px max-content;
    align-items: start;              /* center-align all cells vertically */
  }
  /* keep the text block from adding extra vertical space */
  footer .top-footer .marketingForm h1{line-height:1.15 !important;margin-bottom: 0px !important;}
  footer .top-footer .marketingForm p{line-height:1.25 !important;font-size: 17.5px !important;color: #fff;}
}

/* --- laptops: also give the text a bit more room to avoid early wrap --- */
@media (min-width:992px) and (max-width:1399.98px){
  footer .top-footer .marketingForm
  [data-layout="true"] > [data-section="true"]:first-child .tbContainer.multi > tbody > tr{
    /* from minmax(380px,1fr) -> 520px for cleaner single-line headings */
    grid-template-columns: minmax(520px,1fr) 1fr 1fr 1fr;
    align-items:center;
  }
}

/* --- normalize input look (height/border/radius) across breakpoints --- */
footer .top-footer .marketingForm input[type="text"],
footer .top-footer .marketingForm input[type="email"]{
  height:56px !important;
  border:3px solid #000 !important;
  border-radius:14px !important;
  font-weight:700 !important;
  box-shadow: none !important;
}
footer .top-footer .marketingForm input::placeholder{
  font-weight:700 !important;
  opacity:.95 !important;
}

/* --- tighten vertical padding of the band so both pages feel identical --- */
footer .top-footer .marketingForm [data-layout="true"] > [data-section="true"]:first-child{
  /* padding-top:8px !important; */
  padding-bottom: 0 !important;
}

/* PATCH: replace input styling to match the requested computed styles */
footer .top-footer .marketingForm .textFormFieldBlock label{ display:none !important; }

footer .top-footer .marketingForm input[type="text"],
footer .top-footer .marketingForm input[type="email"]{
  -webkit-appearance: auto !important;
  appearance: auto !important;

  /* background */
  background-clip: border-box !important;
  background-color: #ffffff !important;
  background-image: none !important;
  background-origin: padding-box !important;
  background-position: 0% 0% !important;
  background-repeat: repeat !important;
  background-size: auto !important;

  /* border + radius */
  border-top: 1px solid #000 !important;
  border-right: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
  border-left: 1px solid #000 !important;
  border-top-left-radius: 6px !important;
  border-top-right-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  border-bottom-right-radius: 6px !important;

  /* box model */
  box-shadow: none !important;
  box-sizing: border-box !important;
  height: 2.65em !important;
  width: 100% !important;            /* use 240.625px if you want fixed width */
  padding: 0 !important;
  margin: 0 0 9px 0 !important;

  /* text */
  color: #000 !important;
  font-family: "Montserrat", sans-serif !important;
  font-weight: 400 !important;
  font-size: 13px !important;
  line-height: 13px !important;
  text-align: start !important;
  text-indent: 10px !important;
  text-shadow: none !important;
  text-transform: none !important;
  text-rendering: auto !important;

  /* misc */
  display: inline-block !important;
  cursor: text !important;
  letter-spacing: normal !important;
  word-spacing: 0 !important;
  vertical-align: middle !important;
  overflow: clip !important;
  visibility: visible !important;
  -webkit-tap-highlight-color: transparent !important;

  /* transitions */
  transition: border .2s linear, box-shadow .2s linear, -webkit-box-shadow .2s linear !important;
}

/* Optional: placeholders to look like regular text weight */
footer .top-footer .marketingForm input::placeholder{
  color:#000 !important;
  opacity:1 !important;
  font-weight:400 !important;
}
/* PATCH: stop Dynamics from forcing flex: 2 1 20% on fields */
footer .top-footer form.marketingForm .textFormFieldBlock input,
footer .top-footer form.marketingForm .dateTimeFormFieldBlock input,
footer .top-footer form.marketingForm .lookupFormFieldBlock input,
footer .top-footer form.marketingForm .optionSetFormFieldBlock select,
footer .top-footer form.marketingForm textarea,
footer .top-footer form.marketingForm div[data-editorblocktype="Captcha"] input{
  flex: none !important;            /* overrides flex: 2 1 20% */
  -webkit-flex: none !important;    /* Safari */
  width: 100% !important;           /* fill their cell/column */
  min-width: 0 !important;          /* prevent overflow in grid/flex */
}


/* Remove the margin on the headline text wrapper */
footer .top-footer form.marketingForm
  [data-layout="true"] > [data-section="true"]:first-child
  [data-editorblocktype="Text"]{
  margin: 0 !important;
  padding: 0 !important; /* optional, in case padding is added elsewhere */
}

/* (Optional) also zero out heading/paragraph default margins inside */
footer .top-footer form.marketingForm
  [data-layout="true"] > [data-section="true"]:first-child
  [data-editorblocktype="Text"] h1,
footer .top-footer form.marketingForm
  [data-layout="true"] > [data-section="true"]:first-child
  [data-editorblocktype="Text"] p{
  margin: 0 !important;
}
/* kill the 10px top/bottom margin on the submit wrapper */
footer .top-footer form.marketingForm
  [data-editorblocktype="SubmitButton"] {
  margin: 0 !important;
  padding: 0 !important; /* optional */
}

/* also zero any inline margins on the button and recaptcha container */
footer .top-footer form.marketingForm .submitButton {
  margin: 0 !important;
  height: fit-content !important;
}

footer .top-footer #g-recaptcha-container {
  margin: 0 !important;
}


footer .top-footer .marketingForm [data-layout="true"] > [data-section="true"]:first-child .columnContainer > table {
    margin: 0;
}

footer .top-footer div[data-cached-form-url] .onFormSubmittedFeedback * {
    color: #fff !important;
}
footer .top-footer div[data-cached-form-url] .onFormSubmittedFeedback {
    height: 153px !important;
    background: transparent;
}

@media (max-width:992px) { 
      footer .top-footer form.marketingForm .textFormFieldBlock input {
    width: 100% !important;
    margin: 0 auto !important;
    margin-bottom: 10px !important;
}

 footer .top-footer form.marketingForm .wrap-section .outer tbody tr th {
    padding: 19px !important;
}

footer .top-footer form.marketingForm
  [data-layout="true"] > [data-section="true"]:first-child
  [data-editorblocktype="Text"] h1,
footer .top-footer form.marketingForm
  [data-layout="true"] > [data-section="true"]:first-child
  [data-editorblocktype="Text"] p{
  margin-bottom: 5px !important;
}

footer .top-footer form.marketingForm .submitButton {
    margin: 0 auto !important;
    width: 100% !important;
}

footer .top-footer #g-recaptcha-container {
    display: flex;
    justify-content: center;
}

footer .top-footer #g-recaptcha-container {
    flex: none;
}

}

@media(max-width: 1556px){
    footer .top-footer .marketingForm .wrap-section .multi tbody,footer .top-footer  .marketingForm .wrap-section .multi tbody tr,footer .top-footer  .marketingForm .wrap-section .multi tbody tr td,footer .top-footer  .marketingForm .wrap-section .multi tbody tr th,footer .top-footer .marketingForm .wrap-section .outer tbody,footer .top-footer .marketingForm .wrap-section .outer tbody tr,footer .top-footer .marketingForm .wrap-section .outer tbody tr td,footer .top-footer .marketingForm .wrap-section .outer tbody tr th {
    width: 100% !important;
            box-sizing: border-box;
        height: auto !important;
        min-height: auto !important;
}
}