/* ─────────────────────────────────────────────
   Layout — containers, header, footer, navigation
   ───────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ── Header ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.site-header__brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  color: var(--color-navy);
  text-decoration: none;
}

.site-header__brand:hover {
  color: var(--color-navy);
}

.site-header__name {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.site-header__tagline {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}

/* ── Primary nav (desktop) ── */
.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-nav__link {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-xs) var(--space-2xs);
  white-space: nowrap;
}

.primary-nav__link:hover,
.primary-nav__link[aria-current="page"] {
  color: var(--color-teal-dark);
}

/* Physician link — visually distinct, always visible, not in dropdown */
.primary-nav__physician-link {
  border: 1px solid var(--color-navy);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-md);
  color: var(--color-navy);
  font-weight: 600;
  white-space: nowrap;
}

.primary-nav__physician-link:hover {
  background: var(--color-navy);
  color: #fff;
}

/* ── Mobile nav toggle ── */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--font-size-sm);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
  }

  .primary-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 85vw);
    height: 100vh;
    background: var(--color-surface);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-xl) var(--space-lg);
    box-shadow: -4px 0 24px rgba(16, 26, 44, 0.15);
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: var(--z-mobile-nav);
    overflow-y: auto;
  }

  .primary-nav[data-open="true"] {
    transform: translateX(0);
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
  }

  .primary-nav__list > li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .primary-nav__link {
    display: block;
    width: 100%;
    padding: var(--space-sm) 0;
  }

  .primary-nav__physician-link {
    margin-top: var(--space-md);
    width: 100%;
    text-align: center;
  }
}

/* Dimmed backdrop shown behind the mobile drawer when open */
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 26, 44, 0.4);
  z-index: calc(var(--z-mobile-nav) - 1);
}

.nav-backdrop[data-open="true"] {
  display: block;
}

/* ── Dropdown (Clinical Services) ── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  background: none;
  border: none;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  padding: var(--space-xs) var(--space-2xs);
}

.nav-dropdown__toggle:hover {
  color: var(--color-teal-dark);
}

.nav-dropdown__menu {
  list-style: none;
  margin: 0;
  padding: var(--space-xs);
}

@media (min-width: 1025px) {
  .nav-dropdown__menu {
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0;
    min-width: 14rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    z-index: var(--z-dropdown);
  }

  .nav-dropdown__menu[hidden] {
    display: none;
  }
}

.nav-dropdown__menu a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--font-size-sm);
}

.nav-dropdown__menu a:hover {
  background: var(--color-teal-tint);
  color: var(--color-teal-dark);
}

/* ── Page structure ── */
main {
  display: block;
}

.section {
  padding-block: var(--space-xl);
}

.section + .section {
  border-top: 1px solid var(--color-border);
}

.page-header {
  padding-block: var(--space-xl) var(--space-lg);
}

.page-header__eyebrow {
  font-size: var(--font-size-sm);
  color: var(--color-teal-dark);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-header__description {
  max-width: 60ch;
  color: var(--color-ink-muted);
}

/* Section background tint modifiers — used instead of inline
   style="background: ..." on .section elements */
.section--tint-navy {
  background: var(--color-navy-tint);
}

.section--tint-teal {
  background: var(--color-teal-tint);
}

/* Signature element: a quiet "sequencing trace" divider — short,
   unevenly spaced vertical ticks, evoking a genomic trace line
   without being literal or decorative for its own sake. Used once
   per page, never repeated within a section. */
.trace-divider {
  height: 1.25rem;
  margin-block: var(--space-lg);
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-teal) 0px,
    var(--color-teal) 2px,
    transparent 2px,
    transparent 9px
  );
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 100% 40%;
  opacity: 0.55;
}

/* ── Footer ── */
.site-footer {
  background: var(--color-navy-dark);
  color: #E7EAF0;
  padding-block: var(--space-xl) var(--space-lg);
  margin-top: var(--space-2xl);
}

.site-footer a {
  color: #C9D3E4;
}

.site-footer a:hover {
  color: #fff;
}

.site-footer__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
}

.site-footer__nav {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.site-footer__meta {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--font-size-sm);
  color: #9AA6BC;
}