/* Adapted from React Bits "FlowingMenu" – https://reactbits.dev – Copyright (c) 2026 David Haz.
   MIT + Commons Clause (see react-bits/LICENSE.md). Ported to vanilla JS for Amergin Commerce; not for redistribution as a component. */

/* Flowing menu: product-category rows. Without JS (and on touch, narrow or reduced-motion screens)
   each row is a static link with a small photo. flowing-menu.js adds a petrol band that slides in
   from the edge the pointer (or keyboard focus) came from, carrying a slow marquee of name + photo.

   Theme it by setting any of these on the list or an ancestor (they fall back to the site tokens):
   --rb-flowing-menu-text, -muted, -bg, -line, -accent, -accent-light,
   --rb-flowing-menu-band-bg, -band-text, -band-muted, -font, -stretch, -name-size,
   --rb-flowing-menu-bleed (how far the band reaches past the row ends; 0 for an edge-to-edge list) */

.rb-flowing-menu {
  --rbfm-text: var(--rb-flowing-menu-text, var(--petrol, #102a33));
  --rbfm-muted: var(--rb-flowing-menu-muted, var(--stone, #56656b));
  --rbfm-bg: var(--rb-flowing-menu-bg, var(--white, #ffffff));
  --rbfm-line: var(--rb-flowing-menu-line, var(--line, #d2dada));
  --rbfm-accent: var(--rb-flowing-menu-accent, var(--copper, #894b1f));
  --rbfm-accent-light: var(--rb-flowing-menu-accent-light, var(--copper-light, #e1b48e));
  --rbfm-band-bg: var(--rb-flowing-menu-band-bg, var(--petrol, #102a33));
  --rbfm-band-text: var(--rb-flowing-menu-band-text, #ffffff);
  --rbfm-band-muted: var(--rb-flowing-menu-band-muted, rgba(255, 255, 255, 0.74));
  --rbfm-font: var(--rb-flowing-menu-font, var(--font, "Archivo", "Helvetica Neue", Arial, sans-serif));
  --rbfm-stretch: var(--rb-flowing-menu-stretch, 122%);
  --rbfm-name-size: var(--rb-flowing-menu-name-size, clamp(1.5rem, 1.05rem + 2vw, 2.75rem));
  --rbfm-status-w: 11rem;
  --rbfm-enquire-w: 7rem;
  --rbfm-bleed: var(--rb-flowing-menu-bleed, 24px);

  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rbfm-line);
  background: var(--rbfm-bg);
  color: var(--rbfm-text);
  font-family: var(--rbfm-font);
}

/* ---------- Row (static layout, also the no-JS state) ---------- */
.rb-flowing-menu__item {
  position: relative;
  display: grid;
  /* column-gap 0 so a row without a photo has no empty gutter; spacing sits on the thumb */
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "link thumb" "meta meta";
  row-gap: 12px;
  padding-block: 24px;
  border-top: 1px solid var(--rbfm-line);
}

.rb-flowing-menu__link {
  grid-area: link;
  display: grid;
  gap: 6px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
/* The whole row opens the category; the enquiry link sits above this layer */
.rb-flowing-menu__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.rb-flowing-menu__link:focus { outline: none; }
.rb-flowing-menu__link:focus-visible::after {
  outline: 2px solid var(--rbfm-accent);
  outline-offset: -2px;
}

.rb-flowing-menu__name {
  font-size: var(--rbfm-name-size);
  font-stretch: var(--rbfm-stretch);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  transition: color 0.2s;
}
.rb-flowing-menu__desc {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rbfm-muted);
}

.rb-flowing-menu__status,
.rb-flowing-menu__enquire {
  grid-area: meta;
  align-self: center;
  position: relative;
  z-index: 2;
  transition: color 0.25s 0.06s;
}
.rb-flowing-menu__status {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--rbfm-muted);
  pointer-events: none; /* clicks fall through to the row link */
}
.rb-flowing-menu__status::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  transition: background-color 0.25s 0.06s, border-color 0.25s 0.06s;
}
.rb-flowing-menu__status--live { color: var(--rbfm-text); }
.rb-flowing-menu__status--live::before { background: var(--rbfm-accent); border-color: var(--rbfm-accent); }

.rb-flowing-menu__enquire {
  justify-self: end;
  padding-block: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rbfm-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.rb-flowing-menu__enquire:hover { text-decoration-thickness: 2px; }
.rb-flowing-menu__enquire:focus-visible {
  outline: 2px solid var(--rbfm-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Small photo in the static row: a pill, echoing the photos in the animated band */
.rb-flowing-menu__thumb {
  grid-area: thumb;
  align-self: center;
  width: 84px;
  height: 56px;
  margin-inline-start: 18px;
  object-fit: cover;
  border-radius: 999px;
}

.rb-flowing-menu__item:hover .rb-flowing-menu__name { color: var(--rbfm-accent); }

@media (max-width: 379px) {
  .rb-flowing-menu__thumb { width: 64px; height: 44px; margin-inline-start: 14px; }
}

@media (min-width: 900px) {
  .rb-flowing-menu__item {
    grid-template-columns: minmax(0, 1fr) auto var(--rbfm-status-w) var(--rbfm-enquire-w);
    grid-template-areas: "link thumb status enquire";
    align-items: center;
    padding-block: 32px;
  }
  .rb-flowing-menu__link { padding-inline-end: 24px; }
  .rb-flowing-menu__status { grid-area: status; }
  .rb-flowing-menu__enquire { grid-area: enquire; }
  .rb-flowing-menu__thumb { width: 96px; height: 60px; margin-inline: 0 40px; }
}

/* ---------- Enhanced state (class set by flowing-menu.js) ---------- */
.rb-flowing-menu--live .rb-flowing-menu__thumb { display: none; }
.rb-flowing-menu--live .rb-flowing-menu__item:hover .rb-flowing-menu__name { color: inherit; }

/* Clip layer: sits over the name, under the status and enquiry link, never takes the pointer.
   It reaches a little past the row ends (into the container gutter) so text on the band has room. */
.rb-flowing-menu__clip {
  position: absolute;
  inset: 0 calc(var(--rbfm-bleed) * -1);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.rb-flowing-menu__band {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--rbfm-band-bg);
  color: var(--rbfm-band-text);
}
/* Keyboard focus on the row link: ring drawn on the band so it stays visible over it */
.rb-flowing-menu__item:has(.rb-flowing-menu__link:focus-visible) .rb-flowing-menu__band {
  box-shadow: inset 0 0 0 2px var(--rbfm-accent-light);
}

/* The marquee fades out before the status and enquiry columns so they stay legible on the band */
.rb-flowing-menu__track {
  height: 100%;
  overflow: hidden;
  --rbfm-fade-end: calc(100% - var(--rbfm-status-w) - var(--rbfm-enquire-w) - var(--rbfm-bleed));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(var(--rbfm-fade-end) - 8rem), transparent calc(var(--rbfm-fade-end) - 1rem));
  mask-image: linear-gradient(90deg, transparent 0, #000 3rem, #000 calc(var(--rbfm-fade-end) - 8rem), transparent calc(var(--rbfm-fade-end) - 1rem));
}
.rb-flowing-menu__inner {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  will-change: transform;
}
.rb-flowing-menu__part {
  display: flex;
  flex: none;
  align-items: center;
  height: 100%;
}
.rb-flowing-menu__word {
  padding-inline: 0.5em;
  font-size: var(--rbfm-name-size);
  font-stretch: var(--rbfm-stretch);
  font-weight: 380;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rb-flowing-menu__pill {
  flex: none;
  height: 56%;
  aspect-ratio: 5 / 2;
  margin-inline: 0.25em 0.5em;
  border-radius: 999px;
  background: var(--rbfm-img, none) 50% 50% / cover no-repeat, rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(225, 180, 142, 0.35);
}
/* Rows without a photo (planned areas) get a copper ring, the same mark as their status */
.rb-flowing-menu__dot {
  flex: none;
  width: 0.34em;
  height: 0.34em;
  margin-inline: 0.55em 0.75em;
  border: 2px solid var(--rbfm-accent-light);
  border-radius: 50%;
  font-size: var(--rbfm-name-size);
}

/* Status and enquiry link on the band */
.rb-flowing-menu__item--active .rb-flowing-menu__status { color: var(--rbfm-band-muted); }
.rb-flowing-menu__item--active .rb-flowing-menu__status--live { color: var(--rbfm-band-text); }
.rb-flowing-menu__item--active .rb-flowing-menu__status--live::before {
  background: var(--rbfm-accent-light);
  border-color: var(--rbfm-accent-light);
}
.rb-flowing-menu__item--active .rb-flowing-menu__enquire { color: var(--rbfm-accent-light); }
.rb-flowing-menu__item--active .rb-flowing-menu__enquire:focus-visible { outline-color: var(--rbfm-accent-light); }