/* =========================================
   footer.css
   Site Footer (default, polished, responsive)
   ========================================= */

.site-footer{
  /* variables */
  --footer-icon-tile: 52px;
  --footer-icon-size: 26px;

  background: #000 !important;
  color: rgba(255,255,255,.86);
  padding: 2.75rem 1.25rem;

  position: relative;
  overflow: hidden;

  /* hard reset for stray global styles */
  text-align: left;
}

/* subtle top edge so black feels intentional */
.site-footer::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background: rgba(255,255,255,.08);
}

/* contained glow (does not bleed upward) */
.site-footer::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:160px;
  background: radial-gradient(
    60% 100% at 50% 100%,
    rgba(2,35,81,.35),
    rgba(2,35,81,0)
  );
  opacity:.6;
  pointer-events:none;
}

/* layout wrapper */
.site-footer__inner{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1.25rem;
  align-items: start; /* baseline feel */
}

/* brand block */
.site-footer__brand{
  min-width: 0;
  text-align: left;
  justify-self: start;
}

.site-footer .footer-line{
  margin: 0 0 .35rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
}

.site-footer .footer-tagline{
  margin: 0 0 .75rem;
  font-size: .95rem;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  max-width: 52ch;
}

.site-footer .footer-copy{
  margin: 0;
  font-size: .85rem;
  color: rgba(255,255,255,.62);
}

/* mini nav (if you re-enable it) */
.site-footer__nav{
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
  white-space: nowrap;
  padding-top: 2px;
}

.site-footer__nav a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  padding: .35rem .5rem;
  border-radius: 10px;
}

.site-footer__nav a:hover{
  color:#fff;
  background: rgba(255,255,255,.08);
}

.site-footer__nav a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}

/* =========================================
   Footer Icons
   ========================================= */

.site-footer .footer-social{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  padding-top: 2px;
}

/* identical clickable tiles */
.site-footer .footer-social .social-link{
  width: var(--footer-icon-tile);
  height: var(--footer-icon-tile);
  display: grid;
  place-items: center;

  padding: 0;
  line-height: 0;
  box-sizing: border-box;

  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;

  /* prevent any global underline / outline weirdness */
  -webkit-tap-highlight-color: transparent;
}

/* hover */
.site-footer .footer-social .social-link:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

/* focus ring: neutral, not LinkedIn blue */
.site-footer .footer-social .social-link:focus,
.site-footer .footer-social .social-link:focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10);
}

/* shared icon color */
.site-footer .footer-social .li-link,
.site-footer .footer-social .email-link{
  color: rgba(255,255,255,.92);
  
}

/* normalize SVG sizing */
.site-footer .footer-social svg{
  width: var(--footer-icon-size);
  height: var(--footer-icon-size);
  display: block;
}

/* enforce no “blue” coming from SVG attrs and keep fill/stroke consistent */
.site-footer .footer-social .li-link svg{
  fill: currentColor;
  transform: translateY(-0.5px);
}

.site-footer .footer-social .email-link svg{
  fill: none;
  stroke: currentColor;
  width: 28px;
  height: 28px;
  transform: translateY(0px);
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 860px){
  .site-footer{
    padding: 2.25rem 1.25rem;
    text-align: center;
  }

  .site-footer__inner{
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 1rem;
  }

  .site-footer__brand{
    text-align: center;
    justify-self: center;
  }

  .site-footer .footer-tagline{
    max-width: 60ch;
    margin-bottom: .5rem;
  }

  .site-footer__nav{
    justify-content: center;
    padding-top: 0;
  }

  .site-footer .footer-social{
    justify-content: center;
    padding-top: 0;
  }
}

/* =========================================
   Optical alignment: email vs LinkedIn
   ========================================= */

/* The outline mail icon sits optically lower than the filled “in” glyph.
   This nudge aligns their visual centers, not their bounding boxes. */
.site-footer .footer-social .email-link{
  transform: translateY(-1px);
}