/* footer: the theme's footer as the client's, less the client's phone bubble (we carry no phone number), its car finder and
   questions side by side, and our longer copyright line kept to one line on a phone as theirs is */

/* the consent box the client's CookieFirst draws, centred in the window over its grey backdrop (the screen dimmed by
   about a tenth), the page still usable around it */
.cl-consent {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(0, 0, 0, .102);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.cl-consent[hidden] { display: none; }
.cl-consent__box {
  box-sizing: border-box;
  width: 500px;
  max-width: 100%;
  padding: 15px 15px 27px;
  background: #fff;
  color: #000;
  font-family: Roboto, sans-serif;
  text-align: left;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .2);
  pointer-events: auto;
}
.cl-consent__box h2 {
  margin: 3px 0 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
}
.cl-consent__box p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
.cl-consent__actions {
  display: flex;
  gap: 10px;
  margin-top: 37px;
}
.cl-consent__actions button {
  flex: 1;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 3px;
  font: 300 14px/30px Roboto, sans-serif;
  text-transform: none;
  cursor: pointer;
}
.cl-consent__adjust { background: #dbdbdb; color: #7d7d7d; }
.cl-consent__accept { background: #18ac00; color: #fff; }
@media (max-width: 767px) {
  /* top-aligned; the line wraps at 13px so it stays inside the phone's width */
  #footer-container .copyright .cl-copyright { font-size: 13px; vertical-align: top; }
  /* where CookieFirst puts it on the client's phone capture (centred in an 844px screen), kept on shorter screens */
  .cl-consent { align-items: flex-start; }
  .cl-consent__box { padding-top: 18px; margin-top: max(0px, min(317px, calc(100vh - 230px))); }
}

/* "Find the right RaceChip" and "Any questions?" side by side in one row, centred in the content width, each block's
   photo beside its words rather than stacked under them (the theme floats the two apart, and on a page with a vehicle
   picked clears the questions under the car finder); a narrow window wraps the two to centred rows */
@media screen and (min-width: 769px) {
  #footer-container .footer.footer-blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 40px;
  }
  #footer-container .footer.footer-blocks::before,
  #footer-container .footer.footer-blocks::after { display: none; }
  #footer-container .footer.footer-blocks .footer-car-selector,
  #footer-container .footer.footer-blocks .footer-contact-widgets {
    display: grid;
    align-items: center;
    justify-items: center;
    column-gap: 24px;
    float: none;
    clear: none;
    width: auto;
    margin: 0;
  }
  #footer-container .footer-car-selector { grid-template-columns: 220px auto; grid-template-areas: "image headline" "image button"; }
  #footer-container .footer-car-selector .image { grid-area: image; }
  #footer-container .footer-car-selector .headline { grid-area: headline; align-self: end; margin-bottom: 16px; }
  #footer-container .footer-car-selector button.select-car { grid-area: button; align-self: start; margin: 0; }
  #footer-container .footer-car-selector img { display: block; width: 220px; height: auto; margin: 0; }
  #footer-container .footer-contact-widgets { grid-template-columns: auto 180px; grid-template-areas: "headline image" "bubbles image"; }
  #footer-container .footer-contact-widgets .headline { grid-area: headline; align-self: end; margin-bottom: 0; }
  #footer-container .footer-contact-widgets .bubbles { grid-area: bubbles; margin-top: 16px; }
  #footer-container .footer-contact-widgets .image { grid-area: image; }
  #footer-container .footer-contact-widgets figure { margin: 0; }
  #footer-container .footer-contact-widgets figure img { display: block; width: 180px; height: auto; margin: 0; }
  /* the theme hides the car finder once a vehicle is picked; the questions then stand alone in the middle */
  .wrapper.car-selected #footer-container .footer-car-selector { display: none; }
}
/* the contact bubble stands alone (we carry no phone bubble), so it sits in the middle, not floated to one side */
#footer-container .footer-contact-widgets .bubbles .bubble.bubble-email { float: none; width: 200px; max-width: 100%; margin: 0 auto 16px; }
/* on a phone the two stack, and the questions' bubble stands beside its photo */
@media screen and (max-width: 768px) {
  #footer-container .footer.footer-blocks .footer-contact-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "headline headline" "bubbles image";
    align-items: center;
    column-gap: 16px;
    margin: 0 auto;
  }
  #footer-container .footer-contact-widgets .headline { grid-area: headline; }
  #footer-container .footer-contact-widgets .bubbles { grid-area: bubbles; margin-top: 0; }
  #footer-container .footer-contact-widgets .bubbles .bubble.bubble-email { width: 100%; margin: 0; }
  #footer-container .footer-contact-widgets .image { grid-area: image; }
  #footer-container .footer-contact-widgets figure { margin: 0; }
  #footer-container .footer-contact-widgets figure img { display: block; width: 100%; height: auto; }
}