/* ============================================================
   Shared footer — light DOM, namespaced (.smf-*)
   ------------------------------------------------------------
   Light DOM (not shadow) so its internal links stay fully
   crawlable. Namespaced + reset-bounded so it can't collide
   with host styles. Consumes the shared tokens from tokens.css.
   ============================================================ */

.smf,
.smf *,
.smf *::before,
.smf *::after {
  box-sizing: border-box;
}

/* Reset-bound: neutralise any host/global element styles (e.g. base.css a/li/ul/p
   sizing + margins) so the footer renders identically whether or not a page-level
   stylesheet is present. The .smf-* rules below then own the footer's look. */
.smf a {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.3s ease;
}
.smf a:hover {
  text-decoration: none;
  color: var(--sm-blue);
}
.smf ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.smf li {
  margin: 0;
  line-height: inherit;
}
.smf p,
.smf h1,
.smf h2,
.smf h3,
.smf h4,
.smf h5 {
  margin: 0;
}

.smf {
  background: #fff;
  color: var(--sm-text-body);
  font-family:
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
}
.smf-inner {
  width: min(100% - 48px, var(--content-max));
  margin: 0 auto;
  padding: var(--space-8) 0 var(--space-4);
}

.smf-top {
  display: grid;
  grid-template-columns: 1.3fr 3fr;
  gap: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--sm-border);
}

/* Logo pinned top, contact + G2 pushed to the bottom (column stretches to the
   height of the link columns beside it). */
.smf-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
.smf-brand svg {
  height: 40px;
  width: auto;
  display: block;
}
/* footer logo wraps the mark in a home link — no baseline gap, no link styling */
.smf-logo {
  display: inline-block;
  line-height: 0;
}
.smf-tagline {
  margin: var(--space-2) 0 var(--space-3);
  max-width: 260px;
  color: var(--sm-text-body);
}
.smf-contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--space-3);
  margin-top: auto;
}
.smf-contact a {
  color: var(--sm-text);
  text-decoration: none;
}
.smf-contact a:hover {
  color: var(--sm-blue);
}
.smf-g2 img {
  height: 32px;
  width: auto;
  display: block;
}

.smf-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.smf-col h4 {
  margin: 0 0 var(--space-2);
  font-family: "Sunflower", sans-serif;
  font-weight: 500; /* column titles: Sunflower medium */
  font-size: 15px;
  color: var(--sm-text);
}
.smf-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.smf-col a {
  color: var(--sm-text-body);
  text-decoration: none;
}
.smf-col a:hover {
  color: var(--sm-blue);
}

.smf-bottom {
  display: grid;
  grid-template-columns: 1.3fr 3fr; /* mirror .smf-top so the items line up with the columns above */
  gap: var(--space-8);
  align-items: center;
  padding-top: var(--space-4);
}
.smf-bottom-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.smf-legal {
  grid-column: 4;
} /* align under the far-right column (Company) */
.smf-bottom a {
  color: var(--sm-text-body);
  text-decoration: none;
}
.smf-bottom a:hover {
  color: var(--sm-blue);
}

@media (max-width: 900px) {
  .smf-top {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .smf-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  .smf-bottom {
    grid-template-columns: 1fr;
    gap: var(--space-2);
    align-items: start;
  }
  .smf-bottom-cols {
    grid-template-columns: 1fr;
  }
  .smf-legal {
    grid-column: auto;
  }
  .smf-contact {
    margin-top: var(--space-4);
  } /* fixed gap when the column no longer stretches */
}
@media (max-width: 520px) {
  .smf-cols {
    grid-template-columns: 1fr;
  }
}