/* =====================================================================
   pet-section-jump -- the floating quick-jump / filter chip row.

   Shared component, not a fish thing: any page with many sections can
   render the markup contract documented at the top of
   assets/pet-section-jump.js and get this. Wired today to /pets/fish/
   (species chips, filter mode) and, in jump mode, to /shop/ (7 category
   sections), /pets/ (7 direction cards), /pets/rodents/ (6 species cards)
   and /pets/dogs/ (5 breed cards). /shop/aquariums/ and /shop/terrariums/
   were once listed here as callers-to-be and deliberately are not: at two
   or three blocks each they sit under the four-section threshold, and a row
   floating over three headings costs more phone screen than it saves.

   Lives in its own numbered part rather than inside 80-pets.css because it
   is no longer a pets component, and after it so that a page-family sheet
   cannot accidentally outrank the component it is calling.

   All logical properties, no physical margins: the Hebrew pages' own
   dir="rtl" mirrors the whole thing for free.
   ===================================================================== */

.pet-section-jump {
  /* The page gutter this row has to line its first chip up with. It is not
     a number invented here: .pet-section-page (30-footer.css) is sized
     `width: calc(100vw - 48px); margin: 0 auto`, i.e. a 24px gutter each
     side, and 60-legal.css narrows that to `calc(100vw - 24px)` -- a 12px
     gutter -- inside its own max-width: 780px block. The mobile value below
     is set in the matching media query so the two cannot drift apart. */
  --pet-section-jump-gutter: 24px;
  /* Offset from the top of the viewport. The site header is position:
     relative, not sticky (10-header.css), so it scrolls away and 0 is the
     correct resting offset; the variable exists so a caller that does sit
     under a fixed header can say so without editing this file. */
  --pet-section-jump-top: 0px;

  background: var(--pet-background);
  border-block-end: 1px solid var(--pet-border);
  margin-block-start: 1.2rem;
  padding-block: .7rem;
  position: sticky;
  top: var(--pet-section-jump-top);
  /* Above the section content it slides over; below the header dropdowns'
     fixed menus (60, 10-header.css) and far below the two bottom-anchored
     floats -- WhatsApp 9999 and back-to-top 9998 (30-footer.css) -- which
     it never shares screen geometry with anyway. */
  z-index: 40;
}

/* Logged-in WordPress puts a fixed 32px admin bar above everything; without
   this the row sticks underneath it and the first chip row is unreadable for
   exactly the people editing the page. Below 783px core switches the bar to
   position: absolute, so it scrolls away and needs no offset here. */
@media (min-width: 783px) {
  .admin-bar .pet-section-jump { --pet-section-jump-top: 32px; }
}

.pet-section-jump-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* The chips inherit the .pet-filter-chip pill (50-catalog.css). is-active is
   the component's "this is the section you are looking at" state -- set by
   the scroll spy in jump mode and by the selection in filter mode -- using
   the same fill the shared chip hover uses, so the vocabulary stays one
   vocabulary. */
.pet-section-jump-chip.is-active {
  background: var(--pet-primary);
  border-color: var(--pet-primary);
  color: var(--pet-surface);
}

/* Filter mode only: "show all" exists only while a section is selected (the
   script unhides it). Visibly a different kind of chip -- unfilled, muted
   dashed edge -- so it reads as the exit, not one more section. */
.pet-section-jump-reset {
  background: transparent;
  border-color: var(--pet-border-input);
  border-style: dashed;
  color: var(--pet-text-secondary);
}
/* The UA's [hidden] display:none suffices for the sections (they carry no
   author display rule to beat), but the reset chip's is stated explicitly:
   .pet-filter-chip's display:inline-block outranks the UA default, exactly
   the trap .pet-shop-subfilter-group[hidden] documents in 50-catalog.css. */
.pet-section-jump-reset[hidden] { display: none; }

/* Anchor jumps land under the sticky row rather than behind it. The shared
   2rem on .pet-product-section is not enough to clear it.

   The second selector is not a duplicate. A "section" does not have to be a
   <section>: on /pets/rodents/ and /pets/dogs/ it is a specialty card, and
   .pet-specialty-grid article (80-pets.css) already sets scroll-margin-top:
   2rem at specificity 0-1-1, which outranks this bare attribute's 0-1-0 no
   matter which file loads last. Without the override those cards keep their
   2rem and every chip lands the card's heading half behind the row -- the
   defect looks like the anchor is off by exactly the height of the bar. */
