/* ===== SIDEBAR ===== */
.site-sidebar {
  position: fixed;
  top: 0;
  left: 0;

  width: min(280px, 82vw);
  height: 100vh;
  height: 100dvh;

  background: linear-gradient(180deg, #899D31, #5B7917);
  color: #FFFFFF;

  padding: 24px 16px;
  box-shadow: 10px 0 30px rgba(38, 52, 15, 0.22);

  transform: translateX(-100%);
  transition: transform 0.25s ease;

  z-index: 1200;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== TITLE ===== */
.site-sidebar .sidebar-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

/* ===== LINKS ===== */
.site-sidebar a {
  display: block;
  color: #FFFFFF;
  text-decoration: none;

  padding: 11px 13px;
  border-radius: 12px;
  margin-bottom: 8px;

  font-weight: 600;
  transition: all 0.22s ease;
}

/* HOVER */
.site-sidebar a:hover,
.site-sidebar a:focus {
  background-color: rgba(255, 255, 255, 0.92);
  color: #5B7917;
  transform: translateX(4px);
}

/* ACTIVE LINK (optional enhancement) */
.site-sidebar a.active {
  background-color: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.82);
}

/* ===== OPEN STATE ===== */
.sidebar-open .site-sidebar {
  transform: translateX(0);
}

/* ===== OVERLAY ===== */
.sidebar-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(25, 35, 14, 0.35);
  backdrop-filter: blur(2px);
  z-index: 1100;
}

/* ===== SCROLLBAR (optional nice touch) ===== */
.site-sidebar::-webkit-scrollbar {
  width: 6px;
}

.site-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.4);
  border-radius: 10px;
}

/* ===== TABLET ===== */
@media (max-width: 900px) {
  .site-sidebar {
    width: min(260px, 85vw);
    padding: 18px 14px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 600px) {
  .site-sidebar {
    width: min(240px, 88vw);
    padding: 16px 12px;
  }

  .site-sidebar .sidebar-title {
    font-size: 16px;
  }

  .site-sidebar a {
    font-size: 0.95rem;
    padding: 9px 12px;
  }
}