/* Common arrow container styles for large screens */
.nav-arrow {
  position: fixed;
  top: 50%;                /* Centers vertically */
  transform: translateY(-50%);
  z-index: 998;            /* On top of main content */
  width: 80px;             /* Enough space for the label + arrow */
  text-align: center;      /* Center the label + arrow horizontally */
  white-space: nowrap;

  height: 2.5rem;
  overflow: visible;
}

.nav-arrow .arrow-symbol {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
}

.nav-arrow .nav-label {
  position: absolute;
  bottom: 100%;      /* sit directly on top of the arrow */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  white-space: normal;
  word-break: break-word;
  text-align: center;
  padding-bottom: 0.25rem;  /* gap between last line and arrow */
  margin-bottom: 0px;
  line-height: 1.2;        /* tweak to taste */
}

.nav-arrow:hover .arrow-symbol,
.nav-arrow:hover .nav-label {
  color: #757575 !important;
}

.nav-arrow:active .arrow-symbol,
.nav-arrow:active .nav-label {
  color: var(--light-mode-text-color) !important;
}

body.dark-mode .nav-arrow:active .arrow-symbol,
body.dark-mode .nav-arrow:active .nav-label {
  color: var(--dark-mode-text-color) !important;
}


/* remove the default underline */
a.nav-arrow {
  text-decoration: none;
}

/* make sure it stays off on hover, too */
a.nav-arrow:hover {
  text-decoration: none;
}

/* Left arrow pinned to the left side */
.nav-arrow-left {
  /* Example: keep 50px from left edge for a gap */
  left: calc((100vw - 900px)/2 - 110px);
}

/* Right arrow pinned to the right side */
.nav-arrow-right {
  /* Example: keep 50px from right edge for a gap */
  right: calc((100vw - 900px)/2 - 110px);
}

/* Label above the arrow */
.nav-label {
  color: var(--light-mode-text-color);
  font-size: 14px;
  margin-bottom: 5px;      /* Spacing between label and arrow */

  /* display: block;
  text-align: center;
  white-space: nowrap; */
  transition: background-color var(--theme-transition) ease, 
              color var(--theme-transition) ease;

  display: block;             /* or inline-block */
  width: 80px;                /* same as your .nav-arrow width */
  white-space: nowrap;        /* no wrapping */
  overflow: hidden;           /* clip the excess text */
  text-overflow: ellipsis;    /* show “…” at the cut-off */
  margin: 0 auto 5px;         /* center & preserve your bottom gap */
  transition: color var(--theme-transition) ease;
}

body.dark-mode .nav-label {
  color: var(--dark-mode-text-color);
}

/* Arrow symbol styling */
.arrow-symbol {
  font-size: 2rem;         /* Large arrow icon */
  text-decoration: none;   /* Remove underline */
  color: var(--light-mode-text-color);            /* Arrow color */
  /* display: inline-block; */
  cursor: pointer;
  
  display: block;
  /* text-align: center; */
  transition: background-color var(--theme-transition) ease, 
              color var(--theme-transition) ease;
}

body.dark-mode .arrow-symbol {
  color: var(--dark-mode-text-color);
}

/* Bottom nav for small screens */
.nav-bottom {
  display: none;
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  justify-content: space-between;
  padding: 10px 20px;       /* Add some spacing */
  font-size: 1.2rem;
  z-index: 1004;            /* Ensure it's on top */
  background-color: #f1f1f1; /* White backdrop to prevent overlap */
  border-top: var(--light-mode-border);
  transition: background-color var(--theme-transition) ease, 
              color var(--theme-transition) ease;
}

/* Style the links in bottom nav */
.nav-bottom a {
  text-decoration: none;
  color: var(--light-mode-text-color);
  transition: background-color var(--theme-transition) ease, 
              color var(--theme-transition) ease;
}

.nav-bottom a:hover {
  color: #757575 !important;
}

.nav-bottom a:active {
  color: var(--light-mode-text-color) !important;
}

/* Dark Mode overrides for bottom nav */
body.dark-mode .nav-bottom {
  background-color: var(--dark-mode-background-color);
  color: var(--dark-mode-text-color);
  border-top: var(--dark-mode-border);
}

body.dark-mode .nav-bottom a {
  color: var(--dark-mode-text-color);
}

body.dark-mode .nav-bottom a:active {
  color: var(--dark-mode-text-color) !important;
}