/* ================================================================
   Weber Advertising, Section navigation  (wb-toc.css)
   ----------------------------------------------------------------
   Two wayfinding components for the long and mid-length overhaul
   pages, built on the wb- design system tokens (overhaul.css must
   load first; this file only adds the two new components and never
   restyles an existing wb- class).

     .wb-toc        a sticky in-page table of contents. On desktop it
                    rides the right rail; on phone it collapses into an
                    "On this page" disclosure that drops down over the
                    band. For the four heaviest pages.

     .wb-jumplinks  a single horizontal row of anchor chips, dropped
                    near the top of a page so a reader can skip to a
                    section. For the six mid-length pages.

   Both are generated and wired by js/wb-toc.js, which reads the H2s
   already on the page, gives each a stable id, and fills these shells.
   The CSS below is the look; the JS is the plumbing. With JS off, the
   .wb-toc is display:none (the H2 ids still resolve, so a #anchor link
   from elsewhere still lands), and the page reads top to bottom as
   normal. No em dashes anywhere, comments included.

   Naming: every selector is wb- prefixed and unique to this file
   (wb-toc*, wb-jumplinks*), so it cannot collide with overhaul.css.
   ================================================================ */

/* ----------------------------------------------------------------
   Shared: respect the same reduced-motion contract as overhaul.js.
   The components are usable with zero animation; the transitions
   below are pure polish and get switched off when asked.
   ---------------------------------------------------------------- */

/* =================================================================
   1. STICKY TABLE OF CONTENTS  (.wb-toc), heavy pages
   =================================================================
   Markup the JS emits (simplified):

     <nav class="wb-toc" aria-label="On this page">
       <button class="wb-toc__toggle" aria-expanded="false">
         On this page <i class="fa-solid fa-chevron-down"></i>
       </button>
       <p class="wb-toc__title">On this page</p>
       <ol class="wb-toc__list">
         <li><a class="wb-toc__link" href="#how-we-work">How we work</a></li>
         ...
       </ol>
     </nav>

   The JS inserts the <nav> as the first child of <body> so it can be
   position:fixed to the right rail without disturbing the band flow.
   ================================================================= */

.wb-toc{
  /* Off-canvas by default; the JS reveals it once it has links. Fixed to
     the right rail, vertically centered, clearing the floating nav up top. */
  position:fixed;
  top:46%;                            /* owner: nudged up a little so the rail sits higher and clears the lower-right reCAPTCHA badge */
  right:clamp(.75rem, 1.2vw, 1.75rem);
  transform:translateY(-50%);
  z-index:50;                         /* under the nav (which is higher), over bands */
  width:clamp(180px, 15vw, 232px);
  max-height:72vh;
  overflow:auto;
  padding:1rem 1.05rem;
  border-radius:var(--wb-radius);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  backdrop-filter:saturate(1.4) blur(14px);
  border:1px solid var(--wb-line);
  box-shadow:var(--wb-shadow-sm);
  font-family:var(--wb-body);
  /* Hidden until the JS confirms it has at least two sections to point at.
     The .is-ready class is added by the JS once the list is built. */
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.wb-toc.is-ready{ opacity:1; visibility:visible; }
/* Docking (js/wb-toc.js initDock) is scroll-linked and eased in JS, which sets an
   inline transform on the rail every frame on desktop (>=1300px). So there is no
   transform transition here (it would fight the per-frame updates), and the base
   translateY(-50%) above is just the pre-JS / reduced-motion docked fallback. */

/* RESERVE THE RIGHT GUTTER for the rail. The rail is position:fixed in the
   right margin, but the content column is 1180px centered, so on a normal
   laptop (1280 to 1600) the column runs UNDER the rail (the overlap owner
   flagged). On the pages that carry a rail, narrow the centered content
   column on wide screens so its right edge clears the rail. Content stays
   centered (symmetric gutters), the rail floats in the right gutter, and no
   band content sits beneath it. Full-bleed band backgrounds are unaffected
   (only .wb-inner, the centered column, narrows). */
@media (min-width:1300px){
  body.wb-has-toc .wb-scope{ --wb-maxw: min(1140px, calc(100vw - 560px)); }
}

/* The phone-only toggle button is hidden on the desktop rail (the list is
   always open there). It is revealed in the mobile media query below. */
.wb-toc__toggle{ display:none; }

.wb-toc__title{
  margin:0 0 .55rem;
  font-family:var(--wb-display);
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wb-muted);
}

