/* ===========================================================
   MnM Jewellery — shared site footer
   (Get In Touch / Stay Connected / link grid)
   Included on every page except index.html, which has these
   same rules inline. Colors are hard-coded on purpose so this
   renders identically no matter what each page's own :root
   variables happen to define.
   =========================================================== */

.closing{
  background:#EDE6D6;
  color:#2B2620;
  text-align:center;
  padding:2.2rem 5vw 1.3rem;
}

.footer-top{
  display:grid; grid-template-columns:1fr auto 1fr; gap:2rem;
  max-width:1000px; margin:0 auto 1.6rem; text-align:left;
}
.footer-contact h3, .footer-newsletter h3{
  font-family:'Cormorant Garamond', serif; font-weight:500;
  font-size:1.05rem; margin:0.2rem 0 0.35rem; max-width:20ch;
  color:#2B2620;
}
.footer-contact p, .footer-newsletter p{
  font-size:0.74rem; line-height:1.4; color:rgba(43,38,32,0.75); margin-bottom:0.6rem;
}
.footer-contact-line{
  display:flex; align-items:center; gap:0.6rem;
  font-size:0.76rem; margin-bottom:0.3rem; color:#2B2620;
  text-decoration:none;
}
.footer-contact-line:hover{color:#8C4A3D;}
.footer-divider-v{width:1px; background:rgba(43,38,32,0.2);}

.footer-newsletter .newsletter{
  display:flex; justify-content:flex-start; gap:0; max-width:none; margin:0;
  border-bottom:1.5px solid #2B2620;
  padding-bottom:0.35rem;
}
.footer-newsletter .newsletter input{
  flex:1; background:none; border:none; outline:none;
  font-family:'Sora', sans-serif; font-size:0.8rem; color:#2B2620;
  padding:0.4rem 0;
}
.footer-newsletter .newsletter input::placeholder{color:rgba(43,38,32,0.45);}
.footer-newsletter .newsletter button{
  background:none; border:none; font-family:'Space Mono', monospace;
  font-size:0.7rem; letter-spacing:0.05em; color:#8C4A3D; cursor:pointer;
}
.footer-note{font-size:0.65rem; margin-top:0.35rem; color:rgba(43,38,32,0.55);}

.footer-divider{max-width:1000px; margin:0 auto 1.3rem; border-top:1px solid rgba(43,38,32,0.15);}
.footer-links-grid{
  max-width:1000px; margin:0 auto; text-align:left;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.1rem;
}
.footer-col{display:flex; flex-direction:column; gap:0.4rem;}
.footer-col .eyebrow{
  font-family:'Space Mono', monospace; font-size:0.65rem; letter-spacing:0.18em;
  text-transform:uppercase; color:#8C4A3D; margin-bottom:0.2rem;
}
.footer-col a{font-size:0.78rem; color:#2B2620; opacity:0.85; text-decoration:none;}
.footer-col a:hover{opacity:1; color:#8C4A3D;}

@media (max-width: 760px){
  .footer-top{grid-template-columns:1fr;}
  .footer-divider-v{display:none;}

  .footer-links-grid{grid-template-columns:1fr; gap:0;}
  .footer-col{
    flex-direction:row; flex-wrap:wrap; align-items:center;
    gap:0; border-bottom:1px solid rgba(43,38,32,0.15);
    padding:0.7rem 0;
  }
  .footer-col .eyebrow{
    flex:1; display:flex; justify-content:space-between; align-items:center;
    margin-bottom:0; cursor:pointer; padding-right:0.5rem;
  }
  .footer-col .eyebrow::after{
    content:'+'; font-family:'Space Mono', monospace; font-size:0.95rem;
    color:#8C4A3D; transition:transform 0.2s ease;
  }
  .footer-col.is-open .eyebrow::after{content:'\2212';}
  .footer-col a{
    flex-basis:100%; display:none;
    padding:0.55rem 0 0.15rem 0.2rem;
  }
  .footer-col.is-open a{display:block;}
}

footer{
  background:#050403;
  padding:0.8rem 5vw;
  display:flex; justify-content:center; align-items:center;
  font-size:0.66rem; color:rgba(247,243,234,0.45);
}