/* ============================================================
   Claudify Footer — Framer LayoutFooter recreation
   Pure black | left brand column | right 3-col nav
   ============================================================ */

/* ---- Shell ---- */
.claudify-footer {
  background-color: rgb(0, 0, 0);
  padding: var(--sp-pt, 128px) var(--sp-pr, 96px) var(--sp-pb, 80px) var(--sp-pl, 96px);
}

.claudify-footer__container {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  gap: 96px;
  align-items: flex-start;
}

/* ============================================================
   LEFT column — Framer: 0.7fr, space-between, 3 children
   Child 1: brand (logo+desc, 32px gap)
   Child 2: meta (socials+payments, 16px gap)
   Child 3: copyright
   ============================================================ */
.claudify-footer__left {
  flex: 0.7;          /* matches Framer's 0.7fr ratio */
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;          /* tighter: pulls socials closer to description text */
  min-height: 405px;  /* Framer: 405.5px */
}

/* Brand group: logo + description + socials — all tightly stacked */
.claudify-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Logo: 100px tall */
.claudify-footer__logo-wrap {
  display: block;
  text-decoration: none;
}

.claudify-footer__logo-img {
  height: 100px;
  width: auto;
  display: block;
  object-fit: contain;
  object-position: left center;
}

/* Description: Jost Regular 16px, max-width 400px, white */
.claudify-footer__desc {
  font-family: var(--sp-desc-font, 'Jost', sans-serif);
  font-size: var(--sp-desc-size, 16px);
  font-weight: var(--sp-desc-weight, 400);
  line-height: 150%;
  color: #ffffff;
  max-width: 400px;
  margin: 0;
}

/* Social icons row — tight gap, compact buttons */
.claudify-footer__socials {
  display: flex;
  gap: 4px;
  align-items: center;
}

.claudify-footer__social-link {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.claudify-footer__social-link:hover {
  color: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.08);
}

.claudify-footer__social-link svg,
.claudify-footer__social-link img {
  width: 22px;
  height: 22px;
  display: block;
}

.claudify-footer__social-link img {
  filter: brightness(0) invert(1);
}

/* Payment icons row */
.claudify-footer__payments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Mobile: single line, no wrap, scale badges to fit */
@media screen and (max-width: 749px) {
  .claudify-footer__payments {
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;
  }

  .claudify-footer__payment-badge {
    flex: 1;
    min-width: 0;
    max-width: 80px;
  }
}

/* Badge: dark background, white logos via invert filter — matches reference image */
.claudify-footer__payment-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(28, 28, 28);
  border-radius: 7px;
  height: 40px;
  min-width: 70px;
  padding: 0 10px;
  flex-shrink: 0;
}

/* Images uploaded via theme editor — fill the badge naturally */
.claudify-footer__payment-badge img {
  height: 24px;
  width: auto;
  max-width: 54px;
  display: block;
  object-fit: contain;
}

/* Copyright */
.claudify-footer__copyright {
  font-family: var(--sp-copyright-font, 'Jost', sans-serif);
  font-size: var(--sp-copyright-size, 16px);
  font-weight: var(--sp-copyright-weight, 400);
  line-height: 150%;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

/* Brand name portion of copyright — #D4A853 across all breakpoints */
.claudify-footer__copyright-brand {
  color: #D4A853;
}

.claudify-footer__address {
  margin: 0;
  font-family: var(--sp-copyright-font, 'Jost', sans-serif);
  font-size: clamp(12px, calc(var(--sp-copyright-size, 16px) * 0.8125), 13px);
  font-style: normal;
  font-weight: var(--sp-copyright-weight, 400);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.48);
  max-width: 320px;
  overflow-wrap: break-word;
}

.claudify-footer__address-label {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.72);
}

.claudify-footer__address-text {
  display: block;
}

/* ============================================================
   RIGHT — 3 nav columns
   ============================================================ */
.claudify-footer__right {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* pixel-perfect equal columns */
  gap: 32px;
  align-items: flex-start;
}

