/* public/css/footer.css */
:root{
  --rx-green:#1a841a; --rx-text:#222; --rx-muted:#98b3a0;
  --rx-white:#fff; --rx-bg-dark:#0a3f22; --rx-bg-mid:#0e6b2f;
}

/* container */
.rx-container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Footer with layered background: pattern + gradient */
.rx-footer{
  position:relative;
  color:#eaf6ee;
  background:
    url("/images/bg/footer-bg-pattern.png") center/320px repeat,
    url("/images/bg/footer-bg-gradient.png") center/cover no-repeat;
  /* fallback color (in case images not loaded) */
  background-color:var(--rx-bg-mid);
  overflow:hidden;
  padding-top:0; /* wave handles top spacing */
}

/* Top decorative wave */
.rx-footer__wave{
  position:relative;
  height:120px;
  pointer-events:none;
}
.rx-footer__wave img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: drop-shadow(0 -4px 10px rgba(0,0,0,.18));
}

/* grid */
.rx-footer__grid{
  display:grid; gap:24px; align-items:flex-start;
  grid-template-columns:repeat(12,1fr);
  padding: 12px 0 36px;
  /* push content below wave */
  margin-top:-8px;
}

/* columns */
.rx-footer__brand{grid-column:span 5}
.rx-footer__links{grid-column:span 4}
.rx-footer__contact{grid-column:span 3}

@media (max-width:992px){
  .rx-footer__brand{grid-column:span 12}
  .rx-footer__links{grid-column:span 6}
  .rx-footer__contact{grid-column:span 6}
}
@media (max-width:560px){
  .rx-footer__links,.rx-footer__contact{grid-column:span 12}
}

/* brand + text */
.rx-footer__logo img{
    width: 13rem;
    height: auto;
    display:block
}
.rx-footer__text{
  margin:12px 0 16px; color:#e7fff0; opacity:.9; line-height:1.65
}

/* social */
.rx-social{display:flex; gap:10px; flex-wrap:wrap}
.rx-social a{
  width:40px;height:40px;border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  background:rgba(255,255,255,.12); color:#ffffff; font-weight:800;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:transform .15s, background .15s, color .15s;
}
.rx-social a:hover{ transform:translateY(-2px); background:#ffffff; color:var(--rx-bg-mid) }

/* titles */
.rx-footer__title{
  margin:6px 0 10px; font-size:16px; text-transform:uppercase; letter-spacing:.06em;
  color:#c9ffda; font-weight:800;
}

/* Explore links */
.rx-footer__linksgrid{
  display:grid; gap:8px; grid-template-columns:repeat(2,1fr);
}
.rx-list{list-style:none; margin:0; padding:0}
.rx-list a{
  display:inline-block; padding:6px 0; text-decoration:none;
  color:#eaf6ee; font-weight:600; opacity:.95;
}
.rx-list a:hover{ color:#b7ffd0 }

/* contact */
.rx-contact{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.rx-contact__item{display:flex; align-items:flex-start; gap:10px}
.rx-contact__icon{font-size:18px; line-height:1.2}
.rx-contact a{color:#eaf6ee; text-decoration:none; font-weight:600}
.rx-contact a:hover{ color:#b7ffd0 }

/* bottom bar (transparent over bg) */
.rx-footer__bottom{
  border-top:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.08));
}
.rx-footer__bottominner{
  height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.rx-copy{margin:0; color:#e8fff1; font-weight:600}
.rx-footernav{display:flex; gap:14px; flex-wrap:wrap}
.rx-footernav a{ color:#eaf6ee; text-decoration:none; font-weight:600; opacity:.95 }
.rx-footernav a:hover{ color:#b7ffd0 }

@media (max-width:560px){
  .rx-footer__bottominner{height:auto; padding:12px 0; flex-direction:column; align-items:flex-start}
}

/* Hidden label for screen readers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Social icons (outline) */
.rx-ico{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; text-decoration:none;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:#ffffff; transition:transform .15s, background .15s, color .15s, border-color .15s;
}
.rx-ico:hover{
  transform:translateY(-2px);
  background:#ffffff; color:var(--rx-bg-mid); border-color:transparent;
}
.rx-ico svg{ width:20px; height:20px; display:block }
.rx-ico svg [stroke], .rx-ico svg path, .rx-ico svg rect, .rx-ico svg circle{
  stroke:currentColor; fill:transparent;
}
.rx-ico svg path[stroke="none"], .rx-ico svg rect[stroke="none"], .rx-ico svg circle[stroke="none"]{
  fill:currentColor;
}