:root {
  
  /* ---- STATIC VARIABLR (Global Header Module) ---- */
  --nav-font-family-heading: "Questa Sans";
  --nav-global-transition: all 0.4s ease;
  --
  
}

/* Because the header bar + header hat is fixed, this is to push down the body content of every page in the website. */
#main-content {
  margin-top: var(--header-offset, 0px);
}

nav.hhs-top-bar {
  box-shadow: 0px 8px 10px -10px rgba(0, 0, 0, 0.3); /* Adding box shadow to seperate the header nav bar from the background colour of the page */ 
}

.mega-con-wrapper {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

/* Menu Item that exist at the header navigation bar */
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children > a [class*="mega-drop-"] {
  margin-right: 15px !important;
  padding: 0 10px;
  font-family: var(--nav-font-family-heading);
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: var(--nav-link-color);
  transition: var(--nav-global-transition);
}

.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children:hover > a [class*="mega-drop-"],
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children > a:focus-visible [class*="mega-drop-"],
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children > a.mega[aria-expanded="true"] [class*="mega-drop-"],
.hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children > a [class*="mega-drop-"]:hover {
  color: var(--nav-link-color-hover) !important;
  transition: var(--nav-global-transition);
}

/* Sub menu title that exist at the dropdown full length  */
.hs-item-has-children .title {
  font-family: var(--nav-font-family-heading);
  font-size: 22px;
  font-weight: 500;
  line-height: 34px;
}

/* ============================================================
   SEARCH COMPONENT
   Field-driven search rules (accent colour, X icon) live inline in
   module.html and reference --mega-link-color.
   ============================================================ */

/* Full-width search overlay. It's always laid out as a fixed bar across the top of
   the viewport; in the resting state it sits hidden just above the top edge and slides
   down into view when .search-active is set (and back up when it's removed). Because it
   fully covers the header while open, the underlying header components are left visible
   underneath rather than hidden. */
.hhs-top-bar .hs-search-field {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	box-sizing: border-box;
	/* Cover exactly the header (hat + bar). --header-offset is the header's live bottom
	   edge — measured + kept in sync by mega-menu-v2.js from the real height/spacing of
	   the hat + bar. Content is vertically centred, so the overlay tracks that height
	   instead of a hard-coded value; horizontal padding stays fixed. */
	min-height: var(--header-offset, 80px);
	padding: 0 40px;
	background: var(--header-bg-color);
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 60;
	opacity: 0;
	/* Same bottom shadow as nav.hhs-top-bar so the white overlay separates from the page
	   instead of blending into it (both share the page background colour). */
	box-shadow: 0px 8px 10px -10px rgba(0, 0, 0, 0.3);
	transform: translateY(-100%);
	transition: var(--nav-global-transition);
}

.hhs-top-bar.search-active .hs-search-field {
	opacity: 1;
	transform: translateY(0);
	transition: var(--nav-global-transition);
}

.hhs-top-bar .hs-search-field__bar {
	width: 80%;
	max-width: 1000px;
}

.hhs-top-bar .hs-search-field__bar form {
 height: 100%;
}

/* Positioning context for absolutely-positioned header descendants */
.hhs-top-bar .hhs-nav-grid { position: relative; }

/* The toggle button (its own stacking context). The search overlay sits above it
   while open, so it's covered rather than clickable during search. */
.hhs-top-bar .top-bar-search  { position: relative; z-index: 50; }

.top-bar-search {
	border: 0;
	background: none;
	padding: 4px;
	display: inline-block;
	margin-top: 0px;
	cursor: pointer;
  margin-right: 5px;
  display: flex;
  align-items: center;
}

/* Input look (pill + magnifier) is keyed on the base, not .search-active, so the
   magnifier and padding stay put while the overlay slides up to collapse instead of
   blinking out the instant the class is removed. The overlay is hidden when closed. */
.hhs-top-bar .hs-search-field__input {
  width: 100%;
  border-radius: 100px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: left 20px center;
  background-size: 18px 18px;
  backdrop-filter: blur(2px);
  padding: 12px 28px 12px 52px !important;
}

/* Dedicated close (X) button — last sibling in the overlay, sits far right. Always
   rendered (the overlay itself is hidden via the parent when collapsed), so it rides
   the slide-up with the rest of the bar instead of disappearing on close. */
.hhs-top-bar .hs-search-field__close {
  display: flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 4px;
  cursor: pointer;
}
.hhs-top-bar .hs-search-field__close svg {
  fill: var(--nav-link-color);
  transition: var(--nav-global-transition);
  margin-right: 10px;
}
.hhs-top-bar .hs-search-field__close svg:hover {
  fill: var(--nav-link-color-hover);
}

/* ---- MOBILE (< 1200px): drop the overlay UNDER the header bar ----
   The header bar stays visible on mobile, so instead of covering it the overlay opens
   as a panel directly below it (top = the header's live bottom edge) and reveals with a
   max-height slide rather than a transform — that way it only ever grows downward and
   never overlaps/sits above the header (no z-index fight with the non-positioned bar). */
@media (max-width: 1199px) {
  .hhs-top-bar .hs-search-field {
    top: var(--header-offset, 0px);
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    padding: 12px 16px;
    transform: none;
    /* ease-OUT (fast start) + a cap kept close to the real field height keeps the
       max-height "dead zone" (cap above content = no visible movement) tiny and front-
       loaded, so the collapse starts immediately instead of pausing. The cap still has
       headroom over the field so it never clips. */
    transition: max-height 0.4s ease-out, visibility 0s linear 0.4s;
  }
  .hhs-top-bar.search-active .hs-search-field {
    max-height: 80px;
    transform: none;
    transition: max-height 0.4s ease-out, visibility 0s;
  }

  /* The real logo is already in the header bar, so hide the overlay's duplicate. */
  .hhs-top-bar .hs-search-field .hhs-header-logo { display: none; }

  /* Field fills the row; the close button moves INSIDE the bar on the right, mirroring
     the magnifier on the left, instead of being a separate far-right element. */
  .hhs-top-bar .hs-search-field__bar {
    width: 100%;
    max-width: none;
  }
  .hhs-top-bar .hs-search-field__input {
    padding-right: 48px !important;
  }
  .hhs-top-bar .hs-search-field__close {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
}

/* Sidebar open: hide the search button; the hamburger (now an X) becomes the close
   control with a "Close" label beside it. Everything resets when the sidebar closes. */
.hhs-top-bar.sidebar-open .top-bar-search { display: none; }

/* "Close" label sits next to the X; hidden until the sidebar is open. The toggle centres
   its items (align-items: center on .hhs-menu-toggle) and the active X is centred in its
   own icon box, so the label lines up with the cross without any manual nudge. */
.hhs-menu-toggle__label {
  display: none;
  margin-right: 8px;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--nav-font-family-heading);
  line-height: 1;
  color: var(--nav-link-color);
  transition: var(--nav-global-transition);
}
/* The whole toggle (label + X) is one click target, so show the pointer across it. */
.hhs-top-bar.sidebar-open .hhs-menu-toggle { cursor: pointer; }
.hhs-top-bar.sidebar-open .hhs-menu-toggle__label { display: inline-block; }
/* Hover the toggle: the "Close" label takes the nav link hover colour, matching the menu links. */
.hhs-top-bar.sidebar-open .hhs-menu-toggle:hover .hhs-menu-toggle__label {
  color: var(--nav-link-color-hover);
}

/* ============================================================
   SIDEBAR (mobile slide-in menu)
   Field-driven sidebar colours (bg, link, icon) live inline in
   module.html and reference the --side-* variables.
   ============================================================ */


.hhs-side-menu {
	position: fixed;
	max-height: 100vh;
	/* Start directly below the header (hat + nav). --header-offset is measured + set by JS
	   so the drawer never covers the header hat / header bar. */
	top: var(--header-offset, 0px);
	bottom: 0;
	z-index: 20;
	overflow-y: auto;
	right: -100%;
	transition: all 0.5s ease-in-out;
}

.page-editor .hhs-side-menu {
	height: 0px; 
}

.hhs-side-menu.is-open {
	right: 0;
}

.body-wrapper.nav-is-open  {
	overflow-y: hidden;
}

/* Shared page overlay: a 20% black dim below the header, shown whenever a panel is open
   (sidebar drawer, search overlay, or mega dropdown) and faded out when they all close.
   Fixed so it tracks the viewport when scrolled. While visible it captures pointer events,
   so a click on the dim is caught by the document-click handler (mega-menu-v2.js) and
   collapses the open panel. The header stays above (top starts at the header's live edge). */
.body-wrapper::after {
	content: '';
	position: fixed;
	top: var(--header-offset, 0px);
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	background-color: var(--nav-overlay-color);
	transition: var(--nav-global-transition);
}

.body-wrapper.nav-is-open::after,
.body-wrapper:has(.hhs-top-bar.search-active)::after,
.body-wrapper:has(.mega-menu.active)::after {
	opacity: 1;
	pointer-events: auto;
}

.hhs-side-menu__ctas {
	padding: 1.88em 2em 0em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 50px;
}

.hhs-side-menu__text {
	padding: 0em 2em 0em;
}

.hhs-side-menu__ctas .hhs-header-cta {
	float: left;
	margin: 0 1em 0 0;
}

/* Side-menu CTAs + the phone (relocated here from the hat) on mobile. */
@media (max-width: 1199px) {
  .hhs-side-menu__ctas div.hhs-header-hat__phone {
    white-space: nowrap;
    gap: 10px;
  }
  .hhs-side-menu__ctas .hhs-header-hat__phone-number {
    font-size: var(--hat-text-font-size-mobile);
  }
  .hhs-head-cta-1 {
    margin-right: 0 !important;
  }
  .hhs-side-menu .hhs-head-cta-1 a.cta-secondary {
    font-size: var(--cta-font-size-mobile) !important;
    padding: var(--cta-padding-tb-mobile) var(--cta-padding-rl-mobile) !important;
  }
}

.hs-menu-flow-vertical .hhs-nav-links {
	display: block;
}

.hs-menu-wrapper.hs-menu-flow-vertical>ul li a {
	padding: 0 0.2em !important;
	max-width: 100%;
	width: 100%;
  overflow: visible;
}

.hhs-side-menu__mobile {
	padding: 0 2em;
}

/* Side-menu item spacing + top separators (client design). */
.hhs-side-menu__mobile li {
  margin: 0;
}
.hhs-side-menu__mobile li.hs-menu-depth-1 {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid rgba(25, 48, 76, 0.05);
}
.hhs-side-menu__mobile li.hs-menu-depth-2 {
  padding-top: 25px;
}
.hhs-side-menu__mobile li.hs-menu-depth-1 li.hs-menu-depth-2 li {
  padding-top: 6px;
  padding-bottom: 6px;
}

.hhs-side-menu__mobile .sc-site-header__menu {
	padding-bottom: 1em;
}

.hhs-nav-links {
	margin: 0 !important;
  vertical-align: bottom;
}

.hs-menu-wrapper.hs-menu-flow-vertical>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
	font-size: 0.88em;
	display: block;
	visibility: visible;
	opacity: 1;
	position: static;
	background: none;
	padding-left: 0 !important;
	padding-top: 0 !important;
}

