.site-footer {
  background: var(--header-bg);
  color: var(--text-on-header);
  width: 100%;
}

.site-footer .footer-inner {
  height: var(--header-h);                 
  width: min(1100px, 92vw);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;     
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
}

.site-footer a {
  color: var(--text-on-header);
  text-decoration: none;
  font-weight: 500;
  transition: opacity .2s ease;
}
.site-footer a:hover { opacity: .85; }

.footer-left {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.footer-left .social-icon {
  width: 28px;
  height: 28px;
  display: block;
  transition: opacity .2s ease;
}
.footer-left a:hover .social-icon { opacity: .8; }

.footer-center {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  align-items: center;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: .2rem;
}
.footer-right .copyright,
.footer-right .madeby {
  color: var(--text-on-header);  
  font-size: .9rem;
}

.footer-bottom {
  display: none;
  text-align: center;
  padding: .6rem 1.25rem 1rem;
}
.footer-bottom .copyright,
.footer-bottom .madeby {
  color: var(--text-on-header);
  font-size: .7rem;
}

@media (max-width: 768px) {
  .site-footer .footer-inner {
    height: auto;                 
    padding: 1rem 1rem;           
    grid-template-columns: 1fr 1fr; 
    gap: 1rem;
  }

  .footer-left { 
    align-items: flex-start; 
  }

  .footer-center { 
    align-items: flex-end; 
    padding-right: 1rem; 
  }

  .footer-right { display: none; }

  .footer-bottom { display: block; }
}