/*
 * hero-base.css
 * Base styles for all hero/header sections with particle backgrounds.
 * Provides consistent layering and interactivity.
 */

/* Apply base positioning to both hero types */
.hero-modern,
.page-header {
  position: relative;
  color: var(--text-light, #ffffff);
  overflow: hidden;
}



/* Style the particle container div */
/* This has class .hero-particles and id #particles-js in the JSX */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Explicitly set height to 100% of the parent */
  z-index: 1;
}

/* Style the canvas element created by the particle library */
.hero-particles canvas {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important; /* Must be above the #particles-js div's z-index of 0 */
}

/* Style the main content container */
.hero-modern .container,
.page-header .container {
  position: relative;
  z-index: 2; /* Sit above the particle canvas */
}

/* --- Key Interactivity Fix --- */

/*
 * Let mouse events pass through the main content container to the canvas below.
 * Then, re-enable pointer events for the children of the content container so they remain interactive.
 */
.hero-content {
  pointer-events: none;
}

.hero-content > * {
  pointer-events: auto;
}