/*
 * Homepage footer: about + link columns + social + a jobs callout, replacing
 * the old single centered copyright line. Self-contained on purpose — it does
 * not touch css/style.css (a large vendor theme file) and does not reuse that
 * theme's .footer/.footer-copy/.footer-social-links rules, which assume a
 * centered single-column layout this one no longer is.
 *
 * Dark on purpose: #1b1b1b is the exact color of the "Let's Talk" band right
 * above it (.bg-dark.light-content in css/style.css), so the CTA section
 * flows straight into the footer as one continuous dark close to the page
 * instead of a light footer breaking that up.
 */

.site-footer {
  /*
   * 108px bottom padding, not the visually "tidy" 40px: #sd-chat-widget is
   * fixed 24px from the viewport's bottom-right corner and is ~56-72px tall,
   * so once a visitor scrolls all the way down, whatever sits at the true end
   * of the page is what it floats over. Without this cushion the last footer
   * row (Privacy Policy / Terms of Service) ends up partly behind it — this
   * makes the widget hover over empty footer background instead.
   */
  padding: 64px 20px 108px;
  background: #1b1b1b;
}

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

.sf-grid {
  display: grid;
  gap: 40px;
  max-width: 1140px;
  margin: 0 auto;
  padding-bottom: 48px;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
}

.sf-heading {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

/* ---------------------------------- about --------------------------------- */

/*
 * This is the navy logo — the one the header switches to once scrolled past
 * the hero, i.e. its "solid light background" state. That's also exactly why
 * it needs the light backdrop below: navy-on-navy-adjacent-black is close to
 * unreadable, so the plate gives it the light ground it was designed for
 * without swapping to a different logo file.
 */
.sf-logo {
  display: inline-flex;
  margin-bottom: 18px;
  padding: 10px 16px;
  background: #fff;
  border-radius: 12px;
}

.sf-logo img {
  display: block;
  height: 44px;
  width: auto;
}

.sf-tagline {
  max-width: 34ch;
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.sf-social {
  display: flex;
  gap: 10px;
}

.sf-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.sf-social a svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.sf-social a:hover,
.sf-social a:focus-visible {
  color: #1b1b1b;
  background: #fff;
  border-color: #fff;
}

.sf-social a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------- link columns ------------------------------ */

.sf-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-links li + li {
  margin-top: 12px;
}

.sf-links a {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.18s ease;
}

.sf-links a:hover,
.sf-links a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

/* ---------------------------------- jobs ---------------------------------- */

.sf-jobs-descr {
  max-width: 40ch;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

/*
 * Solid black rather than the mint-green accent used elsewhere in this
 * footer. A flat #000 would nearly vanish into the #1b1b1b footer behind it,
 * so it gets a light border for edge definition instead of relying on a
 * background-color difference that barely exists.
 */
.sf-jobs-btn {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.sf-jobs-btn:hover,
.sf-jobs-btn:focus-visible {
  color: #fff;
  background: #171717;
  border-color: rgba(255, 255, 255, 0.3);
}

.sf-jobs-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --------------------------------- bottom bar ------------------------------ */

/*
 * Left-aligned rather than spread edge-to-edge: the chat widget is fixed to
 * the bottom-right corner of every page (css/chat-widget.css), so content
 * pinned to that same corner ends up partly hidden behind it. Keeping both
 * groups on the left, one after another, means nothing here ever reaches
 * that corner regardless of viewport width.
 */
.sf-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.48);
}

.sf-bottom a {
  color: inherit;
}

.sf-bottom a:hover,
.sf-bottom a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.sf-bottom-left {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
}

.sf-bottom-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

@media (max-width: 900px) {
  .sf-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sf-about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .sf-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}