/* ==========================================================================
   Site footer — gpu-cloud's footer layout on the site's existing colours

   Loaded from header.php, so it applies on every page that includes the shared
   footer.php. Overrides live here rather than in style.css because the site
   serves the minified builds (style.min.css / responsive.min.css) — edits to
   style.css would never reach the browser.

   Colours are the originals: light #f5f7f8 link columns (left to style.css,
   untouched) above the #413945 bottom bar. What is ported from
   css/gpu-cloud.css is the bar's layout and behaviour — inline legal links with
   the red underline sweep, and circular social icons with a red hover lift.

   NOTE: bump the ?v= on the <link> in header.php after editing (Cloudflare
   caches CSS aggressively).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bottom bar — copyright + inline legal links + social icons
   -------------------------------------------------------------------------- */

.footer_bottom {
  margin-top: 2px;
  padding: 26px 0;
  background: #413945;
}

/* One row: copyright + legal links on the left, social icons on the right.
   Bootstrap's .span5/.span7 widths were forcing the copyright to wrap onto a
   second line, so the columns are flexed to their content instead. */
.footer_bottom .row-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
}

/* Bootstrap's clearfix pseudo-elements would become flex items and eat a gap */
.footer_bottom .row-fluid::before,
.footer_bottom .row-fluid::after {
  display: none;
}

.footer_bottom .row-fluid > .span5 {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin-left: 0;
}

.footer_bottom .row-fluid > .span7 {
  flex: 0 0 auto;
  width: auto;
  margin-left: 0;
}

.footer_bottom .copyright {
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.6;
}

/* red underline sweeping in from the left, as on gpu-cloud */
.footer_bottom .copyright a {
  position: relative;
  padding-bottom: 2px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s;
}

.footer_bottom .copyright a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #ED3237;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}

.footer_bottom .copyright a:hover,
.footer_bottom .copyright a:focus-visible {
  color: #ED3237;
}

.footer_bottom .copyright a:hover::after,
.footer_bottom .copyright a:focus-visible::after {
  transform: scaleX(1);
}

.footer_bottom .copyright .sep {
  margin: 0 4px;
  color: rgba(255, 255, 255, 0.35);
}

/* style.css floats this right. Inside the flex row that leaves .span7 with no
   in-flow content — zero height — so align-items:center lined up an empty box
   and the icons dropped below the copyright. Keep it in flow instead. */
.footer_bottom .follow_us {
  float: none;
  display: flex;
  justify-content: flex-end;
  text-align: right;
}

.footer_bottom .follow_us ul {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer_bottom .follow_us ul li {
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
}

.footer_bottom .follow_us a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s, transform 0.25s;
}

.footer_bottom .follow_us a:hover,
.footer_bottom .follow_us a:focus-visible {
  color: #fff;
  background: #ED3237;
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Small screens — the social icons used to carry .hide-for-sm
   (display:none !important in responsive.css); that class is gone from
   footer.php, so they now show here too, centred under the copyright.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .footer_bottom {
    padding: 22px 0;
    text-align: center;
  }

  /* stack: copyright first, icons centred beneath it */
  .footer_bottom .row-fluid {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .footer_bottom .row-fluid > .span5,
  .footer_bottom .row-fluid > .span7 {
    flex: 0 0 auto;
    width: 100%;
  }

  .footer_bottom .copyright {
    font-size: 13px;
    line-height: 1.9;
  }

  .footer_bottom .follow_us {
    justify-content: center;
    text-align: center;
  }

  .footer_bottom .follow_us ul {
    justify-content: center;
    margin-top: 16px;
  }
}