/* ==========================================================================
   Dynamic Mockups — site footer
   --------------------------------------------------------------------------
   Loads on every page. The legacy `footer { … }` element rules in
   footer_style.css still match this element, so every property they set
   (display, background, padding, width) is re-declared here; a class beats an
   element selector, so these win.

   The newsletter is Forminator form 1610. Its markup is the plugin's, so the
   rules below reach into it — scoped under .dm-ft, and specific enough to beat
   the global `.forminator-button-submit` / `#forminator-module-1610` rules the
   old footer left behind.
   ========================================================================== */

.dm-ft {
  display: block;
  width: 100%;
  background: var(--dm-surface-card);
  color: var(--dm-ink);
  font-family: var(--dm-font-body);
  font-size: 14px;
  line-height: var(--dm-leading-body);
  padding: 88px 0 48px;
}

/* ---------- top: brand sign-off beside the link columns ---------- */
.dm-ft-top {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 56px;
  margin-bottom: 56px;
}

.dm-ft-logo {
  display: inline-block;
}

.dm-ft-logo:hover { color: inherit; }

.dm-ft-mark {
  width: 132px;
  height: 132px;
  display: block;
}

/* Multi-column, not grid. Ten link groups of wildly different lengths (3 to 19
   links) on a grid make rows as tall as their tallest cell, which left Social
   and Legal marooned at the bottom of a row Resources had stretched. Multicol
   packs each group under the one before it and only breaks to a new column when
   the current one is full, so there is never a hole. */
.dm-ft-cols {
  columns: 4;
  column-gap: 32px;
}

/* A group must never be split across two columns — half of "Resources" at the
   bottom of one column and half at the top of the next is worse than a gap. */
.dm-ft-col {
  min-width: 0;
  break-inside: avoid;
  margin-bottom: 34px;
}

.dm-ft-col:last-child { margin-bottom: 0; }

.dm-ft-h {
  font-family: var(--dm-font-body);
  font-size: 12px;
  line-height: var(--dm-leading-label);
  font-weight: 600;
  color: var(--dm-text-tertiary);
  margin: 0 0 14px;
}

.dm-ft-col ul {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dm-ft-col li { list-style: none; }

/* --dm-text-body, not the --dm-neutral-900 ramp step: a ramp step is the same
   colour on a dark page, and the dark island has to re-point it for the button
   hover — which was turning every footer link pure white. */
.dm-ft-col a {
  color: var(--dm-text-body);
  text-decoration: none;
}

.dm-ft-col a:hover {
  color: var(--dm-ink);
  text-decoration: none;
}

/* ---------- newsletter ---------- */
.dm-ft-news {
  padding-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: center;
}

.dm-ft-news .dm-ft-h { margin-bottom: 8px; }

.dm-ft-pitch {
  color: var(--dm-text-secondary);
  margin: 0;
}

/* --- Forminator, restyled --- */
.dm-ft .dm-ft-form .forminator-ui,
.dm-ft .dm-ft-form .forminator-custom-form {
  margin: 0;
}

.dm-ft .dm-ft-form form,
.dm-ft #forminator-module-1610 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

.dm-ft .dm-ft-form .forminator-row {
  display: flex;
  gap: 10px;
  margin: 0;
  flex-wrap: wrap;
}

.dm-ft .dm-ft-form .forminator-field { margin: 0; }

.dm-ft .dm-ft-form input[type="email"],
.dm-ft .dm-ft-form input[type="text"],
.dm-ft .dm-ft-form .forminator-input {
  height: 44px;
  min-width: 260px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--dm-border-card-soft);
  background: var(--dm-surface-white);
  border-radius: var(--dm-radius-button);
  padding: 12px 14px;
  font-family: var(--dm-font-body);
  font-size: 14px;
  color: var(--dm-ink);
}

.dm-ft .dm-ft-form input::placeholder,
.dm-ft .dm-ft-form .forminator-input::placeholder {
  color: var(--dm-text-tertiary);
}

