/* Shared styles for Diagity pages: design tokens + site header/nav.
   Linked by homepage.html, client_rwe_designer.html,
   client_interventional_designer.html and contact.html so the header
   lives in one place.

   Header metrics are mirrored from inovia.bio's HubSpot Elevate site
   header (measured via headless Chrome) — tokens/sizes only, not their CSS. */

/* Self-hosted Inter (SIL Open Font License), served from /fonts so no request
   ever reaches Google — this avoids sending visitor IPs to fonts.gstatic.com
   (a GDPR concern) and removes a third-party dependency. latin + latin-ext
   subsets cover the site's copy; regenerate if more glyphs are ever needed. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/inter-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/inter-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/inter-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/inter-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --primary-color: #18233b;
  --secondary-color: #7C67F0; /* pale purple: reserved for accents on dark navy backgrounds (as on inovia.bio) */
  --nicer-blue: #4f38e0;
  --accent-color: #FBB040;
  --background-color: #f7f9fc;
  --text-color: #18233b;
  --input-background: #FFFFFF;
  --input-border-color: #d3dae4;
  --button-hover-color: #4330C4;
  --remove-button-color: #FF5252;
  --remove-button-hover-color: #E53935;
  --font-family: 'Inter', sans-serif;
  --activity-colors: #FBB040, #57C4AD, #a500a5, #FF5252, #8BC34A, #FFC107;
  --nav-text: #09152B;
  --brand-purple: #4F38E0;
  --brand-purple-hover: #4330C4;
  --brand-purple-tint: #d2caff;
  --muted-text: #303f59;
  /* inovia.bio primary CTA hover/active (header pill only) */
  --nav-pill-text: #F7F9FC;
  --nav-pill-hover: #6854E8;
  --nav-pill-active: #4a36ca;
}

/* Full-width sticky bar that centers the inner nav cluster, mirroring
   inovia.bio (a content-width row capped at 1296px, floating centered). */
.container {
  padding: 24px 48px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Inner nav: 3-zone row (logo left, links centered, pill right) capped at
   1296px and centered on the page, mirroring inovia.bio. */
.container .nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1296px;
}

.container .logo {
  /* Cap the flex item at 250px (inovia.bio). flex-grow/shrink off on
     desktop so the logo stays full-size until the hamburger breakpoint —
     matching inovia.bio (>=769px uses flex: 0 0 auto). */
  flex: 0 0 auto;
  max-width: min(250px, 100%);
}

.container .logo a {
  display: flex;
  align-items: center;
  max-width: 100%;
}

/* inovia.bio logo: max-height 75px, max-width 250px (actual render ~59px tall). */
.container .logo a img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 75px;
  object-fit: contain;
}

.container .navbar {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 24px;
  min-width: 0;
}

/* Links take the free space between logo and pill and centre within it.
   Gap tracks inovia.bio (12 → 16 → 32), but Diagity labels are longer and
   have no dropdown chevrons — so we keep the 32px inovia gap only when
   there is room, and drop the chevron-side gutter from link padding. */
.container .navbar ul {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 800px) {
  .container .navbar ul {
    gap: 16px;
  }
}

@media (min-width: 900px) {
  .container .navbar ul {
    gap: 24px;
  }
}

/* Full inovia.bio gap once the longer Diagity labels have room. */
@media (min-width: 1400px) {
  .container .navbar ul {
    gap: 32px;
  }
}

/* The pill now lives outside the list (as a standalone bar pill), so the
   links group to the left after the logo and the pill stays on the right. */
.container .navbar ul li.nav-menu-pill {
  display: none;
}

.container .navbar ul li.nav-external {
  display: flex;
  align-items: center;
}

/* inovia.bio uses 8px 24px 8px 12px — the extra right pad is a chevron
   gutter for dropdowns. Our links are flat, so use symmetric 12px. */
.container .navbar ul li a {
  text-decoration: none;
  color: var(--nav-text);
  font-size: 18px;
  font-weight: 400;
  display: block;
  line-height: 1.55; /* inovia.bio body line-height */
  cursor: pointer;
  padding: 8px 12px;
  white-space: nowrap;
}

@media (min-width: 1400px) {
  .container .navbar ul li a {
    padding: 8px 24px 8px 12px;
  }
}

/* Between inovia.bio's collapse (1100) and comfortable desktop width,
   tighten link padding/gap only. Keep navbar gap at 24px so it matches
   nav-inner gap — otherwise the centred link cluster looks shifted. */
