/*
 * Spiffworks overrides for the Visible template.
 * Keep brand tweaks here so assets/css/main.css stays close to the original template.
 */

/* Brand blue from the Spiffworks logo (#008ccb), lifted slightly for contrast on the dark background */
:root {
  --accent-color: #1499d6;
  --nav-hover-color: #1499d6;
}

/* Logo: lowercase wordmark next to the logo mark */
.header .logo img {
  max-height: 38px;
  border-radius: 6px;
  margin-right: 10px;
}

.header .logo h1 {
  font-family: var(--heading-font);
  text-transform: none;
  letter-spacing: 0.5px;
  font-size: 28px;
}

.footer .footer-about .logo img {
  border-radius: 6px;
  margin-right: 10px;
}

.footer .footer-about .logo span.tld,
.logo .tld {
  color: var(--accent-color);
  font-size: inherit;
}

/* Hero badges hold icons instead of numbers */
.hero .hero-visual .image-wrapper .experience-badge .years i,
.hero .hero-visual .client-counter .counter-number span i {
  color: var(--accent-color);
}

/* Services side panel uses short words instead of numbers */
.services .services-stats .stat-item .stat-number {
  font-size: 2rem;
}

/* Links inside the blue contact panel need to stay white */
.contact .contact-info-panel a {
  color: var(--contrast-color);
  text-decoration: underline;
}

.footer .footer-contact a {
  color: var(--accent-color);
}