/* Mednition Nav 2026 v1.1 (amplifi.studio)
   1. Desktop (>=1201px), html.mn26-wide only (staging): the header row spans the full viewport with a fluid side gutter.
      Production does not set mn26-wide, so its desktop header is untouched.
   2. <=1200px (Elementor's tablet breakpoint on this site): the Max Mega Menu toggle opens a
      full-screen menu (#mn26) instead of the Max Mega Menu slide-out.
   Brand: Instrument Sans, orange #FF8800, charcoal #222 / text #333, neutral #E6EBED.
   Motion: one easing, transform / opacity / clip-path only, staggered rows, reduced-motion = fades. */

:root { --mn26-g: clamp(20px, 3.4vw, 64px); }

/* ---------------------------------------------------------------- desktop: full-width header row */
html.mn26-wide .elementor-location-header .page-header { padding-left: 0 !important; padding-right: 0 !important; }

@media (min-width: 1201px) {
  html.mn26-wide .elementor-location-header .page-header > .elementor-container {
    max-width: none !important; width: 100% !important;
    padding-left: calc(var(--mn26-g) - 10px) !important; padding-right: var(--mn26-g) !important;
  }
  html.mn26-wide .elementor-location-header .page-header > .elementor-container > .elementor-column:nth-child(1) { width: auto !important; flex: 0 0 auto !important; }
  html.mn26-wide .elementor-location-header .page-header > .elementor-container > .elementor-column:nth-child(2) { width: auto !important; flex: 1 1 auto !important; min-width: 0; }
  html.mn26-wide .elementor-location-header .page-header > .elementor-container > .elementor-column:nth-child(3) { width: auto !important; flex: 0 0 auto !important; }
  html.mn26-wide .elementor-location-header .page-header > .elementor-container > .elementor-column:nth-child(1) .elementor-widget-image { width: auto !important; max-width: none !important; }
  /* The mega panel keeps its original 690px width and stays anchored under the nav cluster (right edge = Contact). */
  html.mn26-wide #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu {
    left: auto !important; right: 0 !important; width: min(690px, 100%) !important;
  }
}

/* ---------------------------------------------------------------- <=1200: the header toggle */
@media (min-width: 992px) and (max-width: 1200px) {
  html.mn26-on #mega-menu-wrap-menu-1 > ul.mega-menu { display: none !important; }
  /* At this width the header column holds Book a Demo + the menu shortcode, which Elementor stacks
     (Book a Demo on its own line, toggle under it). Lay them out on one row like the phone header. */
  html.mn26-on .elementor-location-header .page-header .elementor-widget-shortcode { width: auto !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; }
  html.mn26-on .elementor-location-header .page-header .elementor-widget-shortcode #mega-menu-wrap-menu-1 > .mega-menu-toggle { display: flex !important; }
  html.mn26-on .elementor-location-header .page-header .elementor-column:nth-child(2) > .elementor-widget-wrap { flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-end !important; }
}
@media (max-width: 1200px) {
  html.mn26-wide .elementor-location-header .page-header > .elementor-container {
    padding-left: calc(var(--mn26-g) - 10px) !important; padding-right: calc(var(--mn26-g) - 10px) !important;
  }
  html.mn26-on #mega-menu-wrap-menu-1 { background: transparent !important; }
  /* Max Mega Menu's own list: hidden once nav.js has taken over the toggle (below 992px it is an
     off-canvas list, so hiding it moves nothing). Between 992 and 1200 it would otherwise wrap inline. */
  html.mn26-ready #mega-menu-wrap-menu-1 > ul.mega-menu { display: none !important; }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle {
    display: flex !important; align-items: center; justify-content: flex-end; height: 40px !important; line-height: 40px;
    background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle .mega-toggle-blocks-left,
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle .mega-toggle-blocks-center { display: none !important; }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle .mega-toggle-blocks-right,
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle .mega-toggle-block { display: flex !important; align-items: center; height: 40px; margin: 0 !important; }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle button.mega-toggle-animated {
    position: relative !important; display: block !important; width: 44px !important; height: 44px !important;
    margin: -2px -10px -2px 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; /* 44px target inside the original 40px row */
    background: transparent !important; box-shadow: none !important; cursor: pointer; overflow: visible !important; }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle button.mega-toggle-animated:hover { background: transparent !important; }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle .mega-toggle-animated-box { display: none !important; }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle button.mega-toggle-animated::before,
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle button.mega-toggle-animated::after {
    content: ""; position: absolute; right: 10px; height: 2px; border-radius: 2px; background: #222;
    transition: width .4s cubic-bezier(.22,1,.36,1); }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle button.mega-toggle-animated::before { top: 17px; width: 24px; }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle button.mega-toggle-animated::after { top: 25px; width: 15px; }
  @media (hover: hover) {
    html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle button.mega-toggle-animated:hover::after { width: 24px; }
  }
  html.mn26-on #mega-menu-wrap-menu-1 > .mega-menu-toggle button.mega-toggle-animated:focus-visible { outline: 2px solid #FF8800; outline-offset: 2px; }
}

