/* ===================================== */
/*  FOOTER OVERRIDES FROM SITE DEFAULTS  */
/* ===================================== */

.footer  
{  
  text-align: center;  
  background-color: var(--color-dark-gray);    
  padding: var(--space-m);  
}

.footer-robot-img 
{  
  width: 125px; /* Set exact size. */
  height: auto; /* Keeps proportions of image. */
}

.footer-contact-info p 
{  
  color: var(--color-white);
  font-size: var(--font-size-paragraph);  
}

.footer-contact-info a 
{  
  color: var(--color-white);
  font-size: var(--font-size-paragraph);
  text-decoration: none; /* Remove underlines of links. */   
}

.footer-contact-info a:hover, .footer-contact-info a:focus 
{  
  color: var(--color-accent-orange-light); /* Email/Phone link is accented. */  
}

.footer-nav
{
  display: flex; /* Switch to "flexible layout manager" mode. */
  flex-direction: row;
  justify-content: center; /* Center the links horizontally. */
}

.footer-nav a 
{  
  color: var(--color-white);
  font-size: var(--font-size-paragraph);  
  font-weight: normal;    
  text-decoration: none; /* Remove underlines of links. */
  margin: var(--space-none) var(--space-l); /* No vertical spacing (or needed). Horizontal spacing only. */   
}

.footer-nav a:hover, .footer-nav a:focus 
{  
  color: var(--color-accent-orange-light); /* Hover/Current page link is accented. */  
}

/* ================================ */
/*  SMALL-SCREEN / MOBILE OVERRIDES */
/* ================================ */
/* Everything below adjusts this page's layout for small screens (phones).
   Desktop styling above remains the default; these rules only apply when triggered. */

@media (max-width: 950px) /* Footer navigation bar gets crammed below this level, early adjust. */
{
  .footer-nav
  {
    flex-direction: column; /* Stack the nav links vertically. */
  }
}   

@media (max-width: 767px) /* One px below the 768px iPad Mini / tablet standard — phones get mobile, tablets & up keep desktop. */
{
  
}