/* Encompas header — scoped styles; no theme-wide resets. */
.ec-header {
  --ec-navy: #002b55;
  --ec-blue: #08538a;
  --ec-ice: #edf5fa;
  --ec-ink: #21394c;
  --ec-gutter: clamp(20px, 2.65vw, 76px);
  position: relative;
  z-index: 1000;
  width: 100%;
  max-width: none;
  background: #fff;
  color: var(--ec-ink);
  font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  box-shadow: 0 5px 28px rgb(0 43 85 / 5%);
}
.ec-header *, .ec-header *::before, .ec-header *::after { box-sizing: border-box; }
.ec-header a { color: inherit; text-decoration: none; }
.ec-header button { font: inherit; cursor: pointer; letter-spacing: normal; text-transform: none; }
.ec-header svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.ec-header a:focus-visible, .ec-header button:focus-visible { outline: 3px solid #2e8bbd; outline-offset: 4px; border-radius: 5px; }
.ec-header .ec-utility { min-height: 40px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px var(--ec-gutter); background: var(--ec-navy); color: #fff; font-size: 12px; }
.ec-header .ec-availability, .ec-header .ec-contact, .ec-header .ec-phone, .ec-header .ec-email, .ec-header .ec-language { display: inline-flex; align-items: center; gap: 9px; }
.ec-header .ec-availability { color: #dfedf8; letter-spacing: .025em; }
.ec-header .ec-status { height: 6px; width: 6px; background: #b9d9ed; border-radius: 50%; box-shadow: 0 0 0 4px rgb(185 217 237 / 9%); margin-right: 3px; }
.ec-header .ec-contact { gap: 25px; flex-wrap: wrap; justify-content: flex-end; }
.ec-header .ec-contact a { color: #fff; }
.ec-header .ec-contact a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ec-header .ec-phone { font-weight: 650; letter-spacing: .01em; }
.ec-header .ec-phone-prefix { font-weight: 400; color: #d0e2ef; }
.ec-header .ec-contact svg { width: 14px; height: 14px; }
.ec-header .ec-language { color: #dfedf8; }
.ec-header .ec-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; min-height: 100px; padding: 18px var(--ec-gutter); }
.ec-header .ec-brand { display: inline-flex; align-items: center; width: clamp(200px, 16vw, 264px); max-width: 100%; grid-column: 1; grid-row: 1; }
.ec-header .ec-brand img { display: block; width: 100%; height: auto; margin: 0; }
.ec-header .ec-navigation { display: contents; color: var(--ec-ink); font-family: inherit; }
.ec-header .ec-menu, .ec-header .sub-menu { list-style: none; margin: 0; padding: 0; }
.ec-header .ec-menu { display: flex; align-items: center; justify-content: center; gap: clamp(4px, .5vw, 14px); grid-column: 2; grid-row: 1; }
.ec-header .ec-menu li { list-style: none; margin: 0; padding: 0; position: relative; }
.ec-header .ec-menu > li { display: flex; align-items: center; flex-wrap: wrap; border-radius: 8px; }
.ec-header .ec-menu > li > a { display: block; padding: 13px 10px; font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; border-radius: 7px; transition: background .16s, color .16s; }
.ec-header .ec-menu > li:has(> .ec-sub-toggle) > a { padding-right: 3px; }
.ec-header .ec-menu > li:hover, .ec-header .ec-menu > li.ec-open { background: #f0f6fa; }
.ec-header .ec-menu > li > a:hover, .ec-header .ec-menu > .current-menu-item > a, .ec-header .ec-menu > .current-menu-ancestor > a { color: var(--ec-blue); }
.ec-header .ec-sub-toggle { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ec-blue); width: 30px; min-height: 44px; padding: 0 6px; border-radius: 7px; box-shadow: none; }
.ec-header .ec-sub-toggle svg { width: 12px; height: 12px; transition: transform .16s; }
.ec-header .ec-sub-toggle[aria-expanded="true"] > svg { transform: rotate(180deg); }
.ec-header .ec-portal { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 46px; padding: 12px 19px; border: 1px solid var(--ec-navy); border-radius: 9px; background: var(--ec-navy); color: #fff; font-size: 13px; font-weight: 650; white-space: nowrap; transition: background .16s, box-shadow .16s; }
.ec-header .ec-portal:hover { background: var(--ec-blue); color: #fff; box-shadow: 0 4px 12px rgb(0 43 85 / 12%); }
.ec-header .ec-portal[aria-disabled="true"] { cursor: default; }
.ec-header .ec-mobile-toggle { display: none; }
.ec-header .ec-mobile-top { display: none; }
.ec-header .sub-menu { width: 285px; max-width: calc(100vw - 24px); padding: 12px; background: #fff; color: var(--ec-ink); border: 1px solid #e2ebf1; border-radius: 14px; box-shadow: 0 18px 60px rgb(0 32 62 / 16%); text-align: left; font: inherit; }
.ec-header .sub-menu > li > a { display: block; padding: 12px 13px; color: #28465c; border-radius: 7px; font-size: 14px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.ec-header .sub-menu > li > a:hover, .ec-header .sub-menu > li > a:focus-visible, .ec-header .sub-menu > .current-menu-item > a { background: var(--ec-ice); color: var(--ec-blue); }
.ec-header .sub-menu::before { content: attr(data-title); display: block; padding: 5px 13px 9px; color: #64798a; font-size: 10px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; grid-column: 1 / -1; }
/* The native popover layer escapes clipping/stacking contexts in page builders. */
.ec-header.ec-ready:not(.ec-compact) .sub-menu { position: fixed; inset: auto; z-index: 10002; margin: 0; overflow-y: auto; overscroll-behavior: contain; }
.ec-header.ec-ready:not(.ec-compact) .sub-menu.ec-wide:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; width: 560px; }
.ec-header .sub-menu[hidden], .ec-header .ec-navigation[hidden] { display: none !important; }
.ec-header .sub-menu::backdrop, .ec-header .ec-navigation::backdrop { background: transparent; }
/* Progressive fallback: links remain usable if JavaScript is unavailable. */
.ec-header:not(.ec-ready) .ec-bar { grid-template-columns: 1fr; }
.ec-header:not(.ec-ready) .ec-brand { grid-row: auto; }
.ec-header:not(.ec-ready) .ec-navigation { display: block; }
.ec-header:not(.ec-ready) .ec-menu { flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
.ec-header:not(.ec-ready) .ec-menu > li { display: block; }
.ec-header:not(.ec-ready) .sub-menu { box-shadow: none; }
.ec-header:not(.ec-ready) .ec-portal { margin-top: 15px; }
.ec-header .ec-setup-note { padding: 15px; background: var(--ec-ice); color: var(--ec-navy); }
.ec-header.ec-compact .ec-bar { min-height: 82px; grid-template-columns: minmax(0, 1fr) auto; padding-top: 15px; padding-bottom: 15px; gap: 16px; }
.ec-header.ec-compact .ec-brand { width: 224px; }
.ec-header.ec-compact .ec-mobile-toggle, .ec-header .ec-mobile-close { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 9px 13px; border: 1px solid #dce7ef; border-radius: 8px; background: #fff; color: var(--ec-navy); font-size: 13px; font-weight: 600; }
.ec-header.ec-compact .ec-mobile-toggle { grid-column: 2; grid-row: 1; }
.ec-header.ec-compact .ec-navigation { display: block; position: fixed; inset: auto; margin: 0; width: auto; max-width: none; padding: 18px max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: #fff; border: 0; border-top: 1px solid #e7eff4; border-radius: 0 0 16px 16px; box-shadow: 0 22px 45px rgb(0 32 62 / 18%); overflow-y: auto; overscroll-behavior: contain; z-index: 10001; }
.ec-header.ec-compact .ec-mobile-top { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; color: #64798a; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.ec-header.ec-compact .ec-menu { display: block; }
.ec-header.ec-compact .ec-menu > li { display: grid; grid-template-columns: minmax(0, 1fr) 48px; background: transparent; border-radius: 0; border-bottom: 1px solid #e8eff4; }
.ec-header.ec-compact .ec-menu > li > a { font-size: 17px; padding: 16px 4px; white-space: normal; }
.ec-header.ec-compact .ec-menu > li:not(:has(> .ec-sub-toggle)) > a { grid-column: 1 / -1; }
.ec-header.ec-compact .ec-sub-toggle { width: 44px; min-height: 44px; align-self: center; justify-self: end; background: #f1f6fa; }
.ec-header.ec-compact .ec-sub-toggle svg { width: 16px; height: 16px; }
.ec-header.ec-compact .sub-menu { position: static; display: block; grid-column: 1 / -1; width: 100%; max-width: none; max-height: none !important; margin: 0 0 12px; padding: 6px; border: 0; border-radius: 8px; box-shadow: none; background: #f3f7fa; overflow: visible; }
.ec-header.ec-compact .sub-menu::before { display: none; }
.ec-header.ec-compact .sub-menu > li > a { padding: 13px 14px; font-size: 15px; }
.ec-header.ec-compact .ec-portal { display: flex; width: 100%; margin-top: 22px; min-height: 50px; justify-content: space-between; }
/* These opt-in classes apply only to the Avada header container you label. */
.encompas-header-shell { width: 100% !important; max-width: none !important; padding: 0 !important; overflow: visible !important; position: relative; z-index: 1000 !important; }
.encompas-header-shell > .fusion-builder-row { width: 100% !important; max-width: none !important; margin: 0 !important; }
.encompas-header-shell .fusion-layout-column { margin-top: 0 !important; margin-bottom: 0 !important; }
.encompas-header-shell .fusion-column-wrapper { padding: 0 !important; overflow: visible !important; }
.encompas-header-shell .fusion-text > p:empty { display: none; }
@media (max-width: 700px) {
  .ec-header .ec-utility { justify-content: center; padding-block: 9px; }
  .ec-header .ec-availability, .ec-header .ec-email, .ec-header .ec-language { display: none; }
  .ec-header .ec-contact { justify-content: center; gap: 8px; }
  .ec-header .ec-phone { font-size: 12px; gap: 6px; }
  .ec-header.ec-compact .ec-brand { width: min(210px, 100%); }
  .ec-header.ec-compact .ec-bar { min-height: 78px; }
  .ec-header.ec-compact .ec-mobile-toggle { font-size: 0; gap: 0; padding: 10px; width: 44px; }
  .ec-header.ec-compact .ec-mobile-toggle svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ec-header *, .ec-header *::before, .ec-header *::after { transition: none !important; scroll-behavior: auto !important; } }
