/* Footer ported from kb.dreamit.au (dit.css), which mirrors the
   dreamithost.com.au marketing footer. Keep in sync with kb.dreamit.au. */

/* --- Footer ----------------------------------------------------------------
   Ported from the dreamithost.com.au theme so the two sites read as one. The
   colours, sizes, weights, spacing and breakpoints are the theme's own; what
   changed, and why, is recorded here and in overrides/partials/dit-footer.html.

   Typeface. The theme sets objektiv-mk1 from Adobe Typekit on almost every
   footer rule. No new font is loaded here, so the footer inherits the site's
   self-hosted Open Sans and headings take --dit-font-heading.

   Layout. The theme leans on Bootstrap's container and 12-column grid, neither
   of which exists on this site, so both are reproduced with flexbox below at
   the same widths and the same breakpoints. Everything is namespaced dit- so
   nothing can collide with Material.

   Contrast. Three of the theme's colours fail WCAG AA where they are used, so
   they are replaced with the nearest passing value in the same direction:
     link hover  #6E6E6E on #333333 = 2.48:1  ->  #C9C9C9 = 7.63:1
     "Call Us"   #8D8D8D on #2C2C2C = 4.20:1  ->  #999999 = 4.90:1
     button hover, white on #969696 = 2.96:1  ->  #1A1A1A on #969696 = 5.88:1
   The button keeps the theme's #969696 hover fill; only its label darkens.
   -------------------------------------------------------------------------- */
.dit-footer { display: block;
}

/* Bootstrap's stepped .container, reproduced. Same widths, same 15px gutter. */
.dit-footer__container {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

/* Bootstrap's .row / .col-*, reproduced. Percentages match col-lg-4, col-lg-8
   and col-md-3; the collapse points are Bootstrap's lg and md, which are the
   991px and 767px steps the theme's own media queries already use. */
.dit-footer-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -15px;
}

.dit-footer-col {
  width: 100%;
  padding: 0 15px;
}

.dit-footer-col--about { width: 33.333333%;
}

.dit-footer-col--nav { width: 66.666667%;
}

.dit-footer-col--quarter { width: 25%;
}

/* Contact strip ------------------------------------------------------------ */
.dit-footer-contact {
  background: #2c2c2c;
  padding: 44px 0;
}

.dit-footer-contact__main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.dit-footer-contact__details,
.dit-footer-contact__actions {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dit-footer-contact__details > li {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  padding-left: 70px;
  padding-right: 50px;
  margin-left: 50px;
  border-right: 1px solid #525252;
}

.dit-footer-contact__details > li:first-child { margin-left: 0;
}

.dit-footer-contact__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 45px;
  height: 45px;
  color: #f3f3f3;
}

.dit-footer-contact__details p {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 26px;
}

.dit-footer-contact__details p span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #999999;
}

/* The theme sets this label on a 20px line, which leaves the link a 19px
   target. Everything else in the footer already clears WCAG 2.2 AA target size
   (24 by 24 CSS pixels); these two are brought up to it. The AAA 44px figure is
   deliberately not applied to the link columns: at 40-odd links it would more
   than double the footer on a phone, and the columns already sit well clear of
   the spacing exception. */
/* The label itself is grey; the link inside it is the theme's blue, and it is
   the only accent colour in the contact strip. #018AFF on #2C2C2C is 4.04:1,
   so it is lightened along the same hue to #359BFF, which is 4.84:1. */
.dit-footer-contact__details p span a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: #359bff;
  text-decoration: none;
}

.dit-footer-contact__details p span a:hover { text-decoration: underline;
}

.dit-footer-contact__actions li {
  display: inline-block;
  margin-left: 20px;
}

.dit-footer-btn {
  display: block;
  width: 175px;
  padding: 10px 30px;
  background: #303030;
  border: 1px solid #969696;
  border-radius: 3px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;  /* with the padding and border, a 46px tap target */
  text-align: center;
  text-decoration: none;
}

.dit-footer-btn:hover {
  background: #969696;
  color: #1a1a1a;
}

/* The theme gives the second button a muted label so it reads as the quieter
   of the pair. #7D8498 on #303030 is 3.54:1, so it is lightened along the same
   hue to #9298AD, which is 4.60:1. */
.dit-footer-btn--quiet { color: #9298ad;
}

.dit-footer-btn--quiet:hover { color: #1a1a1a;
}

/* Links block -------------------------------------------------------------- */
.dit-footer-links-block {
  background: #333333;
  padding: 30px 0 55px;
}

.dit-footer-links { margin-top: 30px;
}

/* The theme sets one family across the whole footer. --dit-font-heading is
   Roboto, which put a second face in here and was the most visible departure
   from the live footer, so the column headings stay on the body face. */
