/* ============================================================
   SITE MENU (nav v3) — pill header, dropdown panels, mobile sheet.
   Ported from the live bir.ch menu (Webflow embed, 01.10.2026) onto
   design-system tokens. Content comes from the Sanity "Site menu"
   document; markup — site/src/components/Nav.astro; behavior — nav.js.

   States set by nav.js: .is-open on .nav2__panel-wrap and .nav2m,
   .is-expanded on .nav2m__item, .is-active on links and rows,
   .is-disabled on Soon rows.
   Theme: .nav-v3.is-light (light pages) or none (dark pages) — the page
   passes it to the menu, no ancestor classes.
   Not ported yet: blog search in the pill (comes with the blog list).
   ============================================================ */

/* Height of the space the menu takes at the top of the page:
   air 6 + pill 92 + air 6 on desktop, 12 + 64 + 12 on mobile. */
:root { --nav-height: 6.5rem; }
@media (max-width: 767px) {
  :root { --nav-height: 5.5rem; }
}

/* In-flow reserve under the fixed menu: one shared top offset for every page.
   A page whose first screen goes under the menu leaves it out (Base.astro, underNav). */
.nav-v3-root { display: block; width: 100%; height: var(--nav-height); }
.nav-v3-root.is-under { height: 0; }

/* Keyboard skip link: hidden until focused. */
.nav-skip-link {
  position: fixed;
  top: var(--space-xs); left: var(--space-xs);
  z-index: 1001;
  padding: 0.8em 1.5em;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: var(--color-text-inverted);
  font: 600 0.75rem/1.2 var(--font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  translate: 0 -200%;
}
.nav-skip-link:focus-visible {
  translate: 0 0;
  outline: 0.125rem solid var(--color-primary);
  outline-offset: 0.125rem;
}

.nav-v3 {
  /* -- menu text styles (Figma Birch/Menu/…), all on the site font -- */
  --menu-link: 600 0.9rem/1 var(--font);             /* Link: items, buttons, row names */
  --menu-link-ls: 0.01em;
  --menu-desc: 500 0.9rem/1.1 var(--font);           /* Description: row descriptions */
  --menu-desc-ls: 0.01em;
  --menu-badge: 600 0.7rem/1.2 var(--font);          /* Badge: New, Soon */
  --menu-m-item: 600 1.5rem/1 var(--font);           /* Mobile/Item: sheet items and buttons */
  --menu-m-item-ls: 0em;
  --menu-m-row-title: 600 1rem/1 var(--font);        /* Mobile/Row title */
  --menu-m-row-title-ls: 0.01em;
  --menu-m-desc: 500 0.75rem/1.1 var(--font);        /* Mobile/Description */
  --menu-m-desc-ls: 0.01em;

  /* -- menu geometry: menu-only sizes, no design-system pair -- */
  --nav-pill-h: 5.75rem;           /* 92 */
  --nav-pill-top: 0.375rem;        /* top + pill + top = --nav-height */
  --nav-cta-h: 4.5rem;             /* 72 */
  --nav-pill-inset: calc((var(--nav-pill-h) - var(--nav-cta-h)) / 2);
  --nav-link-gap: 1.75rem;         /* 28, equals the Book demo/Log in text gap */
  --nav-dot: 0.375rem;
  --nav-panel-w: 30.75rem;
  --nav-panel-pad: var(--space-xs);
  --nav-panel-gap: var(--space-xs);
  --nav-row-px: var(--space);
  --nav-row-py: var(--space-sm);
  --nav-row-radius: var(--radius-md);
  /* concentric with the rows: row radius + panel padding (20) */
  --nav-panel-radius: calc(var(--nav-row-radius) + var(--nav-panel-pad));
  --nav-row-title-w: 10.5rem;

  /* -- colors, dark pages (default) -- */
  --nav-surface: var(--color-glass-dark);
  --nav-glass: var(--glass-filter-dark);
  --nav-text: var(--color-text);
  --nav-hover: rgba(255, 255, 255, 0.1);     /* submenu plate and Book demo/Log in share it */
  --nav-soon-bg: rgba(255, 255, 255, 0.14);
  --nav-soon-text: rgba(255, 255, 255, 0.75);
  --nav-sheet-text: var(--color-text);
  --nav-sheet-line: rgba(255, 255, 255, 0.2);
  --nav-sheet-row-hover: rgba(255, 255, 255, 0.1);
  --nav-sheet-cta-bg: var(--color-bg-cta-grey);
  --nav-sheet-cta-text: var(--color-text);
  --nav-card: var(--color-bg-grey);
  --nav-burger-open: var(--color-bg-white);
  --nav-scrim: rgba(13, 13, 18, 0.6);
}
/* Light pages. No brightness() here: it lifts a white backdrop into the
   tone of the site's own light cards and the glass dissolves into the page. */
.nav-v3.is-light {
  --nav-surface: var(--color-glass-light);
  --nav-glass: var(--glass-filter-light);
  --nav-text: var(--color-text-inverted);
  --nav-hover: rgba(255, 255, 255, 0.7);
  --nav-soon-bg: rgba(0, 0, 0, 0.08);
  --nav-soon-text: rgba(0, 0, 0, 0.55);
  --nav-sheet-text: var(--color-text-inverted);
  --nav-sheet-line: rgba(0, 0, 0, 0.15);
  --nav-sheet-row-hover: rgba(0, 0, 0, 0.08);
  --nav-sheet-cta-bg: var(--color-surface-muted);
  --nav-sheet-cta-text: var(--color-text-inverted);
  --nav-card: var(--color-bg-white);
  --nav-burger-open: var(--color-surface-muted);
  --nav-scrim: rgba(13, 13, 18, 0.3);
}

/* ============ DESKTOP PILL HEADER ============ */
.nav2 {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  color: var(--nav-text);
  font-family: var(--font);
}
.nav2 * { box-sizing: border-box; }
.nav2 a { text-decoration: none; color: inherit; }

.nav2__pill {
  position: relative;
  margin: var(--nav-pill-top) auto 0;
  /* container content width (min(100vw, 80rem) - gutters) + inset frame */
  width: calc(min(100vw, 80rem) - 3rem + 2 * var(--nav-pill-inset));
  height: var(--nav-pill-h);
  border-radius: var(--radius-pill);
  background: var(--nav-surface);
  -webkit-backdrop-filter: var(--nav-glass);
  backdrop-filter: var(--nav-glass);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* logo and CTA land exactly on the container grid */
  padding: 0 var(--nav-pill-inset);
}

.nav2__logo {
  display: flex; align-items: center;
  height: 2.25rem;
  margin-top: -0.1875rem;
  margin-left: calc((var(--nav-pill-h) - 2.25rem) / 2 - var(--nav-pill-inset));
  color: var(--nav-text);
  flex: none;
}
.nav2__logo svg { height: 100%; width: auto; display: block; }

/* -- center items -- */
.nav2__menu {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: var(--nav-link-gap);
}
.nav2__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0;
  font: var(--menu-link);
  letter-spacing: var(--menu-link-ls);
  cursor: pointer;
  background: none; border: none; color: inherit;
}
.nav2__word { position: relative; display: inline-block; }
.nav2__dot {
  /* below the word itself, not the link box */
  position: absolute;
  left: 50%; top: calc(100% + 0.375rem);
  width: var(--nav-dot); height: var(--nav-dot);
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translateX(-50%) scale(0.5);
  transition: opacity 150ms ease, transform 150ms ease;
}
.nav2__link:hover .nav2__dot,
.nav2__link.is-active .nav2__dot { opacity: 1; transform: translateX(-50%) scale(1); }