.wb-toc__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.1rem;
  counter-reset:wb-toc;
}

.wb-toc__link{
  display:block;
  padding:.4rem .5rem .4rem .7rem;
  border-left:2px solid var(--wb-line);
  border-radius:0 6px 6px 0;
  color:var(--wb-ink-2);
  font-size:.82rem;
  line-height:1.3;
  text-decoration:none;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.wb-toc__link:hover{
  color:var(--wb-red);
  border-left-color:var(--wb-red);
  background:rgba(216,35,42,.06);
}
/* The active section, set by the JS scroll-spy. The red rule and weight make
   the reader's place obvious without moving anything. */
.wb-toc__link.is-active{
  color:var(--wb-red);
  border-left-color:var(--wb-red);
  font-weight:700;
}

/* ----------------------------------------------------------------
   Mobile TOC: below the rail breakpoint the fixed right rail would
   cover content, so the whole component drops to a pinned "On this
   page" disclosure in the bottom-right corner. Collapsed, it is just
   the button; tapping it opens the list panel above it.
   ---------------------------------------------------------------- */
@media (max-width:1299px){
  .wb-toc{
    top:auto;
    bottom:1.5rem;      /* recaptcha moved to the lower-LEFT, so the pill can sit low in the corner */
    right:1rem;
    left:auto;
    transform:none;
    width:auto;
    max-width:min(20rem, calc(100vw - 2rem));
    max-height:none;
    overflow:visible;
    padding:0;
    background:transparent;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border:0;
    box-shadow:none;
  }
  /* The pill toggle is the only thing showing when collapsed. */
  .wb-toc__toggle{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-left:auto;          /* hug the right edge */
    padding:.65rem 1.05rem;
    border-radius:999px;
    border:0;
    background:var(--wb-red-grad);
    color:#fff;
    font-family:var(--wb-display);
    font-weight:700;
    font-size:.85rem;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(216,35,42,.35);
  }
  .wb-toc__toggle i{ transition:transform .2s ease; font-size:.8em; }
  .wb-toc[aria-expanded="true"] .wb-toc__toggle .wb-toc__caret{ transform:rotate(180deg); }

  /* The title + list become the dropdown panel, hidden until opened. */
  .wb-toc__title,
  .wb-toc__list{
    display:none;
    margin-top:.6rem;
    padding:.9rem 1rem;
    border-radius:var(--wb-radius);
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:saturate(1.4) blur(14px);
    backdrop-filter:saturate(1.4) blur(14px);
    border:1px solid var(--wb-line);
    box-shadow:var(--wb-shadow);
  }
  .wb-toc[aria-expanded="true"] .wb-toc__title{ display:block; margin-bottom:0; }
  .wb-toc[aria-expanded="true"] .wb-toc__list{
    display:flex;
    max-height:60vh;
    overflow:auto;
  }
  /* On phone the rail order is button at the bottom, panel above it. */
  .wb-toc{ display:flex; flex-direction:column-reverse; align-items:flex-end; }
  .wb-toc__link{ font-size:.9rem; padding:.55rem .6rem .55rem .8rem; }
}

/* =================================================================
   2. JUMP-LINK CHIP ROW  (.wb-jumplinks), mid pages
   =================================================================
   A horizontal, wrapping (desktop) / horizontally scrolling (phone)
   row of pill chips. The JS builds it from the same H2 scan and drops
   it inline near the top of the page, inside .wb-scope, so it inherits
   the band background it sits on. It styles for a LIGHT band by
   default and flips for dark/red/honeycomb bands via the band class.

   Markup the JS emits:

     <nav class="wb-jumplinks" aria-label="Jump to a section">
       <span class="wb-jumplinks__label">Jump to</span>
       <a class="wb-jumplinks__chip" href="#what-we-do">What we do</a>
       ...
     </nav>
   ================================================================= */

.wb-jumplinks{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin:1.5rem 0 0;
  font-family:var(--wb-body);
  /* OVERRIDE a legacy landmine: custom.css styles the BARE `nav` element with a
     white gradient + Raleway 900/1.8em + a drop shadow. .wb-jumplinks is a <nav>,
     so without this it rendered as a white bar across the hero (owner flagged).
     Reset the row to be transparent and inherit normal type; the chips carry the
     look. (The sticky .wb-toc escapes this because it sets its own background.) */
  background:none;
  box-shadow:none;
  font-size:1rem;
  font-weight:400;
}

.wb-jumplinks__label{
  font-family:var(--wb-display);
  font-weight:800;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--wb-muted);
  margin-right:.15rem;
}