/* Accordion: max-height is driven inline by JS (to the real scrollHeight) for a smooth
   open AND close at any content height, incl. nested submenus. CSS only declares the
   transition + the collapsed baseline; the .is-open class handles fade + spacing. */
.hhs-side-menu .hs-menu-flow-vertical>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
	max-height: 0;
	overflow: hidden;
  opacity: 0;
	transition: max-height 350ms ease, opacity 250ms ease, margin-top 300ms ease;
  -webkit-transition: max-height 350ms ease, opacity 250ms ease, margin-top 300ms ease;
  background-color: transparent !important;
}

.hhs-side-menu .hs-menu-flow-vertical>ul li.hs-item-has-children ul.hs-menu-children-wrapper.is-open {
  opacity: 1;
  margin-top: 5px;
}

/* Sidebar: submenus expand only via the + toggle (.is-open). Kill the inherited
   .flyouts hover behaviour that reveals (and overlaps) children on mouse hover. */
.hhs-side-menu .hs-menu-flow-vertical>ul li.hs-item-has-children:hover>ul.hs-menu-children-wrapper {
	position: static;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
}
.hhs-side-menu .hs-menu-flow-vertical>ul li.hs-item-has-children:hover>ul.hs-menu-children-wrapper.is-open {
	opacity: 1;
}