[data-section-jump-section],
.pet-specialty-grid article[data-section-jump-section] { scroll-margin-top: 6rem; }

@media (max-width: 780px) {
  /* THE MOBILE ROW. Reported from a 390px iPhone: the pills sat flush
     against both screen edges -- the first one touching the left edge, the
     last sliced through the middle of a word at the right -- which reads as
     a broken layout rather than as "there is more, scroll it".

     Three things fix that, and they work together:

     1. The row scrolls instead of wrapping. 19 wrapped chips eat a third of
        the viewport before the catalogue starts.
     2. The nav goes FULL BLEED (negative inline margin equal to the page
        gutter) while the row carries that gutter back as padding. So the
        bar's background and its bottom rule span the whole screen, the
        first chip still lines up with the page's text, and the scroll
        itself runs edge to edge -- the last chip can be scrolled entirely
        into view instead of dying against a content edge.
     3. scroll-padding-inline keeps that gutter honest after a programmatic
        scroll too, so a chip revealed by the script never lands half
        clipped under the edge.

     The overflow container is the row, not the sticky nav: overflow on the
     sticky element would clip its own children, and horizontal scrolling
     belongs to the pills alone. RTL needs no override anywhere here --
     logical properties on both, and the affordance below is measured from
     actual scroll position rather than from an assumed start edge. */
  .pet-section-jump {
    --pet-section-jump-gutter: 12px; /* matches 60-legal.css's calc(100vw - 24px) */
    margin-inline: calc(var(--pet-section-jump-gutter) * -1);
  }
  .pet-section-jump-row {
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: .3rem; /* keep the scrollbar off the pills */
    padding-inline: var(--pet-section-jump-gutter);
    scroll-padding-inline: var(--pet-section-jump-gutter);
    /* The script reveals the active chip with scrollBy() and deliberately
       passes no `behavior`, so this property -- and the reduced-motion
       override at the end of this file -- is what decides whether that
       reveal animates. */
    scroll-behavior: smooth;

    /* The "it scrolls" affordance: a soft shadow that appears at an edge
       only while there is content scrolled past it, and disappears when you
       reach that end. Two `local` cover gradients painted in the bar's own
       background colour sit on top of two `scroll` shadows -- the covers
       move with the content, the shadows do not, so each shadow is hidden
       exactly when its side is fully scrolled.

       Chosen over a plain edge-fade mask on purpose: a static mask leaves
       the last chip permanently greyed once you HAVE scrolled to the end,
       which looks like the very "sliced word" defect this block exists to
       fix. And because it keys off real scroll position at each physical
       edge rather than off a start/end assumption, it is already correct
       under [dir="rtl"] -- the Hebrew page gets the shadow on the side that
       actually has more chips, with no override.

       The covers fade to the `transparent` keyword rather than to an rgba()
       copy of --pet-background's hex. Gradients interpolate in premultiplied
       alpha, so `transparent` no longer produces the grey haze that made
       hand-written rgba stops necessary years ago -- and this way the fade
       cannot drift out of sync with the token if the page ground is ever
       retuned. */
    background:
      linear-gradient(to right, var(--pet-background) 40%, transparent) left center / 34px 100% no-repeat local,
      linear-gradient(to left, var(--pet-background) 40%, transparent) right center / 34px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--pet-shadow-color) 16%, transparent), transparent) left center / 16px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--pet-shadow-color) 16%, transparent), transparent) right center / 16px 100% no-repeat scroll;
  }
  .pet-section-jump-chip, .pet-section-jump-reset { flex: 0 0 auto; }

  /* Verified at 320px as well as 390px: the gutter is the same 12px, the
     pills keep their .65rem/.9rem padding, and nothing wraps -- the row just
     scrolls further. Chips must not shrink, hence flex: 0 0 auto above. */
}

/* Someone who has asked for less motion still gets the row; it just does not
   slide under them when the script reveals a chip. */
@media (prefers-reduced-motion: reduce) {
  .pet-section-jump-row { scroll-behavior: auto; }
}