/* ============================================================================
   base.css: document rhythm, chrome, layout primitives.
   Requires tokens.css. Logical properties throughout; no left/right.
   ========================================================================== */

/* ------------------------------------------------------------- typography */

/* Long single-token medical terms ("Bradyarrhythmias", "Electrophysiology")
   exceed the content column at the h1 minimum size on a 320px screen and
   paint outside their own box, which no element-level overflow check catches.
   break-word only breaks when the word genuinely cannot fit, so ordinary
   copy is unaffected. Applied site-wide because long emails, URLs and Latin
   clinical terms hit the same edge inside Hebrew text. */
body {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 0;
  font-weight: var(--mb-weight-semibold);
  line-height: var(--mb-leading-heading);
  text-wrap: balance;
  color: var(--mb-graphite-900);
  /* Deliberately NOT hyphens:auto. It was tried and produced linguistically
     wrong breaks in clinical terms ("What brad-yarrhythmia is") on headings
     that fit perfectly well once the h1 minimum was tuned. The size fix
     solves the overflow; overflow-wrap on body remains the last resort. */
}

h1 { font-size: var(--mb-text-h1); line-height: var(--mb-leading-tight); }
h2 { font-size: var(--mb-text-h2); }
h3 { font-size: var(--mb-text-h3); }
h4 { font-size: var(--mb-text-h4); }

:where(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-block-start: calc(var(--mb-masthead-h) + var(--mb-space-4));
}

p, ul, ol, dl, table, figure, blockquote {
  margin-block: 0;
}

p { max-inline-size: var(--mb-reading-max); text-wrap: pretty; }

/* Vertical rhythm: flow spacing rather than per-element margins, so a
   component that grows never fights a fixed margin. */
.mb-flow > * + * { margin-block-start: var(--mb-space-4); }
.mb-flow > * + :is(h2, h3) { margin-block-start: var(--mb-space-10); }
.mb-flow > :is(h2, h3) + * { margin-block-start: var(--mb-space-3); }

a {
  color: var(--mb-atlantic-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--mb-atlantic-800); text-decoration-thickness: 2px; }
a:visited { color: var(--mb-atlantic-800); }

.mb-eyebrow {
  margin-block-end: var(--mb-space-3);
  font-size: var(--mb-text-label);
  font-weight: var(--mb-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-atlantic-700);
}

.mb-lead {
  font-size: var(--mb-text-body-lg);
  color: var(--mb-graphite-700);
  max-inline-size: var(--mb-reading-max);
}

.mb-caption {
  font-size: var(--mb-text-caption);
  color: var(--mb-graphite-600);
}

.mb-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- skip link */

.mb-skip-link {
  position: absolute;
  inset-block-start: var(--mb-space-2);
  inset-inline-start: var(--mb-space-2);
  z-index: 100;
  padding: var(--mb-space-3) var(--mb-space-4);
  background: var(--mb-white);
  color: var(--mb-atlantic-800);
  border-radius: var(--mb-radius-md);
  box-shadow: var(--mb-shadow-md);
  transform: translateY(-200%);
}
.mb-skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------- masthead */

/* Not sticky by default. Below the desktop breakpoint the masthead wraps to
   two rows and measures ~139px, which would permanently occupy 17% of a phone
   viewport that is mostly long clinical reading. It sticks only where it is a
   compact single row. `relative` keeps it as the containing block for the
   mobile navigation dropdown. */
.mb-masthead {
  position: relative;
  z-index: 50;
  background: var(--mb-graphite-950);
  color: var(--mb-white);
  border-block-end: var(--mb-border-thin) solid var(--mb-graphite-800);
}

@media (min-width: 64rem) {
  .mb-masthead {
    position: sticky;
    inset-block-start: 0;
  }
}

.mb-masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--mb-space-4);
  padding-block: var(--mb-space-3);
}

.mb-masthead__end {
  display: flex;
  align-items: center;
  gap: var(--mb-space-4);
  /* A flex item's automatic min-width is content-based unless overridden,
     and that applies even when the item is itself a flex container: setting
     min-width:0 only on .mb-nav--desktop (its child) was not enough to let
     THIS box shrink within .mb-masthead__inner. Needed at every level in the
     chain for the nav to actually become the part that scrolls instead of
     forcing the wordmark to overlap or the page to overflow horizontally. */
  min-inline-size: 0;
}

