/* ------------------------------
   Global Styles & Custom Scrollbar
------------------------------ */
body {
  font-family: 'Cormorant Garamond', serif; /* elegant, readable */
  background-color: #f3e9ce; /* parchment tone */
  color: #3e2f1c;
  margin: 0;
  padding: 0;
  overflow-y: scroll; /* always show vertical scrollbar */
}

/* Leave space for the left navbar */
.container {
  margin-left: 240px;  /* same width as navbar + some padding */
  padding: 40px;       /* keeps content from touching edges */
}

/* Custom Scrollbar for Article List */
/* ------------------------------
   Enhanced Scrollable Article List
------------------------------ */
.scrollable {
  max-height: 350px;               /* slightly shorter for desktop */
  overflow-y: auto;                /* vertical scroll */
  padding: 15px 20px;              /* more breathing room inside */
  background-color: #fffdf2;       /* light cream/near-white */
  width: 55%;                       /* a bit narrower on desktop */
  margin: 20px auto;               /* center horizontally with some vertical spacing */
  border-radius: 8px;              /* softer edges */
  border: 1px solid #e0d8b0;      /* subtle border for contrast */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* subtle shadow for depth */
  transition: all 0.2s ease;
}

/* Hover effect for better visual depth */
.scrollable:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Adjust scrollbars for elegance */
.scrollable::-webkit-scrollbar {
  width: 6px;
}

.scrollable::-webkit-scrollbar-track {
  background: #fffdf2;
  border-radius: 4px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: #b59b74;
  border-radius: 3px;
}

.scrollable::-webkit-scrollbar-thumb:hover {
  background: #8c744f;
}

/* ------------------------------
   Collapsible Left Navbar
------------------------------ */
.navbar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 160px;
  background-color: #f8f1dc;
  border-right: 1px solid #d8c79a;
  padding: 20px;
  box-shadow: 2px 0 6px rgba(0,0,0,0.1);
  overflow-y: auto;
}

.navbar h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.4rem;
  color: #3e2f1c;
  margin-bottom: 15px;
}

.navbar a {
  display: block;
  text-decoration: none;
  color: #5b4636;
  margin: 8px 0;
  font-size: 1.1rem;
}

.navbar a:hover {
  color: #8c744f;
}

/* Dropdown links */
.navbar .dropdown {
  display: none;
  margin-left: 15px;
}

.navbar .dropdown a {
  font-size: 1rem;
}

/* ------------------------------
   Navbar Toggle Button
------------------------------ */
.nav-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  background-color: #d8c79a;
  border: none;
  color: #3e2f1c;
  padding: 10px 14px;
  font-size: 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1100;
  transition: background-color 0.2s ease;
}

.nav-toggle:hover {
  background-color: #c2ab7e;
}

/* ------------------------------
   Overlay Effect When Navbar Open
------------------------------ */
.navbar.open ~ .container {
  filter: brightness(0.8);
}

/* ------------------------------
   Mobile-Friendly Adjustments
------------------------------ */
@media screen and (max-width: 768px) {
  .scrollable {
    width: 90%;                  /* almost full width on mobile */
    max-height: 250px;           /* shorter height for mobile screens */
    padding: 10px 15px;          /* adjust padding */
    margin: 15px auto;           /* maintain spacing */
    font-size: 0.95rem;          /* slightly smaller text for mobile */
  }
}

  /* Navbar open shows as dropdown */
  .navbar.open {
    display: block;
    position: relative;
    width: 100%;
    padding: 15px 10px;
  }

  /* Container takes full width */
  .container {
    margin-left: 0;
    padding: 20px;
  }

  /* Scrollable article list shrinks and centers */
  .scrollable {
    width: 90%;
    max-height: 300px;
    padding: 10px 15px;
  }

  /* Smaller headers for mobile */
  .container header h1 {
    font-size: 2rem;
    text-align: center;
  }

  .container header h3 {
    font-size: 1.2rem;
    text-align: center;
  }

  .scrollable h2 {
    font-size: 1.4rem;
    text-align: center;
  }
}