.elementor-widget-nav-menu .elementor-nav-menu .elementor-item{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--dropdown .elementor-item, .elementor-widget-nav-menu .elementor-nav-menu--dropdown  .elementor-sub-item{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS *//* ABOUTME: Header part CSS: the bar layout, the primary nav-menu items, the Resources submenu card and the compact header CTA; heights, shrink and the drawer are C5.3's. */

/* Everything is scoped under .elementor-location-header, because this document loads on every page. Elementor Pro's nav-menu stylesheet sets
   padding and hover colours at up to (0,3,1) and the submenu's own colours at (0,2,0), so each rule here wins on specificity, with four
   or five classes. Selectors come from Pro's widget: .elementor-nav-menu--main, .elementor-item, .elementor-sub-item, .elementor-item-active,
   .highlighted (SmartMenus) and .sub-menu. */

/* ---------- Bar layout ---------- */
/* Elementor V4 gives flex children a shared width, so the logo, nav and actions each took a third of the bar and the nav's items ran into the actions.
   From the drawer breakpoint up the logo and actions size to their content and the nav takes what is left between them; below it the nav is
   hidden and the actions column keeps its share, with its controls at its far end so the bar's right gutter matches the logo's. The doubled
   class lifts these over the atomic per-element rules without !important. */
.elementor-location-header .ffdh-header.ffdh-header > .ffdh-header-actions {
  justify-content: flex-end;
}
.elementor-location-header .ffdh-header-actions > * {
  flex: 0 0 auto;
  width: auto;
}
@media (min-width: 1081px) {
  .elementor-location-header .ffdh-header.ffdh-header > * {
    flex: 0 0 auto;
    width: auto;
  }
  .elementor-location-header .ffdh-header.ffdh-header > .ffdh-header-nav {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
  }
  /* The drawer toggle is hidden at this width, but its wrapper still held a flex slot and a gap. */
  .elementor-location-header .ffdh-header-actions > :has(.ffdh-drawer-toggle) {
    display: none;
  }
}
/* Between the drawer breakpoint and a wide desktop the six items need tighter sides to share the bar with the logo and the CTA; just above the
   breakpoint (up to 1199px) tighter still, or the last item runs into the CTA. The items keep their 44px height. */
@media (min-width: 1081px) and (max-width: 1279px) {
  .elementor-location-header .ffdh-header-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
    padding-inline: var(--sp-3);
  }
}
@media (min-width: 1081px) and (max-width: 1199px) {
  .elementor-location-header .ffdh-header-nav .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
    padding-inline: var(--sp-2);
  }
}

/* ---------- Top-level items ---------- */
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu {
  flex-wrap: nowrap;
  gap: var(--sp-1);
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
  min-height: 44px;
  padding-block: 0;
  padding-inline: var(--sp-4);
  border-radius: var(--r-pill);
  color: var(--c-ink-900);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.25;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.highlighted {
  background: var(--c-fuchsia-50);
  color: var(--c-fuchsia-700);
}
/* The current page is marked by an underline as well as colour, so it survives for anyone who cannot tell the two inks apart. The weight
   stays put: a heavier current item would nudge its neighbours. */
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item[aria-current="page"] {
  color: var(--c-fuchsia-700);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus-visible,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-sub-item:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--ring);
}

/* ---------- Resources submenu: a card ---------- */
/* Pro gives the submenu a 12em width, a zero border and its links an 8px transparent start border; the card restates each. The card sits one step below
   its item, and the pseudo-element bridges that gap so the pointer does not close the menu on the way down. No overflow clip: it would cut the focus ring. */
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu {
  width: max-content;
  min-width: 16rem;
  margin-top: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-md);
  font-size: 1rem;
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(var(--sp-2) * -1);
  height: var(--sp-2);
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item {
  min-height: 44px;
  padding-block: var(--sp-2);
  padding-inline: var(--sp-4);
  border-inline-start: 0;
  border-radius: var(--r-md);
  color: var(--c-ink-900);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:focus,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item[aria-current="page"] {
  background: var(--c-fuchsia-50);
  color: var(--c-fuchsia-700);
}
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item.elementor-item-active,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Compact header CTA ---------- */
/* C2's primary pill is 48px tall with 32px sides, sized for a page body; the bar wants the nav's 44px rhythm. Display is left to C5.3, which hides it below 480px. */
.elementor-location-header .ffdh-header-actions .ffdh-btn-primary {
  min-height: 44px;
  padding-block: var(--sp-2);
  padding-inline: var(--sp-5);
  white-space: nowrap;
}

/* ---------- Forced colors ---------- */
/* The pill backgrounds vanish in this mode, so hover and focus keep a system-colour outline. */
@media (forced-colors: active) {
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:hover,
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item:focus,
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:hover,
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item:focus {
    outline: 2px solid Highlight;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item,
  .elementor-location-header .elementor-nav-menu--main .elementor-nav-menu .sub-menu a.elementor-sub-item {
    transition: none;
  }
}/* End custom CSS */