/* ============================================================================
   OnGraph — shared landing-page footer
   ----------------------------------------------------------------------------
   GEOMETRY ONLY. No colour and no font-size in this file, by design.
   Background, border, text colour, link colour and every font-size stay in the
   landing page's own stylesheet, so each page keeps its theme while the footer
   measures the same everywhere.

   HOW TO LOAD IT
     <link rel="stylesheet" href="../common-css/footer.css" />
   after the page's own stylesheet, and put class="og-footer" on <footer>.

   HOW TO TUNE ONE PAGE
     Set the token on that page's own footer selector, in that page's CSS —
     a value set directly on the element beats the inherited :root default
     regardless of file order:

       .footer-min { --ftr-pad-y: 26px; }

   MARKUP THIS ASSUMES (all 17 pages already match it exactly)
     <footer class="footer-min og-footer">
       <div class="container">
         <div class="footer-row">
           <div class="footer-copy">…</div>
           <nav class="footer-links"> a | a </nav>
         </div>
       </div>
     </footer>
   ============================================================================ */

:root {
  --ftr-pad-y: 32px;      /* vertical padding — this sets the footer height */
  --ftr-row-gap: 24px;    /* between the copyright and the link group */
  --ftr-link-gap: 14px;   /* between the links themselves */
}

@media (max-width: 768px) {
  :root { --ftr-pad-y: 24px; --ftr-row-gap: 12px; }
}

.og-footer {
  padding-top: var(--ftr-pad-y);
  padding-bottom: var(--ftr-pad-y);
}

.og-footer .footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ftr-row-gap);
  flex-wrap: wrap;
  /* pages inherit different body line-heights (1.37 to 1.65), which made the
     same one-line footer render 4px shorter on some of them. Pinning the line
     box here is what actually equalises the height — it is spacing, not type,
     so the page still owns the font-size itself. */
  line-height: 1.6;
}

/* Ten pages declare a bare `nav { padding: 16px 0 }` element selector for their
   header. That also matches this footer's <nav class="footer-links">, which is
   why those footers rendered 32px taller than the rest. Reset it explicitly —
   the footer's own spacing is the gap tokens above, nothing else. */
.og-footer .footer-links {
  display: flex;
  align-items: center;
  gap: var(--ftr-link-gap);
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.og-footer .footer-links .sep {
  user-select: none;
}

/* Phones: stack the two halves and centre them, rather than letting
   space-between push them to opposite edges of a narrow screen. */
@media (max-width: 768px) {
  .og-footer .footer-row {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .og-footer .footer-links {
    justify-content: center;
  }
}