/* ==========================================================================
   HEADER ACTIONS & LAYOUT STRUCTURE
   ========================================================================== */

/* 1. Target the master HubSpot parent area holding your menus */
.custom-header-right, 
.header-right-container, /* Adjust to match your parent wrap wrapper class if known */
#courtesy-menu-parent { 
  display: flex;
  flex-direction: column;    /* Stack the phone/button row on top, social row on bottom */
  align-items: flex-start !important;     /* Snap everything perfectly to the left side */
  gap: 12px;                 /* Clean vertical breathing room between rows */
}



/* ==========================================================================
   PUSHING DOWN & ALIGNING THE HUBSPOT SOCIAL MODULE
   ========================================================================== */

/* Target HubSpot's default custom social wrapper module wrapper */
.hs_cos_wrapper_type_social_sharing {
  display: flex !important;
  justify-content: flex-start!important; /* Forces the entire row of circles right */
  margin-top: 5px !important;            /* Extra fine-tuning to push them downward */
  padding: 0 !important;
}

/* Ensure the list item containers inside HubSpot's module don't add ghost heights */
.hs_cos_wrapper_type_social_sharing ul,
.hs_cos_wrapper_type_social_sharing li {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
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;
    }