/* ============================================================================
   RideNest mobile nav (rn-mobile-nav.css) — 2026-07-10
   Hamburger + dropdown menu for the unified pill nav (.rn-nav / .rnx-nav).
   Markup is injected by /js/rn-mobile-nav.js?v=20260721rc1 on every page; this sheet only
   styles the burger, scrim, and panel. Desktop (>1100px) never sees it.
   Motion follows the fluid-interface doctrine: respond on pointer-down,
   spring-flavored enter with staggered links, symmetric exit along the same
   path, reduced-motion crossfade fallback.
   ============================================================================ */

.rn-burger,
.rn-mnav-scrim,
.rn-mnav-panel { display: none; }

@media (max-width: 1300px) {
  .rn-nav-links, .rnx-nav-links, .rn-location, .rnx-location, .rn-nav-actions > i, .rnx-nav-actions > i { display: none !important; }

  /* --- trigger ------------------------------------------------------------ */
  .rn-burger {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 999px;
    background: var(--cream, #fff9ee);
    box-shadow: inset 0 0 0 2px rgba(7, 25, 67, .12);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 100ms ease-out, background .25s ease;
  }

  .rn-burger:active { transform: scale(.92); }

  .rn-burger:focus-visible {
    outline: 4px solid rgba(242, 114, 85, .24);
    outline-offset: 3px;
  }

  .rn-burger i {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
    pointer-events: none;
  }

  .rn-burger i::before,
  .rn-burger i::after,
  .rn-burger i b {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2.5px;
    border-radius: 999px;
    background: var(--navy, #071943);
    transition: transform .34s cubic-bezier(.32, 1.16, .4, 1), opacity .2s ease;
  }

  .rn-burger i::before { top: 0; }
  .rn-burger i b      { top: 5.75px; }
  .rn-burger i::after { bottom: 0; }

  html.rn-mnav-open .rn-burger { background: rgba(242, 114, 85, .1); }
  html.rn-mnav-open .rn-burger i::before { transform: translateY(5.75px) rotate(45deg); }
  html.rn-mnav-open .rn-burger i b       { opacity: 0; transform: scaleX(.4); }
  html.rn-mnav-open .rn-burger i::after  { transform: translateY(-5.75px) rotate(-45deg); }

  /* at phone width the bar CTA can't share the pill with brand + burger —
     the menu carries the waitlist CTA instead */
  @media (max-width: 600px) {
    .rn-nav-cta, .rnx-nav-cta { display: none; }
    .rn-nav-actions, .rnx-nav-actions { gap: 0; }
  }

  /* --- scrim -------------------------------------------------------------- */
  .rn-mnav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(7, 25, 67, .38);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s ease, visibility 0s linear .32s;
  }

  html.rn-mnav-open .rn-mnav-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity .32s ease, visibility 0s;
  }

  /* keep the pill (and its burger) above the scrim while the menu is up */
  html.rn-mnav-open .rn-nav,
  html.rn-mnav-open .rnx-navwrap { z-index: 9992; }

  /* the home hero isolates its stacking context, which would trap the pill
     under the scrim — release it only while the menu is open */
  html.rn-mnav-open .rn-hero { isolation: auto; }

  /* --- panel -------------------------------------------------------------- */
  .rn-mnav-panel {
    position: fixed;
    z-index: 9991;
    left: 4%;
    right: 4%;
    display: flex;
    flex-direction: column;
    padding: 10px 18px 18px;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    border-radius: 26px;
    box-shadow: 0 24px 64px rgba(6, 28, 57, .22);
    overflow: auto;
    overscroll-behavior: contain;
    /* anchored to the burger in the top-right of the pill */
    transform-origin: 88% -14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(.96);
    /* exit mirrors the enter path (up + shrink toward the trigger) */
    transition:
      transform .26s cubic-bezier(.5, 0, .6, 1),
      opacity .22s ease,
      visibility 0s linear .26s;
  }

  html.rn-mnav-open .rn-mnav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    /* spring-flavored settle, gentle overshoot */
    transition:
      transform .44s cubic-bezier(.3, 1.24, .42, 1),
      opacity .2s ease,
      visibility 0s;
  }

  .rn-mnav-links {
    display: flex;
    flex-direction: column;
  }

  .rn-mnav-links a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 4px 8px;
    color: var(--navy, #071943);
    font-family: var(--font, "Pally", Arial, sans-serif);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
    border-bottom: 1px solid rgba(7, 25, 67, .08);
    -webkit-tap-highlight-color: transparent;
    transition: color .2s ease, background 100ms ease-out;
  }

  .rn-mnav-links a:last-child { border-bottom: 0; }

  .rn-mnav-links a::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--sky, #4ebdf7);
    transition: background .2s ease, transform .2s ease;
  }

  .rn-mnav-links a:active {
    background: rgba(242, 114, 85, .07);
    border-radius: 14px;
  }

  .rn-mnav-links a.is-active,
  .rn-mnav-links a[aria-current="page"] { color: var(--orange-text, #C8443A); }

  .rn-mnav-links a.is-active::before,
  .rn-mnav-links a[aria-current="page"]::before {
    background: var(--orange, #F27255);
    transform: scale(1.25);
  }

  .rn-mnav-links a:focus-visible {
    outline: 4px solid rgba(242, 114, 85, .24);
    outline-offset: -4px;
    border-radius: 14px;
  }

  /* --- footer: service area + goo CTA ------------------------------------- */
  .rn-mnav-foot {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 16px;
  }

  .rn-mnav-area {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(7, 25, 67, .62);
    font-family: var(--font, "Pally", Arial, sans-serif);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    padding: 0 8px;
  }

  .rn-mnav-area svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
  }

  .rn-mnav-cta {
    width: 100%;
    height: 58px;
    font-size: 17px;
  }

  /* --- staggered link reveal ---------------------------------------------- */
  .rn-mnav-panel .rn-mnav-links a,
  .rn-mnav-panel .rn-mnav-foot > * {
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .18s ease, transform .22s cubic-bezier(.5, 0, .6, 1);
  }

  html.rn-mnav-open .rn-mnav-panel .rn-mnav-links a,
  html.rn-mnav-open .rn-mnav-panel .rn-mnav-foot > * {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity .3s ease calc(40ms + var(--i, 0) * 36ms),
      transform .46s cubic-bezier(.3, 1.2, .42, 1) calc(40ms + var(--i, 0) * 36ms);
  }

  /* --- scroll lock --------------------------------------------------------- */
  html.rn-mnav-open,
  html.rn-mnav-open body { overflow: hidden; }

  /* --- reduced motion: gentle crossfade, no slides/springs/stagger ---------- */
  @media (prefers-reduced-motion: reduce) {
    .rn-mnav-panel,
    html.rn-mnav-open .rn-mnav-panel {
      transform: none;
      transition: opacity .2s ease, visibility 0s linear .2s;
    }
    html.rn-mnav-open .rn-mnav-panel { transition: opacity .2s ease, visibility 0s; }

    .rn-mnav-panel .rn-mnav-links a,
    .rn-mnav-panel .rn-mnav-foot > *,
    html.rn-mnav-open .rn-mnav-panel .rn-mnav-links a,
    html.rn-mnav-open .rn-mnav-panel .rn-mnav-foot > * {
      transform: none;
      transition: opacity .2s ease;
    }

    .rn-burger i::before,
    .rn-burger i::after,
    .rn-burger i b { transition: opacity .15s ease; }

    html.rn-mnav-open .rn-burger i::before { transform: translateY(5.75px) rotate(45deg); }
    html.rn-mnav-open .rn-burger i::after  { transform: translateY(-5.75px) rotate(-45deg); }
  }

  /* --- frostier surfaces when transparency is reduced ----------------------- */
  @media (prefers-reduced-transparency: reduce) {
    .rn-mnav-panel {
      background: #fff;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }
    .rn-mnav-scrim {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgba(7, 25, 67, .5);
    }
  }
}