/* Mobile navigation panel (prefix fw-mnav-). Only below the theme nav breakpoint (1030px); desktop navigation is untouched. */
.fw-mnav { display: none; }

@media screen and (max-width: 1029px) {
  :root {
    --fw-mnav-green: #00b84f;
    --fw-mnav-green-dark: #00963f;
    --fw-mnav-forest: #0a3d2e;
    --fw-mnav-yellow: #fbbf24;
    --fw-mnav-ink: #0f172a;
    --fw-mnav-muted: #64748b;
  }
  .hamburger { --hamburger-color-active: var(--fw-mnav-ink); }

  /* Panel: white, light green wash; scrolls inside; real height is set by mobile-nav.js (fallback below) */
  .nav-primary .menu-items-wrapper {
    background: radial-gradient(60rem 22rem at 100% 0, rgb(0 184 79 / .09), transparent 60%), radial-gradient(40rem 18rem at 0 100%, rgb(251 191 36 / .12), transparent 60%), #fff;
    height: var(--fw-mnav-h, calc(100dvh - 8.5rem)) !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0;
    transform: none;
    opacity: 0;
    transition: opacity 180ms ease-out, visibility 0s linear 180ms;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  .js-nav-active .nav-primary .menu-items-wrapper {
    background: radial-gradient(60rem 22rem at 100% 0, rgb(0 184 79 / .09), transparent 60%), radial-gradient(40rem 18rem at 0 100%, rgb(251 191 36 / .12), transparent 60%), #fff;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
    visibility: visible;
  }
  .js-nav-active .site-header { background-color: #fff; }
  .nav-primary .menu-items-wrapper > .menu-items { display: none; }

  .fw-mnav {
    box-sizing: border-box;
    color: var(--fw-mnav-ink);
    display: block;
    font-family: inherit;
    padding: 1.25rem 1rem calc(6rem + env(safe-area-inset-bottom));
  }
  .fw-mnav ul { list-style: none; margin: 0; padding: 0; }
  .fw-mnav li { margin: 0; padding: 0; }
  .fw-mnav a { text-decoration: none; }
  .fw-mnav-h {
    color: var(--fw-mnav-muted);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.2;
    margin: 0 0 .75rem .25rem;
    text-transform: uppercase;
  }

  /* 2x2 tiles; icon sits top right and pokes out of the card */
  .fw-mnav-tiles { display: grid; gap: .875rem .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.75rem !important; }
  .fw-mnav-tile {
    background: #fff;
    border: 1px solid rgb(15 23 42 / .06);
    border-radius: 1.25rem;
    box-shadow: 0 6px 18px -6px rgb(15 23 42 / .16), 0 1px 2px rgb(15 23 42 / .06);
    box-sizing: border-box;
    color: var(--fw-mnav-ink);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    justify-content: center;
    min-height: 5.25rem;
    padding: .95rem .9rem;
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }
  .fw-mnav-tile-t { font-size: 1rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; padding-right: .25rem; }
  .fw-mnav-tile-s { color: var(--fw-mnav-muted); font-size: .8125rem; font-weight: 500; line-height: 1.3; padding-right: 2.75rem; }
  .fw-mnav-ico { height: 4rem; pointer-events: none; position: absolute; right: -.3rem; top: -.85rem; width: 4rem; }
  .fw-mnav-tile:active { transform: scale(.98); }
  .fw-mnav-tile:hover, .fw-mnav-tile:focus-visible { border-color: rgb(0 184 79 / .45); }

  /* Pill links */
  .fw-mnav-pills { display: grid; gap: .625rem .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1.5rem !important; }
  .fw-mnav-pill {
    align-items: center;
    background: #fff;
    border: 1px solid rgb(15 23 42 / .12);
    border-radius: 999px;
    box-sizing: border-box;
    color: var(--fw-mnav-ink);
    display: flex;
    font-size: .9375rem;
    font-weight: 700;
    gap: .4rem;
    justify-content: space-between;
    min-height: 2.75rem;
    padding: .5rem .85rem .5rem 1.05rem;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
  }
  .fw-mnav-pill span { line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
  .fw-mnav-arrow { color: var(--fw-mnav-green); flex: none; }
  .fw-mnav-pill:hover, .fw-mnav-pill:focus-visible { border-color: var(--fw-mnav-green); color: var(--fw-mnav-green-dark); }

  /* CTA in forest green (same family as the footer) */
  .fw-mnav-cta {
    align-items: center;
    background: linear-gradient(135deg, #0b1f24, var(--fw-mnav-forest));
    border-radius: 999px;
    box-shadow: 0 10px 22px -10px rgb(10 61 46 / .7);
    box-sizing: border-box;
    color: #fff !important;
    display: flex;
    font-size: 1rem;
    font-weight: 800;
    gap: .75rem;
    justify-content: center;
    min-height: 3.5rem;
    padding: .5rem .6rem .5rem 1.5rem;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .fw-mnav-cta:active { transform: scale(.985); }
  .fw-mnav-cta-ico { align-items: center; background: var(--fw-mnav-yellow); border-radius: 50%; color: var(--fw-mnav-forest); display: inline-flex; height: 2.375rem; justify-content: center; width: 2.375rem; }

  .fw-mnav-contact { align-items: center; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; justify-content: center; margin: 1rem 0 0; }
  .fw-mnav-contact a { align-items: center; color: var(--fw-mnav-ink); display: inline-flex; font-size: .9375rem; font-weight: 700; gap: .45rem; min-height: 2.75rem; }
  .fw-mnav-contact svg { color: var(--fw-mnav-green); }
  .fw-mnav-contact .fw-mnav-logout { color: var(--fw-mnav-muted); font-weight: 600; }

  .fw-mnav a:focus-visible { outline: 3px solid var(--fw-mnav-green); outline-offset: 2px; }
  .fw-mnav-cta:focus-visible { outline-color: var(--fw-mnav-yellow); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-primary .menu-items-wrapper, .fw-mnav-tile, .fw-mnav-pill, .fw-mnav-cta { transition: none !important; }
  .fw-mnav-tile:active, .fw-mnav-cta:active { transform: none; }
}