/* Footer. Measured from fora.so at 1440 / 768 / 390 (docs/research/fora/footer-full.json,
   spec in docs/research/components/footer.spec.md). Section box at 1440: 1440 x 460.
   Nothing here animates on scroll: no flat record in the section carries an appear payload. */

.gf-footer{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:24px;
  width:100%;
  /* Full bleed. This cap put the whole SECTION in a 1600px box, so on any screen wider than that
     its ground stopped 1600px across and the page went black down both sides. The content keeps
     its own 1080 column inside, so only the ground moves. */
  margin-inline:auto;
  padding-inline:24px;
  background:var(--bg);
  overflow:clip;
  position:relative;
}

/* the 1080 column: padding-block only, so base.css keeps owning .container's
   intermediate padding-inline between 810 and 1259 */
.gf-footer-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:48px;
  padding-block:64px;
}

/* ---- top row: brand block + link columns ---- */
.gf-footer-top{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:flex-start;
  gap:48px;
  width:100%;
  flex:0 0 auto;
}

.gf-footer-brand{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:24px;
  flex:1 0 0;
  width:1px;              /* Fora: flex-basis comes from flex:1 0 0, width is the min */
  align-self:stretch;
  overflow:clip;
}
.gf-footer-lockup{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.gf-footer-mark{
  height:32px;
  width:auto;
  flex:0 0 auto;
}
.gf-footer-mark .m1{fill:var(--ink)}
.gf-footer-mark .m2{fill:#8c86ff}
.gf-footer-wordmark{
  font-size:14px;
  line-height:21px;
  letter-spacing:-.28px;
  font-weight:500;
  color:var(--ink);
  white-space:nowrap;
}

.gf-footer-cols{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:flex-end;
  gap:120px;
  width:min-content;
  flex:0 0 auto;
  overflow:clip;
}
.gf-footer-col{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:24px;
  width:min-content;
  flex:0 0 auto;
  overflow:clip;
}
.gf-footer-colhead{
  font-size:14px;
  line-height:21px;
  letter-spacing:-.28px;
  font-weight:400;
  color:var(--ink);
  white-space:nowrap;
  flex:0 0 auto;
}
.gf-footer-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:16px;
  width:min-content;
  flex:0 0 auto;
  overflow:clip;
}
.gf-footer-list li{
  font-size:14px;
  line-height:21px;
  letter-spacing:-.28px;
  font-weight:400;
  white-space:nowrap;
  flex:0 0 auto;
}
/* rest #fffc, hover #fff3f0, color .4s cubic-bezier(.44,0,.56,1) (base.css sets the transition) */
.gf-footer-list a{
  color:var(--ink-80);
  transition:color .4s var(--ease-link);
}
.gf-footer-list a:hover,
.gf-footer-list a:focus-visible{color:var(--ink)}

/* ---- hairline ---- */
.gf-footer-rule{
  width:100%;
  height:1px;
  background:var(--ink-10);
  flex:0 0 auto;
}

/* ---- bottom row ---- */
.gf-footer-bottom{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  width:100%;
  min-height:21px;        /* Fora's row is 21 tall because of its 14/21 email link; keeps the rhythm */
  flex:0 0 auto;
  overflow:clip;
}
.gf-footer-copy{
  font-size:12px;
  line-height:18px;
  letter-spacing:-.24px;
  font-weight:400;
  color:var(--ink-65);
  white-space:nowrap;
  flex:0 0 auto;
}

/* ---- stacked branch, exactly Fora's (max-width: 809.98px); 768 and 390 both land here ---- */
@media (max-width:809.98px){
  .gf-footer-inner{
    max-width:729px;
    padding-block:48px;
    padding-inline:0;
    gap:36px;
  }
  .gf-footer-top{flex-direction:column}
  .gf-footer-brand{
    align-self:unset;
    flex:0 0 auto;
    justify-content:center;
    gap:24px;
    width:100%;
    height:min-content;
  }
  .gf-footer-cols{
    flex-direction:column;
    align-content:center;
    align-items:center;
    gap:48px;
    width:100%;
  }
  .gf-footer-col,
  .gf-footer-list{
    align-content:center;
    align-items:center;
    width:100%;
  }
  .gf-footer-colhead,
  .gf-footer-list li{
    width:100%;
    text-align:center;
    white-space:normal;
    word-break:break-word;
    overflow-wrap:break-word;
  }
  .gf-footer-bottom{
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:24px;
  }
  .gf-footer-copy{order:1;white-space:normal;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .gf-footer-list a{transition:none}
}