/* ============================================================
   FOOTER + SOCIALS
============================================================ */

footer {
  margin-top:64px;
  border-top:1px solid var(--line);
  background:rgba(0,0,0,.08);
  backdrop-filter:blur(6px);
  padding:40px 0;
  width: 100%;              /* ensure full width */
  box-sizing: border-box;   /* prevent overflow issues */
}

footer .container {
  max-width: 1120px;        /* keep grid nicely centered */
  margin: 0 auto;
  padding: 0 20px;          /* breathing room on sides */
}

.copyright {
  margin-top:22px;
  text-align:center;
  font-size:14px;
}

/* Fortune slip */
.fortune-slip {
  position: fixed;
  bottom: 40px;
  left: 20px;
  transform: rotate(-2deg);
  width: clamp(220px, 28%, 320px);
  z-index: 200;
  cursor: pointer;
}
.fortune-slip .sheet {
  background: var(--paper-alt);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-family: "Caveat", cursive;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  border: 1px solid var(--line);
  opacity: 0;
  animation: fortuneSlide 1s ease forwards;
}
@keyframes fortuneSlide {
  from { transform: translateX(-120%) rotate(-2deg); opacity: 0; }
  to   { transform: translateX(0) rotate(-2deg); opacity: 1; }
}

/* Rainbow affirmation band */
.rainbow {
  display:flex;
  justify-content:center;
  margin: 24px auto;
  max-width: 100%;
}
.rainbow .inner {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  max-width:1120px;
  text-align:center;
  padding:18px 24px;
  border-radius:var(--radius-lg);
  background:var(--paper);
  position:relative;
}
.rainbow .inner::before {
  content:"";
  position:absolute; inset:0;
  border-radius:var(--radius-lg);
  padding:2px;
  background:linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}
.rainbow p { margin:0; }
.rainbow a {
  text-decoration: underline;
  font-weight: 600;
}

/* Footer socials */
.footer-social {
  display:flex;
  justify-content:center;   /* center instead of right edge */
  gap:16px;
  margin:20px auto 0;       /* centers under footer content */
}
.social-btn {
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.social-btn:hover {
  transform:translateY(-2px);
  background:var(--bg-accent);
}
.social-btn svg {
  width:22px;
  height:22px;
  color:var(--ink);
}

/* Offset main container from sticky header */
main.container { margin-top: 28px; }