/* ========================================
   Connecting Dots Canvas — final stacking
   ======================================== */

html, body { height: 100%; margin: 0; }

body.creative-layout .connecting-dots-bg { display: none !important; }

/* Canvas stays behind everything */
.connecting-dots-bg {
  position: fixed;
  inset: 0;

  /* Prefer stable viewport units on capable browsers to minimize chrome jitter */
  /* JS still locks height, but these help initial paint on some engines */
  width: 100%;
  height: 100lvh;            /* large viewport height when URL bar hidden */
  height: 100svh;            /* fallback: small viewport */
  height: 100dvh;            /* dynamic viewport as a last resort */

  pointer-events: none;
  z-index: 0;
  will-change: transform;    /* hint: we animate via canvas, but avoid layout thrash */
}

/* Normal page sections above the connecting-dots canvas
   Support both direct children AND include wrappers */
body > header,
body > main,
body > section,
body > article,
body > aside,
body > div.page-content,
#footer,
[data-include*="footer"] {
  position: relative;
  z-index: 2; /* sit above .connecting-dots-bg (z-index:0) */
}

/* Navbar layer (submenus live above this in nav.css) */
#header {
  position: relative;
  z-index: 5000;
  isolation: isolate;
}

/* If #offcanvas ever sits outside #header, keep it topmost */
#offcanvas.offcanvas { z-index: 8000; }

/* Keep the form above the canvas (visible), below navbar */
#layoutToggleForm {
  position: relative;
  z-index: 3000;   /* below header(5000) */
}

/* Let the JS control highlight overlay positioning/z-index */
.highlight {
  pointer-events: none;
  /* no z-index here; JS sets a very high z-index inline */
}

/* Let nav.css control menu panel visuals */
header, .site-header, .navbar, .topbar,
.highlight, #layoutToggleForm { background: transparent; }