/* ============================================
   Site Footer (2026 rebuild)
   Scoped under .site-footer
   ============================================ */

.site-footer,
.site-footer * { box-sizing: border-box; }

.site-footer a { text-decoration: none; color: inherit; }

.site-footer__container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ============================================
   Newsletter Section
   ============================================ */
section.site-footer__newsletter {
  background: linear-gradient(
    169.84deg,
    #111c24 0%,
    #221f26 14.286%,
    #3a2327 35.714%,
    #562629 64.286%,
    #6d2729 85.714%,
    #7c2629 100%
  );
  padding: 64px 0;
}

.site-footer__newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.site-footer__newsletter-text h2 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  letter-spacing: 2px;
  color: #f1f3f4;
  text-transform: uppercase;
  margin: 0 0 16px 0;
}

.site-footer__newsletter-text p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28.8px;
  color: #f1f3f4;
  margin: 0;
}

/* ============================================
   Dynamics form (scoped to newsletter wrapper)
   HTML: <form.marketingForm> > [data-layout] > [data-section]
         > table.outer > th > table.tbContainer.multi
         > tr > 5 x th.columnContainer (heading, first, last, email, submit+captcha)
   ============================================ */
.site-footer__newsletter-form { width: 100%; color: #fff; }

/* Break out of the 600px cap; strip backgrounds/borders */
.site-footer__newsletter-form form.marketingForm {
  background: transparent !important;
  color: #fff !important;
  font-family: 'Montserrat', sans-serif !important;
}

.site-footer__newsletter-form form.marketingForm [data-layout="true"] {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
}

.site-footer__newsletter-form form.marketingForm [data-section="true"] {
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Hide the second section (hidden consent fields already display:none, but guard anyway) */
.site-footer__newsletter-form form.marketingForm [data-section="true"]:nth-of-type(2) {
  display: none !important;
}

/* Outer table → block */
.site-footer__newsletter-form form.marketingForm table.outer {
  width: 100% !important;
  display: block !important;
}
.site-footer__newsletter-form form.marketingForm table.outer > tbody,
.site-footer__newsletter-form form.marketingForm table.outer > tbody > tr {
  display: block !important;
  width: 100% !important;
}
.site-footer__newsletter-form form.marketingForm table.outer > tbody > tr > th {
  display: block !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Inner containerWrapper table → block, kill borders/collapse */
.site-footer__newsletter-form form.marketingForm .tbContainer.multi {
  width: 100% !important;
  display: block !important;
}
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody {
  display: block !important;
  width: 100% !important;
}

/* The 5-column <tr> → CSS grid, assign grid-areas per column
   Grid is 4 cols: row 1 splits 50/50 (first/last); row 2 gives email 75% + button 25% */
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 48px 48px auto;
  grid-template-areas:
    "first   first   last    last"
    "email   email   email   button"
    "captcha captcha captcha captcha";
  column-gap: 12px;
  row-gap: 12px;
  align-items: center;
  width: 100% !important;
}

/* All 5 columnContainer cells → block, full width of their grid area */
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: top !important;
}

/* Inner wrapper tables inside each columnContainer → block */
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer > table,
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer > table > tbody,
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer > table > tbody > tr,
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer > table > tbody > tr > th {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Column 1 = heading block → hide (we show our own on the left) */
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(1) {
  display: none !important;
}

/* Map input columns to grid areas (+ explicit grid-column/row as fallback) */
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(2) {
  grid-area: first;
  grid-column: 1 / span 2 !important;
  grid-row: 1 !important;
}
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(3) {
  grid-area: last;
  grid-column: 3 / span 2 !important;
  grid-row: 1 !important;
}
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(4) {
  grid-area: email;
  grid-column: 1 / span 3 !important;
  grid-row: 2 !important;
}

/* Column 5 (submit wrapper) — use display:contents chain so the button + captcha
   become direct grid items of the outer <tr> grid and can be placed independently */
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(5),
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(5) > table,
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(5) > table > tbody,
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(5) > table > tbody > tr,
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(5) > table > tbody > tr > th,
.site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(5) div[data-editorblocktype="SubmitButton"].submitButtonWrapper {
  display: contents !important;
}

/* Place button and captcha into grid areas */
.site-footer__newsletter-form form.marketingForm .submitButton {
  grid-area: button;
  grid-column: 4 !important;
  grid-row: 2 !important;
  justify-self: stretch;
  align-self: stretch;
}

.site-footer__newsletter-form form.marketingForm #g-recaptcha-container {
  grid-area: captcha;
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  justify-self: start;
  align-self: start;
}

/* Field block wrappers */
.site-footer__newsletter-form form.marketingForm .textFormFieldBlock {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  display: block !important;
}

/* Hide labels — rely on placeholders */
.site-footer__newsletter-form form.marketingForm .textFormFieldBlock label {
  display: none !important;
}

/* Kill Dynamics' `flex: 2 1 20%` on inputs */
.site-footer__newsletter-form form.marketingForm .textFormFieldBlock input,
.site-footer__newsletter-form form.marketingForm div[data-editorblocktype="Captcha"] input {
  flex: none !important;
  -webkit-flex: none !important;
}

/* Inputs */
.site-footer__newsletter-form form.marketingForm input[type="text"],
.site-footer__newsletter-form form.marketingForm input[type="email"],
.site-footer__newsletter-form form.marketingForm input[type="tel"] {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 48px !important;
  color: #111c24 !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.site-footer__newsletter-form form.marketingForm input::placeholder {
  color: rgba(0, 0, 0, 0.5) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

/* Submit wrapper = reCAPTCHA + button, side-by-side with button on the right */
.site-footer__newsletter-form form.marketingForm div[data-editorblocktype="SubmitButton"].submitButtonWrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  text-align: left !important;
}

/* reCAPTCHA container — prevent overflow */
.site-footer__newsletter-form form.marketingForm #g-recaptcha-container {
  flex: 0 0 304px;
  margin: 0 !important;
}
.site-footer__newsletter-form form.marketingForm #g-recaptcha-container > div {
  transform: none !important;
}

