/* ==========================================================================
   Serath2 — footer   css/footer.css
   Loaded AFTER css/serath2.css, so these rules intentionally override the
   legacy #footer / .footer-wrapper block in that file (kept for rollback).

   Layout: row 1 = logo + socials, row 2 = copyright + the two legal links
   on the same line.  No menu block, no tagline, no disclaimer.
   ========================================================================== */

.footer-wrapper{
  margin-top:30px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,var(--bg-2) 0%,#07040d 100%);
  position:relative;
}
.footer-wrapper::before{           /* thin violet hairline on the top edge */
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--violet),transparent);
  opacity:.65;
}

#footer{
  display:block;                   /* override the legacy flex row */
  max-width:var(--maxw);
  margin:0 auto;
  padding:34px 22px 26px;
  color:var(--muted);
  font-size:.9rem;
}

/* ------------------------------------------- row 1: logo + socials ------ */
.ft-top{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:20px 26px;
}
.ft-logo{display:inline-block;line-height:0}
.ft-logo img{width:200px;max-width:100%;height:auto;display:block}

.ft-social{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.ft-social li{margin:0}
.ft-social-link{
  width:42px;height:42px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:var(--surface-2);
  border:1px solid var(--border);
  color:var(--violet-soft);
  text-decoration:none;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.ft-social-link svg{width:20px;height:20px;fill:currentColor;display:block}
.ft-social-link:hover{
  transform:translateY(-3px);
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 22px -10px #000;
}
.ft-social-link:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
/* official brand colours on hover */
.ft-social-link.is-discord:hover {background:#5865F2}
.ft-social-link.is-facebook:hover{background:#1877F2}
.ft-social-link.is-tiktok:hover  {background:#010101}
.ft-social-link.is-youtube:hover {background:#FF0000}

/* ------------------------------- row 2: copyright + legal, one line ---- */
.ft-bottom{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--border);
}
.ft-bottom-inner{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:10px 26px;
}
.ft-copy{margin:0;color:var(--muted);font-size:.84rem}
.ft-copy strong{color:var(--violet-soft)}

.ft-legal{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-size:.84rem}
.ft-legal li{margin:0}
.ft-legal li + li::before{content:"·";color:var(--border);margin:0 .7em;opacity:.8}
.ft-legal a{color:var(--violet-soft);text-decoration:none;transition:color .15s ease}
.ft-legal a:hover{color:#fff;text-decoration:underline}

/* --------------------------------------------------------- responsive -- */
@media(max-width:760px){
  #footer{padding:28px 18px 22px}
  .ft-top{flex-direction:column;align-items:flex-start;gap:18px}
  .ft-logo img{width:170px}
  .ft-bottom-inner{flex-direction:column;align-items:flex-start;gap:8px}
}