/* Mobile nav bar — LIVE EXPERIMENT (2026-08-28).

   The desktop nav sits on two frosted capsules — the surface colour at 80%
   over a 15px backdrop blur. The phone drops both (the frames show the
   wordmark bare on the hero green). This is what the same treatment looks
   like as ONE full-width bar instead: fixed to the top, running edge to edge,
   under the wordmark and the Menu pill.

   THE CLIENT EXPECTS TO COMPARE AND PROBABLY REVERT. Nothing else in the
   project knows this file exists. Reverting is: drop `rdk-nav-bar` from the
   <body> class, drop the <link> in index.html, delete this file. Do not fold
   it into css/nav.css.

   A full-width bar was tried ON DESKTOP once before and reverted
   (2026-08-26); the client preferred the capsules there. Both gotchas that
   cost time then are handled below. */

@media (max-width: 767px) {
  /* The two numbers to tune.

     BLUR — 15 is what the desktop capsules use (their `blur(15 * --u)`
     resolves to 15 at the design's 1600) and the bar started there to match.
     A full-width bar carries far more blurred area than two small capsules,
     so the same radius reads much heavier; 8 is where it settled.

     TINT — the capsules are their surface colour at 80%. The bar takes 70%
     (client, 2026-08-28), which is why `--nav-plate` is restated here rather
     than edited in css/nav.css: that property is shared with the desktop
     capsules and they keep their 80%. Safe to override on the phone because
     both capsules are `background: none` there, so the bar is the only thing
     reading it.

     The three rules below are the same three surfaces css/nav.css defines,
     at the same hues. They sit at EQUAL specificity — `body.rdk-nav-bar
     .rdk-nav` and `body.rdk-nav-bar .rdk-nav--on-green` are both (0,2,1) —
     so source order decides and the state rules have to stay after the base
     one, or the dark default would win over green and light. */
  body.rdk-nav-bar {
    --nav-bar-blur: 8px;
    --nav-bar-tint: 0.7;
  }

  body.rdk-nav-bar .rdk-nav {
    --nav-plate: rgba(0, 20, 7, var(--nav-bar-tint));
  }

  body.rdk-nav-bar .rdk-nav--on-green {
    --nav-plate: rgba(0, 191, 0, var(--nav-bar-tint));
  }

  body.rdk-nav-bar .rdk-nav--on-light {
    --nav-plate: rgba(255, 255, 255, var(--nav-bar-tint));
  }

  /* One bar behind everything in the nav.

     `z-index: -1` is the first gotcha and it is not optional: an absolutely
     positioned box beats every NON-positioned sibling, so without it this
     paints straight over the wordmark and the Menu pill. The nav is
     `z-index: 100` and so is its own stacking context — a negative index here
     goes behind the nav's content and no further, not behind the page.

     `left: 0 / right: 0` is the second. An absolutely positioned child is laid
     out against its ancestor's PADDING box, whose edges are the border box's
     when there is no border — so this reaches back out through the nav's own
     12px `padding-inline` and touches the viewport edges, which is what
     "edge to edge" needs.

     `top` reaches past the nav's own 12px offset to the very top of the page,
     and the bar carries the same 12 below it so the nav sits centred in it. */
  body.rdk-nav-bar .rdk-nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -12px;
    right: 0;
    bottom: -12px;
    left: 0;
    background: var(--nav-plate);
    /* Flat px, not `--u`-scaled: `15 * --u` would leave 3.7px on a phone,
       which is not a frost at all. The -webkit- prefix is still required in
       Safari. */
    -webkit-backdrop-filter: blur(var(--nav-bar-blur));
    backdrop-filter: blur(var(--nav-bar-blur));
    /* Same crossfade the capsules use, so the surface change reads as a fade
       rather than a switch. */
    transition: background-color 0.35s ease;
  }

  /* THE HIDE HAS TO TRAVEL FURTHER NOW. `css/nav.css` parks the nav with
     `translateY(-130%)`, which is measured against the nav's OWN box and
     clears it exactly — but this bar hangs 12px below that box, so 12px of it
     stayed on screen at the top edge while the nav was hidden. Measured:
     -130% is -52.7px, which puts the nav's box bottom at -0.2 and the bar's
     at +11.8.

     Stated in px rather than as a percentage because the two amounts it has
     to clear are not proportional to the nav's height: its own 12px `top`
     offset, plus the bar's 12px drop below it. 32 covers both with 8px to
     spare. */
  body.rdk-nav-bar .rdk-nav--hidden {
    transform: translateY(calc(-100% - 32px));
  }

  /* The hero drops it, exactly as the desktop capsules do (client,
     2026-08-25: the landing view shows no plate at all). `--nav-plate` alone
     would not do it — `backdrop-filter: blur()` frosts on its own whatever
     colour sits under it, so the filter has to come off too. */
  body.rdk-nav-bar .rdk-nav--at-top::before {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* And the open menu drops it: the overlay is one flat green sheet, and a
     tinted bar across the top of it reads as a seam rather than as chrome. */
  body.rdk-nav-bar .rdk-nav--menu-open::before {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}