.dm-ft .dm-ft-form input:focus,
.dm-ft .dm-ft-form .forminator-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--dm-ink);
}

.dm-ft .dm-ft-form .forminator-button-submit,
.dm-ft .dm-ft-form button[type="submit"] {
  height: 44px;
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--dm-ink);
  color: #fff;
  border: 0;
  border-radius: var(--dm-radius-button);
  padding: 11px 18px;
  font-family: var(--dm-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: var(--dm-leading-label);
  cursor: pointer;
  transition: background-color .12s ease;
}

.dm-ft .dm-ft-form .forminator-button-submit:hover,
.dm-ft .dm-ft-form button[type="submit"]:hover {
  background: var(--dm-neutral-900);
  color: #fff;
}

/* the plugin's own response messages, brought into the palette */
.dm-ft .dm-ft-form .forminator-response-message {
  flex: 1 0 100%;
  margin: 4px 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: 13px;
  color: var(--dm-text-secondary);
  text-align: right;
}

.dm-ft .dm-ft-form .forminator-error-message,
.dm-ft .dm-ft-form .forminator-response-message.forminator-error {
  color: var(--dm-red-700);
}

/* ---------- legal + grants ---------- */
.dm-ft-legal {
  margin-top: 36px;
  color: var(--dm-text-tertiary);
  font-size: 12px;
  line-height: 1.6;
}

.dm-ft-legal p { margin: 0; }
.dm-ft-legal p + p { margin-top: 6px; }

.dm-ft-grants {
  margin-top: 36px;
  padding: 20px 28px;
  background: #fff;
  border-radius: var(--dm-radius-card);
}

.dm-ft-grants img {
  display: block;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  height: auto;
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .dm-ft-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 720px) {
  .dm-ft { padding: 64px 0 40px; }

  .dm-ft-news { grid-template-columns: 1fr; }
  .dm-ft-cols { columns: 2; }

  .dm-ft .dm-ft-form form,
  .dm-ft #forminator-module-1610 { justify-content: flex-start; }

  .dm-ft .dm-ft-form .forminator-row { width: 100%; }

  .dm-ft .dm-ft-form input[type="email"],
  .dm-ft .dm-ft-form input[type="text"],
  .dm-ft .dm-ft-form .forminator-input {
    flex: 1 1 200px;
    min-width: 0;
    width: 100%;
  }

  .dm-ft .dm-ft-form .forminator-response-message { text-align: left; }

  .dm-ft-grants { padding: 16px; }
}

/* ==========================================================================
   Dark pages
   --------------------------------------------------------------------------
   The footer renders outside a dark page's `dm-dark` wrapper, so it takes the
   same INK ISLAND treatment as the header: re-declare the semantic tokens and
   every rule above follows. See the note at the bottom of dm/header.css.

   The Forminator newsletter form is the exception — it is a plugin's markup with
   its own colours, so its field and button are named explicitly.
   ========================================================================== */
body.dm-dark-page .dm-ft {
  --dm-ink: #F4F5F1;
  --dm-text-body: #F4F5F1;
  --dm-text-secondary: #C4C6B9;
  --dm-text-tertiary: #93948B;
  --dm-on-ink: #21221D;
  --dm-neutral-900: #FFFFFF;

  --dm-surface-page: #16170F;
  --dm-surface-card: #21221D;
  --dm-surface-raised: #21221D;
  --dm-surface-white: #2A2B25;

  --dm-border-card: #3B3C36;
  --dm-border-card-soft: #4F5049;
  --dm-border-hairline: #4F5049;

  background: #16170F;
}

body.dm-dark-page .dm-ft-mark { filter: invert(1) brightness(1.7); }

body.dm-dark-page .dm-ft .forminator-input,
body.dm-dark-page .dm-ft input[type="email"] {
  border-color: #4F5049;
  background: #21221D;
  color: #F4F5F1;
}

body.dm-dark-page .dm-ft .forminator-input::placeholder { color: #93948B; }

body.dm-dark-page .dm-ft .forminator-button {
  background: #F4F5F1;
  color: #21221D;
}