/* Site footer. Owned by views/partials/footer.ejs, which links this file itself, so the
   footer renders identically on every page, including pages that load no site CSS
   (admin, judging). Class names are all .sf-*: nothing here can collide with, or
   be overridden by, page styles, and no !important is needed.

   Layout follows the footer's own width (container query), not the screen, so it also
   holds up if the footer is ever placed in a narrower column.
   Links come from lib/footerLinks.js. */

@font-face{font-family:SiteSatoshi;src:url('/fonts/satoshi/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:SiteSatoshi;src:url('/fonts/satoshi/Satoshi-Medium.woff2') format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:SiteSatoshi;src:url('/fonts/satoshi/Satoshi-Bold.woff2') format('woff2');font-weight:700 900;font-display:swap}

.site-footer{
  --sf-ink:#efe9dc;
  --sf-text-2:rgba(239,233,220,.7);
  --sf-text-3:rgba(239,233,220,.55);
  --sf-line:rgba(232,213,183,.12);
  --sf-line-2:rgba(232,213,183,.3);
  --sf-sand:#e8d5b7;
  --sf-pad:22px;
  container:site-footer / inline-size;
  box-sizing:border-box;
  margin-top:clamp(48px,8vw,96px);
  border-top:1px solid var(--sf-line);
  background:#0a0a0b;
  color:var(--sf-ink);
  font-family:SiteSatoshi,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.site-footer *,.site-footer *::before,.site-footer *::after{box-sizing:border-box}
.site-footer a,.site-footer button{font-family:inherit}

/* The page gutter: 22px phone, 16px tablet, 32px desktop, inside a 1200px content column. */
.sf-inner{
  max-width:1264px;
  margin-inline:auto;
  padding:48px var(--sf-pad) 24px;
}
@media(min-width:701px){.site-footer{--sf-pad:16px}}
@media(min-width:1024px){.site-footer{--sf-pad:32px}.sf-inner{padding-top:64px}}

/* Top: brand, then the link columns. Mobile first; the container query widens it. */
.sf-top{display:grid;gap:40px;grid-template-columns:minmax(0,1fr)}
.sf-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:34ch}
.sf-logo-link{display:inline-flex;border-radius:4px}
/* Pure white wordmark (the look the footer has always had): brightness() lifts every opaque pixel to white. */
.sf-logo{display:block;height:32px;width:auto;filter:brightness(100)}
.sf-tagline{margin:0;color:var(--sf-text-2);font-size:14px;line-height:1.6;text-wrap:pretty}

.sf-social{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.sf-social-link{
  display:inline-grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--sf-line);border-radius:999px;color:var(--sf-text-2);text-decoration:none;
  transition:border-color .2s ease,color .2s ease;
}
.sf-social-link:hover{border-color:var(--sf-line-2);color:var(--sf-ink)}
.sf-icon{width:16px;height:16px;display:block}

.sf-nav{display:grid;gap:36px 24px;grid-template-columns:repeat(2,minmax(0,1fr))}
.sf-group{min-width:0}
.sf-title{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sf-text-3)}
.sf-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.sf-link{
  display:inline-flex;align-items:center;min-height:32px;padding:0;margin:0;
  background:none;border:0;border-radius:4px;cursor:pointer;
  color:var(--sf-text-2);font-size:14px;font-weight:400;text-decoration:none;text-align:left;
  text-underline-offset:4px;text-decoration-thickness:1px;
  transition:color .15s ease;
}
.sf-link:hover{color:var(--sf-ink);text-decoration:underline}
.sf-link[aria-current="page"]{color:var(--sf-ink);font-weight:500}
.sf-link[hidden]{display:none}
html[data-pwa-installed="true"] .site-footer [data-sf-action="install"]{display:none}

.sf-logo-link:focus-visible,.sf-social-link:focus-visible,.sf-link:focus-visible,.sf-top-btn:focus-visible{
  outline:2px solid var(--sf-sand);outline-offset:3px;
}

/* Bottom bar */
.sf-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:48px;padding-top:20px;border-top:1px solid var(--sf-line);
  color:var(--sf-text-3);font-size:13px;
}
.sf-copy{margin:0}
.sf-top-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0;
  background:none;border:0;border-radius:4px;cursor:pointer;color:var(--sf-text-2);font-size:13px;font-weight:500;
  transition:color .15s ease;
}
.sf-top-btn:hover{color:var(--sf-ink)}
.sf-top-btn[hidden]{display:none}
.sf-top-btn .sf-icon{width:14px;height:14px;transition:transform .2s ease}
.sf-top-btn:hover .sf-icon{transform:translateY(-2px)}

/* Wider footer: brand row above four columns, then brand beside the columns. */
@container site-footer (min-width: 640px){
  .sf-nav{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@container site-footer (min-width: 980px){
  .sf-top{grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr);gap:64px}
}

/* Touch: comfortable targets. */
@media(pointer:coarse){
  .sf-link,.sf-top-btn{min-height:44px}
}

@media(prefers-reduced-motion:reduce){
  .site-footer *{transition:none}
  .sf-top-btn:hover .sf-icon{transform:none}
}