/* skaarpictures.com – modern navigation (replaces Milonic)
   Positioned like the old left sidebar menu */

/* Only shift layout when the nav bar is actually present */
body.has-nav {
  padding-left: 130px;
  box-sizing: border-box;
}

.nav-main {
  position: fixed;
  top: 20px;
  left: 4px;
  width: 120px;
  max-height: calc(100vh - 30px);
  overflow: visible;
  z-index: 980;
  background: #FFD700; /* yellow header area */
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 9px;
  box-sizing: border-box;
  text-align: left !important;
  border: 2px solid #1e8449; /* greenish-blue border like screenshot */
}

/* Vertical list container */
.nav-links,
.nav-main ul,
.nav-main li {
  list-style: none;
  margin: 0;
  padding: 1px 0;
  text-align: left !important;
}

/* Ensure old .nav-links selector still works */
.nav-links {
  text-align: left !important;
}

.nav-item {
  position: relative;
}

/* Top-level links (vertical) */
.nav-link,
.nav-sublink {
  display: block;
  padding: 1px 3px;
  color: #000000 !important;
  text-decoration: none;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.25;
  text-align: left !important;
}

/* Truncate sidebar items that are too long */
.nav-main .nav-links > .nav-item > .nav-link {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header items (Home, All Albums, Site map, Contact us, Snapshots): yellow + black */
.nav-main .nav-links > li:nth-child(1),
.nav-main .nav-links > li:nth-child(2),
.nav-main .nav-links > li:nth-child(3),
.nav-main .nav-links > li:nth-child(4),
.nav-main .nav-links > li:nth-child(5) {
  background: #FFD700;
}

.nav-main .nav-links > li:nth-child(1) > .nav-link,
.nav-main .nav-links > li:nth-child(2) > .nav-link,
.nav-main .nav-links > li:nth-child(3) > .nav-link,
.nav-main .nav-links > li:nth-child(4) > .nav-link,
.nav-main .nav-links > li:nth-child(5) > .nav-link {
  color: #000000 !important;
}

/* Remaining top-level items: green background, black text */
.nav-main .nav-links > li:not(:nth-child(-n+5)) {
  background: #32CD32;
}

.nav-main .nav-links > li:not(:nth-child(-n+5)) > .nav-link,
.nav-main .nav-links > li:not(:nth-child(-n+5)) > span {
  color: #000000 !important;
}

/* Hover effect */
.nav-link:hover,
.nav-sublink:hover {
  background-color: rgba(255, 255, 255, 0.18);
}

/* Dropdowns (open to the right of sidebar) */
.nav-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 230px;
  max-height: 340px;
  overflow-y: auto;
  background: #32CD32; /* green like screenshot */
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  list-style: none;
  padding: 1px 0;
  margin: 0;
  display: none;
  text-align: left !important;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  display: block;
}

/* Nested dropdown */
.nav-subitem {
  position: relative;
}

.nav-subdropdown {
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 210px;
  max-height: 340px;
  overflow-y: auto;
  background: #32CD32; /* green like screenshot */
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  list-style: none;
  padding: 1px 0;
  margin: 0;
  display: none;
  text-align: left !important;
}

.nav-subitem:hover .nav-subdropdown,
.nav-subitem:focus-within .nav-subdropdown {
  display: block;
}

/* Sub links - black text on green */
.nav-dropdown .nav-sublink,
.nav-subdropdown .nav-sublink {
  color: #000000 !important;
  padding: 2px 8px;
  font-size: 9px;
  display: block;
}

/* Hover effect - slightly lighter green */
.nav-link:hover,
.nav-sublink:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

/* Small screens: shrink sidebar slightly, but keep vertical layout */
@media (max-width: 900px) {
  body.has-nav {
    padding-left: 120px;
  }

  .nav-main {
    width: 110px;
    font-size: 8px;
  }

  .nav-link,
  .nav-sublink {
    font-size: 8px;
    padding: 2px 3px;
  }

  .nav-dropdown,
  .nav-subdropdown {
    min-width: 160px;
  }
}