/* CodeRush.run — the one site footer, shared by every static page.

   Colour is INHERITED on purpose. The same markup runs on the pad's
   studio-blue #sitefoot, on the light guide and template pages, on the privacy
   page and on the landing pages, so this file states layout and borrows
   `currentColor` for every rule and border. A footer that set its own colours
   would be wrong on at least one of those pages. */

.seofoot {
  padding: clamp(40px, 6vw, 64px) clamp(18px, 6vw, 84px) clamp(30px, 4vw, 44px);
  border-top: 1px solid;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}
/* The landing pages paint their own canvas; every other page already has one. */
.seopage .seofoot { background: var(--white); color: var(--ink); border-color: var(--line); }

/* The wordmark is the supplied outlined artwork, inlined in the markup so it
   costs no request and takes the surface's colour. */
.wordmarksvg { display: block; width: 148px; height: auto; }
/* Visually hidden, still announced: the artwork spells "coderush", the
   accessible name says CodeRush.run. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.seofoot .footinner { width: min(1240px, 100%); margin-inline: auto; }
.foottop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin-bottom: clamp(28px, 4vw, 44px); }
.footmark { margin: 0; }
.footmark a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footmark .wordmarksvg { width: 132px; }
.footsay { margin: 0; font-size: 15px; opacity: .8; }

#sitelinks.footmenu, .seofoot .footmenu {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 26px 24px;
}
/* The pad's own footer keeps the space it already had above this menu. */
#sitelinks.footmenu { margin: 30px 0 0; }
.seofoot .footmenu { margin: 0; }
.footmenu .footcol { min-width: 0; }
#sitelinks .foothead, .seofoot .foothead {
  margin: 0 0 10px; padding-bottom: 9px;
  border-bottom: 1px solid;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  font: 600 13px/1.3 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing: .04em; text-transform: uppercase; opacity: .75;
  max-width: none; color: inherit;
}
#sitelinks .footcol ul, .seofoot .footcol ul { margin: 0; padding: 0; list-style: none; }
#sitelinks .footcol a, .seofoot .footcol a {
  display: inline-flex; align-items: center; min-height: 36px;
  font-size: 14px; text-decoration: none; opacity: .9;
}
#sitelinks .footcol a:hover, .seofoot .footcol a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.footnote {
  margin: clamp(28px, 4vw, 40px) 0 0; padding-top: 18px;
  border-top: 1px solid;
  border-color: color-mix(in srgb, currentColor 30%, transparent);
  font-size: 13px; opacity: .75;
}

@media (max-width: 680px) {
  #sitelinks.footmenu, .seofoot .footmenu { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  #sitelinks .footcol a, .seofoot .footcol a { min-height: 44px; }
}