/* ---------------------------------------------------------------- the full-screen menu */
.mn26, .mn26 * { box-sizing: border-box; }
.mn26 {
  --o: #FF8800; --ink: #222; --text: #333; --muted: #6b7075; --line: rgba(34,34,34,.09); --neutral: #E6EBED;
  --tint: rgba(255,136,0,.14); --ease: cubic-bezier(.22,1,.36,1);
  --pl: max(var(--mn26-g), env(safe-area-inset-left, 0px)); --pr: max(var(--mn26-g), env(safe-area-inset-right, 0px));
  position: fixed; inset: 0; z-index: 2147483000; font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; text-align: left; }
.mn26[hidden] { display: none !important; }
@media (min-width: 1201px) { .mn26 { display: none !important; } }

.mn26 ul, .mn26 li { list-style: none; margin: 0; padding: 0; }
.mn26 p { margin: 0; }
.mn26 img { display: block; max-width: 100%; height: auto; border: 0; }
.mn26 a { text-decoration: none !important; }
.mn26 button { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent;
  font: inherit; color: inherit; text-transform: none; letter-spacing: inherit; box-shadow: none; }

/* Sheet: a top-down curtain (clip-path) so nothing slides sideways or shifts the page. */
.mn26__sheet { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff;
  clip-path: inset(0 0 100% 0); transition: clip-path .4s cubic-bezier(.55,0,.75,.2); }
.mn26.is-open .mn26__sheet { clip-path: inset(0 0 0 0); transition: clip-path .62s var(--ease); }
.mn26.is-instant .mn26__sheet, .mn26.is-instant .mn26__in, .mn26.is-instant .mn26__close span { transition: none !important; }

.mn26__top { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: env(safe-area-inset-top, 0px) var(--pr) 0 var(--pl);
  border-bottom: 1px solid transparent; transition: border-color .25s ease; }
.mn26.is-scrolled .mn26__top { border-bottom-color: var(--line); }
.mn26 .mn26__logo { display: flex; align-items: center; min-height: 44px; color: var(--ink) !important; font-weight: 600; font-size: 20px; }
.mn26 .mn26__logo img { width: 150px; }

.mn26 button.mn26__close { position: relative; flex: 0 0 44px; width: 44px; height: 44px; margin-right: -4px; border-radius: 50%;
  background: #F3F5F6; cursor: pointer; transition: background-color .2s ease; }
.mn26 button.mn26__close:hover, .mn26 button.mn26__close:focus { background: var(--neutral); color: inherit; }
.mn26__close span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px; background: var(--ink);
  transform: rotate(0) scaleX(.2); opacity: 0; transition: transform .5s var(--ease) .2s, opacity .2s ease .2s; }
