/* CSS variables for consistent styling with header */
:root {
  --header-font-sans: "Metropolis", system-ui, -apple-system, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
                      "Apple Color Emoji","Segoe UI Emoji";
  --header-bg-color: #0a1a4f;
  --header-text-color: #fff;
  --header-hover-color: #618dc2;
  --header-font-size: 11px; /* Smaller font size */
  --header-font-weight: 700;
  --header-letter-spacing: 0.8px;
  
  /* Sidebar specific variables */
  --header-h: 60px;
  --sidebar-w: 220px;
  --menu-btn-size: 45px;
  --menu-btn-gap: 12px;
}

/* Metropolis (Regular + Bold) via CDN - Same as header */
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/chrismsimpson/Metropolis/Fonts/WEB/Metropolis-Regular.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/gh/chrismsimpson/Metropolis/Fonts/WEB/Metropolis-Regular.woff") format("woff");
}
@font-face {
  font-family: "Metropolis";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/chrismsimpson/Metropolis/Fonts/WEB/Metropolis-Bold.woff2") format("woff2"),
       url("https://cdn.jsdelivr.net/gh/chrismsimpson/Metropolis/Fonts/WEB/Metropolis-Bold.woff") format("woff");
}

/* Apply Metropolis font to all sidebar elements */
.sidebar,
.sidebar-header,
.nav-section-title,
.nav-links a,
.mobile-menu-btn {
  font-family: var(--header-font-sans) !important;
}

/* Sidebar */
.sidebar{
  width: var(--sidebar-w);
  background: #f8f9fa; /* Light gray background like nav items */
  box-shadow: 2px 0 5px rgba(0,0,0,.1);
  padding: 0;
  position: fixed;
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  z-index: 1000;
  top: var(--header-h);
  left: 0;
  transition: all .3s ease;
}

/* HOME link - same styling as nav items */
.sidebar-header{
  background: #f8f9fa; /* Same light gray as nav items */
  color: #333; /* Dark text like nav items */
  padding: 12px 25px; /* Same padding as nav items */
  font-size: var(--header-font-size); /* Smaller font size */
  font-weight: var(--header-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--header-letter-spacing);
  display: flex; 
  align-items: center; 
  gap: 10px;
  text-decoration: none; 
  cursor: pointer;
  transition: all .3s ease;
  border-bottom: 1px solid #e9ecef; /* Subtle border */
}
.sidebar-header:hover,
.sidebar-header:focus{
  background: #e9ecef; /* Slightly darker gray on hover */
  color: var(--header-hover-color); /* Blue text on hover */
  padding-left: 30px; /* Same indentation as nav items */
  outline: none; 
}
.sidebar-header.active {
  background: #0a1a4f; /* Active color */
  color: #fff;
}

.nav-section{ 
  border-bottom: 1px solid #e9ecef; 
}
.nav-section-title{
  background: #f8f9fa; 
  color: #333; 
  padding: 12px 15px; 
  font-size: var(--header-font-size); /* Smaller font size */
  font-weight: var(--header-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--header-letter-spacing);
  display: flex; 
  align-items: center; 
  gap: 8px;
  transition: all .3s ease;
}
.nav-section-title.active{
  background: #0a1a4f; /* Changed to requested active color */
  color: #fff;
}
.nav-links{ 
  list-style: none; 
  padding: 0;
  margin: 0;
}
.nav-links li{ 
  border-bottom: 1px solid #e9ecef; 
}
.nav-links li:last-child{ 
  border-bottom: none; 
}
.nav-links a{
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding: 12px 25px; 
  color: #333;
  text-decoration: none; 
  font-size: var(--header-font-size); /* Smaller font size */
  font-weight: var(--header-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--header-letter-spacing);
  transition: all .3s ease;
}
.nav-links a:hover{ 
  background: #e9ecef; 
  color: var(--header-hover-color); 
  padding-left: 30px; 
}
.nav-links a.active{ 
  background: #0a1a4f; /* Active color */
  color: #fff; 
}

/* Mobile chevron */
.mobile-menu-btn{
  display: none; 
  position: fixed;
  top: calc(var(--header-h) + var(--menu-btn-gap));
  left: 20px; 
  z-index: 1002;
  background: var(--header-bg-color); 
  color: var(--header-text-color); 
  border: none; 
  padding: 10px; /* Smaller padding */
  border-radius: 8px;
  cursor: pointer; 
  font-size: 14px; /* Smaller font size */
  width: var(--menu-btn-size); 
  height: var(--menu-btn-size);
  box-shadow: 0 4px 12px rgba(44,62,80,.3); 
  transition: all .3s ease;
}
.mobile-menu-btn:hover{ 
  background: var(--header-hover-color); 
  color: #000;
  transform: translateY(-2px); 
  box-shadow: 0 6px 16px rgba(44,62,80,.4); 
}
.mobile-menu-btn i{ 
  transition: transform .3s ease; 
}
.mobile-menu-btn.menu-open i{ 
  transform: rotate(0deg); 
}
.mobile-menu-btn:not(.menu-open) i {
  transform: rotate(180deg);
}

/* Overlay */
.overlay{
  display: none; 
  position: fixed; 
  top: var(--header-h); 
  left: 0; 
  width: 100%;
  height: calc(100% - var(--header-h)); 
  background: rgba(0,0,0,.5); 
  z-index: 999;
  opacity: 0; 
  transition: opacity .3s ease;
}
.overlay.active{ 
  display: block; 
  opacity: 1; 
}

/* Mobile */
@media (max-width: 768px){
  .sidebar{ 
    transform: translateX(-100%); 
    height: calc(100vh - var(--header-h)); 
    top: var(--header-h); 
  }
  .sidebar.active{ 
    transform: translateX(0); 
  }
  .mobile-menu-btn{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
  }
  
  /* Adjust font sizes for mobile */
  .sidebar-header,
  .nav-section-title,
  .nav-links a {
    font-size: calc(var(--header-font-size) - 1px);
  }
}
/* Desktop hides chevron */
@media (min-width: 769px){ 
  .mobile-menu-btn{ 
    display: none !important; 
  } 
  .sidebar {
    transform: translateX(0) !important;
  }
}
/* Very small phones */
@media (max-width: 480px){ 
  .mobile-menu-btn{ 
    left: 15px; 
    padding: 8px;
    font-size: 12px;
  } 
}