/* ============================================================
   SITE FOOTER (owner 2026-10-02, after foundable.com: "make it clean and
   professional and a good font"). Markup: pages/includes/site_footer.html,
   included by both bases; this one sheet, loaded by both bases, owns the
   whole of it: the face, the layout and the colours in both themes.

   Foundable's footer, measured on foundable.com: Plus Jakarta Sans; column
   headings 12px in spaced capitals (0.06em), near-black #1A1A1C; links 14px
   at 400 in grey #66666B on 36px rows; a soft grey band #F4F4F5 with
   rgba(0, 0, 0, 0.08) hairlines; the copyright left and the social links
   right on the bottom row. By day the footer wears exactly those; by night
   the same neutral greys turned over. The site footer is the One-Ink Rule's
   named exception (DESIGN.md): its links may be a quieter ink.

   Every rule is scoped .site-footer.sf (0,2,0) or deeper, above the old
   footer rules still in styles.css, theme-light.css and
   notebook-footer-skin.css, which style the root .site-footer at (0,1,0) to
   (0,2,1); the colour rules are html.theme-light / html:not(.theme-light)
   .site-footer.sf (0,3,1) for the same reason. The root never sets display,
   opacity or visibility, so focus mode and the app screens still hide it.

   NOT a notebook-*.css file: the sitewide footer is sized in its own scale,
   like the shared navbar (chrome-navbar.css), outside the notebook type
   ratchet (tests_font_foundation).
   ============================================================ */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.7660bd9909fb.woff2") format("woff2");
}

/* ── Colours ── */
html:not(.theme-light) .site-footer.sf {
  --sf-bg: #111113;
  --sf-line: rgba(255, 255, 255, 0.08);
  --sf-line-strong: rgba(255, 255, 255, 0.28);
  --sf-head: #ededef;
  --sf-link: #a1a1a8;
  --sf-hover: #ffffff;
  --sf-mark-filter: none;
}

html.theme-light .site-footer.sf {
  --sf-bg: #f4f4f5;
  --sf-line: rgba(0, 0, 0, 0.08);
  --sf-line-strong: rgba(0, 0, 0, 0.3);
  --sf-head: #1a1a1c;
  --sf-link: #66666b;
  --sf-hover: #1a1a1c;
  --sf-mark-filter: brightness(0);
}

html.theme-light .site-footer.sf,
html:not(.theme-light) .site-footer.sf {
  position: relative;
  background: var(--sf-bg);
  border-top: 1px solid var(--sf-line);
  color: var(--sf-link);
  font-family: "Plus Jakarta Sans", var(--nb-sans, system-ui), -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* the old footer's glow along the top edge (styles.css) */
.site-footer.sf::before {
  display: none;
}

/* ── Layout ── */
.site-footer.sf .sf-inner {
  --sf-pad: 40px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px var(--sf-pad) 0;
  box-sizing: content-box;
}

.site-footer.sf .sf-top {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--sf-line);
}

.site-footer.sf .sf-brand {
  min-width: 0;
  padding-right: 24px;
}

.site-footer.sf .sf-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--sf-head);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--nb-r-sm, 4px);
}

.site-footer.sf .sf-mark {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: var(--sf-mark-filter);
}

.site-footer.sf .sf-lede {
  max-width: 34ch;
  margin: 16px 0 0;
  color: var(--sf-link);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer.sf .sf-heading {
  margin: 0 0 10px;
  color: var(--sf-head);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer.sf .sf-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer.sf .sf-links li {
  margin: 0;
}

.site-footer.sf .sf-links a,
.site-footer.sf .sf-social a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--sf-link);
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  border-radius: var(--nb-r-sm, 4px);
  transition: color 0.15s ease;
}

.site-footer.sf .sf-links a:hover,
.site-footer.sf .sf-social a:hover {
  color: var(--sf-hover);
}

.site-footer.sf a:focus-visible {
  outline: 2px solid var(--nb-blue, #789ff2);
  outline-offset: 2px;
}

/* ── The bottom block (Website list v1.0, item 7; owner 2026-10-04) ──
   The six legal lines where the copyright stood, the Sitemap beside them.
   One quiet column at a reading measure: the company line in the heading
   ink, the four documents as links, the three notices one step smaller,
   then the copyright. Hierarchy is size and weight, not more greys. */
.site-footer.sf .sf-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px 48px;
  padding: 28px 0 36px;
}

