/* KeibiDrop mobile layout corrections.

   Loaded last, after each page's own <style> block, so it wins on the few
   properties it sets and changes nothing else. Every page carries a sticky
   <nav> with the same markup, but 71 of the 92 pages hold their own copy of
   the stylesheet inline; this file is the one place that reaches all of them.

   What it corrects, measured with scripts/check_mobile.py:

   1. The header. The old mobile rule let <nav> wrap, and put .nav-links on a
      row of their own at width 100%. The logo took the first row and the links
      wrapped onto two more, so the header stood 145px tall - 17% of a 390px
      phone, 26% of a 320px one, and 183px (32%) on the pages carrying eight
      links. It is sticky, so that space was gone at every scroll position,
      not only at the top. The links now stay on one row and that row scrolls
      sideways, which holds the header near 56px.

   2. Anchor targets. Nothing in the site set scroll-margin-top, so following
      any of the 203 in-page links on 42 pages put the heading behind the
      sticky header and left the reader on the wrong line. That fault is not
      specific to phones - the header is sticky at every width - so the rule
      sits outside the media query.

   3. Tap targets. Header links measured 22px tall against the 44px a
      fingertip needs, packed 16px apart on a wrapped block.

   Desktop layout is untouched: rules 1 and 3 are inside the media query, and
   rule 2 only takes effect when an element is the target of a scroll.
*/

/* --- 2. Anchor targets, at every width ----------------------------------- */

/* The header is not one height. Measured across all 92 pages it is 71px, 77px
   or 89px, and the 89px band is real: between 769px and about 820px the eight
   links on index.html and companies.html wrap their own text onto a second
   line. scroll-margin-top has to clear the tallest header that can occur at
   the width it is read at, so the number changes with the width rather than
   being one guess that is wrong in a narrow band.

       uv run scripts/check_mobile.py --json --viewport 769x1024

   prints the heights again if the navigation gains or loses a link. */

:root { --nav-h: 77px; }

@media (min-width: 769px) and (max-width: 900px) { :root { --nav-h: 89px; } }

/* scroll-margin-top applies only when the element is scrolled to, so a broad
   selector here costs nothing and catches the ids that live on sections and
   list items as well as on headings. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* --- 1 and 3. The header on phones --------------------------------------- */

@media (max-width: 768px) {
  :root { --nav-h: 61px; }

  nav {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 0 8px 16px;
    /* The fade below is positioned against this. nav is already sticky, so
       it establishes a containing block either way; say so explicitly. */
    position: sticky;
  }

  /* The wordmark keeps its row and gains a full tap target. At 22px tall it
     is 134px wide, which is 42% of a 320px screen and leaves a 162px track
     for up to eight links. 18px gives 24px of that back without making the
     mark hard to read - it is the widest single thing in the header. */
  nav > a:first-child {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  nav img { height: 18px; }

  /* One row that scrolls sideways, rather than three rows that do not. */
  .nav-links {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 2px;
    padding-right: 28px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }

  .nav-links a {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* The call to action is held to the same 44px as its neighbours. A pill
     that is easier to see than to hit is worse than no pill. */
  .nav-links .btn-sm {
    min-height: 44px;
    padding: 0 16px;
    align-self: center;
  }

  /* A scroller with a hard edge reads as a cut-off row. The fade says there
     is more to the right. It stops short of the border so the rule underneath
     the header stays unbroken. */
  nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 1px;
    width: 32px;
    pointer-events: none;
    background: linear-gradient(to left, rgba(17, 17, 17, 0.92), rgba(17, 17, 17, 0));
  }
}

/* A phone held in landscape has the height of a watch. Give the screen back
   and let the header scroll away; it is one swipe to the top to recover it. */
@media (max-width: 900px) and (max-height: 460px) {
  nav { position: static; }
  :root { --nav-h: 0px; }
}

/* Someone who has asked for less motion has usually also asked for less
   chrome that moves independently of the page. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}