.mn26.is-open .mn26__close span:first-child { transform: rotate(45deg); opacity: 1; }
.mn26.is-open .mn26__close span:last-child { transform: rotate(-45deg); opacity: 1; }

.mn26__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: 6px var(--pr) 28px var(--pl); }
.mn26__inner { width: 100%; }

/* Top-level rows */
.mn26__group { border-bottom: 1px solid var(--line); }
.mn26 a.mn26__top-link, .mn26 button.mn26__toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%;
  min-height: 66px; padding: 10px 0; cursor: pointer; text-align: left;
  font: 500 clamp(24px, 6.2vw, 32px)/1.15 "Instrument Sans", system-ui, sans-serif; letter-spacing: -.012em; color: var(--ink) !important; }
.mn26 button.mn26__toggle:hover, .mn26 button.mn26__toggle:focus { background: transparent; color: var(--ink) !important; }
.mn26 .mn26__chev { flex: 0 0 auto; color: var(--muted); transition: transform .5s var(--ease), color .25s ease; }
.mn26 .mn26__toggle[aria-expanded="true"] .mn26__chev { transform: rotate(180deg); color: var(--o); }
.mn26 a.mn26__top-link:active, .mn26 button.mn26__toggle:active { opacity: .65; }
@media (hover: hover) { .mn26 a.mn26__top-link:hover { color: var(--o) !important; } }

/* Accordion */
.mn26__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.mn26__group.is-open > .mn26__sub { grid-template-rows: 1fr; }
.mn26__subin { overflow: hidden; min-height: 0; }
.mn26__group.is-open > .mn26__sub > .mn26__subin { padding-bottom: 18px; }
.mn26__kid { opacity: 0; transform: translateY(-6px); transition: opacity .25s ease, transform .35s var(--ease); }
.mn26__group.is-open .mn26__kid { opacity: 1; transform: none; transition: opacity .35s ease, transform .5s var(--ease);
  transition-delay: calc(80ms + var(--j, 0) * 26ms); }

/* About / Discover children */
.mn26__kids a { display: flex; align-items: center; min-height: 46px; padding: 6px 0;
  font: 500 17px/1.3 "Instrument Sans", system-ui, sans-serif; color: var(--text) !important; transition: color .2s ease; }
.mn26__kids a:focus-visible { color: var(--o) !important; }
@media (hover: hover) { .mn26__kids a:hover { color: var(--o) !important; } }

/* Hospital Solutions mega content */
.mn26 a.mn26__all { display: flex; width: fit-content; align-items: center; gap: 8px; min-height: 46px; margin: 0 0 4px;
  font: 600 16px/1.2 "Instrument Sans", system-ui, sans-serif; color: var(--ink) !important; }
.mn26 a.mn26__all .mn26__arrow { color: var(--o); transition: transform .3s var(--ease); }
@media (hover: hover) { .mn26 a.mn26__all:hover .mn26__arrow { transform: translateX(3px); } }
.mn26__eyebrow { margin: 14px 0 6px !important; font: 600 13px/1.3 "Instrument Sans", system-ui, sans-serif; letter-spacing: .02em; color: var(--muted); }
.mn26__sols { display: grid; grid-template-columns: 1fr; column-gap: 28px; }
.mn26 a.mn26__sol { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 0;
  font: 500 17px/1.3 "Instrument Sans", system-ui, sans-serif; color: var(--text) !important; transition: color .2s ease; }
.mn26 .mn26__ic { display: grid; place-items: center; color: var(--ink); }
.mn26 .mn26__ic svg, .mn26 .mn26__ic img { display: block; width: 24px; height: 24px; object-fit: contain; overflow: visible; }
.mn26 .mn26__sol .mn26__ic { flex: 0 0 28px; width: 28px; height: 28px; transition: color .2s ease; }
.mn26 a.mn26__sol:focus-visible, .mn26 a.mn26__sol:focus-visible .mn26__ic { color: var(--o) !important; }
@media (hover: hover) { .mn26 a.mn26__sol:hover, .mn26 a.mn26__sol:hover .mn26__ic { color: var(--o) !important; } }
.mn26__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px !important; }
.mn26 a.mn26__card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; height: 100%; min-height: 108px;
  padding: 14px 12px 12px; border-radius: 12px; background: var(--tint);
  font: 600 15px/1.2 "Instrument Sans", system-ui, sans-serif; color: var(--ink) !important; transition: background-color .2s ease; }