.mb-wordmark {
  display: flex;
  align-items: center;
  gap: var(--mb-space-3);
  /* Sibling of .mb-nav--desktop and .mb-langswitch in a nowrap flex row.
     Without this, default flex-shrink:1 lets the brand name itself get
     compressed and wrap/overlap when the nav's fixed-width items (see
     .mb-nav--desktop flex:none, below) claim more space than is available —
     observed exactly that: the wordmark squeezed to ~half its width and its
     text overlapped the first nav items. The nav is meant to be the part
     that yields (it scrolls); the practice name is not. */
  flex-shrink: 0;
  color: var(--mb-white);
  text-decoration: none;
  padding-block: var(--mb-space-1);
}
.mb-wordmark__signal { display: none; }
.mb-wordmark__copy { display: grid; gap: 2px; }
.mb-wordmark:visited { color: var(--mb-white); }
.mb-wordmark:hover { color: var(--mb-white); }
.mb-wordmark__name {
  font-size: var(--mb-text-body-lg);
  font-weight: var(--mb-weight-semibold);
  line-height: 1.2;
}
.mb-wordmark__role {
  font-size: var(--mb-text-caption);
  color: var(--mb-graphite-300);
  line-height: 1.2;
}
.mb-wordmark:hover .mb-wordmark__role { color: var(--mb-graphite-200); }

/* ------------------------------------------------------------------- nav */

.mb-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-1);
}

.mb-nav__item {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--mb-target-min);
  padding-inline: var(--mb-space-3);
  border-radius: var(--mb-radius-sm);
  font-size: var(--mb-text-body-sm);
  color: var(--mb-graphite-200);
  text-decoration: none;
  /* The global body{overflow-wrap:break-word} rule exists for long clinical
     terms in body copy, but a flex item's default min-width:auto lets the
     row shrink an item below its label's width, and break-word then breaks
     the label mid-word ("TECHNOLOGY" -> "TECHNOLO" / "GY") instead of
     wrapping to a new nav row. Nav labels are short, controlled strings;
     they should never break internally. */
  white-space: nowrap;
  /* Reserve the weight difference so marking current never reflows the nav. */
  transition: background var(--mb-motion-fast) var(--mb-ease-standard),
              color var(--mb-motion-fast) var(--mb-ease-standard);
}
.mb-nav__item:visited { color: var(--mb-graphite-200); }
.mb-nav__item:hover {
  color: var(--mb-white);
  background: var(--mb-graphite-800);
  text-decoration: none;
}
.mb-nav__item.is-current {
  color: var(--mb-white);
  font-weight: var(--mb-weight-semibold);
  box-shadow: inset 0 -2px 0 var(--mb-atlantic-400);
}
.mb-nav__item.is-disabled {
  color: var(--mb-graphite-400);
  cursor: not-allowed;
}

.mb-nav--desktop { display: none; }
@media (min-width: 64rem) {
  /* .mb-nav (base rule above) wraps by default, and between 1024px and
     roughly 1300px the 8 nav items don't all fit one row: the wrapped row
     lands at a different visual position depending on the rendering
     environment (confirmed to sit correctly inside a grown header in one
     browser, and to visually spill past the header border in another), so
     "let it wrap" is not a reliable layout regardless of which behavior is
     "correct". Force a single row and let the row itself scroll instead:
     the header height then never depends on item count fitting. */
  .mb-nav--desktop {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-inline-size: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mb-nav--desktop::-webkit-scrollbar { display: none; }
  .mb-nav--desktop .mb-nav__item { flex: none; }
  .mb-navtoggle { display: none; }
}

/* Controlled mobile disclosure: the shared script maintains ARIA state,
   Escape close/focus return, and outside-click close. */
.mb-navtoggle__button {
  display: inline-flex;
  align-items: center;
  gap: var(--mb-space-2);
  min-block-size: var(--mb-target-min);
  padding-inline: var(--mb-space-3);
  border: var(--mb-border-thin) solid var(--mb-graphite-700);
  border-radius: var(--mb-radius-md);
  font-size: var(--mb-text-body-sm);
  color: var(--mb-white);
  cursor: pointer;
  background: transparent;
}
.mb-navtoggle__button:hover { background: var(--mb-graphite-800); }

.mb-nav--mobile {
  position: absolute;
  inset-inline: 0;
  z-index: 49;
  flex-direction: column;
  gap: 0;
  padding: var(--mb-space-2) var(--mb-gutter) var(--mb-space-4);
  background: var(--mb-graphite-950);
  border-block-end: var(--mb-border-thin) solid var(--mb-graphite-800);
}
.mb-nav--mobile .mb-nav__item {
  inline-size: 100%;
  border-radius: 0;
  border-block-end: var(--mb-border-thin) solid var(--mb-graphite-800);
  font-size: var(--mb-text-body);
}

/* --------------------------------------------------------- language switch */

.mb-langswitch {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border: var(--mb-border-thin) solid var(--mb-graphite-700);
  border-radius: var(--mb-radius-md);
  overflow: hidden;
}

.mb-langswitch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--mb-target-min);
  min-inline-size: var(--mb-target-min);
  padding-inline: var(--mb-space-3);
  font-size: var(--mb-text-label);
  color: var(--mb-graphite-200);
  text-decoration: none;
  background: transparent;
}
.mb-langswitch__item:visited { color: var(--mb-graphite-200); }
.mb-langswitch__item:hover { background: var(--mb-graphite-800); color: var(--mb-white); }
.mb-langswitch__item + .mb-langswitch__item {
  border-inline-start: var(--mb-border-thin) solid var(--mb-graphite-700);
}
.mb-langswitch__item.is-current {
  background: var(--mb-atlantic-700);
  color: var(--mb-white);
  font-weight: var(--mb-weight-semibold);
}
/* Disabled: the mirror does not exist yet. Still legible (4.95:1 equivalent
   on the graphite field), but not interactive and not a link. */
