/* =============================================
   NAVBAR / HEADER  (shared across every page)
   - Full-screen menu overlay (hamburger target)
   - Sticky scroll navbar (homepage)
   - Light-blue page header + tabs (inner pages)
   Load order: base.css → nav.css → page css
   ============================================= */

/* ---------- Menu overlay ---------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.4);          /* dims the rest of the page behind the panel */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0;     /* full page width — panel is edge-to-edge, only the bottom shows the page */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
  overflow-y: auto;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity 0.3s ease, visibility 0s 0s;
}
.menu-overlay__inner {
  width: 100%;
  max-width: none;
  background: white;
  /* match the hero/navbar padding so the logo + close icon line up with the
     closed-state logo + hamburger (no jump on open/close) */
  padding: clamp(32px, 4vw, 60px) var(--pad) 40px;
  display: flex;
  flex-direction: column;
  /* height follows content — panel is not full-height on desktop */
}
/* opened from the sticky navbar (16px top padding) → match its height so the
   logo + close icon stay exactly where the navbar logo + hamburger were */
.menu-overlay--sticky .menu-overlay__inner { padding-top: 16px; }
/* opened from an inner-page header (.cf-header) → match its top padding so the
   logo + close icon stay exactly where the header logo + hamburger were */
.menu-overlay--header .menu-overlay__inner { padding-top: clamp(28px, 4vw, 50px); }
.menu-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
.menu-overlay__logo img { height: 68px; width: auto; }
.menu-overlay__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  line-height: 0;
  border-radius: 4px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.menu-overlay__close:hover { background: #f0f0f0; }
.menu-overlay__body {
  display: flex;
  flex: 1;
  gap: 40px;
  margin-top: 20px;
}
.menu-overlay__left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 10px;
}
.menu-overlay__right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.menu-overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 3.6vw, 52px);
}
.menu-nav-link {
  font-size: 36px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--black);
  text-decoration: none;
  transition: color 0.2s;
}
.menu-nav-link:hover { color: var(--blue-1); }
.menu-contact__email {
  font-size: 20px;
  line-height: 1.5;
  color: #333;
  margin-bottom: 28px;
}
.menu-contact__email a { color: #006cb5; text-decoration: none; }
.menu-contact__cols { display: flex; gap: 34px; }
.menu-contact__col {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  min-width: 140px;
}
.menu-contact__region {
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 8px;
  color: #0061a9;
}
.menu-overlay__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  margin-top: 30px;
  border-top: 1px solid #e0e0e0;
}
.menu-bottom__social {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 16px;
  color: #333;
}
.menu-bottom__social img { display: inline-block; width: 21px; height: 21px; }
.menu-bottom__social a { line-height: 0; }
.menu-bottom__copy { font-size: 12px; line-height: 16px; color: #222222; }

/* ---------- Sticky scroll navbar (homepage) ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transform: translateY(-100%);
  transition: transform 0.35s ease;
}
.navbar.is-visible { transform: translateY(0); }
.navbar__logo img { height: 68px; width: auto; }
.navbar__menu {
  background: none;
  border: none;
  cursor: pointer;
  width: 41px;
  height: 41px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 4px;
}
.navbar__menu span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--black);
  border-radius: 2px;
}

/* ---------- Light-blue page header + tabs (inner pages) ---------- */
.cf-header {
  background: var(--integ-bg);
  padding: clamp(28px, 4vw, 50px) var(--pad) clamp(40px, 5vw, 60px);
}
.cf-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cf-header__logo img { height: 68px; width: auto; }
.cf-header__menu {
  background: none; border: none; cursor: pointer;
  width: 39px; height: 39px; display: flex; flex-direction: column;   /* match homepage hero burger */
  justify-content: center; gap: 6px; padding: 4px;
}
.cf-header__menu span { display: block; width: 100%; height: 3px; background: #000; border-radius: 2px; }
.cf-header__title {
  font-size: var(--fs-header);   /* 53.33 / 42 / 32 */
  line-height: 1.2;
  font-weight: 400;
  color: #000;
  margin: clamp(48px, 7vw, 100px) 0 clamp(20px, 2.5vw, 30px);
}
/* Tabs scroll horizontally (swipeable) instead of wrapping to a new line.
   Vertical padding/negative margin gives the active tab's shadow room without
   shifting the layout. */
.cf-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 8px;
  margin-block: -8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* old Edge */
}
.cf-tabs::-webkit-scrollbar { display: none; }   /* Chrome/Safari */

/* Full-bleed to the screen edges so the last tab visibly bleeds off-edge,
   hinting that the row can be swiped. Only when tabs sit directly in the header
   (concepts / emr / workshop); products nests them next to the demo button. */
.cf-header > .cf-tabs {
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
}
.cf-tab {
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font);
  font-size: 18px; line-height: 1.2; font-weight: 400; color: #000;
  background: transparent;
  border: 1px solid #000;
  border-radius: 999px;
  padding: 13px 26px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cf-tab--active { background: #fff; border-color: #fff; }
.cf-tab__sub { color: #8a93a6; }
.cf-tab:hover:not(.cf-tab--active) { background: rgba(255,255,255,0.5); }
a.cf-tab { text-decoration: none; display: inline-flex; align-items: center; }   /* tabs are now links */

/* Floating "Request a Demo" CTA — sticky at the bottom-right of every inner
   page, matching the homepage (.cta-btn lives in home.css for the homepage). */
.cta-btn {
  position: fixed;
  right: clamp(16px, 3vw, 40px);
  bottom: clamp(16px, 3vw, 40px);
  z-index: 400;            /* above content, below the menu overlay (500) */
  display: inline-block;
  background: var(--blue-cta);
  color: #fff;
  border: 1px solid var(--blue-cta);
  border-radius: 999px;
  padding: 13px 30px;
  font-size: 15px;
  line-height: 1.2;
  font-family: var(--font);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  white-space: nowrap;
}
.cta-btn:hover {
  background: #44a3b4;
  border-color: #44a3b4;
  transform: translateY(-2px);
}

/* ---------- Responsive ---------- */
@media (max-width: 870px) {

  .cf-header {
  padding-top: 15px;
}

  /* menu overlay — full screen on mobile, header aligned to the sticky navbar (no jump) */
  .menu-overlay { background: white; padding: 0; }
  .menu-overlay__inner { max-width: none; min-height: 100vh; padding: 16px var(--pad) 40px; }
  .menu-overlay--header .menu-overlay__inner { padding-top: 15px; }   /* match .cf-header mobile top padding */
  .menu-overlay__logo img {  width: 191px;
        height: 44px; }
  .menu-overlay__close { padding: 3px; }
  .menu-overlay__body { flex-direction: column; gap: 32px; margin-top: 28px; }
  .menu-overlay__left { justify-content: flex-start; }
  /* shrink contact info on mobile so nav links keep visual priority */
  .menu-overlay__left .menu-contact__email { font-size: 15px; margin-bottom: 20px; }
  .menu-overlay__left .menu-contact__region { font-size: 15px; }
  .menu-overlay__left .menu-contact__col { font-size: 13px; }
  .menu-overlay__right { align-items: flex-start; order: -1; }   /* nav links before the contact info */
  .menu-overlay__nav { align-items: flex-start; }
  .menu-nav-link { font-size: 26px; line-height: 44px; }
  .menu-contact__cols { flex-direction: column; gap: 24px; }
  .menu-overlay__bottom { flex-direction: column; align-items: flex-start; }
  /* sticky navbar */
  .navbar__logo img {  width: 191px;
        height: 44px; }
  .navbar__menu { width: 30px; height: 30px; gap: 5px; }
  .navbar__menu span { height: 2px; }
  /* page header */
  .cf-header__logo img {  width: 191px;
        height: 44px; }
  /* burger stays the homepage hero size (39px) on mobile too — no shrink */
}
@media (max-width: 760px) {

  .menu-overlay__inner {
 
      padding-top: 15px;
  /* height follows content — panel is not full-height on desktop */
}

  .cf-header__title { font-size: 32px; margin-top: 40px; }
  .cf-tabs { gap: 12px; }
  .cf-tab { font-size: 14px; padding: 11px 18px; }
}
@media (max-width: 480px) {
  .menu-nav-link { font-size: 22px; line-height: 38px; }
}