.dit-footer-links__title {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.dit-footer-links p {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 14px;
  line-height: 24px;
}

.dit-footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dit-footer-links ul li {
  display: block;
  margin-bottom: 2px;
  line-height: 20px;
}

.dit-footer-links ul li a {
  display: inline-block;
  color: #ffffff;
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
}

.dit-footer-links ul li a:hover {
  color: #c9c9c9;
  text-decoration: underline;
}

/* "Compare With" panels. The theme sets the chevron with an icomoon glyph;
   here it is drawn from two borders, so no icon font is needed. */
.dit-footer-compare li {
  margin-top: 10px;
  margin-bottom: 0;
}

.dit-footer-compare li a {
  display: block;
  position: relative;
  padding: 7px 32px 7px 18px;
  background: #2c2c2c;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

.dit-footer-compare li a::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(-45deg);
}

.dit-footer-compare li a:hover {
  background: #1e1e1e;
  color: #ffffff;
  text-decoration: none;
}

/* About column ------------------------------------------------------------- */
.dit-footer-about { margin-top: 40px;
}

.dit-footer-about p {
  margin: 0 0 16px;
  color: #ffffff;
  font-size: 14px;
  line-height: 24px;
}

.dit-footer-logo {
  display: inline-block;
  margin-bottom: 40px;
}

.dit-footer-logo img {
  display: block;
  width: 218px;
  height: auto;
  max-width: 100%;
}

.dit-footer-follow {
  display: block;
  background: none;
}

.dit-footer-follow b {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}

/* The chip stays the theme's 23px square; the link around it is 44px tall so
   the tap target clears 44px without moving the chips apart. */
.dit-footer-follow__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 44px;
  margin-left: 3px;
  vertical-align: middle;
  text-decoration: none;
}

.dit-footer-follow__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  background: #3e3e3e;
  color: #ffffff;
}

.dit-footer-follow__chip svg {
  width: 12px;
  height: 12px;
}

.dit-footer-follow__link:hover .dit-footer-follow__chip {
  background: #ffffff;
  color: #3e3e3e;
}

/* Bottom bar ---------------------------------------------------------------
   Partner marks on the left, payment marks and the copyright on the right, as
   the theme's .footer-bottom-block does. Material's own copyright is hidden
   further down, so this is the only copyright on the page. */
.dit-footer-bottom {
  background: #2c2c2c;
  padding: 45px 0;
}

.dit-footer-bottom__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.dit-footer-partners {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dit-footer-partners li {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.dit-footer-partners li:last-child { margin-right: 0;
}

.dit-footer-partners a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.dit-footer-partners img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* The copyright sits on its own full-width line under the badge row, as it
   does on the live site; keeping it inside the flex row makes its long text
   claim a track wide enough to push the payment marks onto a second line. */
.dit-footer-payment {
  margin: 0 0 0 auto;
  line-height: 0;
  text-align: right;
}

.dit-footer-payment img {
  display: inline-block;
  width: 274px;
  max-width: 100%;
  height: auto;
}

/* The theme prints this at #8D8D8D on #2C2C2C, which is 4.20:1. Same treatment
   as the contact label: raised to #999999 for 4.90:1. */
.dit-footer-copyright {
  margin: 15px 0 0;
  color: #999999;
  font-size: 14px;
  line-height: 22px;
  text-align: right;
}

.dit-hero a:focus-visible,
.dit-hero button:focus-visible,
.dit-footer a:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 5px rgba(90, 190, 250, 0.6);
}

@media screen and (max-width: 1200px) {
  .dit-footer__container { max-width: 960px;
  }
  .dit-footer-contact__details > li {
    padding-left: 60px;
    padding-right: 30px;
  }
  .dit-footer-contact__details p { font-size: 15px;
  }
  .dit-footer-contact__actions li { margin-left: 10px;
  }
  .dit-footer-btn { width: auto;
  }
  .dit-footer-partners li { margin-right: 5px;
  }
}

@media screen and (max-width: 991px) {
  .dit-footer__container { max-width: 720px;
  }
  .dit-footer-col--about,
  .dit-footer-col--nav { width: 100%;
  }
  .dit-footer-contact { padding: 25px 0;
  }
  .dit-footer-contact__main { display: block;
  }
  .dit-footer-contact__details { text-align: center;
  }
  .dit-footer-contact__actions {
    text-align: center;
    margin-top: 20px;
  }
  .dit-footer-about {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding-bottom: 25px;
  }
  .dit-footer-about p { line-height: 20px;
  }
  .dit-footer-logo { margin-bottom: 20px;
  }
  .dit-footer-logo img { margin: 0 auto;
  }
  .dit-footer-links { margin-top: 25px;
  }
  .dit-footer-links-block { padding: 25px 0 40px;
  }
  .dit-footer-bottom { padding: 30px 0;
  }
  .dit-footer-bottom__main { justify-content: center;
  }
  .dit-footer-partners { text-align: center; margin-bottom: 10px;
  }
  .dit-footer-payment { margin: 0 auto; text-align: center;
  }
  .dit-footer-copyright { text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .dit-footer__container { max-width: 540px;
  }
  .dit-footer-col--quarter { width: 100%;
  }
  .dit-footer-contact__details > li {
    display: block;
    padding: 20px 0;
    margin: 0;
    border-right: none;
    border-bottom: 1px solid #525252;
  }
  .dit-footer-contact__icon {
    position: static;
    display: inline-block;
    margin-bottom: 10px;
  }
  .dit-footer-links {
    width: 100%;
    text-align: center;
  }
  .dit-footer-compare li a { text-align: left;
  }
  .dit-footer-follow b {
    display: block;
    margin-right: 0;
    padding-bottom: 5px;
  }
  .dit-footer-follow__link { margin: 0 2px;
  }
  .dit-footer-about { padding-bottom: 0;
  }
}

@media screen and (max-width: 575px) {
  .dit-footer__container { max-width: none;
  }
  .dit-footer-contact__actions li { margin: 10px 5px 0;
  }
  .dit-footer-payment { margin-bottom: 10px;
  }
}