.mb-langswitch__item.is-disabled {
  color: var(--mb-graphite-400);
  cursor: not-allowed;
}

/* --------------------------------------------------------------- sections */

.mb-section {
  padding-block: clamp(var(--mb-space-12), 7vw, var(--mb-space-24));
}
.mb-section--tight { padding-block: clamp(var(--mb-space-8), 5vw, var(--mb-space-16)); }
/* Page header. The following section supplies the gap, so this one does not
   also pad the bottom and double it. */
.mb-section--head { padding-block-end: 0; }
.mb-section--soft { background: var(--mb-graphite-50); }
.mb-section--depth {
  background: var(--mb-graphite-950);
  color: var(--mb-white);
}
.mb-section--depth :is(h1, h2, h3, h4) { color: var(--mb-white); }
.mb-section--depth .mb-lead { color: var(--mb-graphite-200); }
.mb-section--depth .mb-eyebrow { color: var(--mb-atlantic-300); }
.mb-section--depth a { color: var(--mb-atlantic-200); }
.mb-section--depth a:visited { color: var(--mb-atlantic-200); }
.mb-section--depth a:hover { color: var(--mb-white); }

.mb-section__head { margin-block-end: var(--mb-space-8); }

/* Generic responsive column set. Grows with content; never a fixed height. */
.mb-grid {
  display: grid;
  gap: clamp(var(--mb-space-5), 3vw, var(--mb-space-8));
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
}
.mb-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 48rem) { .mb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Two substantial columns side by side, for example narrative beside a
   chronology. Splits later than mb-grid--2 and opens a wider gutter, because
   two dense columns need separating; below the breakpoint it stacks in DOM
   order, so the narrative is read first. */
.mb-grid--split {
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(var(--mb-space-8), 5vw, var(--mb-space-16));
}
@media (min-width: 64rem) {
  .mb-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- footer */

.mb-footer {
  padding-block: var(--mb-space-16) var(--mb-space-8);
  background: var(--mb-graphite-950);
  color: var(--mb-graphite-200);
}
.mb-footer a { color: var(--mb-atlantic-200); }
.mb-footer a:visited { color: var(--mb-atlantic-200); }
.mb-footer a:hover { color: var(--mb-white); }

.mb-footer__cols {
  display: grid;
  gap: var(--mb-space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.mb-footer__head {
  font-size: var(--mb-text-label);
  font-weight: var(--mb-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mb-white);
  margin-block-end: var(--mb-space-3);
}
.mb-footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  font-size: var(--mb-text-body-sm);
}
/* Standalone link lists carry the full target height rather than relying on
   the WCAG inline-text exception, which only covers links inside a sentence.
   The audience skews older; these are primary navigation targets. */
.mb-footer__list :is(a, li) {
  display: flex;
  align-items: center;
  min-block-size: var(--mb-target-min);
}
.mb-footer__disabled { color: var(--mb-graphite-400); cursor: not-allowed; }

.mb-colophon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-4);
  justify-content: space-between;
  margin-block-start: var(--mb-space-12);
  padding-block-start: var(--mb-space-6);
  border-block-start: var(--mb-border-thin) solid var(--mb-graphite-800);
  font-size: var(--mb-text-caption);
  color: var(--mb-graphite-400);
}
.mb-colophon__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mb-space-4);
  list-style: none;
  padding: 0;
}
.mb-colophon__links a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--mb-target-min);
}