/**
 * v102-additions.css
 *
 * Fixes:
 *  1. cb-menu-dots right button — correct green colour, grid position,
 *     palette-ready fade-in, and hidden on inner pages
 *  2. Both pills (hamburger + dots) hidden on all non-front-page views
 *  3. Menu open: no visible delay (forced-reflow approach in menu.js)
 *  4. Menu close: panel retracts simultaneously with links — fast & smooth
 *  5. cb-link-closing keyframes no longer require .open (panel already gone)
 *  6. Token layer hidden while panel is animating in or out; smooth fade-in
 *     after open animation completes so tokens never slide in from the side
 *  7. Remove the .open.cb-link-closing transform lock (v101 rule obsolete)
 */

/* ═══════════════════════════════════════════════════════════════════
   1. RIGHT MENU BUTTON (cb-menu-dots) — full green pill styling
   ═══════════════════════════════════════════════════════════════════ */

.menu-button.cb-menu-dots {
  /* Green background matching left panel colour */
  background: var(--cb-menu-green);
  color: var(--cb-menu-text-color, #333);
  border: 0;
  /* Place in rightmost grid column of the header */
  grid-column: 3;
  justify-self: end;
  /* Size — compact square dots button */
  min-width: 36px;
  max-width: 46px;
  min-height: 30px;
  max-height: 36px;
  padding: 7px 9px;
  width: auto;
  height: auto;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 5px rgba(0,0,0,.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* Palette-ready hidden by default — revealed with palette */
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease,
              background-color .5s ease,
              color .5s ease,
              box-shadow .5s ease,
              transform .2s ease;
}

.menu-button.cb-menu-dots:hover {
  background: var(--cb-menu-green-hover, #d9ff66);
  color: var(--cb-menu-text-hover, #222);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.28);
}

.menu-button.cb-menu-dots:active {
  transform: translateY(1px);
}

/* ── Reveal once palette is loaded ── */
html.cb-palette-ready .menu-button.cb-menu-dots {
  opacity: 1;
  visibility: visible;
}

/* ── Keep green while any panel is closing ── */
body.cb-offcanvas-closing .menu-button.cb-menu-dots {
  background: var(--cb-menu-green) !important;
}

/* ── Hide dots button while a panel is open (same as v101) ── */
body.cb-offcanvas-open .menu-button.cb-menu-dots {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   2. HIDE BOTH PILLS ON INNER PAGES
      cb-menu-text is already hidden; add cb-menu-dots to the same rule
   ═══════════════════════════════════════════════════════════════════ */

body:not(.front-page) .menu-button.cb-menu-dots,
body:not(.front-page) .cb-hamburger {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Back arrow: always visible on inner pages */
body:not(.front-page) .cb-back-link {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* cb-hide-nav-pills class also hides dots */
body.cb-hide-nav-pills .menu-button.cb-menu-dots {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. MENU CLOSE — fast simultaneous panel+link exit
      .cb-link-closing no longer requires .open (panel retracts first)
   ═══════════════════════════════════════════════════════════════════ */

/* Left panel links slide out left */
#cb-offcanvas-left.cb-link-closing li {
  animation: cbLinkSlideRightOut 0.28s cubic-bezier(0.55, 0, 0.1, 1) both !important;
}

/* Right panel links slide out right */
#cb-offcanvas-right.cb-link-closing li {
  animation: cbLinkSlideLeftOut 0.28s cubic-bezier(0.55, 0, 0.1, 1) both !important;
}

/* Stagger the close delays — shorter so links vanish during retract */
#cb-offcanvas-left.cb-link-closing  li:nth-child(1),
#cb-offcanvas-right.cb-link-closing li:nth-child(1) { animation-delay: 0.00s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(2),
#cb-offcanvas-right.cb-link-closing li:nth-child(2) { animation-delay: 0.03s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(3),
#cb-offcanvas-right.cb-link-closing li:nth-child(3) { animation-delay: 0.06s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(4),
#cb-offcanvas-right.cb-link-closing li:nth-child(4) { animation-delay: 0.09s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(5),
#cb-offcanvas-right.cb-link-closing li:nth-child(5) { animation-delay: 0.12s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(6),
#cb-offcanvas-right.cb-link-closing li:nth-child(6) { animation-delay: 0.15s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(7),
#cb-offcanvas-right.cb-link-closing li:nth-child(7) { animation-delay: 0.18s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(8),
#cb-offcanvas-right.cb-link-closing li:nth-child(8) { animation-delay: 0.21s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(9),
#cb-offcanvas-right.cb-link-closing li:nth-child(9) { animation-delay: 0.24s !important; }
#cb-offcanvas-left.cb-link-closing  li:nth-child(10),
#cb-offcanvas-right.cb-link-closing li:nth-child(10) { animation-delay: 0.27s !important; }

/* Fade paragraph out on close too */
#cb-offcanvas-right.cb-link-closing p {
  animation: cbLinkSlideLeftOut 0.20s ease both !important;
  animation-delay: 0s !important;
}

/* Remove v101 transform lock — panel now slides immediately on close */
.cb-offcanvas.open.cb-link-closing {
  transform: unset !important;
  visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════
   4. TOKEN LAYER — hidden during open/close, fades in after settle
      Prevents tokens from sliding in visibly from the side on open,
      or being visible on a half-open/closing panel.
   ═══════════════════════════════════════════════════════════════════ */

/* Default: tokens hidden */
.cb-offcanvas .cb-menu-dyn-layer {
  opacity: 0 !important;
  transition: opacity 0.35s ease !important;
}

/* Tokens visible only when panel is fully open AND not animating */
.cb-offcanvas.open:not(.cb-animating):not(.cb-link-closing) .cb-menu-dyn-layer {
  opacity: 0.70 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. DOT COLOURS inside the dots button — ensure visible on green
   ═══════════════════════════════════════════════════════════════════ */
.menu-button.cb-menu-dots .cb-dot {
  background: var(--cb-menu-text-color, #333);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.menu-button.cb-menu-dots:hover .cb-dot {
  background: var(--cb-menu-text-hover, #111);
}