.site-footer.sf .sf-legal {
  max-width: 820px;
  min-width: 0;
}

.site-footer.sf .sf-legal p {
  margin: 0;
}

.site-footer.sf .sf-company {
  color: var(--sf-head);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.site-footer.sf .sf-legal .sf-doclinks {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
}

/* Each document's name and the separator after it stay whole, so a line
   breaks only after a separator. */
.site-footer.sf .sf-doc {
  white-space: nowrap;
}

.site-footer.sf .sf-doclinks a {
  display: inline-block;
  padding: 6px 0;
  color: var(--sf-link);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--nb-r-sm, 4px);
  transition: color 0.15s ease;
}

.site-footer.sf .sf-doclinks a:hover {
  color: var(--sf-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer.sf .sf-sep {
  padding: 0 4px 0 2px;
  color: var(--sf-line-strong);
}

.site-footer.sf .sf-notices {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--sf-line);
}

.site-footer.sf .sf-notices p {
  max-width: 96ch;
  color: var(--sf-link);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  text-wrap: pretty;
}

.site-footer.sf .sf-legal .sf-copy {
  margin-top: 14px;
  color: var(--sf-link);
  font-size: 13px;
  font-weight: 500;
}

.site-footer.sf .sf-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}

/* The floating theme switch sits 24px in from the right, 46px wide, and the
   bottom row's right end reaches it while the window is narrower than the
   measure plus that lane (--ft-theme-lane, interaction-feedback.css). */
@media (min-width: 721px) and (max-width: 1279px) {
  .site-footer.sf .sf-bottom {
    padding-inline-end: calc(var(--ft-theme-lane, 80px) - var(--sf-pad));
  }
}

/* ── Tablets: the name and line take the first row ── */
@media (max-width: 960px) {
  .site-footer.sf .sf-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer.sf .sf-brand {
    grid-column: 1 / -1;
    padding-right: 0;
    margin-bottom: 8px;
  }
}

/* ── Phones: two columns a row, the bottom row stacked ── */
@media (max-width: 720px) {
  .site-footer.sf .sf-inner {
    --sf-pad: 20px;
    padding-top: 40px;
  }

  .site-footer.sf .sf-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
    padding-bottom: 28px;
  }

  .site-footer.sf .sf-bottom {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 32px;
  }

  .site-footer.sf .sf-social a {
    overflow-wrap: anywhere;
  }
}

/* Touch: every link is a 44px target. */
@media (pointer: coarse) {
  .site-footer.sf .sf-doclinks a {
    padding: 11px 0;
  }
  .site-footer.sf .sf-links a,
  .site-footer.sf .sf-social a,
  .site-footer.sf .sf-wordmark {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer.sf .sf-doclinks a,
  .site-footer.sf .sf-links a,
  .site-footer.sf .sf-social a {
    transition: none;
  }
}

/* ⚑ A SHORT PAGE KEEPS THE FOOTER BELOW THE FOLD (owner, 2026-10-05: "the
   footer is too high make it low ... move the footer more down and center the
   content"). The account, billing, error and status pages are one sheet each;
   on those the main fills the screen under the navbar and the sheet sits in
   its middle, so the footer starts below the first screen. The list is the
   deterministic footer scan's: every page whose footer started inside the
   first screen at 1440x900 or 390x844. A sheet taller than the screen is
   unchanged (the main grows with it). */
:is(.main-content, .nb-page-main):has(> :is(
  .asu-page, .glc-page, .gse-page, .vs-page, .ci-page, .ain-page, .aun-page,
  .prf-page, .rs-page, .rkd-page, .rkx-page, .rpd-page, .rgc-page, .ra-page,
  .pwd-page, .bm-page, .bsu-page, .bca-page,
  .e4-page, .e5-page, .tma-page, .ecs-page
)) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--nb-chrome-h, 72px));
  min-height: calc(100svh - var(--nb-chrome-h, 72px));
}