/* Navigation + brand + breadcrumb bar */

/* ── Brand block (used in nav + footer) ── */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-s);
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 2px;
}
.brand-text strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand-text em {
  font-family: 'JetBrains Mono', monospace;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
/* brand-light = brand placed on a dark wrapper (footer). The V image
   is already a dark-bg variant so no recolor needed; text inverts. */
.brand-light .brand-text strong { color: #ffffff; }
.brand-light .brand-text em { color: rgba(255,255,255,0.55); }

/* ── Main nav (dark navy) ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--inkSection);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: box-shadow 0.2s ease;
}
.nav.nav-scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.30);
}
.nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--section-h);
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Brand inside the dark nav: white wordmark next to the V logo image */
.nav .brand-text strong { color: #ffffff; }
.nav .brand-text em     { color: rgba(255,255,255,0.55); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.70);
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-links a:hover { color: #ffffff; }
.nav-links a.is-active { color: #ffffff; font-weight: 600; }
.nav-links a .caret {
  display: inline-block;
  font-size: 9px;
  opacity: 0.5;
  transform: translateY(1px);
  transition: transform 0.15s ease;
}

/* ── Hover dropdown ── */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger { cursor: pointer; }
.nav-dropdown.is-open .nav-dropdown-trigger { color: #ffffff; }
.nav-dropdown.is-open .caret { transform: translateY(1px) rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 14px);
  /* Panel padding 6px + item padding 14px = 20px of indent before text.
     Shift panel left by that 20px so item text lines up with the
     trigger text "Coverage" (which sits at the <li> left edge). */
  left: -20px;
  transform: translateY(-8px);
  /* Snug fit: just wide enough for "Physicians, dentists, CRNAs, allied
     health" on one line so the padding looks symmetric on left and
     right (no big empty gap on the right side). Longer descriptors
     wrap at the <br> we inserted. */
  width: 304px;
  background: var(--inkSection);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-m);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  z-index: 200;
  box-shadow: 0 16px 48px rgba(0,0,0,0.40);
  box-sizing: border-box;
}
/* Invisible hover bridge so cursor can travel from trigger to menu */
.nav-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Block layout — simpler and more predictable than flex column inside an
   inline-flex parent. Each item is a full-width block; strong + span
   inside are also blocks that stack vertically. Specificity bumped to
   .nav-links .nav-dropdown-item to win over .nav-links a. */
.nav-links .nav-dropdown-item {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius-s);
  text-decoration: none;
  transition: background 0.15s ease;
  text-align: left;
  width: 100%;
  color: rgba(255,255,255,0.85);
  box-sizing: border-box;
}
.nav-links .nav-dropdown-item:hover {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}
.nav-links .nav-dropdown-item strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  letter-spacing: -0.005em;
  text-align: left;
  margin: 0 0 3px;
  width: 100%;
}
.nav-links .nav-dropdown-item span {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  line-height: 1.45;
  text-align: left;
  margin: 0;
  width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-phone {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.70);
  white-space: nowrap;
  line-height: 1.2;
  transition: color 0.15s ease;
}
.nav-phone:hover { color: #ffffff; }

/* Mobile burger */
.nav-burger {
  display: none;
  background: transparent;
  border: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: #ffffff;
  position: relative;
}
.nav-burger span::before,
.nav-burger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: #ffffff;
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after  { top:  6px; }

/* ── Secondary breadcrumb bar (vertical pages only) ── */
.subnav {
  background: var(--inkSection);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.subnav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px var(--section-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.subnav-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.55);
}
.subnav-crumbs a { color: rgba(255,255,255,0.55); transition: color 0.15s ease; }
.subnav-crumbs a:hover { color: #ffffff; }
.subnav-crumbs .crumb-active { color: var(--accent); }
.subnav-crumbs .crumb-sep { opacity: 0.4; }
.subnav-switch {
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.subnav-switch:hover { color: #ffffff; }
.subnav-switch .caret { font-size: 9px; opacity: 0.6; }

@media (max-width: 900px) {
  .nav-burger { display: inline-flex; }
  .nav-links,
  .nav-right .nav-phone,
  .nav-right .btn {
    display: none;
  }
  .nav.nav-open .nav-links,
  .nav.nav-open .nav-right .nav-phone,
  .nav.nav-open .nav-right .btn {
    display: flex;
  }
  .nav.nav-open .nav-inner {
    flex-wrap: wrap;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 18px;
    gap: 14px;
  }
  .nav.nav-open .nav-links {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,0.10);
  }
  .nav.nav-open .nav-right {
    order: 4;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .nav.nav-open .nav-right .btn { width: 100%; justify-content: center; }
  .brand-text em { font-size: 8px; }
  .subnav-inner { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px var(--section-h); }
  .subnav-switch { font-size: 10px; }

  /* Mobile: dropdown becomes a static stacked list when open */
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu {
    position: static;
    transform: none;
    min-width: 0;
    margin-top: 6px;
    padding: 0 0 0 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-left: 1px solid rgba(255,255,255,0.10);
    border-radius: 0;
    display: none;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown.is-open .nav-dropdown-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    transform: none;
  }
  .nav-dropdown-item { padding: 8px 10px; }
}