/* Accordion parent row: the label and the chevron are siblings laid out in a row and
   vertically centred. The chevron is in-flow (no longer absolutely positioned), so it
   tracks the text's centre automatically and stays aligned however the row's
   padding/spacing is adjusted. */
.hhs-side-menu__mobile li.hs-item-has-children > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hhs-sidebar-nav-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
	border: 0;
	background: none;
	font-size: 1rem;
	line-height: 1;
	-webkit-transition: var(--nav-global-transition);
	-moz-transition: var(--nav-global-transition);
	-ms-transition: var(--nav-global-transition);
	-o-transition: var(--nav-global-transition);
	transition: var(--nav-global-transition);
  margin: 0;
  padding: 0;
}

/* Chevron points down when collapsed; rotates to point up when expanded (smooth). */
.hhs-sidebar-nav-toggle.is-open > * {
	transform: rotate(180deg);
	-webkit-transition: var(--nav-global-transition);
	-moz-transition: var(--nav-global-transition);
	-ms-transition: var(--nav-global-transition);
	-o-transition: var(--nav-global-transition);
	transition: var(--nav-global-transition);
}

/* Sidebar: misc + controls */
.hhs-side-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children>a:after {
  content: '' !important;
}


.hhs-side-menu .sc-site-header__menu.hs-menu-flow-vertical {
	overflow: initial;
	height: auto;
}