.nav2__chev { display: block; width: 0.625rem; height: 0.625rem; transition: transform 200ms ease; }
.nav2__link[aria-expanded="true"] .nav2__chev { transform: rotate(180deg); }

/* "New" badge */
.nav2__new {
  font: var(--menu-badge);
  padding: 0.08rem 0.2rem 0.13rem;
  border-radius: 0.2rem;
  background: var(--color-primary);
  color: var(--color-text-inverted);
  rotate: -18deg;
}
.nav2__row-title .nav2__new,
.nav2m__subrow-title .nav2__new { display: inline-block; translate: 0.125rem -0.55em; }
/* "Soon" chip: the New tag's twin in muted colors */
.nav2__soon {
  display: inline-block;
  font: var(--menu-badge);
  padding: 0.1rem 0.25rem 0.16rem;
  border-radius: 0.25rem;
  background: var(--nav-soon-bg);
  color: var(--nav-soon-text);
  rotate: -18deg;
  translate: 0.125rem -0.35em;
  white-space: nowrap;
}
/* cancel the tags' baseline overhang so tagged rows equal plain rows */
.nav2__row-title .nav2__new, .nav2__row-title .nav2__soon,
.nav2m__subrow-title .nav2__new, .nav2m__subrow-title .nav2__soon { margin-bottom: -0.35em; }

