/* ==========================================================================
   FORCE the circle to be a flexbox container 
   ========================================================================== */
a.soc,
.soc,
a.hs-social-icon-link,
.hs_cos_wrapper_type_social_sharing a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;

  margin-right: 10px !important;
  border-radius: 50% !important;

  background-color: #800038 !important; 
  
  
  text-decoration: none !important;
  vertical-align: middle !important; 
}

/* Font Awesome icons & text inside */
.soc i, 
a.hs-social-icon-link i,
.hs_cos_wrapper_type_social_sharing a i {
  display: block !important;
  line-height: 1 !important;
  font-size: 18px !important;
  color: #ffffff !important;
}

.soc svg,
a.hs-social-icon-link svg,
.hs_cos_wrapper_type_social_sharing a svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: #ffffff !important;
  transform: translateY(1px) !important;
}

/* ==========================================================================
   HOVER OVERRIDES (Crushing HubSpot's default gray hover)
   ========================================================================== */
.soc:hover, 
a.soc:hover, 
a.hs-social-icon-link:hover,
.hs_cos_wrapper_type_social_sharing a:hover {
  background-color: #A02025 !important; /* Light red/maroon hover */
  transform: scale(1.15) !important;
}

.header a:not(.soc):not(.hs-social-icon-link):hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Ensure nothing else underneath can inject a background color onto the list items */
.header ul li:hover,
.hs_cos_wrapper_type_social_sharing li:hover {
    background: pink !important;
    background-color: transparent !important;
}


@media screen and (min-width: 768px) {
    #courtesy-menu li.soc a:hover {
        background: #A02025;
        text-decoration: none;
    }