.hhs-side-menu span {
	display: inline;
}


.hhs-side-menu .hs-menu-wrapper.hs-menu-flow-vertical li a {
  white-space: inherit;
}

/* ----------------------------------------------------------------------------
   < 576px: the drawer goes full-width (set inline via --hbg-menu-width → 100%).
   The hosted parent CLEAN theme ALSO ships this rule, which is what wrecks the
   drawer on small screens:
       @media (max-width: 568px){ .hs-menu-wrapper, .hs-menu-wrapper * { width:100% } }
   It forces width:100% onto EVERY descendant of the menu — the <a>, the label
   span, the chevron button and its <svg> — so the row blows apart. We can't edit
   the parent, so override it here: scope to .hhs-side-menu (specificity beats the
   parent's `.hs-menu-wrapper *`) + !important. Structural blocks (ul / li / a)
   stay full width; the inline row pieces are reset back to their content width.
   ---------------------------------------------------------------------------- */
@media (max-width: 575px) {
  /* Structural blocks: full width, left-aligned, never floated/centred. */
  .hhs-side-menu .sc-site-header__menu.hs-menu-flow-vertical,
  .hhs-side-menu .hhs-nav-links,
  .hhs-side-menu .hhs-nav-links > li,
  .hhs-side-menu .hhs-side-menu__mobile li a {
    width: 100% !important;
    float: none !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* Undo the parent's width:100% on the inline row pieces so they size to content
     (otherwise the label and the chevron/icon each stretch to the full row width). */
  .hhs-side-menu .hhs-nav-links__label,
  .hhs-side-menu .hhs-sidebar-nav-toggle,
  .hhs-side-menu .hhs-sidebar-nav-toggle svg {
    width: auto !important;
  }

  /* Accordion row keeps its flex layout so the chevron stays centred beside the label. */
  .hhs-side-menu__mobile li.hs-item-has-children > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* Chevron keeps its in-flow, centred box (not absolutely positioned/floated). */
  .hhs-side-menu .hhs-sidebar-nav-toggle {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   TOP BAR NAV + HAMBURGER (structure)
   Field-driven nav colours/spacing live inline in module.html.
   ============================================================ */

 .hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
	max-width: none !important;
	vertical-align: bottom;
  padding: 5px 0;
  position: relative;
}

.hhs-top-bar .mega-menu .hs-menu-wrapper > ul > li > ul:before {
	content: '';  
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children>a {
  display:flex;
  align-items:center;
}

.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children>a svg {
  margin-left:4px !important;
  width: 10px;
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1 {
 position: relative; 
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1:hover:after {
 width: 100%;
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1.active:after,
.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1.active-branch:after,
.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1:after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: 4px;
    width: 0;
    height: 2px;
    transition: var(--nav-global-transition);
}
.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1.active:after,
.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-menu-depth-1.active-branch:after{
 width: 100%;
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal .mega-menu ul li.hs-menu-depth-1:after {
 height: 0; 
}

/* NEW HAMBURGER TOGGLE */

.hhs-menu-toggle {
	padding-right: 1em;
  position: relative;
	display: flex;
	align-items: center;
	z-index: 40;
}

.hamburger-icon {
	width: 1.6em;
	height: 1em;
	position: relative;
	display: block;
	margin: auto;
}

.hhs-top-bar .hhs-menu-toggle .hamburger-icon .line {
	display: block;
	background: var(--nav-link-color);
	width: 1.6em;
	height: 3px;
	position: absolute;
	left: 0;
	border-radius: 0.025em;
	transition: var(--nav-global-transition);
	border-radius: 1em;
}
.hamburger-icon .line.line-1 {
	top: 0;
}
.hamburger-icon .line.line-2 {
	top: 50%;
}
.hamburger-icon .line.line-3 {
	top: 100%;
}


/* Cross both lines onto the icon box's vertical centre (0.5em, minus half the 3px line)
   so the X is centred in its box rather than sitting low. Keeps the hamburger→X morph
   centred and lets the "Close" label flex-align to it cleanly. */
.hamburger-icon.active .line-1 {
	transform: translateY(calc(0.5em - 1.5px)) translateX(0) rotate(45deg);
}
.hamburger-icon.active .line-2 {
	opacity: 0;
}
.hamburger-icon.active .line-3 {
	transform: translateY(calc(-0.5em - 1.5px)) translateX(0) rotate(-45deg);
}

.hhs-top-bar .hhs-menu-toggle:hover .hamburger-icon .line {
	background: var(--nav-link-color-hover);
}


.hhs-nav-grid {
	display: flex;
	align-items: center;
}

.hhs-nav-grid__extras {
	display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 230px;
}

/* ============================================================
   MENU BADGES
   Injected by applyMenuBadges() (mega-menu-v2.js) next to matching menu items in the
   mega panel + sidebar. Shape/spacing live here; per-badge text + background colours are
   set inline from the "Menu Badges" fields.
   ============================================================ */
.hhs-menu-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

/* ============================================================
   PRIMARY DROPDOWN MENU (structure)
   Field-driven dropdown colours live inline in module.html.
   ============================================================ */

.hhs-menu-button {
	border: 0;
	background: none;
	display: inline-block;
	cursor: pointer;
}

.sc-site-header__menu .hs-menu-children-wrapper {
	padding: 0.33em 0 !important;
}

.sc-site-header__menu .hs-menu-item.hs-menu-depth-2 {
	width: 100%;
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
 padding: 10px 0px; 
}



.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
 visibility: hidden;
  opacity: 0;
}


.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
  max-width: 250px;
  width: max-content;
  line-height: 1;
  -webkit-box-shadow: 0 0 4px 4px rgba(0,0,0,0.05);
  box-shadow: 0 0 4px 4px rgba(0,0,0,0.05);
}

.hs-menu-wrapper.hs-menu-flow-horizontal .mega-menu ul li.hs-item-has-children ul.hs-menu-children-wrapper {
  -webkit-box-shadow: 0 0 0px 0px rgba(0,0,0,0.0);
  box-shadow: 0 0 0px 0px rgba(0,0,0,0.0);
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper li a {
  line-height: 1.5;
  width: auto !important;
  padding: 10px 20px 10px 10px;
}

/* ============================================================
   ACCESSIBILITY — keyboard-nav dropdown reveal
   ============================================================ */

/* Only show 1st-level dropdown on keyboard nav */
body.user-is-tabbing .hs-menu-item.hs-menu-depth-1:focus-within > .hs-menu-children-wrapper {
  opacity: 1;
  visibility: visible;
}

/* Show 2nd-level dropdown on keyboard nav */
body.user-is-tabbing .hs-menu-item.hs-menu-depth-2:focus-within > .hs-menu-children-wrapper {
  opacity: 1;
  visibility: visible;
}

/* Show 3rd-level dropdown (if needed) */
body.user-is-tabbing .hs-menu-item.hs-menu-depth-3:focus-within > .hs-menu-children-wrapper {
  opacity: 1;
  visibility: visible;
}


/* ============================================================
   CMS PREVIEW FIX
   ============================================================ */

/*
* CMS Preview Fixes
*/

.hhs-top-bar div.hs_cos_wrapper_type_cta {
	display: inline; 
}



/* ============================================================
   MEGA MENU (structure)
   Field-driven mega colours/size live inline in module.html.
   ============================================================ */

/*
* MEGA MENU STYLE 
*/

.mega-menu {
	left: 0; 
	position: fixed;
	width: 100%;
	padding:15px;
	z-index: 30;
	box-shadow: 0 4px 5px 0 rgba(0,0,0,0.1);
}

.mega-menu.active {
	opacity: 1;
	visibility: visible; 
	pointer-events: inherit;
	max-height: 10000px;
	padding: 50px 0; 
}

.mega-menu::before {
	content: '';
	width: 100%;
	display: block;
	background: transparent;
	position: absolute;
  pointer-events: auto;
}

.mega-menu.mega-scrolled {
	top: 55px; 
}


.mega-menu .hs-menu-wrapper.hs-menu-flow-vertical.flyouts>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
	left: auto;
	top: auto;
	visibility: visible;
	opacity: 1;
	position: static; 
}

.mega-menu .hs-menu-wrapper.hs-menu-flow-vertical > ul {
	margin-bottom: 0px; 
}

.mega-menu .hs-menu-wrapper.hs-menu-flow-vertical>ul li a,
.mega-menu .widget-type-post_listing ul li a{
	padding: 2px 0px !important;
	width: auto !important;
	white-space: normal;
	text-indent: inherit;
}
.mega-menu .key-menu .hs-menu-wrapper.hs-menu-flow-vertical>ul li:first-child a {
	padding: 0px 0px !important;
	width: auto !important;
}


.mega-menu .hs-menu-wrapper.hs-menu-flow-vertical > ul li.hs-menu-depth-2 > a {
	font-size: .9em;
	padding-left: 5px;
}

.hhs-top-bar .mega-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li{
 margin-top: 5px;
 margin-bottom: 5px;
}

.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal .mega-menu .hs-menu-flow-vertical ul li a,
.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal .mega-menu .widget-type-post_listing ul li a{
	text-transform: none !important;
	font-weight: normal !important;
	display: block;
	clear: both;
}

.hhs-top-bar .mega-nav-con .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
	padding-bottom: 5px;
}

.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal .mega-menu .key-menu.hs-menu-flow-vertical ul li:first-child a {
	line-height: 1em; 
}

.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal .mega-menu>ul li a {
	font-weight: normal !important; 
}

.hs-menu-wrapper.hs-menu-flow-horizontal .mega-menu ul li.hs-item-has-children>a:after {
	display: none !important;
}

.hs-menu-wrapper.hs-menu-flow-horizontal .mega-menu ul li.hs-item-has-children ul.hs-menu-children-wrapper {
	display: block;
	opacity: 1;
	visibility: visible;
	position: static;
}


.mega-text-con {
	white-space: normal; 
}
.mega-text-con ul {
	padding-left: 20px !important; 
}
.mega-text-con li {
	list-style-type: disc; 
	width: 100%;
}

@media (max-width: 1199px){
	.mega-menu.active {
		display: none !important;
		opacity: 0;
	}
	.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a span {
		padding: 0px !important; 
	}
	.header-container-wrapper .container-fluid .mega-menu {display: none !important;}
	.header-container-wrapper .container-fluid .row-fluid .mega-menu {
		display: none;
		opacity: 0;
		visibility: hidden;
	}
}

.mega-nav-con .hs-menu-item {
	width: 100%;
}

.mega-nav-con .hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children ul.hs-menu-children-wrapper {
	display: block;
	width: 100%;
	visibility: visible;
	opacity: 1;
	position: static;
	background: none;
}

.mega-nav-con .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
	padding: 0.33em 0;
}

[class^=mega-drop].loaded::before {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: -20px;
  top: 0;
}

.hs-menu-wrapper.hs-menu-flow-horizontal>ul li.hs-item-has-children>a .mega-menu svg {
 width: auto !important; 
}
/** MEGA MENU STYLE **/

.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li .mega-menu a {
	color: #555555 !important;
	padding: 5px;
	text-transform: none;
}

.hhs-top-bar .hs-menu-wrapper.hs-menu-flow-horizontal>ul li .mega-menu a {
  white-space: normal !important;
}


/* ============================================================
   LOGO + NAV (show / hide)
   ============================================================ */

/* OLDER NAV CSS - NEED TO REMOVE UNNEEDED CSS */

.hhs-nav {
	padding-right: 0 !important;
	padding-left: 0 !important;
}

/** LOGO HIDE/SHOW **/
.hhs-alt-nav .hhs-header-logo .logo-sticky,
.hhs-header-logo .logo-standard {
	display: block;
}

.hhs-alt-nav .hhs-header-logo .logo-standard,
.hhs-header-logo .logo-sticky {
	display: none;
}

.hhs-header-logo.fixed-width {
  width: 230px;
}

.hhs-header-logo,
.hhs-nav-opt-items {
	display: table-cell;
	vertical-align: middle;
}

.hhs-header-logo {
	position: relative;
	z-index: 40;
}

.hhs-header-menu {
	float: right !important;
}

.hhs-header-cta {
	float: right;
	z-index: 40;
	position: relative;
  display: flex;
}
  
.hhs-head-cta-1 {
  margin-right: 15px;
}

.hhs-header-mod .hs-menu-wrapper.hs-menu-flow-horizontal > ul li.hs-item-has-children ul.hs-menu-children-wrapper li {
	width: 100%;
	display: block;
	clear: both;
}

.hhs-header-hat {
	position: relative;
	z-index: 40;
}

/* Inner row: the header-width container lays the three groups out left-to-right with
   space between; kill the grid clearfix pseudo-elements. */
.hhs-header-hat__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.hhs-header-hat__inner:before,
.hhs-header-hat__inner:after {
  content: none;
}

.hhs-header-hat__inner .hhs-header-hat__location,
.hhs-header-hat__inner .hhs-header-hat__reviews,
.hhs-header-hat__inner .hhs-header-hat__phone {
  width: 200px;
}

/* Shared hat text: location state, review score, phone number. */
.hhs-header-hat__location-state,
.hhs-header-hat__reviews-score,
.hhs-header-hat__phone-number {
  color: var(--hat-text-color);
  text-align: center;
  font-size: var(--hat-text-font-size);
  font-weight: var(--hat-text-font-weight);
}

.hhs-header-hat__location {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: var(--nav-global-transition);
  text-transform: uppercase;
}
.hhs-header-hat__location:hover,
.hhs-header-hat__location:hover > .hhs-header-hat__location-state {
  color: var(--hat-text-color-hover);
  cursor: pointer;
}

.hhs-header-hat__reviews, .hhs-header-hat__reviews div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hhs-header-hat__reviews {
  gap: 12px;
}

/* Phone (the same block is reused in the side-menu CTAs — see SIDEBAR section). */
.hhs-header-hat__phone {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.hhs-header-hat__phone-button {
  width: var(--hat-phone-button-size);
  height: var(--hat-phone-button-size);
  border: none;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  cursor: pointer;
  background-color: var(--hat-phone-button-color);
  transition: var(--nav-global-transition);
}
.hhs-header-hat__phone-button:hover {
  transform: scale(1.1);
}
.hhs-header-hat__phone-button img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}


@media (max-width: 1199px) {
  /* < 1200px: reorder the review widget; the hat's own phone is hidden (it moves into the
   side-menu CTAs instead — those rules live in the SIDEBAR section). */
  .hhs-header-hat__reviews-stars { order: 1; }
  .hhs-header-hat__reviews-score { order: 2; }
  .hhs-header-hat__reviews-logo  { order: 3; }
  
  .hhs-header-hat div.hhs-header-hat__reviews {
    justify-content: flex-end;
  }

  .hhs-header-hat div.hhs-header-hat__phone {
    display: none;
  }
}

.hhs-header-hat .col-12 {
	padding-left: 0px;
	padding-right: 0px;
}

.hhs-header-hat .col-12 * {
 margin-bottom: 0px; 
}

.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a span {
	padding: 10px 0;
}



/* Current-page menu item: no hover affordance. */
.hs-menu-children-wrapper .hs-menu-item.active{
	background-color: transparent !important;
	cursor: default !important;
}

@media (max-width: 922px){
	.hhs-nav {
		position: relative;
	}
	.hhs-nav-opt-items {
		padding-right: 40px;
	}
	.hhs-header-menu .hs-menu-wrapper.hs-menu-flow-horizontal>ul li a {
		padding: 0px 15px;
	}
	.hhs-header-logo {
		position: relative;
		z-index: 40;
	}
	.hamburger {
		padding-top: 10px;
	}
}

@media (max-width: 575px){
	nav {
		transition: var(--nav-global-transition);
	}
	.hhs-header-mod .hhs-nav {
		padding-top: 25px;
	}
}