/* ========= Page Base ========= */
html, body {
  margin: 0;
  padding: 0;
  height: auto; /* avoid locking to 100vh on iOS */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh; /* iOS 16+ visual viewport */
  min-height: 100dvh; /* modern browsers */
  font-family: "Montserrat", sans-serif;
}

#main-content { flex: 1; }

/* ========= Footer ========= */
.footer,
.footer * { box-sizing: border-box; }

/* Adjust this if your floating "scroll to top" button has a different size */
:root { --fab-size: 64px; }

/* Footer base */
.footer {
background: rgba(57, 143, 186, 0.3) !important;
  color: #000000;
  position: relative;

  /* Equal padding top + safe area + room for FAB */
  padding-top: 40px;
  padding-bottom: max(40px, calc(28px + env(safe-area-inset-bottom) + var(--fab-size)));
  font-family: "Montserrat", sans-serif;
}

/* Extra safety for browsers that support max() well */
@supports (padding: max(0px)) {
  .footer {
    padding-bottom: max(44px, calc(28px + env(safe-area-inset-bottom) + var(--fab-size)));
  }
}

/* Ensure safe-area is respected even if FAB not present */
.footer::after {
  content: "";
  display: block;
  height: env(safe-area-inset-bottom);
}

/* Container */
.footer-container {
  max-width: 1160px;
  width: min(1160px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between; /* desktop: left/right layout */
  gap: 16px;
  overflow: visible;
}

/* ========= Left text ========= */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-left .footer-text {
  font-size: 18px;
  margin: 0;
  color: #000000;
  font-weight: 700;
}

.footer-left .footer-copy {
  font-size: 15px;
  margin: 0;
  color: #000000;
}

.footer-left .heart { color: #ff6c63; }

/* ========= Right links ========= */
.footer-right {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  flex-wrap: wrap;
    font-weight: 300 !important;

}

.footer-right .social-icon {
  font-size: 18px;
  text-decoration: none;
  color: #000000;
  padding: 6px 10px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.footer-right .social-icon:hover {
  background: #ff6c63;
  color: #ffffff;
}

/* ========= Mobile ========= */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;   /* stack text and links */
    text-align: center;
    gap: 14px;
  }

  .footer-right { justify-content: center; }
}

@media (max-width: 600px) {
  .footer-container { gap: 12px; }
}