/* Submit button */
.site-footer__newsletter-form form.marketingForm .submitButton {
  display: inline-block !important;
  width: auto !important;
  height: 48px !important;
  min-width: 168px !important;
  padding: 0 24px !important;
  margin: 0 !important;
  background: #da291c !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  line-height: 48px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease !important;
}

.site-footer__newsletter-form form.marketingForm .submitButton:hover:not(:disabled) {
  background: #b82015 !important;
}

.site-footer__newsletter-form form.marketingForm .submitButton:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.site-footer__newsletter-form form.marketingForm .submitButton > span {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: #ffffff !important;
}

/* Success message — auto-height, no enforced dimensions */
.site-footer__newsletter-form div[data-cached-form-url] .onFormSubmittedFeedback {
  background: transparent !important;
  color: #fff !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 16px 0 !important;
  margin: 0 !important;
}
.site-footer__newsletter-form div[data-cached-form-url] .onFormSubmittedFeedback * {
  color: #fff !important;
  height: auto !important;
  min-height: 0 !important;
}

/* Mobile: stack all fields vertically */
@media (max-width: 768px) {
  .site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "first"
      "last"
      "email"
      "button"
      "captcha";
  }

  /* Reset explicit grid-column/row overrides so single-column stacking works */
  .site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(2),
  .site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(3),
  .site-footer__newsletter-form form.marketingForm .tbContainer.multi > tbody > tr > th.columnContainer:nth-child(4),
  .site-footer__newsletter-form form.marketingForm .submitButton,
  .site-footer__newsletter-form form.marketingForm #g-recaptcha-container {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  .site-footer__newsletter-form form.marketingForm .submitButton {
    width: 100% !important;
    justify-self: stretch !important;
  }

  /* reCAPTCHA: prevent horizontal overflow — scale down if wider than viewport */
  .site-footer__newsletter-form form.marketingForm #g-recaptcha-container {
    max-width: 100%;
    overflow: hidden;
  }
}

/* ============================================
   Main Footer Section
   ============================================ */
section.site-footer__main {
  background: #111c24;
  padding: 48px 0;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

.site-footer__col h4 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.7px;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0 0 16px 0;
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__col li a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #99a1af;
  transition: color 0.2s ease;
}

.site-footer__col li a:hover { color: #ffffff; }

/* ============================================
   Bottom Row
   ============================================ */
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 33px;
  border-top: 1px solid #364153;
}

.site-footer__copyright {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #99a1af;
  margin: 0;
}

.site-footer__legal ul,
.site-footer__legal-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer__legal a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #99a1af;
  transition: color 0.2s ease;
}

.site-footer__legal a:hover { color: #ffffff; }

/* ============================================
   Responsive
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
  .site-footer__container { padding: 0 32px; }

  .site-footer__newsletter-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }

  .site-footer__newsletter-text h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .site-footer__container { padding: 0 20px; }

  section.site-footer__newsletter { padding: 48px 0; }
  section.site-footer__main { padding: 40px 0; }

  .site-footer__newsletter-text h2 {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: 1.4px;
  }

  .site-footer__newsletter-text p {
    font-size: 16px;
    line-height: 25px;
  }

  .site-footer__newsletter-form .marketingForm [data-columnset="true"],
  .site-footer__newsletter-form .marketingForm [data-columnset="true"]:last-of-type {
    grid-template-columns: 1fr;
    gap: 12px !important;
  }

  .site-footer__newsletter-form .marketingForm button[type="submit"],
  .site-footer__newsletter-form .marketingForm input[type="submit"],
  .site-footer__newsletter-form .marketingForm .submitButton {
    width: 100% !important;
  }

  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px 24px;
    margin-bottom: 32px;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 24px;
  }

  .site-footer__legal ul,
  .site-footer__legal-menu {
    gap: 16px 24px;
  }
}

@media (max-width: 480px) {
  .site-footer__columns { grid-template-columns: 1fr; }
}