/* =========================================================
   Footer – taller, 3-row layout, socials kept
   ========================================================= */
.site-footer{
  background: linear-gradient(135deg, #1e40af, #3f87a6);
  color:#f3f4f6;
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -2px 10px rgba(2,6,23,.25);
  /* More height: padding + min-block-size ensure presence */
  padding: 2.25rem 0;
  min-block-size: 220px;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(1200px 400px at 10% 0%, rgba(255,255,255,.06), transparent 60%);
  pointer-events:none;
}

.site-footer .footer-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 1.25rem;
  display:grid;
  row-gap: 1.25rem;               /* space between rows */
  grid-template-areas:
    "links"
    "social"
    "legal";
  justify-items:center;
  text-align:center;
}

/* Rows */
.footer-links{ grid-area: links; }
.footer-social{ grid-area: social; }
.legal{ grid-area: legal; margin:0; font-size:.9rem; opacity:.9; }

/* Links */
.footer-links{
  position: relative;
  padding-bottom: 1.25rem;          /* room for the underline */
  max-width: 760px;                 /* optional: aligns width with socials */
  margin-inline: auto;              /* centers the whole row */
  justify-content: center;          /* keep links centered */
}

.footer-links::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-2px;                      /* sits just under the row */
  width:160px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  /* remove flex side-effects */
  display:block;
}
.site-footer a{
  color:#f9fafb;
  font-weight:600;
  text-decoration:none;
  position:relative;
  outline-offset:3px;
  transition:color .25s ease, transform .15s ease;
}
.site-footer a::after{
  content:"";
  position:absolute; left:0; bottom:-4px;
  width:100%; height:2px;
  background:#facc15;           /* yellow underline */
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .25s ease;
}
.site-footer a:hover::after,
.site-footer a:focus-visible::after{
  transform:scaleX(1);
  transform-origin:left;
}
.site-footer a:hover{ color:#facc15; }

/* Socials */
.footer-social{
  max-width: 760px;
  margin-inline: auto;
  justify-content: center;
}
.footer-social a{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .6rem;
  border-radius:.75rem;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: background .25s ease, transform .15s ease;
}
.footer-social a:hover{ background: rgba(250,204,21,.12); transform: translateY(-1px); }
.footer-social a svg{
  width:22px; height:22px; flex:0 0 22px;
  fill:#f9fafb; transition: fill .25s ease;
}
.footer-social a:hover svg{ fill:#facc15; }

/* Thin separators (optional, for more structure) */
.footer-links{ position:relative; }
.footer-links::after{
  content:""; display:block; margin:1rem auto 0; width:160px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.legal{ position:relative; }
.legal::before{
  content:""; display:block; margin:0 auto 1rem; width:160px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}

/* Larger screens: keep it 3 distinct rows but widen spacing */
@media (min-width: 900px){
  .site-footer .footer-inner{
    row-gap: 1.5rem;
  }
}

/* Dark mode */
html.dark-mode .site-footer{
  background: linear-gradient(135deg, #0b1220, #1e293b);
  border-top-color: rgba(255,255,255,.18);
}
html.dark-mode .site-footer a{ color:#dbeafe; }