/* =========================================================================
   PER footer — one dark bar: logo + copyright, centered as a pair.

   Load AFTER pers.new.css (it overrides by cascade order, so no rule deletions
   are strictly required — see README §6 for optional cleanup).

   Fixes
     - White gap under the footer, and the white band between the dark and grey
       bars at <=992px: both came from `.push, footer { height: 190px }`
       (210/250/300 further down the ladder) being a FIXED height that no
       longer matched the real content.
     - The duplicated seven-link nav and the separate grey bar are gone from
       the markup (see _footer_block.html).
   ========================================================================= */

/* ---- Sticky footer without the fixed-height push hack ----------------- */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content_wrapper {
  flex: 1 0 auto;
  min-height: 0;                 /* cancels min-height:100% */
  margin: 0 auto;                /* cancels the -190px negative margin */
  width: 100%;
}

.push { display: none; }         /* the spacer the hack needed */

footer {
  height: auto;                  /* was 190/210/250/300px */
  flex: 0 0 auto;
  width: 100%;
  padding-bottom: 0;
  padding-top: 0;
}

footer div.container { margin-bottom: 0; }

/* ---- The one bar ------------------------------------------------------ */

footer div.footer-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Symmetric horizontal reserve for the right-pinned logo (170px + 28px gap).
     Equal on both sides, so the copyright's centre is still the BAR's centre,
     and it wraps instead of sliding under the logo. */
  padding: 16px 198px;
  min-height: 84px;
  position: relative;
}

footer div.footer-bar div.pers-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  position: absolute;            /* sits in the reserved right padding */
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* The old sizing lived on `footer div.footer-navigation img`, a wrapper this
   markup no longer has — without these the PNGs render at intrinsic size. */
footer div.footer-bar div.pers-logo img.logo { width: 60px; height: 60px; }
footer div.footer-bar div.pers-logo img      { width: 100px; height: 45px; }

footer div.footer-bar div.footer-info {
  background: none;              /* was a full-width grey bar of its own */
  height: auto;
  padding: 0;
  flex: 0 1 auto;
  text-align: center;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}

footer div.footer-bar div.footer-info br.footer-info__break { display: none; }

/* Same layout as desktop, with the smaller logo and a matching reserve. */
@media only screen and (max-width: 1200px) {
  footer div.footer-bar {
    padding-left: 158px;         /* 130px logo + 28px */
    padding-right: 158px;
    min-height: 82px;            /* 50px logo + 2 × 16px */
  }
  footer div.footer-bar div.pers-logo img.logo { width: 50px; height: 50px; }
  footer div.footer-bar div.pers-logo img      { width: 70px; height: 35px; }
}

@media only screen and (max-width: 992px) {
  footer div.footer-bar div.footer-info { white-space: normal; }
  footer div.footer-bar div.footer-info br.footer-info__break { display: inline; }
}

/* Phone: no reserve — copyright left, logo right. */
@media only screen and (max-width: 700px) {
  footer div.footer-bar {
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    min-height: 0;
  }
  footer div.footer-bar div.pers-logo {
    position: static;
    transform: none;
    order: 2;
  }
  footer div.footer-bar div.footer-info {
    order: 1;
    flex: 1 1 auto;
    text-align: left;
  }
}

@media only screen and (max-width: 992px) {
  .content_wrapper { margin: 0 auto; }        /* cancels -210/-250/-300px */
}