/* Circular Text Animation Styles */
.events-gallery {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  z-index: 200;
  overflow-y: auto;
  display: none;
  padding: 0; /* Remove all padding */
  pointer-events: none;
}

.events-gallery.active {
  display: block;
}

.events-placeholder {
  position: absolute; /* Change to absolute positioning */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Changed to none to allow click-through */
}

.circular-text-container {
  width: 500px;
  height: 500px;
  position: relative;
  /* Force center alignment */
  transform: translateX(-20px); /* Offset to account for the menu on left */
  pointer-events: auto; /* Only the circular text should capture clicks */
}

#circular-text-svg {
  width: 100%;
  height: 100%;
  animation: spin 20s linear infinite;
  filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.726));
}

#circular-text-path {
  fill: none;
}

#spinning-text {
  fill: #ffffff;
  font-family: monospace;
  font-weight: bold;
  font-size: 18px;
  text-anchor: start;
  dominant-baseline: middle;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

/* Media Queries */
@media (min-width: 769px) {
  .events-gallery {
      /* No padding here */
  }
  
  .events-placeholder {
      /* Adjust for menu width on desktop */
      padding-left: 100px; /* Half of the menu width */
  }
  
  .circular-text-container {
      width: 700px;
      height: 700px;
      transform: translateX(-50px); /* Adjusted offset for desktop */
  }
}

@media (max-width: 768px) {
  .events-gallery {
      height: calc(100% - 64px);
      bottom: 64px;
      max-height: calc(100% - 64px);
  }
  
  .events-placeholder {
      /* No offsets needed for mobile */
  }
  
  .circular-text-container {
      width: 320px;
      height: 320px;
      transform: translateX(0); /* No offset needed for mobile */
  }
}