/* The site chrome: one nav pill, loaded by every generated page.

   It exists as its own file because there were three of them — page.css owned
   the clip page's pill, by_level.css owned the catalogue's `.top/.pill`, and the
   filter pages inherited the second one minus the language picker. Three
   stylesheets and two markup shapes meant three different navbars, and the same
   header must not change shape when a visitor moves between our own pages.
   Markup comes from lab/chrome.py; nothing else may write a header.

   Order inside the pill:
   brand ......... Browse videos · language · Get the app
   The brand alone at the start, everything interactive gathered at the end. The
   two navigation controls sit next to the store button rather than across the
   pill from it, so one reach covers every control the header has.

   Self-contained in tokens too: page.css/practice.css and by_level.css define
   overlapping but not identical sets, so anything only one of them has is read
   through a var() fallback. A nav that renders unstyled on one page type is the
   bug this file was written to end. */

.nav{
  position:sticky; top:0; z-index:30;
  padding:12px var(--pad) 0;
}
.nav__pill{
  position:relative;
  max-width:var(--shell, var(--wrap, 1140px)); margin:0 auto;
  display:flex; align-items:center; gap:12px;
  padding:8px 8px 8px 18px;
  padding-inline:18px 8px;
  background:rgba(255,255,255,.85);
  border:1px solid var(--rule);
  border-radius:999px;
  box-shadow:var(--shadow-pill, 0 6px 24px -14px rgba(0,0,0,.45));
}
/* The blur is on a pseudo-element rather than on the pill itself, and that is
   load-bearing: `backdrop-filter` makes its element a containing block for
   fixed-position descendants, and the language menu below 700px is exactly such
   a descendant. On the pill, `position:fixed; inset-inline:12px` resolved
   against the pill instead of the viewport. */
.nav__pill::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:inherit;
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

/* Every interactive box in the pill is at least 44px tall — a thumb, not a
   cursor, is the primary input here. */
.nav__logo{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:1.15rem; font-weight:800; letter-spacing:-.025em;
  text-decoration:none; color:var(--ink);
  white-space:nowrap;
  /* The auto margin lives on the brand: it pushes the nav links and the store
     button into one group at the end of the row. */
  margin-inline-end:auto;
  /* The "." in SpeakFox<b>.</b> is bidi-neutral: on the Arabic page it reorders
     to the front and the wordmark reads ".SpeakFox". */
  direction:ltr; unicode-bidi:isolate;
}
.nav__logo b{ color:var(--accent); }

.nav__links{ display:flex; align-items:center; gap:6px; }

.nav__browse{
  display:inline-flex; align-items:center; min-height:44px;
  padding:0 10px; border-radius:999px;
  font-size:.93rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  white-space:nowrap;
}
.nav__browse:hover{ background:var(--band, #E5E1D8); color:var(--ink); }
/* The pill is brand + picker + CTA on a phone. "Browse videos" is one tap away
   in the breadcrumb directly below it on every page that has this header, so it
   is the row's first casualty — and it is the same casualty everywhere, which is
   the point of this file. */
@media (max-width:699px){
  .nav__browse{ display:none; }
}

/* A <details> holding real <a> links, not a <select> and not a JS menu: a
   crawler must be able to follow them and it must open with JavaScript off. */
.lang{ position:relative; }
.lang__sum{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; min-width:44px;
  padding:0 12px; border-radius:999px;
  font-size:.9rem; font-weight:500; color:var(--ink-2);
  white-space:nowrap;
}
.lang__sum::-webkit-details-marker{ display:none; }
.lang__sum:hover{ background:var(--band, #E5E1D8); }
.lang[open] .lang__sum{ background:var(--band, #E5E1D8); color:var(--ink); }
.nav__ic{
  width:16px; height:16px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.lang__menu{
  /* Start-aligned, because the control it belongs to now sits at the start of the
     row: hung from its end edge the menu drifted left of the globe. */
  position:absolute; inset-inline-start:0; top:calc(100% + 8px);
  z-index:2;
  min-width:170px; padding:6px;
  background:var(--surface, var(--card, #FFFFFF));
  border:1px solid var(--rule);
  border-radius:14px;
  box-shadow:var(--shadow-card, 0 10px 28px -14px rgba(0,0,0,.28));
  display:grid; gap:2px;
  max-height:min(70vh, 420px); overflow-y:auto; overscroll-behavior:contain;
}
/* Below 700px the menu stops hanging off its summary and pins itself to the
   viewport. Anchored to the summary it opened off the LEFT edge of every phone —
   and off the left produces no scrollbar, so the lost column was simply
   unreachable. See .nav__pill::before for why `fixed` resolves against the
   viewport here at all. */
@media (max-width:699px){
  /* It hangs from the *bottom*, not from a fixed top offset: the pill's height is
     not a constant — the store button wraps to a second row in the longer
     languages — and a menu at top:70px covered it. Bottom also puts the list
     under the thumb rather than up by the ear. */
  .lang__menu{
    position:fixed;
    inset:auto 12px calc(12px + env(safe-area-inset-bottom, 0px));
    min-width:0; width:auto;
    grid-template-columns:repeat(2, minmax(0,1fr));
    padding:8px;
    box-shadow:0 18px 50px -12px #00000059;
  }
  /* Visually hidden, NOT display:none — the endonym is the summary's accessible
     name, and removing it leaves a screen reader with an unlabelled control. */
  .lang__sum span{
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap;
  }
}
.lang__menu a{
  display:flex; align-items:center; min-height:44px;
  padding:0 12px; border-radius:9px;
  text-decoration:none; color:var(--ink-2); font-size:.9rem;
}
.lang__menu a:hover{ background:var(--band, #E5E1D8); color:var(--ink); }
.lang__menu a[aria-current]{ color:var(--ink); font-weight:700; }

/* The only dark pill on any of these pages, and only the nav wears it: the App
   Card and the closing bands carry Apple's badge instead. */
.dcta{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px;
  background:var(--ink); color:#fff;
  border-radius:999px; padding:10px 22px;
  font-size:.95rem; font-weight:600; text-decoration:none;
  text-align:center;
}
.dcta:hover{ background:#2A2822; }
.nav__cta{ padding:8px 18px; font-size:.9rem; white-space:nowrap; }

/* The pill is the row that overflows first, and Russian is the locale that
   proves it: "Скачать приложение" at 320px pushed the CTA 29px off-screen and
   gave the whole document a horizontal scrollbar. Two things fix it, both taken
   from the one-pager, which had this exact bug: the label is the short form
   ("Скачать", as in content/ru.json), and below 400px the row gives up padding
   and type size. `min-height:44px` on .dcta means shrinking the padding can
   never shrink the tap target. */
@media (max-width:560px){
  .nav{ padding-top:8px; }
  .nav__pill{ padding-inline:13px 8px; gap:8px; }
  /* -2px on the wordmark buys the 9px that keeps a 360px Russian pill on one
     row. The sticky header is the one element whose height is paid on every
     screenful, so it is measured, not eyeballed. */
  .nav__logo{ font-size:1.06rem; }
  .nav__cta{ font-size:.875rem; padding-inline:14px; }
  .lang__sum{ padding-inline:10px; }
}
@media (max-width:400px){
  .nav__pill{ padding-inline-start:11px; gap:6px; }
  .nav__cta{ padding:8px 12px; font-size:.8rem; }
  .nav__logo{ font-size:1.02rem; }
  .lang__sum{ padding-inline:8px; }
}