/**
 * v103-additions.css
 *
 * Fixes:
 *  1. Menu pills (hamburger + dots) were invisible due to:
 *       a) opacity:0 default waiting for cb-palette-ready JS class
 *       b) body:not(.front-page) hiding both pills with !important on all
 *          inner pages — only the back arrow was ever shown
 *       c) Broken CSS comment (stray text) in main.css invalidating rules
 *       d) v102-additions.css duplicating the same hiding rules for cb-menu-dots
 *  2. All pills are now always visible with sensible default colours.
 *     The JS palette-switcher still runs and upgrades colours dynamically —
 *     there is just no longer any visibility gate blocking them.
 *  3. Pills remain hidden while the star-gate entrance is active (cb-not-entered).
 */

/* ═══════════════════════════════════════════════════════════════════
   1. HAMBURGER PILL — always visible on every page
   ═══════════════════════════════════════════════════════════════════ */

.cb-hamburger {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   2. DOTS PILL (right menu button) — always visible on every page
   ═══════════════════════════════════════════════════════════════════ */

.menu-button.cb-menu-dots {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. BACK LINK — always visible on inner pages (unchanged behaviour)
   ═══════════════════════════════════════════════════════════════════ */

.cb-back-link {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   4. HIDE PILLS ONLY DURING STAR-GATE (entrance not yet passed)
      Once the user passes the gate, cb-entered is added to body.
   ═══════════════════════════════════════════════════════════════════ */

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

/* ═══════════════════════════════════════════════════════════════════
   5. HIDE DOTS WHILE A PANEL IS OPEN (preserve UX intent from v101/v102)
   ═══════════════════════════════════════════════════════════════════ */

body.cb-offcanvas-open .menu-button.cb-menu-dots {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.18s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   6. KEEP BACKGROUNDS STABLE WHILE CLOSING (override v102 keep-green rule)
   ═══════════════════════════════════════════════════════════════════ */

body.cb-offcanvas-closing .menu-button.cb-menu-dots {
  background: var(--cb-menu-green) !important;
}

body.cb-offcanvas-closing .cb-hamburger {
  background: var(--cb-hamburger-pink) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   7. NEUTRALISE ALL body:not(.front-page) PILL HIDING from v102
      Those rules used !important — we override with equal specificity + !important
   ═══════════════════════════════════════════════════════════════════ */

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

/* Still hide during star-gate entrance on inner pages */
body.cb-not-entered:not(.front-page) .cb-hamburger,
body.cb-not-entered:not(.front-page) .menu-button.cb-menu-dots {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   8. DOT COLOURS — ensure always visible inside the dots button
   ═══════════════════════════════════════════════════════════════════ */

.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);
}