.wb-jumplinks__chip{
  display:inline-flex;
  align-items:center;
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid var(--wb-line);
  background:rgba(255,255,255,.7);
  color:var(--wb-ink-2);
  font-size:.85rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.wb-jumplinks__chip:hover{
  color:#fff;
  background:var(--wb-red-grad);
  border-color:transparent;
  transform:translateY(-1px);
}

/* On dark and honeycomb bands a translucent-white chip reads fine; bump the
   fill + border a little so the pill edge is clearly visible. */
.wb-band--dark .wb-jumplinks__chip,
.wb-band--honeycomb .wb-jumplinks__chip{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.42);
  color:#fff;
}
/* On a BRIGHT red band a translucent-white pill washes out (white on red).
   Use a solid white pill with red ink instead, the same high-contrast trick
   the buttons use on red, so the chips read clearly (owner flagged the
   washed-out chips on the red hero). */
.wb-band--red .wb-jumplinks__chip{
  background:#fff;
  border-color:transparent;
  color:var(--wb-red-dk, #b00722);
}
.wb-band--red .wb-jumplinks__chip:hover{
  background:#fff; color:var(--wb-red, #e50a2d);
  border-color:transparent; transform:translateY(-1px);
}
/* Photo-hero bands (they carry --photo AND --dark) vary in brightness behind
   the chips, so back each chip with a dark tint instead of trusting the photo,
   keeping the white label readable over any part of the image. */
.wb-band--photo .wb-jumplinks__chip{
  background:rgba(18,20,24,.5);
  border-color:rgba(255,255,255,.42);
  color:#fff;
}
.wb-band--photo .wb-jumplinks__chip:hover{
  background:var(--wb-red-grad); border-color:transparent; color:#fff; transform:translateY(-1px);
}
.wb-band--dark .wb-jumplinks__label,
.wb-band--red .wb-jumplinks__label,
.wb-band--honeycomb .wb-jumplinks__label{ color:rgba(255,255,255,.82); }

/* Phone: let the chip row scroll sideways instead of stacking into a tall
   wall. The label sits above the scroller so the first chip is reachable. */
@media (max-width:680px){
  .wb-jumplinks{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.4rem;
    scrollbar-width:none;
  }
  .wb-jumplinks::-webkit-scrollbar{ display:none; }
  .wb-jumplinks__chip{ flex:0 0 auto; }
}

/* ----------------------------------------------------------------
   Scroll-margin so an in-page #anchor jump (from the TOC, a deep link,
   or the browser's native hash jump) does not tuck the target under the
   floating fixed nav. The nav's bottom sits ~98px down un-shrunk, so we
   clear it with a generous ~7rem. Applied to ANY element that can be an
   anchor target (a generated section id, a hand-set id, a heading), not
   just the JS-tagged H2s, so every deep link lands cleanly below the nav.
   (The owner flagged the fixed nav covering anchored top content.)
   ---------------------------------------------------------------- */
.wb-scope [id],
.wb-scope [data-wb-anchor]{ scroll-margin-top:7rem; }

/* ----------------------------------------------------------------
   Motion + print + no-JS fallbacks.
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .wb-toc,
  .wb-toc__toggle i,
  .wb-toc__link,
  .wb-jumplinks__chip{ transition:none; }
  .wb-jumplinks__chip:hover{ transform:none; }
}

/* The sticky TOC is interactive chrome; never print it or the chip row. */
@media print{
  .wb-toc,
  .wb-jumplinks{ display:none !important; }
}

/* With JS disabled the TOC shell is never built, but guard anyway: a .wb-toc
   that never received .is-ready stays hidden, so it can never sit as an empty
   panel. (.is-ready is added only after the list has at least two links.) */
.wb-toc:not(.is-ready){ opacity:0; visibility:hidden; pointer-events:none; }
