/* --- Mobile bottom-nav fix -------------------------------------------------
   The bottom bar carries 7 destinations. As *labelled* tabs they need ~414px
   of width, but the bar is only ~334px wide on a 360px phone, so the row
   overflowed its own rounded container: the tabs stopped shrinking (each one's
   min-width:auto won out over flex-1) and the active pill ended up flush against
   the screen edge, outside the bar.

   Below 640px the icons alone carry the bar, so all seven fit in equal columns
   with nothing truncated or overlapping. The labels stay in the DOM and in the
   accessibility tree (clipped, not display:none), so screen readers still
   announce every destination.

   From 640px up the labels return: the bar is capped at 36rem, which leaves
   ~71px of text per tab — room for all seven at 12px.

   Only the mobile bar is touched (nav.fixed.lg\:hidden); the desktop nav is a
   different element (nav.hidden.lg\:flex) and is left alone.
   -------------------------------------------------------------------------- */

nav.fixed.lg\:hidden > div {
  gap: 2px;
}

/* Let flex-1 actually divide the bar: without min-width:0 a flex item refuses
   to shrink below its label's width, which is what caused the overflow. */
nav.fixed.lg\:hidden > div > a {
  min-width: 0;
}

@media (max-width: 639.98px) {
  /* Icon-only on phones, with a 44px-tall touch target. */
  nav.fixed.lg\:hidden > div > a {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  nav.fixed.lg\:hidden > div > a > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

/* --- Mobile bottom-nav: 4 destinations -------------------------------------
   The bar is trimmed to Home / About / Products / Contact.

   Items 4-6 (Export, Certificates, Partners) are hidden here rather than
   deleted from the markup on purpose: the pages are server-rendered by React
   (TanStack Start) and the same component re-renders on every client-side
   navigation, so removing the nodes from the HTML would be undone at
   hydration. Hiding them in CSS is stable, applies before first paint
   (this file loads in <head>), and keeps SSR markup untouched.

   With four items the leftover min-width:auto rule can no longer cause the
   overflow this file was originally written for, so nothing else changes.
   ------------------------------------------------------------------------ */

nav.fixed.lg\:hidden > div > a:nth-child(4),
nav.fixed.lg\:hidden > div > a:nth-child(5),
nav.fixed.lg\:hidden > div > a:nth-child(6) {
  display: none !important;
}