/* ==========================================================================
   Footer Section — BuddieSpace Kajabi Theme
   Figma node: 1:107
   Canvas: 1440 × ~796px
   Design tokens: Navy #21254a | Green #b0f288 | White #ffffff
   ========================================================================== */

/* ── Container ──────────────────────────────────────────────────────────── */
.bs-footer {
  background: #21254a;
  font-family: 'Inter', sans-serif;
  color: #fff;
  overflow: hidden;
  /* Top padding for the big wordmark */
  padding-top: clamp(40px, 5.56vw, 80px);
}

/* ── Large decorative wordmark at top ───────────────────────────────────── */
.bs-footer__bg-headline {
  font-size: clamp(48px, 12.29vw, 177px);
  font-weight: 800;
  line-height: 1;
  color: #fff;
  text-transform: capitalize;
  text-shadow: 0px 3.238px 60.714px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  overflow: hidden;
  margin: 0 0 clamp(24px, 2.22vw, 32px);
  padding: 0 clamp(20px, 4.93vw, 71px);
  letter-spacing: -0.02em;
}

/* ── Three-column grid ──────────────────────────────────────────────────── */
.bs-footer__columns {
  display: grid;
  /* Left col flexible; middle ~246px; right ~330px */
  grid-template-columns: 1fr clamp(160px, 17.08vw, 246px) clamp(240px, 22.92vw, 330px);
  column-gap: clamp(24px, 4.17vw, 60px);
  row-gap: clamp(32px, 3.47vw, 50px);
  padding: clamp(24px, 2.78vw, 40px) clamp(20px, 4.93vw, 71px) clamp(32px, 3.47vw, 50px);
  align-items: start;
}

/* ──────────────────────────────────────────────────────────────────────────
   LEFT COLUMN — Logo, tagline, socials, location
────────────────────────────────────────────────────────────────────────── */
.bs-footer__logo-col {
  max-width: clamp(280px, 40.14vw, 578px);
}

/* Logo row: image + brand name side by side */
.bs-footer__logo-row {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.69vw, 10px);
  margin-bottom: clamp(10px, 0.9vw, 14px);
}

.bs-footer__logo-img {
  width: clamp(42px, 3.87vw, 56px);
  height: clamp(42px, 3.87vw, 56px);
  object-fit: cover;
  border-radius: clamp(12px, 1.43vw, 21px);
  display: block;
  flex-shrink: 0;
}

