/* ==========================================================================
   Bigmate site footer: 2026 redesign
   Lifted out of home-2026.css so every page can carry the homepage footer.
   Self-contained: does not depend on bootstrap.min.css / style.css or on
   home-2026.css, and every --hp-* token it borrows carries its value as a
   fallback, so it renders the same on pages that load neither. Pages still on
   the Bootstrap theme also load site-nav-2026-legacy.css, which undoes the
   bare-element rules style.css would otherwise apply inside it.
   Prefix: hp-footer (kept from the homepage, so the markup did not change)
   To change the footer, edit index.html and re-copy the <footer> block to
   every page.
   ========================================================================== */

/* The grey the rest of the site used: .rainbow-footer resolved to #f5f8fa
   under body.active-light-mode, with #65676b body text and 14px links. */
.hp-footer {
  background: var(--hp-surface, #f5f8fa);
  color: var(--hp-muted, #65676b);
  padding: var(--hp-section-y, 96px) 0 32px;
  border-top: 1px solid var(--hp-line, #e8eef6);
  /* Its own base type rather than the page's: the Bootstrap pages set body
     to 18px on a taller line, and every size below is tuned against this. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* What home-2026.css's global reset gives the footer on the pages that load
   it. :where keeps these at element weight, so every class rule below still
   wins. */
:where(.hp-footer) *,
:where(.hp-footer) *::before,
:where(.hp-footer) *::after { box-sizing: border-box; }
:where(.hp-footer) p { margin: 0; }
:where(.hp-footer) ul { margin: 0; padding: 0; list-style: none; }
:where(.hp-footer) a { text-decoration: none; }
:where(.hp-footer) img { display: block; max-width: 100%; height: auto; }

/* Same measure as .hp-shell in home-2026.css, restated for pages without it. */
.hp-footer > .hp-shell {
  width: 100%;
  max-width: var(--hp-shell, 1302px);
  margin-inline: auto;
  padding: 0 12px;
}

.hp-footer a { color: var(--hp-muted, #65676b); }
.hp-footer a:hover { color: var(--hp-blue, #076EE8); }

.hp-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: 48px 72px;
}

.hp-footer__brand img { height: 38px; width: auto; }

.hp-footer__tagline {
  margin: 18px 0 0;
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.6;
}

/* Content-width columns spread to the block's edges, rather than four equal
   columns. Equal columns line up their left edges but leave the short lists
   with dead space after them - Company had 74px of slack and Stories 97px, so
   the block read as stopping short of the right margin while Mining and
   Industrial looked flush. Spreading them puts the last column's text on the
   same right edge as the legal row beneath. */
.hp-footer__links {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: space-between;
  gap: 32px;
}

.hp-footer__col-title {
  margin: 0 0 14px;
  color: var(--hp-ink, #0d1526);
  font-size: var(--hp-label, 11.5px);
  font-weight: 600;
  letter-spacing: var(--hp-label-track, 0.14em);
  text-transform: uppercase;
}

.hp-footer__links li + li { margin-top: 9px; }
.hp-footer__links a { font-size: 14px; }

.hp-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hp-line, #e8eef6);
  font-size: 13px;
}

.hp-footer__legal ul { display: flex; flex-wrap: wrap; gap: 20px; }

/* ====================================================== RESPONSIVE ====== */

/* Breakpoints match home-2026.css. The fallback is the value that file gives
   --hp-section-y at this width. */
@media (max-width: 1099px) {
  .hp-footer { padding-top: var(--hp-section-y, 72px); }
  .hp-footer__top { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hp-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}

@media (max-width: 700px) {
  .hp-footer { padding: 56px 0 28px; }
  .hp-footer__links { grid-template-columns: minmax(0, 1fr); gap: 28px; justify-content: stretch; }
}