/* Soon row: dimmed, inert */
.nav2__row.is-disabled, .nav2m__subrow.is-disabled { pointer-events: none; cursor: default; }
.nav2__row.is-disabled .nav2__row-title { opacity: 0.45; }
.nav2__row.is-disabled .nav2__row-desc { opacity: 0.3; }
.nav2m__subrow.is-disabled .nav2m__subrow-title { opacity: 0.45; }
.nav2m__subrow.is-disabled .nav2m__subrow-desc { opacity: 0.3; }

/* -- right button group -- */
.nav2__right { display: flex; align-items: center; gap: 0; flex: none; }
.nav2__right .nav2__cta { margin-left: var(--space-xs); }
.nav2__txtbtn {
  display: flex; align-items: center;
  height: var(--nav-cta-h);
  padding: 0 0.875rem;             /* plates flush: text gap 28, like the menu */
  font: var(--menu-link);
  letter-spacing: var(--menu-link-ls);
  color: var(--nav-text);
  border-radius: var(--radius-lg);
  transition: background-color 150ms ease;
  white-space: nowrap;
}
.nav2__txtbtn:hover { background: var(--nav-hover); }
.nav2 a.nav2__cta {
  display: flex; align-items: center; justify-content: center;
  height: var(--nav-cta-h);
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-inverted);
  font: var(--menu-link);
  letter-spacing: var(--menu-link-ls);
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
.nav2 a.nav2__cta:hover { background: var(--color-accent-indigo); color: var(--color-text); }

@media (max-width: 1099px) {
  .nav2__menu { gap: var(--space-sm); }
}
/* tablet: tighten so the centered menu and the buttons never collide */
@media (max-width: 991px) {
  .nav2__right { gap: var(--space-xxs); }
  .nav2__txtbtn { padding: 0 0.625rem; }
  .nav2 a.nav2__cta { padding: 0 1.25rem; }
  .nav2__menu { gap: 0.75rem; }
}

/* ============ desktop dropdown panel ============
   The wrap lives OUTSIDE the pill: an ancestor with backdrop-filter would
   become the backdrop root and the panel's own blur would stop seeing the page. */
.nav2__panel-wrap {
  position: absolute;
  top: calc(var(--nav-pill-top) + var(--nav-pill-h));
  left: 0;
  padding-top: var(--nav-panel-gap);   /* hover bridge over the pill-panel gap */
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear 180ms;
}
.nav2__panel-wrap.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}
.nav2__panel-wrap .nav2__panel {
  opacity: 0;
  translate: 0 -0.5rem;
  transition: opacity 180ms ease, translate 180ms ease;
}
.nav2__panel-wrap.is-open .nav2__panel { opacity: 1; translate: 0 0; }
.nav2__panel {
  position: relative;
  width: var(--nav-panel-w);
  padding: var(--nav-panel-pad);
  border-radius: var(--nav-panel-radius);
  background: var(--nav-surface);
  -webkit-backdrop-filter: var(--nav-glass);
  backdrop-filter: var(--nav-glass);
  display: flex;
  flex-direction: column;
}
.nav2__rows { display: flex; flex-direction: column; }
.nav2__row {
  position: relative;
  display: flex;
  gap: 1.1875rem;
  align-items: flex-start;
  padding: var(--nav-row-py) var(--nav-row-px);
  border-radius: var(--nav-row-radius);
}
/* hover plate: one element sliding between rows */
.nav2__hoverplate {
  position: absolute;
  left: var(--nav-panel-pad);
  right: var(--nav-panel-pad);
  top: 0; height: 0;
  border-radius: var(--nav-row-radius);
  background: var(--nav-hover);
  opacity: 0;
  pointer-events: none;
  transition: top 320ms cubic-bezier(0.22, 0.9, 0.24, 1), height 320ms cubic-bezier(0.22, 0.9, 0.24, 1), opacity 200ms ease;
  z-index: 0;
}
.nav2__hoverplate.is-jump { transition: opacity 150ms ease; }
.nav2__row:hover .nav2__row-desc { opacity: 1; }
.nav2__row-title {
  flex: none;
  width: var(--nav-row-title-w);
  font: var(--menu-link);
  letter-spacing: var(--menu-link-ls);
  display: flex; align-items: baseline; gap: 0.2rem;
}
.nav2__row-desc {
  flex: 1;
  font: var(--menu-desc);
  letter-spacing: var(--menu-desc-ls);
  opacity: 0.5;
  transition: opacity 250ms ease;
}
.nav2__row-dot {
  position: absolute;
  left: 0.8125rem;
  top: calc(var(--nav-row-py) + 0.3125rem);
  width: var(--nav-dot); height: var(--nav-dot);
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
}
.nav2__row.is-active .nav2__row-dot { opacity: 1; }

