/*
 * Client area footer, matching crservers.com: stacked logo, three link columns,
 * contact block, and legal links in the bottom bar. Loaded after custom.css and
 * crs-ui2, so it overrides the older two-column layout.
 */
html footer.footer-container .footer_box {
  display: grid !important;
  gap: 8px 16px;
  align-items: start;
  padding: 40px 24px 32px 32px !important;
  min-height: 0 !important;
  font-size: 16px !important;
}

/* The body is a flex column: without this the footer shrinks to nothing. */
html footer.footer-container {
  flex-shrink: 0;
  min-height: 0 !important;
}

html footer.footer-container .footer-column {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  text-align: left !important;
}

html footer.footer-container .footer-column h3 {
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 8px !important;
  text-align: left !important;
}

html footer.footer-container .footer-nav {
  text-align: left !important;
}

html footer.footer-container .footer-nav li {
  padding: 0 !important;
  margin: 0 0 4px !important;
}

html footer.footer-container .footer-nav li a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  line-height: 1.4;
  color: #fff;
}

html footer.footer-container .footer-image,
html footer.footer-container .footer-image .logo-item {
  display: flex;
  align-items: center;
  height: auto;
}

html footer.footer-container .footer-image .header-logo {
  display: block;
  width: 130px !important;
  max-width: 100%;
  height: auto !important;
}

html footer.footer-container .footer-column.footer-contact {
  align-items: flex-end;
  text-align: right !important;
}

html footer.footer-container .footer-contact-address span {
  display: block;
  white-space: nowrap;
  line-height: 1.4;
}

html footer.footer-container .footer-contact-inner,
html footer.footer-container .footer-contact-address {
  width: auto;
}

html footer.footer-container .footer-contact-telephone {
  margin: 0 0 4px;
}

html footer.footer-container .footer-contact-inner strong {
  font-weight: 700;
}

html footer.footer-container .footer-contact-inner > div:not([class]) {
  margin-bottom: 12px;
}

html footer.footer-container .footer-contact-address {
  margin: 12px 0 16px;
}

html footer.footer-container .footer-payments > strong {
  display: block;
  font-weight: 400;
  margin-bottom: 8px;
}

html footer.footer-container .footer-contact-logo {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

html footer.footer-container .footer-contact-inner a {
  color: #fff;
}

html footer.footer-container .footer-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  padding: 12px 8px;
  font-size: 14px;
}

html footer.footer-container .footer-legal {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
}

html footer.footer-container .footer-legal a {
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}

html footer.footer-container .footer-legal a:hover,
html footer.footer-container .footer-legal a:focus-visible {
  color: #fff;
}

/* The company name looks like the text around it. */
html footer.footer-container .footer-copyright > span:first-child a,
html footer.footer-container .footer-copyright > span:first-child a:hover {
  color: inherit;
  text-decoration: none;
}

/* Wide enough for everything beside the fixed sidebar. */
@media (min-width: 1360px) {
  html footer.footer-container .footer_box {
    /* Natural widths with the spare space split equally, so every gap matches,
       including both sides of the logo. */
    grid-template-columns: repeat(5, max-content);
    justify-content: space-evenly !important;
    column-gap: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Centered on the link columns (headings' cap height to the last link's
     baseline), as on the website, so the payment icons don't pull it down.
     65px from the headings' line box to the icon top. */
  html footer.footer-container .footer-column:first-child {
    align-self: start;
    padding-top: 65px !important;
  }

  /* Keeps the payment icons clear of the fixed contact button (56px + 16px). */
  html footer.footer-container .footer-column.footer-contact {
    padding-right: 56px !important;
  }

  html footer.footer-container .footer-column {
    order: 0 !important;
  }
}

/* Narrower, or a tablet: logo and contact details get their own rows. */
@media (min-width: 600px) and (max-width: 1359.98px) {
  html footer.footer-container .footer_box {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  html footer.footer-container .footer-column:first-child,
  html footer.footer-container .footer-column.footer-contact {
    grid-column: 1 / -1 !important;
    align-items: center;
    text-align: center !important;
  }

  html footer.footer-container .footer-column:first-child {
    order: 1 !important;
  }

  html footer.footer-container .footer-column:not(:first-child):not(.footer-contact) {
    order: 2 !important;
  }

  html footer.footer-container .footer-column.footer-contact {
    order: 3 !important;
    margin-top: 16px;
  }

  html footer.footer-container .footer-image {
    justify-content: center;
  }
}

/* Phones, same as the website: links and contact details in a 2x2 grid, then a
   last row with the logo and the payment icons. */
@media (max-width: 599.98px) {
  html footer.footer-container .footer_box {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    /* Shared with the payment block, which sits at the same distance from the bottom. */
    --crs-footer-phone-bottom: 24px;
    padding: 24px 16px var(--crs-footer-phone-bottom) !important;
  }

  html footer.footer-container .footer-nav li a {
    padding-left: 0;
    padding-right: 0;
  }

  html footer.footer-container .footer-column:not(:first-child):not(.footer-contact) {
    order: 1 !important;
    margin-bottom: 16px;
  }

  html footer.footer-container .footer-column.footer-contact {
    order: 2 !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 16px;
    font-size: 14px;
  }

  html footer.footer-container .footer-column:first-child {
    order: 3 !important;
    min-height: 80px;
    justify-content: center;
  }

  html footer.footer-container .footer-column h3 {
    font-size: 14px !important;
    letter-spacing: 0;
  }

  html footer.footer-container .footer-image {
    justify-content: flex-start;
  }

  html footer.footer-container .footer-image .header-logo {
    width: 92px !important;
  }

  html footer.footer-container .footer-column.footer-contact .footer-contact-inner {
    align-items: flex-start !important;
  }

  html footer.footer-container .footer-column.footer-contact .footer-contact-address {
    align-items: flex-start !important;
    text-align: left !important;
    margin-bottom: 0;
  }

  html footer.footer-container .footer-column.footer-contact .footer-contact-address span {
    text-align: left !important;
    white-space: normal !important;
  }

  html footer.footer-container .footer-contact-inner strong {
    font-size: 16px;
  }

  /* Payments are inside the contact block in the markup. Positioning them against
     .footer_box puts them beside the logo; the logo's min-height holds the room. */
  html footer.footer-container .footer-column.footer-contact .footer-payments {
    position: absolute;
    right: 16px;
    bottom: var(--crs-footer-phone-bottom);
    width: auto !important;
    padding: 0 !important;
    align-items: flex-end !important;
    text-align: right !important;
  }

  html footer.footer-container .footer-payments > strong {
    font-size: 14px;
    white-space: nowrap;
  }

  html footer.footer-container .footer-column.footer-contact .footer-contact-logo {
    grid-template-columns: repeat(4, 36px);
    gap: 6px;
    justify-content: end;
    margin: 0;
  }

  html footer.footer-container .footer-legal a {
    min-height: 44px;
  }
}

/* Keeps the icons to the left of the fixed contact button (56px + 16px + a gap). */
@media (min-width: 360px) and (max-width: 599.98px) {
  html footer.footer-container .footer-column.footer-contact .footer-payments {
    right: 80px;
  }
}

/* No room beside the button here, so the icons sit above it instead. This height
   keeps them clear even if the bottom bar loses a line of text. */
@media (max-width: 359.98px) {
  html footer.footer-container .footer_box {
    --crs-footer-phone-bottom: 56px;
  }
}

/* Very narrow screens: a smaller logo leaves room for the payment icons. */
@media (max-width: 319.98px) {
  html footer.footer-container .footer-image .header-logo {
    width: 72px !important;
  }
}