/* ==========================================================================
   footer.css -- contact details
   --------------------------------------------------------------------------
   Same green as the page, so there is no visible seam; the footer reads as the
   bottom of one continuous field rather than a separate band.

   The white-on-green text is low contrast (roughly 1.7:1). That is how the
   original looks and it is reproduced faithfully here. If legibility ever
   matters more than fidelity, switching --footer-ink to var(--ydb-ink) is the
   whole fix -- it is the same colour the hours already use on this background.
   ========================================================================== */

.footer {
  --footer-ink: var(--ydb-white);

  width: 100%;
  background-color: var(--ydb-green);
  padding-top: var(--footer-pad-top);
  padding-bottom: var(--footer-pad-bottom);
}

.footer__text {
  margin: 0;
  font-family: var(--font-footer);
  font-size: 14.25px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: .4px;
  text-align: center;
  color: var(--footer-ink);
}

/* Phone and email. Undecorated to match the original, which rendered them the
   same weight and colour as the surrounding line. */
.footer__link {
  color: inherit;
  text-decoration: none;
}

.footer__link:hover,
.footer__link:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   "Back To Top"
   --------------------------------------------------------------------------
   Hidden on desktop, where the page is short enough not to need it, and shown
   from tablet down -- which is exactly what the original did. It sits above the
   contact details and adds 33px to the footer's height when visible.
   -------------------------------------------------------------------------- */
.backtotop {
  display: none;
  margin-bottom: var(--backtotop-gap);
  text-align: center;
}

.backtotop__link {
  display: inline-block;
  padding: 9px 12px;
  font-family: var(--font-footer);
  font-size: 12px;
  font-weight: 500;
  line-height: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--footer-ink);
}

.backtotop__link:hover,
.backtotop__link:focus-visible {
  text-decoration: underline;
}

@media only screen and (max-width: 768px) {
  .backtotop { display: block; }
}