/* ============================================================
   SECTION SWITCHING TABS – White Gothic Spiritual Wireframe
   ============================================================ */

/* ---------- Animations ---------- */
@keyframes holyBurn {
  0%   { text-shadow: 0 0 2px rgba(255,255,255,0.3), 0 0 5px rgba(255,255,255,0.2); }
  50%  { text-shadow: 0 0 12px rgba(255,255,255,0.9), 0 0 25px rgba(255,255,255,0.7); }
  100% { text-shadow: 0 0 2px rgba(255,255,255,0.3), 0 0 5px rgba(255,255,255,0.2); }
}

/* ---------- Container (White Cathedral Skeleton) ---------- */
.nav-section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  width: clamp(300px,85vw,700px);
  height: 60px;
  margin: 5rem auto; /* CHANGED: Increased top and bottom margin from 3rem to 5rem */
  background: transparent;
}

/* White Central Spiritual Axis Line (Moved BEHIND the text) */
.nav-section::before {
  content: "";
  position: absolute;
  left: 50.20%;
  transform: translateX(-50%);
  top: -35px;
  width: 2px;
  height: 125px;
  background: #ffffff;
  z-index: 0;   /* Ensures line appears behind the tab text */
}

/* ---------- Text ---------- */
.nav-item {
  position: relative;
  flex: 1;
  height: 100%;
  font: bold 12px "Segoe UI", Tahoma, sans-serif;
  color: #ffffff; /* 20% Darker spiritual brown */
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease-in-out;
  z-index: 1;   /* Ensuring text remains on top */
}

/* White Gothic Arch Shapes (spiritual skeletal frame) */
.nav-item::before,
.nav-item::after {
  content: "";
  position: absolute;
  top: -35px;
  width: 50%;
  max-width: 50px;
  height: 2px;
  border-top: 1px solid #ffffff;
  pointer-events: none;
}

/* Left Arch White Lines */
.nav-item::before {
  border-left: 1px solid #9c9c9c;
  border-radius: 50% 0 0 0;
  left: 50%;
  transform: translateX(-100%);
}

/* Right Arch White Lines */
.nav-item::after {
  border-right: 1px solid #ffffff;
  border-radius: 0 50% 0 0;
  left: 50%;
}


/* ---------- HOVER - HOLY BURN EFFECT ---------- */
.nav-item:hover {
  color: #ffffff; /* Text burns divine white on hover */
  animation: holyBurn 2s ease-in-out infinite, ascensionFloat 1.4s ease-in-out infinite;
}

/* ---------- End of Styles ---------- */