.mn26 .mn26__card .mn26__ic { justify-content: start; }
.mn26 .mn26__card .mn26__ic svg, .mn26 .mn26__card .mn26__ic img { width: 26px; height: 26px; }
.mn26 a.mn26__card:focus-visible { background: rgba(255,136,0,.24); }
@media (hover: hover) { .mn26 a.mn26__card:hover { background: rgba(255,136,0,.24); } }
@media (min-width: 640px) {
  .mn26__sols { grid-template-columns: 1fr 1fr; }
  .mn26 a.mn26__card { min-height: 118px; padding: 16px; font-size: 17px; }
}

/* Book a Demo: the header's own anchor, restyled for a thumb. v1.1 sits right under the last menu row
   and scrolls with the list (v1.0 pinned it to the bottom of the screen). */
.mn26__cta { padding: 28px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
.mn26 a.mn26__demo, .mn26 a.mn26__demo.btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px;
  margin: 0; padding: 0 24px; border: 0; border-radius: 500px; background: var(--o) !important; color: #fff !important;
  font: 500 18px/1 "Instrument Sans", system-ui, sans-serif !important; letter-spacing: .005em; box-shadow: none;
  transition: background-color .2s ease; }
.mn26 a.mn26__demo:focus-visible { background: #E67A00 !important; color: #fff !important; }
@media (hover: hover) { .mn26 a.mn26__demo:hover { background: #E67A00 !important; color: #fff !important; } }
.mn26 a.mn26__demo:active { background: #E67A00 !important; }

/* Staggered entrance; exit has no delay */
.mn26__in { opacity: 0; transform: translateY(14px); transition: opacity .2s ease, transform .25s var(--ease); }
.mn26.is-open .mn26__in { opacity: 1; transform: none; transition: opacity .5s ease, transform .7s var(--ease);
  transition-delay: calc(150ms + var(--i, 0) * 50ms); }

.mn26 a:focus-visible, .mn26 button:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; border-radius: 6px; }
.mn26 button.mn26__close:focus-visible { border-radius: 50%; }

html.mn26-lock, html.mn26-lock body { overflow: hidden !important; }
/* Floating site widgets (accessibility, cookie re-open, chat re-open, scroll progress) step aside while the menu
   is open. display, not visibility: UserWay's icon children force visibility:visible and painted over the CTA. */
html.mn26-lock .userway_buttons_wrapper, html.mn26-lock #userwayAccessibilityIcon, html.mn26-lock .cky-btn-revisit-wrapper,
html.mn26-lock #hero-chat-reopen-btn, html.mn26-lock #horizontalScrollProgress { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mn26__sheet, .mn26.is-open .mn26__sheet { clip-path: none !important; opacity: 0; transition: opacity .18s linear !important; }
  .mn26.is-open .mn26__sheet { opacity: 1; }
  .mn26__in, .mn26.is-open .mn26__in, .mn26__kid, .mn26__group.is-open .mn26__kid, .mn26__sub, .mn26__close span, .mn26 .mn26__chev {
    transition: opacity .18s linear !important; transition-delay: 0s !important; transform: none !important; }
  .mn26.is-open .mn26__close span:first-child { transform: rotate(45deg) !important; }
  .mn26.is-open .mn26__close span:last-child { transform: rotate(-45deg) !important; }
  .mn26 .mn26__toggle[aria-expanded="true"] .mn26__chev { transform: rotate(180deg) !important; }
}
