/* Match the mobile route strip in rutamarcos/base.css.
   Keep this override local to Foxy Lab; shared/route-dock.css is the base. */
@media (max-width: 820px) {
  .route-dock {
    --dock-font: "Archivo", "Arial Narrow", sans-serif;
    --dock-ink: #f4e9e4;
    --dock-char: #1a0707;
    --dock-amber: #ffb43a;
    --dock-hot-stops: #fff3dc 0, #ffe08a 18%, #ffb43a 42%, #ff6a1f 72%, #e0401c 100%;
    gap: 0;
    padding: 0.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, #112a2d, #3c2431 50%, #621f33);
    box-shadow: 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .route-dock__item {
    width: auto;
    min-width: 5.5rem;
    padding: 0.85rem 1rem 0.8rem;
    border-radius: 0.3rem;
    transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .route-dock__item + .route-dock__item {
    border-left: 1px solid rgba(18, 9, 9, 0.4);
  }

  .route-dock__label,
  .route-dock__item[aria-current="page"] .route-dock__label {
    color: var(--dock-ink);
    font: 600 0.8125rem/1 var(--dock-font);
    font-stretch: 112%;
    letter-spacing: 0;
    text-transform: none;
  }

  .route-dock__item[aria-current="page"] {
    background: radial-gradient(circle at 50% 70%, var(--dock-hot-stops));
  }

  .route-dock__item[aria-current="page"] .route-dock__label {
    color: var(--dock-char);
  }

  .route-dock__item:focus-visible {
    outline: 2px solid var(--dock-amber);
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-dock__item {
    transition: none;
  }
}