/* The side navigation menu */
.sidenav {
   height: 100%; /* 100% Full-height */
   width: 0; /* 0 width - change this with JavaScript */
   position: fixed; /* Stay in place */
   z-index: 9999; /* Copilot enhanced - increased z-index to stay on top of all content */
   top: 0; /* Stay at the top */
   left: 0;
   background-color: #fcc117; /* bright yellow*/
   overflow-x: hidden; /* Disable horizontal scroll */
   padding-top: 60px; /* Place content 60px from the top */
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

   .sidenav h3 {
      padding: 8px 8px 8px 20px;
      text-decoration: none;
      font-size: 25px;
      font-weight: 700;
      color: black;
      display: block;
      transition: 0.5s;
   }



   /* The navigation menu links */
   .sidenav a {
      padding: 8px 8px 8px 30px;
      text-decoration: underline;
      font-size: 20px;
      color: black;
      display: block;
      transition: 0.35s;
   }

   /* Copilot enhanced code section - Home link styling to match section headers */
   .sidenav a.home-link {
      background-color: transparent; /* Copilot enhanced - removed gold background */
      padding: 8px 8px 8px 10px;
      text-decoration: none;
      font-size: 25px !important;
      font-weight: 700;
      color: black;
      display: block;
      transition: 0.35s;
      border-bottom: none; /* Copilot enhanced - removed border */
   }

   .sidenav h4 a {
      background-color: #fcc117;
      padding: 8px 8px 8px 6px;
      text-decoration: underline;
      font-size: 30px !important;
      font-weight: 700;
      color: black;
      display: block;
      transition: 0.35s;
   }

   /* Active/current link */

   /* When you mouse over the navigation links, change their color */
   .sidenav a:hover {
      color: #f1f1f1;
   }

   /* Position and style the close button (top right corner) */
   .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 24px;
      margin-left: 50px;
   }

@media (pointer:coarse) and (max-device-width: 768px), (-webkit-min-device-pixel-ratio: 2) {

   /* The side navigation menu */
   .sidenav {
      height: 100%; /* 100% Full-height */
      width: 0; /* 0 width - change this with JavaScript */
      position: fixed; /* Stay in place */
      z-index: 9999; /* Copilot enhanced - increased z-index to stay on top of all content */
      top: 50px; /* Stay at the top */
      left: 0;
      background-color: white; /* Black*/
      overflow-x:auto; /* Disable horizontal scroll */
      padding-top: 8px; /* Copilot enhanced - reduced from 60px to 8px */
      padding-bottom:30px;/* Place content 30px from the bottom */
      transition: 0.35s; /* 0.5 second transition effect to slide in the sidenav */
   }

      .sidenav h3 {
         padding: 4px 4px 4px 10px;
         text-decoration: none;
         font-size: 15px !important;
         font-weight: 700;
         color: black;
         display: block;
         transition: 0.35s;
      }

      /* Active/current link */

      /* The navigation menu links */
      .sidenav a {
         padding: 4px 4px 4px 15px;
         text-decoration: underline;
         font-size: 13px;
         color: navy;
         display: block;
         transition: 0.75s;
      }

      /* Copilot enhanced code section - Mobile home link styling */
      .sidenav a.home-link {
         background-color: transparent; /* Copilot enhanced - removed gold background */
         padding: 8px 8px 8px 10px;
         text-decoration: none;
         font-size: 18px !important;
         font-weight: 700;
         color: black;
         display: inline-block; /* Copilot enhanced - allow close button on same line */
         transition: 0.35s;
         border-bottom: none; /* Copilot enhanced - removed border */
      }

      /* Keep home icon black */
      .sidenav a.home-link span {
         color: black !important;
      }

      .sidenav h4 a {
         background-color: white;
         padding: 8px 8px 8px 10px;
         text-decoration: underline;
         font-size: 20px !important;
         font-weight: 700;
         color: black;
         display: block;
         transition: 0.35s;
      }

      /* When you mouse over the navigation links, change their color */
      .sidenav a:hover {
         color: #f1f1f1;
      }

      /* Position and style the close button (top right corner) */
      .sidenav .closebtn {
         position: absolute;
         top: 8px; /* Copilot enhanced - aligned with reduced padding */
         right: -150px; /* Copilot enhanced - positioned to far right edge */
         font-size: 24px;
         margin-left: 0;
         border: solid;
         border-width: 2px;
         text-decoration: none;
         z-index: 10000; /* Copilot enhanced - ensure close button is always on top */
         background-color: white;
         padding: 2px 8px;
      }
}