/* ===========================================================================
   PRIME — customer-chosen footer colour

   Loaded only when a site has picked a footer colour, and loaded after the
   design overlay so it can override designs that set their footer with
   !important.

   Every value here comes from the palette written inline by the theme
   engine. The type colours are derived from the chosen background, so a
   dark footer gets light text and a light footer gets dark text without
   the customer having to think about it.
   ======================================================================== */

body.prime-theme.prime-footer-custom .tp-footer-area {
  background-color: var(--prime-footer-bg) !important;
  background-image: none !important;
  border-top: 1px solid var(--prime-footer-line) !important;
}

/* --------------------------------------------------------------- headings */
body.prime-theme.prime-footer-custom .tp-footer-widget-title,
body.prime-theme.prime-footer-custom .tp-footer-talk h4,
body.prime-theme.prime-footer-custom .tp-footer-talk h4 a,
body.prime-theme.prime-footer-custom .tp-footer-area h1,
body.prime-theme.prime-footer-custom .tp-footer-area h2,
body.prime-theme.prime-footer-custom .tp-footer-area h3,
body.prime-theme.prime-footer-custom .tp-footer-area h4,
body.prime-theme.prime-footer-custom .tp-footer-area h5 {
  color: var(--prime-footer-fg) !important;
}

/* ------------------------------------------------------------- body copy */
body.prime-theme.prime-footer-custom .tp-footer-desc,
body.prime-theme.prime-footer-custom .tp-footer-area p,
body.prime-theme.prime-footer-custom .tp-footer-area span,
body.prime-theme.prime-footer-custom .tp-footer-area li,
body.prime-theme.prime-footer-custom .tp-footer-talk span,
body.prime-theme.prime-footer-custom .tp-footer-contact-content p,
body.prime-theme.prime-footer-custom .tp-footer-copyright p,
body.prime-theme.prime-footer-custom .tp-footer-widget-content ul li a,
body.prime-theme.prime-footer-custom .tp-footer-contact-content p a {
  color: var(--prime-footer-muted) !important;
}

body.prime-theme.prime-footer-custom .tp-footer-widget-content ul li a:hover,
body.prime-theme.prime-footer-custom .tp-footer-contact-content p a:hover,
body.prime-theme.prime-footer-custom .tp-footer-talk h4 a:hover {
  color: var(--prime-primary) !important;
}

/* The little contact icons sit at heading strength. */
body.prime-theme.prime-footer-custom .tp-footer-contact-icon span,
body.prime-theme.prime-footer-custom .tp-footer-contact-icon svg {
  color: var(--prime-footer-fg) !important;
}

/* ---------------------------------------------------------------- social */
body.prime-theme.prime-footer-custom .tp-footer-social a {
  background-color: var(--prime-footer-chip) !important;
  border-color: var(--prime-footer-line) !important;
  color: var(--prime-footer-fg) !important;
}
body.prime-theme.prime-footer-custom .tp-footer-social a:hover {
  background-color: var(--prime-primary) !important;
  border-color: var(--prime-primary) !important;
  color: var(--prime-on-primary) !important;
}

/* ---------------------------------------------------------------- rules */
body.prime-theme.prime-footer-custom .tp-footer-bottom {
  border-top: 1px solid var(--prime-footer-line) !important;
}
body.prime-theme.prime-footer-custom .tp-footer-widget-title {
  border-bottom-color: var(--prime-footer-line) !important;
}

/* A design that tints the footer through a data attribute is overridden too. */
body.prime-theme.prime-footer-custom [data-bg-color="footer-bg-grey"],
body.prime-theme.prime-footer-custom [data-bg-color="footer-bg-white"] {
  background-color: var(--prime-footer-bg) !important;
}