.claudify-footer__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* Column heading: Jost Medium 22px */
.claudify-footer__col-heading {
  font-family: var(--sp-col-heading-font, 'Cormorant Garamond', Georgia, serif);
  font-size: var(--sp-col-heading-size, 22px);
  font-weight: var(--sp-col-heading-weight, 500);
  font-style: normal;
  line-height: 140%;
  letter-spacing: 0;
  color: #D4A853;
  margin: 0;
}

/* Nav link list */
.claudify-footer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Nav link: Jost Regular 16px, white */
.claudify-footer__nav-link {
  font-family: var(--sp-nav-font, 'Jost', sans-serif);
  font-size: var(--sp-nav-size, 16px);
  font-weight: var(--sp-nav-weight, 400);
  line-height: 150%;
  color: #ffffff;
  text-decoration: none;
  transition: color 0.15s;
  display: inline-block;
}

.claudify-footer__nav-link:hover {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
}

/* ============================================================
   Tablet (750px – 989px)
   Framer: padding 96px 64px 64px
   ============================================================ */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .claudify-footer {
    padding: 96px 64px 64px;
  }

  .claudify-footer__container {
    flex-direction: column;
    gap: 64px;
  }

  .claudify-footer__left {
    width: 100%;
    min-height: auto;
    gap: 32px;
    flex: unset;
  }

  .claudify-footer__right {
    width: 100%;
    grid-template-columns: repeat(2, 1fr); /* 2-col grid on tablet */
    gap: 40px;
  }

  .claudify-footer__col {
    /* grid handles sizing */
  }
}

/* ============================================================
   Mobile (< 750px) — single centered column
   ============================================================ */
@media screen and (max-width: 749px) {
  .claudify-footer {
    padding: 64px 32px max(48px, calc(48px + env(safe-area-inset-bottom, 0px))); /* safe area for iPhone home indicator */
  }

  /* Stack left + right into one centered column */
  .claudify-footer__container {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  /* ---- Left column ---- */
  .claudify-footer__left {
    width: 100%;
    min-height: auto;
    align-items: center;
    gap: 16px;
    justify-content: flex-start;
  }

  /* Brand: logo + desc + socials centered */
  .claudify-footer__brand {
    width: 100%;
    align-items: center;
    gap: 16px;
  }

  .claudify-footer__logo-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .claudify-footer__logo-img {
    object-position: center;
  }

  .claudify-footer__desc {
    max-width: 100%;
    text-align: center;
  }

  .claudify-footer__socials {
    width: 100%;
    gap: 0;
    justify-content: center;
  }

  .claudify-footer__address {
    width: 100%;
    max-width: 280px;
    margin-top: -2px;
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
  }

  .claudify-footer__address-label {
    margin-bottom: 5px;
    font-size: 13px;
  }

  /* Expand social icon tap area to 44×44px (Apple HIG minimum) */
  .claudify-footer__social-link {
    width: 44px !important;
    height: 44px !important;
  }

  .claudify-footer__social-link svg,
  .claudify-footer__social-link img {
    width: 26px !important;
    height: 26px !important;
  }

  .claudify-footer__payments {
    width: 100%;
    justify-content: center;
  }

  /* Copyright centered */
  .claudify-footer__copyright {
    width: 100%;
    text-align: center;
  }

  /* ---- Right nav columns: single column on mobile ---- */
  .claudify-footer__right {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Each col: full width, children centered */
  .claudify-footer__col {
    width: 100%;
    align-items: center;
    gap: 32px;
  }

  /* Heading: full width, centered text */
  .claudify-footer__col-heading {
    width: 100%;
    text-align: center;
  }

  /* Nav list: full width so links span the container */
  .claudify-footer__nav {
    width: 100%;
    gap: 14px;
  }

  /* List items: full width, text centered */
  .claudify-footer__nav li {
    width: 100%;
    text-align: center;
  }

  /* Links: block + full width — prevents drift based on text length */
  .claudify-footer__nav-link {
    display: block;
    width: 100%;
    text-align: center;
  }
}