/* ── Navigation ────────────────────────────────────────────────────────────
   The Framer project's bar: a row of quiet links and one bright action, both
   floating over the hero photograph rather than sitting on a plate.

   The brand is on the left rather than centred, because the opening sequence
   ends by flying the doctor's name into it, and a name reads as a name at the
   start of the line. Every part of the wordmark matches the intro's lines one
   to one — same words, same face, same weight, same case — which is what lets
   the travelling name simply become this one.
   ────────────────────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  height: var(--nav-h);
  padding-inline: var(--gutter);
  /* Nothing under the bar is clickable that should not be */
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

/* Once the page has scrolled off the hero the bar needs its own ground, or
   ink-on-cream links sit on whatever section happens to be passing. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-08);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.nav[data-solid]::before { opacity: 1; }

/* ── The wordmark ──────────────────────────────────────────────────────── */

.nav__mark {
  /* Positioned, and deliberately. The bar's ground is an absolutely
     positioned ::before, and an absolutely positioned pseudo-element paints
     above any non-positioned sibling content — so without this the wordmark
     sits UNDER the bar's own backdrop and disappears the moment the page
     scrolls off the hero. The links never showed the fault because they are
     already relative, for their underline. */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--white);
  /* Hidden until the intro's name lands on it — see js/hero.js */
  opacity: 0;
  transition: opacity 0.35s var(--ease), color 0.4s var(--ease);
}
.nav__mark[data-in] { opacity: 1; }

/* ── The logo ──────────────────────────────────────────────────────────────
   The brandbook's horizontal lockup, in both of the inks it allows: gold
   heart with black type on a light ground, gold heart with white type on a
   dark one. The two images are the same size and share one cell, so
   changing ink is a crossfade and never moves anything.

   The intro's logo is the same component, and the flight into the bar is a
   translate plus one scale — the ratio of the two widths — so only the
   width may differ between the two ends.
   ────────────────────────────────────────────────────────────────────────── */

.brand { display: grid; }

.brand > img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.4s var(--ease);
}

.brand__light { opacity: 0; }

.nav__part { display: grid; width: clamp(7.5rem, 10vw, 9.5rem); }

@media (max-width: 39.99rem) {
  .nav__part { width: 7rem; }
}

/* Over the photograph the bar shows the white-type lockup. */
.nav__mark .brand__ink   { opacity: 0; }
.nav__mark .brand__light { opacity: 1; }

/* ── The links ─────────────────────────────────────────────────────────── */

.nav__pill {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.8vw, 1.75rem);
}

.nav__link {
  position: relative;
  color: var(--cream);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--track-body);
  text-decoration: none;
  white-space: nowrap;
  /* Each link opens outward after the name has landed */
  opacity: 0;
  transform: translate3d(0, -0.4rem, 0);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
              color 0.4s var(--ease),
              background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav__link[data-in] { opacity: 1; transform: none; }

/* The underline enters from the left and leaves to the right.

   A gradient rather than a pseudo-element: the line is the element's own
   background, sized to nothing and pinned to the right edge at rest. On hover
   the anchor snaps to the left — instantly, because only background-size is
   in the transition — and the size grows to full, so the line wipes in from
   the left. Letting go reverses it: the anchor snaps back to the right and
   the size collapses toward it, so the line leaves the way it was going
   rather than retreating the way it came.

   Cheaper than ::after, and it follows the text across a line break, which a
   positioned pseudo-element cannot. */
.nav__link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 0.09em;
  background-position: 100% 100%;
  padding-bottom: 0.16em;
}

.nav__link:hover,
.nav__link:focus-visible,
.nav__link[aria-current="page"] {
  background-size: 100% 0.09em;
  background-position: 0% 100%;
}

.nav__cta {
  opacity: 0;
  transform: translate3d(0, -0.4rem, 0);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease),
              background 0.25s var(--ease);
}
.nav__cta[data-in] { opacity: 1; transform: none; }

/* Off the photograph, the bar's ink flips to the page's ink. */
/* Solid when the page has scrolled under it — and always when the sheet is
   open, because the sheet is the page's own ground and the bar is sitting on
   it. Without the second half the wordmark and the close mark are white on
   white: present, focusable, invisible. */
.nav[data-solid] .nav__mark,
.nav[data-solid] .nav__link,
.nav[data-open]  .nav__mark { color: var(--ink); }

