/* Site-wide footer — dark shell, nav columns, oversized wordmark, bottom bar. */

.mm-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: #052326;
  color: #F5F4EE;
  overflow: hidden;
}

/* Reused for both the top block and the bottom bar — only horizontal
   padding lives here, so it doesn't force the same vertical spacing on
   both. Full-width like the rest of the homepage sections (blog preview,
   redbox, gallery) instead of capped to a centered 1240px column —
   responsive padding instead of a hard max-width. */
.mm-footer-inner {
  padding: 0 clamp(24px, 5vw, 80px);
}

/* ===== Top: tagline + CTA, nav columns ===== */
.mm-footer-top {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding-top: 90px;
  padding-bottom: 70px;
  border-bottom: 1px solid rgba(245, 244, 238, .12);
}

.mm-footer-intro { max-width: 340px; flex-shrink: 0; }
.mm-footer-tagline {
  margin: 0 0 26px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.3px;
  color: #F5F4EE;
}
.mm-footer-cta {
  display: inline-block;
  background: var(--mm-accent, #d3fb52);
  color: #14150F;
  font-weight: 700;
  font-size: 14px;
  padding: 13px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: filter .15s ease;
}
.mm-footer-cta:hover { filter: brightness(0.92); }

/* ===== Newsletter (Forminator form 29284) ===== */
/* One grid item among the other footer columns (see .mm-footer-columns
   below). Forminator ships its own light-theme styling, so its field/
   button classes are overridden here to read correctly on the footer's
   dark background. */
.mm-footer-newsletter-sub { margin: 8px 0 20px; font-size: 14px; line-height: 1.5; color: #B5B4AC; }

.mm-footer-newsletter .forminator-row { margin: 0 0 12px; }
.mm-footer-newsletter .forminator-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #B5B4AC;
}
.mm-footer-newsletter .forminator-required { color: var(--mm-accent, #d3fb52); }
.mm-footer-newsletter .forminator-input {
  width: 100%;
  background: rgba(245, 244, 238, .08);
  border: 1px solid rgba(245, 244, 238, .2);
  color: #F5F4EE;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 14px;
}
.mm-footer-newsletter .forminator-input:focus { border-color: var(--mm-accent, #d3fb52); outline: none; }
.mm-footer-newsletter .forminator-button-submit {
  background: var(--mm-accent, #d3fb52) !important;
  color: #14150F !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 11px 24px !important;
  cursor: pointer;
}
.mm-footer-newsletter .forminator-button-submit:hover { filter: brightness(0.92); }
.mm-footer-newsletter .forminator-response-message { color: #F5F4EE; font-size: 13px; }

/* Grid, not nested flex — every label (Get Started, Company, Legal,
   Follow Us, Newsletter) is its own direct grid item now, instead of two
   of them being grouped inside one shared flex sub-container while a
   third sat outside it. auto-fit spreads however many columns fit across
   the full remaining width (after .mm-footer-intro's fixed column) and
   reflows to fewer on narrower screens, so the columns actually fill the
   space instead of bunching up together. */
.mm-footer-columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 40px 32px;
}
.mm-footer-col { min-width: 0; }

/* Full category + subcategory sitemap — every category (from the same
   mega-menu data source) gets its own column heading with the full,
   un-stripped subcategory titles listed under it. auto-fit instead of a
   fixed column count so it reflows down to fewer columns on narrower
   screens instead of overflowing. Reuses .mm-footer-col/-col-label and
   its ul/a styling as-is (flex:1 1 140px on the shared class is inert
   inside a grid, so no conflict). */
.mm-footer-categories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 32px 24px;
  padding: 50px 0 60px;
  border-bottom: 1px solid rgba(245, 244, 238, .12);
}

.mm-footer-col-label {
  display: block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #8A8980;
}
.mm-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.mm-footer-col a {
  color: #F5F4EE;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
}
.mm-footer-col a:hover { color: var(--mm-accent, #d3fb52); }

/* ===== Oversized wordmark ===== */
/* Deliberately a direct child of .mm-footer (full 100vw), not nested inside
   .mm-footer-inner's 1240px cap — font-size:vw needs to size against the
   true viewport it's meant to span, otherwise it either overflows a narrower
   parent (gets clipped) or under-fills it. No horizontal padding and no
   upper clamp bound: the word is meant to touch both screen edges, an upper
   cap would just leave a gap on wide screens like the earlier version did. */
.mm-footer-wordmark-wrap {
  padding: 30px 0 10px;
  text-align: center;
  line-height: 1;
  overflow: hidden;
}
.mm-footer-wordmark {
  display: inline-block;
  font-size: max(60px, 16vw);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--mm-accent, #d3fb52);
  white-space: nowrap;
}

/* ===== Bottom bar ===== */
.mm-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid rgba(245, 244, 238, .12);
  font-size: 13px;
  color: #9E9D97;
}
.mm-footer-legal { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mm-footer-legal a { color: #9E9D97; text-decoration: none; }
.mm-footer-legal a:hover { color: #F5F4EE; }

.mm-footer-social { display: flex; align-items: center; gap: 14px; }
.mm-footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  background: rgba(245, 244, 238, .08);
  color: #F5F4EE;
  transition: background .15s ease;
}
.mm-footer-social a:hover { background: rgba(245, 244, 238, .16); }

@media screen and (max-width: 900px) {
  .mm-footer-top { flex-direction: column; gap: 44px; }
  .mm-footer-columns { gap: 40px; }
  .mm-footer-categories { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); padding: 40px 0 50px; }
}

@media screen and (max-width: 560px) {
  .mm-footer-inner { padding: 0 20px; }
  .mm-footer-top { padding-top: 60px; }
  .mm-footer-categories { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
  .mm-footer-tagline { font-size: 24px; }
  .mm-footer-columns { gap: 32px 28px; }
  .mm-footer-bottom { flex-direction: column; align-items: flex-start; }
}