.bs-footer__logo-name {
  font-size: clamp(18px, 1.95vw, 28px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 3.622px 67.906px rgba(0, 0, 0, 0.25);
  text-transform: capitalize;
  line-height: 1.2;
}

/* Tagline */
.bs-footer__tagline {
  font-size: clamp(14px, 1.51vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  margin: 0 0 clamp(16px, 1.67vw, 24px);
}

/* "Follow Us On:" label */
.bs-footer__follow-label {
  font-size: clamp(15px, 1.89vw, 27px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 clamp(8px, 0.9vw, 13px);
}

/* Social icons row */
.bs-footer__social {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.69vw, 10px);
  margin-bottom: clamp(16px, 1.51vw, 22px);
}

.bs-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(16px, 1.32vw, 19px);
  height: clamp(16px, 1.32vw, 19px);
  transition: opacity 0.2s;
}

.bs-footer__social-link:hover {
  opacity: 0.75;
}

.bs-footer__social-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Location / address */
.bs-footer__location {
  font-size: clamp(14px, 1.51vw, 22px);
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   MIDDLE COLUMN — Support
────────────────────────────────────────────────────────────────────────── */
.bs-footer__col-heading {
  font-size: clamp(16px, 1.89vw, 27px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 clamp(20px, 2.07vw, 30px);
  line-height: 1.2;
}

.bs-footer__support-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bs-footer__support-links li a {
  font-size: clamp(13px, 1.26vw, 18px);
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  line-height: 1.5;
  transition: opacity 0.2s;
  display: inline-block;
}

.bs-footer__support-links li a:hover {
  opacity: 0.75;
  text-decoration: underline;
}

/* ──────────────────────────────────────────────────────────────────────────
   RIGHT COLUMN — Subscribe
────────────────────────────────────────────────────────────────────────── */
.bs-footer__subscribe-text {
  font-size: clamp(13px, 1.26vw, 18px);
  font-weight: 400;
  color: #fff;
  line-height: 1.56;
  margin: 0 0 clamp(16px, 2.01vw, 29px);
}

/* Email input + button wrapper */
.bs-footer__subscribe-form {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: clamp(230px, 22.89vw, 330px);
  background: #fff;
  border-radius: clamp(4px, 0.45vw, 6.5px);
  overflow: hidden;
}

.bs-footer__subscribe-input {
  flex: 1;
  min-width: 0;
  height: clamp(36px, 2.95vw, 42.5px);
  padding: 0 clamp(10px, 1.04vw, 15px);
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  color: #333;
  outline: none;
  box-sizing: border-box;
}

.bs-footer__subscribe-input::placeholder {
  color: #757575;
}

.bs-footer__subscribe-btn {
  width: clamp(36px, 3.02vw, 43.5px);
  flex-shrink: 0;
  background: #b0f288;
  border: none;
  border-radius: 0 clamp(4px, 0.45vw, 6.5px) clamp(4px, 0.45vw, 6.5px) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.bs-footer__subscribe-btn:hover {
  background: #9de675;
}

.bs-footer__subscribe-btn img {
  width: clamp(14px, 1.32vw, 19px);
  height: clamp(14px, 1.32vw, 19px);
  object-fit: contain;
  display: block;
}

/* ──────────────────────────────────────────────────────────────────────────
   BOTTOM BAR — border + copyright + credit
────────────────────────────────────────────────────────────────────────── */
.bs-footer__bottom-outer {
  padding: 0 clamp(16px, 3.3vw, 48px);
}

.bs-footer__bottom {
  border-top: 2.716px solid #fff;
  padding: clamp(12px, 1.04vw, 15px) clamp(0px, 1.59vw, 23px) clamp(20px, 2.08vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.bs-footer__copyright {
  font-size: clamp(13px, 1.51vw, 22px);
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
  white-space: nowrap;
}

.bs-footer__credit {
  font-size: clamp(13px, 1.51vw, 22px);
  font-weight: 400;
  color: #fff;
  line-height: 1.5;
  text-align: right;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.bs-footer__credit a {
  color: #b0f288;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.bs-footer__credit a:hover {
  opacity: 0.8;
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE — Tablet (≤ 1023px)
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .bs-footer__bg-headline {
    font-size: clamp(36px, 7vw, 80px);
  }

  .bs-footer__columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Logo col spans the full row */
  .bs-footer__logo-col {
    grid-column: 1 / -1;
    max-width: 100%;
  }

  .bs-footer__subscribe-form {
    max-width: 100%;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE — Mobile (≤ 599px)
────────────────────────────────────────────────────────────────────────── */
@media (max-width: 599px) {
  .bs-footer {
    padding-top: 32px;
  }

  .bs-footer__bg-headline {
    font-size: clamp(32px, 11vw, 56px);
    padding-left: clamp(16px, 5vw, 24px);
    padding-right: clamp(16px, 5vw, 24px);
  }

  .bs-footer__columns {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-left: clamp(16px, 5vw, 24px);
    padding-right: clamp(16px, 5vw, 24px);
  }

  .bs-footer__subscribe-form {
    max-width: 100%;
  }

  .bs-footer__bottom-outer {
    padding-left: clamp(16px, 5vw, 24px);
    padding-right: clamp(16px, 5vw, 24px);
  }

  .bs-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .bs-footer__copyright {
    white-space: normal;
    font-size: 13px;
  }

  .bs-footer__credit {
    text-align: left;
    justify-content: flex-start;
    font-size: 13px;
  }
}