/* Layout */

.header__container {
  position: relative;
}

.header__wrapper {
  display: flex;
  margin: 0 auto;
  align-items: center;
}

/* The site-wide ".dnd-section > .row-fluid, .content-wrapper, .header__wrapper"
   rule caps this at 1200px, which isn't enough room for the full nav plus the
   location selector and phone number without wrapping. Same specificity as
   that shared rule, so !important is needed to reliably win regardless of
   stylesheet load order. Widens just the header, not the shared site-wide
   content width used elsewhere on the page. */
.header .header__wrapper {
  max-width: 1500px !important;
}

.header__top {
  padding: 0.7rem 0;
}

.header__bottom {
  padding: 2.1rem 0;
}

@media (max-width: 767px) {
  .header__top {
    display: none;
  }

  .header__bottom {
    padding: 2.1rem 20px;
  }
}

/* Layout - left */

.header__container--left .header__language-switcher-col {
  margin-left: auto;
}

.header__container--left .header__wrapper--bottom {
  justify-content: space-between;
}

.header__menu-location-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.header__container--left .header__menu-col {
  text-align: right;
}

[dir='rtl'] .header__container--left .header__menu-col {
  margin-right: auto;
  margin-left: 0;
  text-align: left;
}

.header__container--left .header__button-col {
  margin-left: 0.4rem;
}

.header__button-col .header__button {
  white-space: nowrap;
}

@media (min-width: 767px) {
  .header__container--left .header__logo-col {
    flex: 0 0 auto;
  }

  .header__container--left .header__menu-location-group {
    flex: 0 1 auto;
  }
}

/* Layout - centered */

.header__container--centered .header__button-col {
  margin-left: auto;
}

.header__container--centered .header__wrapper--bottom {
  flex-wrap: wrap;
  text-align: center;
}

.header__container--centered .header__logo-col {
  width: 100%;
  margin-bottom: 1.4rem;
}

.header__container--centered .header__menu-col {
  width: 100%;
}

@media (max-width: 767px) {
  .header__container--centered .header__wrapper--bottom {
    justify-content: space-around;
    text-align: left;
  }

  .header__container--centered .header__logo-col,
  .header__container--centered .header__menu-col {
    width: auto;
    margin-bottom: 0;
  }
}

/* Language switcher */

.header__language-switcher {
  position: relative;
  cursor: pointer;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

/* Language switcher - top level menu item */

.header__language-switcher-label {
  display: flex;
}

.header__language-switcher-current-label {
  display: flex;
  margin-bottom: 5px;
  margin-left: 0.5rem;
  align-items: center;
}

.header__language-switcher-child-toggle svg {
  height: 15px;
  width: 15px;
  margin-left: 0.35rem;
}

/* Language switcher - submenu */

.header__language-switcher .lang_list_class {
  position: absolute;
  z-index: 99;
  top: 100%;
  right: 0;
  left: auto;
  display: block;
  width: 200px;
  padding: 0;
  border-style: solid;
  border-width: 1px;
  opacity: 0;
  text-align: left;
  transform: none;
  visibility: hidden;
}

.header__language-switcher-label--open .lang_list_class,
.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  visibility: visible;
}

.header__language-switcher .lang_list_class:after,
.header__language-switcher .lang_list_class:before {
  content: none;
}

.header__language-switcher .lang_list_class li {
  padding: 0;
  border: none;
  margin: 0;
}

