/* ===========================
   MENU BASE
=========================== */

#menu{
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  background: #e1dcd6;
  z-index: 10;
  padding: 20px 40px;
  padding-bottom: 20px !important;
}

.nav{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;

  --ind-left: 0px;
  --ind-width: 0px;
}

/* ===========================
   GREEN INDICATOR (single)
   - No animation by default
   - Animation enabled only after user interaction
=========================== */

.nav::before{
  content: "";
  position: absolute;
  top: 0;
  left: var(--ind-left);
  width: var(--ind-width);
  height: 20px;
  background: #5e6842;

  /* default: NO movement animation (fixes load-from-left) */
  transition: none;

  pointer-events: none;
  z-index: 1;
}

/* enable animation only after user interaction */
.nav.ind-anim::before{
  transition: left .35s ease, width .35s ease;
}

/* ===========================
   MENU COLUMNS
=========================== */

.nav-col{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  padding-top: 34px;
}

.nav-single{
  position: relative;
  padding-top: 34px;
}

/* ===========================
   LINKS
=========================== */

/* Active menu item */
.nav-link.act-link{
  text-decoration: line-through !important;
  color: #5e6842 !important; /* same green as indicator */
  cursor: default;
}


.nav-link:hover{
  text-decoration: line-through !important;
}

.nav-link.act-link{
  text-decoration: line-through !important;
  cursor: default;
}

/* ===========================
   MOBILE
=========================== */

@media (max-width: 900px){
  #menu{
    padding: 20px;
  }

  .nav{
    justify-content: center;
  }

  .nav-col,
  .nav-single{
    padding-top: 28px;
  }

  .nav::before{
    height: 16px;
  }
}

/* ===========================
   SECOND MENU (menu2 only)
   Centered, bigger, spaced
=========================== */

#menu2 .nav{
  justify-content: center;
  gap: 20px; /* space between columns / items */
  padding-left:18px;
}

/* Center items inside each column / single */
#menu2 .nav-col,
#menu2 .nav-single{
  /*align-items: center;
  text-align: center;
  */
}

#menu2 .nav-col, #menu2 .nav-single{
    padding:0px;
}

/* Bigger typography for menu2 only */
#menu2 .nav-link{
  font-size: 1rem;
  padding: 8px 22px;
}

/* Tighter vertical spacing inside grouped columns */
#menu2 .nav-col .nav-link{
  padding-block: 6px;
}

/* Push menu items away from the X icon */
#menu2 .nav-item.mo{
  margin-left: 40px;
}

/* Style the X icon without affecting indicator logic */
#menu2 .nav-item.mo .icon-x{
  font-size: 1.6rem;
  cursor: pointer;
}