/* News index as slides
   ---------------------------------------------------------------------------
   Upload to:  wp-content/uploads/site/toc.css

   The numbered list of all news used to print every entry at once. On an
   article page that meant twenty entries above the article itself, and it grew
   with every post published. Here it is broken into slides: ten per slide on
   an article page, twenty on the News page.

   Each slide keeps the original two-column grid, so nothing about the look of
   an individual entry changes.

   Without JavaScript the slides stay a horizontally scrollable strip and every
   entry is still reachable; only the arrows and the counter are inert. */

.toc-slides{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* The scrollbar is hidden because the arrows are the control. Trackpad and
     touch scrolling still work, and so do the arrow keys when focused. */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.toc-slides::-webkit-scrollbar{ display:none; }
.toc-slides:focus-visible{ outline:2px solid var(--red, #c4342b); outline-offset:4px; }

.toc-slide{
  flex:0 0 100%;
  min-width:100%;
  scroll-snap-align:start;
}

/* ---- Controls --------------------------------------------------------- */

.toc-nav{
  display:flex; align-items:center; justify-content:flex-end; gap:.9rem;
  margin-top:1.4rem;
}

.toc-arrow{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  cursor:pointer;
  background:transparent;
  border:1px solid var(--line-l, rgba(11,21,38,.18));
  color:var(--navy-2, #0b1526);
  transition:background .22s ease, border-color .22s ease, opacity .22s ease;
}
.toc-arrow svg{ width:18px; height:18px; display:block; }
.toc-arrow:hover{ background:var(--navy-2, #0b1526); border-color:transparent; color:#fff; }
.toc-arrow:focus-visible{ outline:2px solid var(--red, #c4342b); outline-offset:2px; }
.toc-arrow:disabled{ opacity:.28; pointer-events:none; }

.toc-count{
  font-size:.76rem; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy-2, #0b1526);
  font-variant-numeric:tabular-nums;      /* stops the width jumping 9 -> 10 */
}

/* The controls are dark everywhere, because the index sits on a light band on
   both the News page and an article page.
   An earlier version made them white on article pages, assuming the index was
   on the navy hero. It is not: the arrows and the counter were white on white
   and effectively invisible, on a control that was working perfectly.
   .on-dark remains as an opt-in, should the index ever be placed on navy. */
.toc.on-dark .toc-arrow{
  border-color:rgba(255,255,255,.26); color:#fff;
}
.toc.on-dark .toc-arrow:hover{ background:#fff; color:var(--navy-2, #0b1526); }
.toc.on-dark .toc-count{ color:#fff; }

@media (max-width:720px){
  .toc-nav{ justify-content:space-between; margin-top:1.1rem; }
}

@media (prefers-reduced-motion:reduce){
  .toc-slides{ scroll-behavior:auto; }
  .toc-arrow{ transition:none; }
}

/* ---- The card grid uses the same mechanism ----------------------------- */

.hub-slides{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.hub-slides::-webkit-scrollbar{ display:none; }
.hub-slides:focus-visible{ outline:2px solid var(--red, #c4342b); outline-offset:4px; }

.hub-slide{
  flex:0 0 100%;
  min-width:100%;
  scroll-snap-align:start;
}

/* The cards sit on a light band, so the controls stay dark here whatever the
   index above them is doing. */
.hub-nav .toc-arrow{ border-color:var(--line-l, rgba(11,21,38,.18)); color:var(--navy-2, #0b1526); }
.hub-nav .toc-arrow:hover{ background:var(--navy-2, #0b1526); color:#fff; }
.hub-nav .toc-count{ color:var(--navy-2, #0b1526); }

@media (prefers-reduced-motion:reduce){
  .hub-slides{ scroll-behavior:auto; }
}