.header__language-switcher .lang_list_class li:first-child {
  padding-top: 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.header__language-switcher .lang_list_class .lang_switcher_link {
  display: inline-flex;
  width: 100%;
  padding: 0.7rem 1rem;
}

@media (max-width: 767px) {
  .header__language-switcher .lang_list_class {
    position: static;
    display: none;
    width: 100%;
    border: none;
  }

  .header__language-switcher-label--open .lang_list_class {
    display: block;
  }

  .header__language-switcher-current-label {
    display: block;
    width: 80%;
    padding: 0.7rem 0 0.7rem 1rem;
    margin: 0;
    order: 1;
  }

  .header__language-switcher .globe_class {
    height: auto;
    width: 100%;
  }

  .header__language-switcher-label {
    display: flex;
    flex-wrap: wrap;
  }

  .hs_cos_wrapper_type_language_switcher {
    width: 100%;
  }
}

/* Language switcher - icons */

@media (max-width: 767px) {
  .header__language-switcher-child-toggle,
  .header__language-switcher-child-toggle:hover,
  .header__language-switcher-child-toggle:focus,
  .header__language-switcher-child-toggle:active {
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    padding: 10px 30px;
    border: 0;
    cursor: pointer;
  }

  .header__language-switcher-child-toggle svg {
    margin-left: 0;
  }

  .header__language-switcher-child-toggle--open svg {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.4s;
  }
}

/* Logo */

.header__logo img {
  height: auto;
  max-width: 100%;
}

/* Menu */

.header__menu-container--mobile {
  display: none;
}

.header__menu--mobile {
  position: absolute;
  z-index: 99;
  top: 100%;
  right: 0;
  display: none;
  width: 100%;
}

@media (max-width: 767px) {
  .header__menu--desktop {
    display: none;
  }

  .header__menu-container--mobile {
    display: block;
  }

  .header__menu--show {
    display: block;
  }
}

/* Menu items */

.header__menu-item {
  position: relative;
  display: inline-flex;
}

@media (max-width: 767px) {
  .header__menu-item {
    display: block;
    width: 100%;
    text-align: left;
  }

  [dir='rtl'] .header__menu-item {
    text-align: right;
  }

  .header__menu-link {
    display: block;
    width: 100%;
    padding: 0.7rem 1rem;
  }

  .header__menu-item--has-submenu .header__menu-link {
    width: 80%;
  }
}

/* Menu items - top level */

.header__menu-item--depth-1 {
  padding: 0 0.3rem;
}

.header__menu--desktop .header__menu-wrapper {
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767px) {
  .header__menu-item--depth-1 {
    padding: 0;
  }
}

/* Menu items - submenus */

.header__menu-submenu {
  position: absolute;
  z-index: 99;
  top: 100%;
  left: -1px;
  display: none;
  width: 200px;
  border-style: solid;
  border-width: 1px;
  text-align: left;
}

[dir='rtl'] .header__menu-submenu {
  text-align: right;
}

.header__menu-item--open > .header__menu-submenu {
  display: block;
}

.header__menu-item--depth-1:last-child > .header__menu-submenu {
  right: 0;
  left: auto;
}

.header__menu-submenu--level-3 {
  top: 0;
  left: 100%;
}

/* prettier-ignore */
.header__menu-item--depth-1:nth-last-child(-n + 2) .header__menu-submenu--level-3 {
  top: 0;
  right: 100%;
  left: auto;
}

.header__menu-submenu .header__menu-item {
  width: 100%;
  background-color: inherit;
}

.header__menu-submenu .header__menu-link {
  display: inline-flex;
  padding: 0.7rem 1rem;
}

/* Non-selectable group headings inside a HubDB-sourced grouped dropdown
   (see render_link_item's is_grouped_dropdown branch in module.html) */

.header__menu-group-heading {
  width: 100%;
  padding: 0.5rem 1rem 0.25rem 0;
  cursor: default;
  background-color: inherit;
}

.header__menu-group-heading:not(:first-child) {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.header__menu-item--grouped > .header__menu-link {
  padding-left: 1.5rem;
}

.header__menu-group-heading span {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.55;
  {% if module.styles.menu.drop_downs.text.font_color.color %}
    color: ;
  {% endif %}
}

.header__menu-item--depth-3 > .header__menu-link {
  margin-left: 10px;
}

.header__menu-item--depth-4 > .header__menu-link {
  margin-left: 20px;
}

.header__menu-item--depth-5 > .header__menu-link,
.header__menu-item--depth-6 > .header__menu-link,
.header__menu-item--depth-7 > .header__menu-link,
.header__menu-item--depth-8 > .header__menu-link,
.header__menu-item--depth-9 > .header__menu-link,
.header__menu-item--depth-10 > .header__menu-link {
  margin-left: 30px;
}

.header__menu-item--button {
  padding: 0.7rem 1rem;
}

@media (max-width: 767px) {
  /* prettier-ignore */
  .header__menu-submenu,
  .header__menu-submenu--level-3,
  .header__menu-item--depth-1:nth-last-child(-n + 2) .header__menu-submenu--level-3 {
    position: static;
    width: 100%;
    border: none;
  }
}

/* Menu icons */

@media (min-width: 767px) {
  .header__menu-submenu .header__menu-child-toggle {
    padding: 0.7rem 1rem;
    margin-left: auto;
  }

  [dir='rtl'] .header__menu-submenu .header__menu-child-toggle {
    margin-right: auto;
    margin-left: 0;
  }
}

.header__menu-child-toggle svg {
  height: 15px;
  width: 15px;
  margin-left: 0.35rem;
}

[dir='rtl'] .header__menu-child-toggle svg {
  margin-right: 0.35rem;
  margin-left: 0;
}

.header__menu-toggle {
  display: none;
}

.header__menu-toggle svg {
  height: 30px;
  width: 30px;
}

@media (max-width: 767px) {
  .header__menu-child-toggle,
  .header__menu-child-toggle:hover,
  .header__menu-child-toggle:focus,
  .header__menu-child-toggle:active {
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    min-width: 75px;
    padding: 10px 30px;
    border: 0;
    cursor: pointer;
  }

  [dir='rtl'] .header__menu-child-toggle,
  [dir='rtl'] .header__menu-child-toggle:hover,
  [dir='rtl'] .header__menu-child-toggle:focus,
  [dir='rtl'] .header__menu-child-toggle:active {
    right: auto;
    left: 0;
  }

  .header__menu-child-toggle svg {
    margin-left: 0;
  }

  .header__menu-child-toggle--open svg {
    transform: rotate(180deg);
    transform-origin: 50% 50%;
    transition: transform 0.4s;
  }

  .header__menu-toggle--show {
    display: block;
  }
}

/* Location selector + phone — styled to match the regular nav menu items.
   module.html also pipes module.styles.menu.* fields onto these same
   classes (in case those style fields ever get configured in Design
   Manager), but as of 2026-08-20 that field group is unset on the live
   header instance, so the "Locations" nav item's actual look comes from
   theme-level defaults this module doesn't have field access to. The
   values below are hardcoded to the real computed styles measured live
   off ".header__menu-link" (top level) and
   ".header__menu-submenu .header__menu-link" (dropdown item) on
   trusthouse.care so this matches today regardless of that field gap. */

.header__location-phone-col {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  white-space: nowrap;
}

.header__location-selector {
  position: relative;
}

.header__location-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  white-space: nowrap;
}

.header__location-trigger[disabled] {
  cursor: default;
}

.header__location-trigger svg {
  height: 10px;
  width: 10px;
  fill: currentColor;
}

.header__location-label,
.header__phone-link {
  white-space: nowrap;
  color: rgb(81, 84, 95);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}

/* Matches .header__menu-item--depth-1 > .header__menu-link:hover in
   theme-overrides.css (real rendered values, pulled from the live inline
   style block — not guessed). font-weight stays 400 on hover too — the
   real "LOCATIONS" link never changes weight, only color + underline
   (confirmed via a real :hover on the live page, not a synthetic event —
   an earlier version of this rule wrongly dropped hover to 400 from a
   500 base, which read as a font swap since 500 was never the real base
   weight to begin with).

   Prefixed with ".header" (3 class-level selectors instead of 2): the
   theme's own ".header a:not(.button){color:#51545F}" rule has
   specificity (0,0,2,1) — one more than a bare ".header__phone-link:hover"
   (0,0,2,0) thanks to its "a" type selector — so without this it silently
   won on :hover and the color never changed (confirmed live: text-decoration
   flipped to underline but color stayed gray until this was added). The
   real LOCATIONS hover rule never hit this because it already had 3
   class-level selectors of its own. */
.header .header__location-trigger:hover .header__location-label,
.header .header__phone-link:hover {
  color: #000;
  text-decoration: underline;
}

/* IMPORTANT: on desktop, HubSpot's real "Locations" dropdown is not the
   element theme-overrides.css styles — a page-level "HEADER PORTAL FIX"
   script hides that element and clones its contents into a
   position:fixed .hs-portal-submenu div appended to <body>, which carries
   its own separate (much plainer) styling. Values below are read directly
   off that live portal element, not off the hidden original — that's the
   only way to match what visitors actually see. */
.header__location-panel {
  position: absolute;
  z-index: 99;
  top: 100%;
  left: -1px;
  display: block;
  width: 180px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #9aa0a6;
  background-color: #fff;
}

.header__location-panel[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .header__location-panel {
    position: static;
    width: 100%;
    border: none;
    background-color: transparent;
    padding: 8px 0 8px 14px;
  }

  /* The trigger row + phone link had no padding of their own on mobile,
     unlike every other top-level item (whose padding lives on
     .header__menu-link: 18px 0 18px 16px, from the site's "MOBILE NAV
     FIX" head snippet). That left this row visibly cramped against its
     neighbors — putting the padding on the shared <li> instead of on
     each child keeps SERVING/phone stacked tight against each other
     while still matching the outer spacing of every other row. */
  .header__menu-item--phone-button {
    box-sizing: border-box;
    padding: 18px 0 18px 16px;
  }

  .header__location-selector,
  .header__phone-link {
    display: block;
  }

  .header__phone-link {
    margin-top: 0.35rem;
  }

  /* Every top-level mobile row was carrying TWO separate divider rules at
     once — the theme's own "border-top: 1px solid #51545F" plus the site's
     "MOBILE NAV FIX" head snippet's "border-bottom: 1px solid
     rgba(0,0,0,.08)" — both identical across every item by CSS value, but
     visually rendering at noticeably different darkness row to row
     (confirmed by pixel-sampling a real screenshot: 82-204 out of 255
     across different rows) because each boundary is actually two
     overlapping 1px borders from adjacent items, and how they antialias
     together shifts with each row's fractional pixel height. Collapsing
     to a single solid border removes the double-line blend entirely
     instead of just re-coloring both halves. Qualified with
     ".header__menu--mobile" for specificity (2 classes) so it reliably
     wins over both single-class site rules regardless of their position
     in the page's <head>. */
  .header__menu--mobile .header__menu-item--depth-1 {
    border-top: none;
    border-bottom: 1px solid #000;
  }

  /* The CTA button row is the one exception: it's meant to have no
     divider below it at all (MOBILE NAV FIX already sets its
     border-bottom: none on purpose) — this only needs to re-silence the
     border-top the rule above doesn't touch by itself here, since the
     more specific ".header__menu--mobile .header__menu-item--depth-1"
     selector above already set border-bottom on it too and must be
     undone for this one item. */
  .header__menu--mobile .header__menu-item--button {
    border-bottom: none;
  }
}

.header__location-option {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  white-space: nowrap;
  color: rgb(81, 84, 95);
  font-family: 'Antona - Body Font';
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
}

/* The real portal dropdown has NO hover effect at all on its items
   (confirmed: .hs-portal-submenu a:hover is an empty rule) — only the
   currently-selected market gets a highlight, which is functionality this
   selector needs that Locations doesn't (it has no persistent selection). */
.header__location-option[aria-current="true"] {
  text-decoration: none;
  background-color: #f5f5f5;
}

/* Mobile dropdown options need their own font override — the desktop
   values above (Antona - Body Font, 16px, uppercase) match the desktop
   ".hs-portal-submenu" clone, but the real mobile "Locations" submenu
   (NEW YORK / PALM BEACH, under .header__menu-submenu) uses a mostly
   different set of values (real computed styles, not guessed): Montserrat,
   14px, weight 500, letter-spacing 0.42px, padding 12px 0. Uppercase is
   kept (unlike the real submenu, which is lowercase) and the panel's own
   left padding is 14px (not the real submenu's 30px) — both explicit
   client requests, not measured-parity choices.

   Selector is qualified with ".header__location-panel" (2 classes instead
   of 1) rather than relying on source order: HubSpot's CSS bundler merges
   every "@media (max-width: 767px)" block in this file into one, at the
   position of the FIRST such block — which sits earlier in this file,
   before the base ".header__location-option" rule. That silently put this
   override before the base rule in the compiled output regardless of
   where it was written here, so the unscoped base rule always won
   (confirmed live: computed style stayed 16px/uppercase/Antona at mobile
   widths until this was added). Extra specificity fixes it regardless of
   final bundled order. */
@media (max-width: 767px) {
  .header__location-panel .header__location-option {
    padding: 12px 0;
    font-family: Montserrat, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.42px;
    text-transform: uppercase;
  }
}