/* Valent brand override for the shared footer.cshtml/footer.css.
   footer.css already themes .footer-careers, .footer-logo-text, and hover
   states via var(--color-dark-blue)/var(--color-sky-blue), so the global
   token override in styles.css re-colors all of that automatically. The
   only thing footer.css doesn't tie to those tokens is the footer
   background itself (it defaults to --color-light-gray) - confirmed via
   Sketch as the warm dark #3D3935 fill used consistently across pages. */

footer {
  background: var(--color-valent-warm-dark);
  border-top-color: var(--color-valent-warm-dark);
}

/* footer.css defaults .footer-bottom-color (the logo/links/copyright strip)
   to white - override it here so the strip matches the footer background
   instead of breaking the warm dark fill with a white bar. */
.footer-bottom-color {
  background-color: var(--color-valent-warm-dark);
}

/* footer.css colors .footer-heading/.footer-link/.footer-info a/
   .footer-copyright with --color-near-black, which is unreadable against
   the warm dark footer background above - force white for Valent. */
.footer-heading,
.footer-link,
.footer-info-links a,
.footer-copyright,
.footer-copyright a {
  color: var(--color-white);
}

/* footer.css sets .footer-copyright to 10px - bump for Valent. */
.footer-copyright {
  font-size: 13px;
  padding-top: 16px;
  display: flex;
  gap: 0;
}

/* .footer-copyright holds Copyright Statement / Address1 / Address2 / Phone
   for Valent (Greenheck's branch only ever puts Copyright Statement here -
   see NavigationView.Footer.cshtml's isValent branch - so this is scoped
   away from Greenheck automatically). Copyright Statement isn't otherwise
   wrapped in an element, hence .footer-copyright-text added in the cshtml.
   Same pipe-separator convention as .footer-info-links above. */
.footer-copyright > .footer-copyright-text:not(:last-child)::after,
.footer-copyright > a:not(:last-child)::after,
.footer-copyright > span.footer-address:not(:last-child)::after {
  content: "|";
  margin-left: 12px;
  margin-right: 12px;
}

/* footer.css sets .footer-link to 14px !important - bump for Valent. */
.footer-link {
  font-size: 15px !important;
}

/* footer.css sets .footer-heading to font-family-bold/18px/bold - Valent
   brand type spec. */
.footer-heading {
  font-family: SharpSans-SemiBold, var(--font-family-semi-bold);
  font-size: 18px;
  font-weight: 600;
}

/* footer.css hides .site-footer__logo (visibility: hidden) and expects the
   theme file to paint the logo as a .footer-logo background-image instead
   (see gh-dark-footer.css/gh-light-footer.css) - Greenheck's img is just an
   accessible placeholder. Valent's img already points at the right asset
   (logo-white.png) via src, so show it directly instead of duplicating the
   logo as a background-image. */
.footer-logo .site-footer__logo {
  visibility: visible;
}

/* footer.css's later .site-footer__logo rule sets a fixed height: 34px -
   let the Valent logo asset scale naturally instead. */
.site-footer__logo {
  height: auto;
}

/* footer.css sets .footer-logo to margin-top: 18px / height: 34px -
   tighten margin and let height scale naturally for Valent. */
.footer-logo {
  margin-top: 8px;
  height: auto;
}

.footer-logo > a {
  display: inline-block;
}

/* Valent footer-bottom layout: logo / compliance-links / merged copyright
   line stacked in one left-hand column, with Find My Rep + social icons
   as a separate column - vs. Greenheck's single-row logo+info+social.
   Structure added in NavigationView.Footer.cshtml's isValent branch;
   Greenheck's branch/markup is untouched. */
.footer-bottom-main--valent {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
}
.footer-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-bottom-main--valent .footer-social-container {
  flex-shrink: 0;
  margin-left: auto;
}

/* .footer-info-links exists in footer.css but has no pipe separator built
   in (unlike .footer-info a, which gets one via :after). Match that
   convention here. */
.footer-info-links{
  gap: 0 !important;
}
.footer-info-links a:after {
  content: "|";
  margin-left: 12px;
  margin-right: 12px;
}
.footer-info-links a:last-child:after {
  content: none;
}
.footer-social {
  display: none !important;
}
.btn-secondary{
  background-color: var(--color-dark-blue) !important;
}
.btn-secondary:hover {
  background-color: var(--primary-hover) !important;
  color: var(--color-white) !important;
}
@media (max-width: 877px) {
  .footer-copyright-text{
    display: inline-block;
  }
  .footer-info-links a:after, .footer-copyright > .footer-copyright-text:not(:last-child)::after, .footer-copyright > a:not(:last-child)::after, .footer-copyright > span.footer-address:not(:last-child)::after{
    margin-left: 5px;
    margin-right: 2px;
  }
  .footer-copyright{
    max-width: 202px;
  }
}
@media (min-width: 878px) and (max-width: 1023px) {
  .footer-address{
    margin-bottom: 0;
  }
}