/* site-footer — the kit's one closing band, modeled the header's way: an
 * optional TOP REGION of three ZONES (brand lockup / sitemap columns /
 * social row — each an ordered mixed list of kit elements, stacking
 * vertically the way a tall footer reads) over the one-line BOTTOM ROW of
 * two zones under a hairline (fineprint is just a text element there). The
 * same header-footer/ catalog everywhere — a footer nav IS the header's nav
 * element; the sitemap element unrolls link columns. Flush per
 * SITE-KIT.md: the band runs edge to edge under a hairline and
 * owns its own inset. Element paint lives on the parts (base.css); this
 * sheet is band + zone geometry only. */

.sk-footer {
  display: flex;
  flex-direction: column;
  gap: var(--kit-space-3);
  padding-block: var(--kit-space-5);
  /* The footer's gutter grows to the PAGE CAP's centering margin on a
   * capped page (base.css, the band-gutter home's rail formula — own
   * floor, same math): the strip bleeds under its hairline, the sitemap
   * and fineprint sit on the content rail. */
  padding-inline: max(var(--kit-space-4), calc((100% - var(--sk-page-max, 200vw)) / 2));
  border-top: 1px solid var(--sk-stroke);
  background-color: var(--sk-bg);
}

/* The TOP REGION — three lanes: left starts, center centers, right ends.
 * Lanes STACK their elements (a brand over a tagline; columns of links),
 * unlike the bar's rows. A flex row, NOT a rigid `1fr auto 1fr` grid: a
 * grid's empty tracks still eat their share of the band (a lone sitemap
 * lane got HALF the width and wrapped into a tower), so instead empty
 * lanes COLLAPSE and a populated lane takes the full band. The one
 * exception: while the CENTER lane is populated, empty side lanes stay as
 * equal springs so it stays truly centered. A footer with no top-region
 * rows collapses the region entirely (the zones render empty). */
.sk-footer-top {
  display: flex;
  align-items: flex-start;
  gap: var(--kit-space-4) var(--kit-space-5);
  margin-bottom: var(--kit-space-4);
}
.sk-footer-top:not(:has(.sk-footer-zone > *)) {
  display: none;
}
.sk-footer-zone[data-region="top"] {
  /* Auto basis: a lane's share follows its content (a brand lockup stays
   * narrow beside a wide sitemap), and free space tops both up equally. */
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}
.sk-footer-zone[data-region="top"][data-zone="center"] {
  flex: 0 1 auto;
  align-items: center;
}
.sk-footer-zone[data-region="top"][data-zone="right"] {
  align-items: flex-end;
}
/* An empty center lane always collapses (it would otherwise leave a
 * double gap between the sides); empty SIDE lanes collapse only while the
 * center lane is empty too — populated-center keeps them as springs. */
.sk-footer-zone[data-region="top"][data-zone="center"]:not(:has(> *)) {
  display: none;
}
.sk-footer-top:not(:has([data-zone="center"] > *)) > .sk-footer-zone:not(:has(> *)) {
  display: none;
}
/* A lane whose only content is a SITEMAP hugs its columns' natural row. */
.sk-footer-zone[data-region="top"] > .sk-el-sitemap {
  align-items: flex-start;
}

.sk-footer-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--kit-space-3) var(--kit-space-4);
}
/* An all-empty bottom row collapses like the top region does — otherwise its
 * rule + padding render a second, blank closing band under the real one. */
.sk-footer-row:not(:has(.sk-footer-zone > *)) {
  display: none;
}

.sk-footer-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kit-space-3);
}

/* Small screens: the top region relaxes to one column, lanes in order. */
@media (max-width: 640px) {
  .sk-footer-top {
    flex-direction: column;
  }
  .sk-footer-zone[data-region="top"] {
    flex: none;
  }
  .sk-footer-zone[data-region="top"][data-zone="center"],
  .sk-footer-zone[data-region="top"][data-zone="right"] {
    align-items: flex-start;
  }
}

/* The RULED BOTTOM ROW — the closing bar (copyright one side, locality the
 * other) set off from the region above by a hairline. The zones already gave
 * the two-column shape; nothing drew the line, so the row read as one more
 * lane of the footer instead of its last word. Opt-in, so no existing footer
 * grows a rule it didn't ask for — and it only draws when the top region is
 * actually populated: with nothing above it, the hairline floats over the
 * band's own padding and the footer reads as two stacked bottom areas. */
.sk-footer:not([data-bottom-rule=""]):has(.sk-footer-top .sk-footer-zone > *) .sk-footer-row {
  border-top: var(--sk-border-width) solid var(--sk-stroke);
  padding-top: var(--kit-space-4);
}