@media (max-width: 1299px) and (min-width: 1101px) {
  .container {
    padding: 24px 32px;
  }

  .container .navbar {
    gap: 24px;
  }

  .container .navbar ul {
    gap: 8px;
  }

  .container .navbar ul li a {
    padding: 8px 4px;
  }
}

/* inovia.bio keeps menu text colour on hover (no purple flash). */
.container .navbar ul li a:hover {
  color: var(--nav-text);
}

.container .navbar ul li a.active {
  color: var(--brand-purple);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.container .navbar a.nav-pill,
.container .navbar a.nav-pill:hover,
.container .navbar a.nav-pill:active {
  color: var(--nav-pill-text);
}

/* inovia.bio primary header button */
.container .navbar a.nav-pill {
  background-color: var(--brand-purple);
  border-radius: 50px;
  border: 0 solid transparent;
  height: auto;
  padding: 16px 24px;
  min-width: 150px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55; /* inovia.bio body line-height → 24.8px at 16px */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.container .navbar a.nav-pill:hover {
  background-color: var(--nav-pill-hover);
}

.container .navbar a.nav-pill:active {
  background-color: var(--nav-pill-active);
}

/* Arrow icon: matches inovia.bio elevate-button__icon--right */
.container .navbar a.nav-pill .pill-arrow {
  display: block;
  height: 1.25rem;
  width: auto;
  flex: 0 0 auto;
  margin-left: 1rem;
  order: 3;
  overflow: visible;
  fill: currentColor;
}

.container .navbar a.nav-pill .pill-arrow path {
  fill: currentColor;
}

/* The standalone bar pill must hold its size so the links clip before it. */
.container .navbar .nav-bar-pill {
  flex-shrink: 0;
}

.container .navbar ul .close {
  display: none;
  text-align: right;
  padding: 10px;
}

.container .navbar ul .close span {
  font-size: 40px;
  display: inline-block;
  color: var(--nav-text);
  padding: 0 10px;
  cursor: pointer;
}

/* inovia.bio hamburger: 30×25 with 4px bars */
.container .navbar .icon-bar {
  display: none;
  width: 30px;
  height: 25px;
  padding: 0;
  flex-direction: column;
  justify-content: space-around;
  cursor: pointer;
  flex-shrink: 0;
}

.container .navbar .icon-bar i {
  display: block;
  width: 100%;
  height: 4px;
  background-color: var(--nav-text);
}

/* Tier 2 — tablet / narrow laptop: text links collapse into the hamburger
   at the same ≤1100px breakpoint as inovia.bio. Contact pill stays in the
   bar down to 460px; logo may shrink so pill + hamburger stay on-screen. */
@media only screen and (max-width: 1100px) {
  .container {
    padding: 24px 32px;
  }

  /* Cluster spans the full bar so the logo sits left and the pill +
     hamburger sit right. */
  .container .nav-inner {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    min-width: 0;
  }

  /* Allow the logo to shrink (inovia.bio logo-container is flex: 0 1 auto
     below desktop) so pill + hamburger stay on-screen. */
  .container .logo {
    flex: 0 1 auto;
    min-width: 0;
  }

  .container .logo a img {
    max-width: min(250px, 100%);
  }

  /* Navbar hugs its content (pill + hamburger) and stays fully visible. */
  .container .navbar {
    flex: 0 0 auto;
  }

  .container .navbar ul {
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding: 0;
    position: fixed;
    left: 100%;
    top: 0;
    flex-direction: column;
    background: #ffffff;
    width: 100%;
    height: 100%;
    overflow: auto;
    transition: left .3s;
    z-index: 100;
  }

  .container .navbar ul li a {
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    height: auto;
    line-height: normal;
    color: var(--nav-text);
    white-space: normal;
  }

  .container .navbar ul li.nav-external {
    display: block;
  }

  .container .navbar ul .close {
    color: var(--nav-text);
    display: block;
  }

  .container .navbar .icon-bar {
    display: flex;
  }

  .container .navbar ._Menus-show {
    background: #ffffff;
    left: 0;
  }
}

/* Tier 3 — phone (<460px, matching inovia.bio): hide the bar pill and
   surface the full-width Contact pill at the bottom of the open menu. */
@media only screen and (max-width: 459px) {
  .container .navbar a.nav-bar-pill {
    display: none;
  }

  .container .navbar ul li.nav-menu-pill {
    display: block;
    margin-top: auto;
  }

  .container .navbar ul li.nav-menu-pill a.nav-pill {
    display: flex;
    width: calc(100% - 32px);
    margin: 24px 16px;
    justify-content: center;
  }
}