/* ============ MOBILE (max 767): pill header + sheet ============ */
.nav2m { display: none; }

@media (max-width: 767px) {
  .nav2 { display: none; }
  .nav2m {
    display: block;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    font-family: var(--font);
  }
  .nav2m * { box-sizing: border-box; }
  .nav2m a { text-decoration: none; color: inherit; }

  .nav2m__pill {
    position: relative;
    z-index: 20;
    margin: 0.75rem;                 /* 12 all around */
    height: 4rem;                    /* 64 */
    border-radius: var(--radius-pill);
    background: var(--nav-surface);
    -webkit-backdrop-filter: var(--nav-glass);
    backdrop-filter: var(--nav-glass);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.6875rem 0 1.3125rem;  /* 11 / 21 per mock */
    color: var(--nav-text);
    transition: background-color 300ms ease;
  }
  .nav2m__logo { display: flex; align-items: center; height: 1.625rem; margin-top: -0.125rem; color: var(--nav-text); flex: none; }
  .nav2m__logo svg { height: 100%; width: auto; display: block; }

  /* open: the pill adopts the sheet color */
  .nav2m.is-open .nav2m__pill { background: var(--nav-card); }

  .nav2m__burger {
    width: 2.625rem; height: 2.625rem;   /* 42 */
    border: none; border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-text-inverted);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    flex: none;
    transition: background-color 300ms ease;
  }
  .nav2m.is-open .nav2m__burger { background: var(--nav-burger-open); }
  .nav2m__burger svg { width: 0.9375rem; height: 0.9375rem; display: block; overflow: visible; }
  /* closed: the two dot rows collapse into one middle row = 2 dots.
     Offsets are SVG user units (viewBox 15), so they scale with the icon. */
  .nav2m__burger circle { transition: transform 250ms ease; }
  .nav2m__burger circle:nth-of-type(1), .nav2m__burger circle:nth-of-type(2) { transform: translateY(3.5px); }
  .nav2m__burger circle:nth-of-type(3), .nav2m__burger circle:nth-of-type(4) { transform: translateY(-3.5px); }
  .nav2m__burger[aria-expanded="true"] circle { transform: translateY(0); }

  /* full-page scrim behind the sheet */
  .nav2m__blur {
    position: fixed; inset: 0;
    z-index: 5;
    background: var(--nav-scrim);
    -webkit-backdrop-filter: blur(0.75rem);
    backdrop-filter: blur(0.75rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .nav2m.is-open .nav2m__blur {
    opacity: 1; visibility: visible;
    transition: opacity 200ms ease;
  }

  /* the open menu: opaque card, flies in from the bottom */
  .nav2m__sheet {
    position: fixed;
    top: 5.25rem;                    /* pill (12+64) + 8 gap */
    left: 0.75rem; right: 0.75rem;
    bottom: 0.75rem;
    z-index: 10;
    border-radius: 2.25rem;          /* 36 */
    background: var(--nav-card);
    color: var(--nav-sheet-text);
    padding: var(--space-sm) 0.75rem 0.75rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space);
    overflow-y: auto;
    overscroll-behavior: contain;
    translate: 0 110%;
    visibility: hidden;
    transition: translate 380ms cubic-bezier(0.32, 0.72, 0, 1),
                visibility 0s linear 400ms;
  }
  .nav2m.is-open .nav2m__sheet {
    translate: 0 0;
    visibility: visible;
    transition: translate 380ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  .nav2m__list { width: 100%; padding: 0 0.625rem; }

  /* top-level item */
  .nav2m__item { border-bottom: 0.0625rem solid var(--nav-sheet-line); }
  .nav2m__toprow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.75rem 0.75rem var(--space-sm);   /* 10 / 12 / 12 / 16 */
    background: none; border: none; color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .nav2m__toprow-label {
    position: relative;
    display: flex; align-items: center; gap: var(--space-xs);
    font: var(--menu-m-item);
    letter-spacing: var(--menu-m-item-ls);
  }
  .nav2m__topdot {
    position: absolute;
    left: -0.625rem; top: 50%;
    translate: 0 -50%;
    width: var(--nav-dot); height: var(--nav-dot);
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
  }
  .nav2m__item.is-active .nav2m__topdot { opacity: 1; }
  /* collapsed: chevron points right; expanded: down */
  .nav2m__chev { width: 0.875rem; height: 0.875rem; transform: rotate(-90deg); transition: transform 250ms ease; flex: none; }
  .nav2m__toprow[aria-expanded="true"] .nav2m__chev { transform: rotate(0deg); }

  /* collapsible submenu: grid-rows trick animates height */
  .nav2m__sub {
    display: grid;
    grid-template-rows: 0fr;
    grid-template-columns: 1fr;
    transition: grid-template-rows 280ms ease;
  }
  .nav2m__item.is-expanded .nav2m__sub { grid-template-rows: 1fr; }
  .nav2m__sub-inner { overflow: hidden; min-height: 0; }
  .nav2m__subrows { display: flex; flex-direction: column; padding-bottom: 0.75rem; }

  .nav2m__subrow {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
  }
  .nav2m__subrow:active { background: var(--nav-sheet-row-hover); }
  .nav2m__subrow:active .nav2m__subrow-desc { opacity: 1; }
  .nav2m__subrow-title {
    display: flex; align-items: baseline; gap: 0.2rem;
    font: var(--menu-m-row-title);
    letter-spacing: var(--menu-m-row-title-ls);
  }
  .nav2m__subrow-desc {
    font: var(--menu-m-desc);
    letter-spacing: var(--menu-m-desc-ls);
    opacity: 0.5;
  }
  .nav2m__subdot {
    position: absolute;
    left: 0.4375rem; top: 0.75rem;   /* 7 / 12 */
    width: var(--nav-dot); height: var(--nav-dot);
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
  }
  .nav2m__subrow.is-active .nav2m__subdot { opacity: 1; }

  /* bottom buttons: 8 between them, 12 to the card edges */
  .nav2m__cta-block { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space); flex: none; }
  .nav2m__cta-row { display: flex; gap: var(--space-xs); }
  .nav2m__cta-row .nav2m__cta-btn { flex: 1; }
  .nav2m a.nav2m__cta-btn,
  .nav2m a.nav2m__cta-main {
    display: flex; align-items: center; justify-content: center;
    height: 3.5rem;                  /* 56 */
    border-radius: var(--radius-pill);
    background: var(--nav-sheet-cta-bg);
    color: var(--nav-sheet-cta-text);
    font: var(--menu-m-item);
    letter-spacing: var(--menu-m-item-ls);
    /* optical: cap-height band centered in the pill */
    padding-bottom: 0.0625rem;
  }
  .nav2m a.nav2m__cta-main { background: var(--color-primary); color: var(--color-text-inverted); }
}

/* reduced motion: no movement, opacity only */
@media (prefers-reduced-motion: reduce) {
  .nav2__hoverplate { transition: opacity 150ms ease; }
  .nav2__panel-wrap .nav2__panel { translate: 0 0; transition-property: opacity; }
  .nav2m__sheet {
    translate: 0 0; border-radius: 0;
    opacity: 0;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }
  .nav2m.is-open .nav2m__sheet { opacity: 1; transition: opacity 200ms ease; }
  .nav2m__sub { transition: none; }
  .nav2__chev, .nav2m__chev, .nav2m__burger circle { transition: none; }
}

/* The `font:` shorthand above resets font-variation-settings, which drops the slant pin from page.css
   (iOS may then render the menu italic) — restore it for the whole menu. */
.nav-skip-link, .nav2, .nav2 *, .nav2 a.nav2__cta, .nav2m, .nav2m *, .nav2m a.nav2m__cta-btn, .nav2m a.nav2m__cta-main { font-variation-settings: "slnt" var(--slnt, 0); }