/* =========================================================================
   Department rail in the product mega-menu            (25 Aug 2026)

   The menu was four columns of text links. Adding pictures to it is the point
   of the pattern: a visitor scanning a menu recognises a matcha tin faster
   than they read "Beverage preparation". The category links stay directly
   underneath, because they are what makes the menu navigable once you know
   where you are going.

   WHY THIS IS ITS OWN STYLESHEET
   The site is styled by two files that never meet. The ten root pages load
   premium.css, whose every selector is scoped to `.pp-refresh` on the body;
   the thirty-two article, tutorial and preview pages load styles.css and carry
   no such class. The same nav markup is on all forty-three. Rail rules written
   into either file would style the menu on some pages and leave raw list items
   stacked full-width on the rest, so they live here and both sides load it.

   Selectors are therefore unprefixed, but qualified through `.nav-links` where
   they have to outrank an existing blanket rule - `.pp-refresh .nav-links a`
   in one file and `.nav-links a` in the other both style every link in the
   menu, and the card links must beat them in both.

   The rail is a plain overflow-x container. That is deliberate: it scrolls
   with a trackpad, a touch drag, shift-wheel and the keyboard with no
   JavaScript at all. script.js only adds arrow buttons on top of that, and
   only when it overflows. Nothing scrolls on its own at any point.
   ========================================================================= */

.nav-mega-rail-wrap{
  position:relative;
  margin:18px 0 4px;
}

.nav-mega-rail{
  display:flex;
  gap:12px;
  margin:0;
  padding:2px 2px 12px;
  list-style:none;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;   /* momentum scrolling on iOS */
  scrollbar-width:thin;
}
.nav-mega-rail::-webkit-scrollbar{height:6px}
.nav-mega-rail::-webkit-scrollbar-thumb{
  background:rgba(75,36,111,.25);
  border-radius:999px;
}
.nav-mega-rail::-webkit-scrollbar-track{background:transparent}

/* Fixed widths, so cards stay a consistent size and a partial next card shows
   at the clip edge - which is what tells you the rail scrolls at all. */
.nav-mega-rail .nav-rail-card{
  flex:0 0 176px;
  scroll-snap-align:start;
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-mega-rail .nav-rail-card.is-featured{flex-basis:236px}

.nav-links .nav-mega-rail .nav-rail-link{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0 0 12px;
  border:1px solid rgba(75,36,111,.18);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  color:#2a1d45;
  text-decoration:none;
}
.nav-links .nav-mega-rail .nav-rail-link:hover,
.nav-links .nav-mega-rail .nav-rail-link:focus-visible{
  border-color:#7b3fc6;
  background:#fff;
  color:#2a1d45;
}
.nav-links .nav-mega-rail .nav-rail-link:focus-visible{
  outline:2px solid #7b3fc6;
  outline-offset:2px;
}

.nav-mega-rail .nav-rail-media{
  display:block;
  aspect-ratio:4 / 3;
  background:#f6f1fa;
  overflow:hidden;
}
.nav-mega-rail .is-featured .nav-rail-media{aspect-ratio:16 / 10}
.nav-mega-rail .nav-rail-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.nav-mega-rail .nav-rail-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px 0;
}
.nav-mega-rail .nav-rail-eyebrow{
  font:800 .6rem/1 Inter,system-ui,sans-serif;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#7b3fc6;
}
.nav-mega-rail .nav-rail-name{
  font:700 .84rem/1.25 Inter,system-ui,sans-serif;
  color:#2a1d45;
}
.nav-mega-rail .nav-rail-benefit{
  font:600 .72rem/1.35 Inter,system-ui,sans-serif;
  color:#493b58;
}

/* Arrows are script.js's doing and stay hidden until it measures real
   overflow. They are a convenience on top of scrolling, never the only way. */
.nav-mega-rail-wrap .nav-rail-arrow{
  position:absolute;
  top:calc(50% - 24px);
  z-index:2;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(75,36,111,.18);
  border-radius:50%;
  background:rgba(255,255,255,.96);
  box-shadow:0 6px 16px -6px rgba(33,22,49,.4);
  color:#2a1d45;
  font-size:1.1rem;
  line-height:1;
  cursor:pointer;
}
.nav-mega-rail-wrap .nav-rail-arrow[hidden]{display:none}
.nav-mega-rail-wrap .nav-rail-arrow:hover{border-color:#7b3fc6;color:#7b3fc6}
.nav-mega-rail-wrap .nav-rail-prev{left:-10px}
.nav-mega-rail-wrap .nav-rail-next{right:-10px}

/* On a touch screen the drag IS the affordance, and a 34px circle floating
   over the first card only covers it up. Keyed off the pointer rather than a
   width, because the two stylesheets collapse the nav at different widths -
   760px on the premium pages, 960px on the article pages - and the rail should
   not have to know which page it is on. */
@media (pointer: coarse){
  .nav-mega-rail-wrap .nav-rail-arrow{display:none}
  .nav-mega-rail{scroll-snap-type:x mandatory}
  .nav-mega-rail .nav-rail-card{flex-basis:150px}
  .nav-mega-rail .nav-rail-card.is-featured{flex-basis:186px}
}

@media (prefers-reduced-motion: reduce){
  .nav-mega-rail{scroll-behavior:auto}
}
@media (prefers-reduced-motion: no-preference){
  .nav-mega-rail{scroll-behavior:smooth}
  .nav-links .nav-mega-rail .nav-rail-link{transition:border-color .2s ease,transform .2s ease}
  .nav-links .nav-mega-rail .nav-rail-link:hover{transform:translateY(-2px)}
}