/* ============================================================
   SITE FOOTER — layout for the one shared footer component.

   Markup: pages/includes/site_footer.html, included by BOTH bases.
   Colours: notebook-footer-skin.css, loaded on every page.
   This file: the measurements, for the bases that do not load styles.css.

   WHY IT IS NOT A notebook-*.css FILE. This is not a notebook component; it
   is the sitewide footer, and it is sized in the marketing type scale on
   purpose, because the requirement is that the study pages and the homepage
   render the SAME object at the SAME size. notebook-*.css is held to the
   notebook type roles by the ratchet in tests_font_foundation.py, and raw px
   sizes belong there only as documented debt. Filing eight of them as
   notebook typography debt would be a lie about what they are. The shared
   navbar already sits outside that scope for the same reason
   (chrome-navbar.css), so the shared footer joins it rather than pretending
   to be notebook furniture.

   THE NUMBERS ARE TRANSPORTED, NOT DERIVED. They come from
   styles.css:1588-1745 (plus the 520px tap-target block at :500) unchanged.
   Legacy pages still take the footer from styles.css; the notebook bases
   take it from here. TWO COPIES, ONE COMPONENT: change a measurement in one
   and change it in the other, or the drift this file was written to remove
   comes straight back. Collapsing them into this file alone means lifting
   the block out of styles.css, which also owns a grouped focus-ring rule
   (styles.css:1928) and the blanket `li` margin the footer leans on
   (styles.css:184) — worth doing, not done here.
   ============================================================ */

.site-footer {
  position: relative;
  background: var(--nb-paper-sunken);
  border-top: 1px solid var(--nb-border);
}
.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 52px 60px 0;
}
.ft-main {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 52px;
  padding-bottom: 40px;
}
.ft-brand {
  display: flex;
  flex-direction: column;
}
/* The mark beside plain ink text. The two-ink Exam/StudyAid wordmark stays
   on the navbar, not down here. */
.ft-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
  font-weight: 700;
  font-size: 18.5px;
  letter-spacing: -0.35px;
  text-decoration: none;
  transition: opacity var(--nb-dur-1) var(--nb-ease);
}
.ft-logo:hover {
  opacity: 0.74;
}
.ft-logo-img {
  display: block;
  height: 30px;
  width: auto;
  object-fit: contain;
}
.ft-logo-text {
  line-height: 1;
}
/* Sits under the wordmark as a plain sentence, not a pull quote. */
.ft-tagline {
  margin: 0;
  max-width: 310px;
  font-size: 14px;
  line-height: 1.65;
}
/* line-height is stated, not inherited: styles.css leads the marketing page at
   1.6 and this sheet leads the notebook at 1.5, which left the same 11px
   heading 16.5px tall here against 17.6px there and the whole footer 1.1px
   short of the one it mirrors. Every other row in the block already carries
   its own leading, so this was the last inherited value in it. */
.ft-col-heading {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
/* "Reach us at:" — a lead-in above the contact links, not a second heading. */
.ft-contact-intro {
  margin: -6px 0 11px;
  font-size: 13.5px;
  line-height: 1;
}
.ft-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* NOT a stray margin on top of the gap. styles.css:184 sets a blanket
   `li { margin-bottom: 0.55rem }` for prose, and the marketing footer's link
   rows have always inherited it — measured 8.8px per row, which is what makes
   the homepage columns breathe (a 4-link column is 155.2px there against
   120px without it). The notebook bases never load styles.css, so the study
   footer sat visibly tighter than the one it is supposed to be. Restated here
   explicitly, on the footer's own list, rather than by importing a global
   element rule this sheet deliberately does not have. Applies to the LAST row
   too, exactly as the inherited one does. */
.ft-links li {
  margin-bottom: 8.8px;
}
.ft-link {
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0em;
  text-decoration: none;
  border-radius: var(--nb-r-sm);
  transition: color var(--nb-dur-1) var(--nb-ease);
}
.ft-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0 24px;
  border-top: 1px solid var(--nb-border);
}
.ft-legal-copy {
  font-size: 13px;
}
.ft-legal-links {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ft-legal-link {
  font-size: 13px;
  text-decoration: none;
  border-radius: var(--nb-r-sm);
  transition: color var(--nb-dur-1) var(--nb-ease);
}
.ft-legal-sep {
  font-size: 13px;
  user-select: none;
}
/* Transported with the block: styles.css breaks the columns at 768px, not at
   the 720px this sheet uses elsewhere. Matching the marketing footer means
   matching where it reflows too. */
@media (max-width: 768px) {
  .site-footer-inner {
    padding: 44px 32px 0;
  }
  .ft-main {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 32px;
  }
  .ft-tagline {
    max-width: 100%;
  }
}
@media (max-width: 520px) {
  .site-footer-inner {
    padding: 36px 20px 0;
  }
  .ft-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 28px;
  }
  /* Coarse-pointer tap targets, transported from styles.css:500-506. */
  .ft-link,
  .ft-legal-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* The focus ring travels with the component. It lived in
   notebook-components.css section 1 while the footer was notebook furniture;
   that sheet is held to styling nb-* classes and nothing else
   (NotebookCssDisciplineTests), and the footer is not one of them any more.
   Legacy pages get their ring from the grouped rule at styles.css:1928. */
.site-footer a:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}