.nav[data-solid] .nav__mark .brand__ink,
.nav[data-open]  .nav__mark .brand__ink   { opacity: 1; }
.nav[data-solid] .nav__mark .brand__light,
.nav[data-open]  .nav__mark .brand__light { opacity: 0; }

/* ── Small screens ─────────────────────────────────────────────────────── */

.nav__toggle {
  /* Above the bar's ground, for the reason given on .nav__mark. */
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.45s var(--ease), background 0.25s var(--ease);
}
.nav__toggle[data-in] { opacity: 1; }
.nav__toggle span {
  display: block;
  width: 1.125rem; height: 1.6px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--white);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.nav[data-solid] .nav__toggle,
.nav[data-open]  .nav__toggle { background: var(--ink-08); }

.nav[data-solid] .nav__toggle span,
.nav[data-open]  .nav__toggle span { background: var(--ink); }

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

/* ── The panel ─────────────────────────────────────────────────────────────
   A full sheet that comes in from the right, not a tray that drops out of the
   bar. It holds the whole of the site's navigation and the two things a
   visitor most often leaves to look for — the number and the two consulting
   rooms — so the menu answers rather than just points.

   The bar stays put on top of it: .nav__mark and .nav__toggle carry z-index 1
   and this does not, so the wordmark and the cross sit above the sheet as it
   passes under them, and the cross is what closes it.
   ────────────────────────────────────────────────────────────────────────── */

.nav__panel {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  gap: clamp(1.75rem, 5vw, 2.5rem);
  /* Clear of the bar, and scrollable in its own right on a short screen. */
  padding: calc(var(--nav-h) + clamp(1rem, 4vw, 2rem)) var(--gutter) clamp(2rem, 8vw, 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ground);
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  transition: transform 0.46s var(--ease), visibility 0s linear 0.46s;
}
.nav__panel nav {
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.6vw, 0.7rem);
}

/* js/hero.js opens the bar's links one at a time — links() is scoped to
   #nav-pill, so these never received that and sat at the opacity: 0 the
   shared .nav__link rule gives them. The sheet has an entrance of its own;
   what is inside it simply arrives with it. */
.nav__panel .nav__link { opacity: 1; transform: none; }

.nav__panel .nav__link {
  font-size: clamp(1.75rem, 7.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--ink);
}
/* Hidden. The sheet is the site's map, not another place to be sold to — the
   number and the email are in the block below it, and the sticky WhatsApp
   pill is on screen the whole time anyway. The markup stays, so bringing it
   back is deleting this rule. */
.nav__panel .wa { display: none; }

.nav[data-open] .nav__panel {
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s;
}

@media (max-width: 61.99rem) {
  .nav__pill   { display: none; }
  .nav__cta    { display: none; }
  .nav__toggle { display: flex; }
  .nav__panel  { display: flex; }
}

/* ── What the menu answers ─────────────────────────────────────────────────
   Under a rule, in the panel's quietest voice: the number, the address for
   writing, and the two rooms. Small-caps labels rather than headings — these
   are captions on a list, not sections of a page.
   ────────────────────────────────────────────────────────────────────────── */

.nav__meta {
  padding-top: clamp(1.5rem, 5vw, 2rem);
  border-top: 1px solid var(--ink-12);
}

.nav__label {
  margin: 0 0 0.45rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.nav__label + .nav__line { margin-bottom: 0.15rem; }
.nav__line + .nav__label { margin-top: 1.25rem; }

.nav__line {
  margin: 0 0 0.15rem;
  font-size: var(--fs-ui);
  font-weight: 600;
  letter-spacing: var(--track-body);
  color: var(--ink);
}

.nav__line a { color: inherit; }

/* The sheet covers the page, so the page must stop moving under it. Lenis
   owns the scroll and is stopped from js/hero.js; this is the belt to that
   brace, and what catches the case where Lenis never started. */
body[data-menu="open"] { overflow: hidden; }

/* The pin. The one red on this page belongs to the emergency line, so it is
   borrowed here rather than owned: a location mark is read as a location mark
   whatever colour it is, and at this size the red is what makes it findable
   in a column of grey captions. */
.nav__label--where {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.nav__pin {
  display: inline-flex;
  color: var(--alert);
}

.nav__pin svg { width: 0.9375rem; height: 0.9375rem; }