/* Footer styled by @elements/style/layout.css (.footer). The
   default uses var(--rule) which reads heavier than the topbar's
   nearly-invisible border-bottom — here we soften the footer
   border-top to match so the page top and bottom feel balanced. */

.footer {
  border-top: 1px solid rgba(23, 23, 26, 0.04);
}

/* Align horizontal gutters and width with the project's topbar
   override (1240px / 1.5rem). The framework default uses
   --space-8 (2rem) which made the footer feel inset relative
   to the topbar. */
.footer .footer-inner {
  max-width: 1240px;
  padding-left:  1.5rem;
  padding-right: 1.5rem;
  /* The link columns stack above the copyright line, so the inner block runs
     down the page rather than across it. */
  display: block;
  padding-top:    var(--space-10);
  padding-bottom: var(--space-8);
}

/* Four columns on a wide screen, wrapping to two and then one. auto-fit with
   a min track means no breakpoint has to name the column count. */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-8);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-sm);
}
.footer-col-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: var(--weight-bold);
  margin-bottom: 2px;
}
.footer-col a {
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-col a:hover { color: var(--ink); text-decoration: underline; }

/* The copyright is a quiet line under the columns, with no rule of its own.
   The rule it used to carry was the second horizontal line in a footer that
   already has one at the top, and it read as a divider for a section that
   does not exist. */
.footer-legal {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

@media (max-width: 700px) {
  .footer .footer-inner {
    padding-top:    var(--space-8);
    padding-bottom: var(--space-6);
  }
  .footer-nav { gap: var(--space-6); }
}