/* 
10/14/25
========================================
sidebar 
========================================
*/
/* Hide navbar on all screen sizes */
#main-navbar {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* adjusting the header to keep content together */
.header-section {
  width: 100%; /* Ensure it takes the full width */
  max-width: 900px; /* Set a maximum width */
  padding: 2px 2px; /* Add padding if needed */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-section .d-flex {
  width: 100%; /* Ensure the text elements take full width */
  text-align: center; /* Center the text */
  margin-bottom: 3px; /* Space between elements */
}
/* sidebar adjustments for smaller screens */
@media (max-width: 768px) {
  #sidebarMenu,
  #sidebarMenu.show,
  #sidebarMenu.collapse,
  #sidebarMenu.collapse.show {
    position: static !important; /* Remove absolute positioning completely */
    transform: none !important; /* Remove all transforms including animations */
    left: 0 !important; /* Reset left positioning */
    right: 0 !important; /* Reset right positioning */
    width: 100% !important; /* Full width for smaller screens */
    min-width: unset !important; /* Remove minimum width */
    max-width: 100% !important; /* Prevent overflow */
    margin: 0 auto !important; /* Center with auto margins */
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important; /* Ensure padding doesn't cause overflow */
    display: block !important; /* Override collapse class */
  }
}
@media (max-width: 768px) {
  .content-wrapper {
    margin-left: 0 !important; /* Remove margin to prevent off-screen display */
    margin-right: 0 !important;
    width: 100% !important;
    position: relative !important; /* Change from absolute to relative for proper centering */
    display: flex !important;
    justify-content: center !important; /* Center content horizontally */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Center mission statements on mobile */
  .d-flex.text-center,
  .d-flex.content-wrapper.text-center {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
}
/* content wrapper to ensure full width minus the sidebar */
.content-wrapper {
  position: relative;
  width: 100%;
  max-width: 900px;
  padding-top: 0; /* Adjust padding to align with the header */
}
/* sidebar styles */
#sidebarMenu {
  position: absolute;
  top: 0; /* Align with the top of the header */
  left: 0%; /* Position at center */
  transform: translateX(-50%); /* Center the sidebar */
  box-shadow: 0 5px 10px 0 rgba(198, 12, 12, 0.05), 0 5px 10px 0 rgb(0 0 0 / 5%);
  width: 30vw; /* Use viewport width for responsive sizing */
  min-width: 350px; /* Minimum width */
  max-width: 450px; /* Maximum width */
  z-index: 2; /* Sidebar layering */
  margin-top: 0; /* Adjust to align with the header */
}
/* active state */
.sidebar .active {
  border-radius: 5px;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
}

/* 
========================================
end of sidebar
========================================
*/


/* 
========================================
accordion
======================================== 
*/
/* Ensure accordion takes full width */
.accordion {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
/* Ensure accordion items take full width */
.accordion-item {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
}
button.accordion-button {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 1rem;
}
/* Ensure accordion content takes full width */
.accordion-collapse {
  width: 100%;
}
/* general accordion padding adjustment */
.accordion-body {
  width: 100%;
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
/* Ensure forms and content within accordion take full width */
.accordion-body > * {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.accordion-body form {
  width: 100%;
}
.accordion-body form input,
.accordion-body form select,
.accordion-body form textarea {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .accordion,
  .accordion-item,
  .accordion-collapse,
  .accordion-body,
  .accordion-body > * {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .accordion-body {
    padding: 0.5rem;
  }

  /* Ensure buttons take full width */
  button.accordion-button, 
  button.btn {
    width: 100%;
    text-align: center;
  }
  
  /* Ensure forms within accordions take full width */
  .accordion-body form {
    width: 100%;
  }

  .accordion-body form input,
  .accordion-body form select,
  .accordion-body form textarea {
    width: 100%;
    box-sizing: border-box;
    text-align: left;
  }
}
/* hover effects for nav items and list group items */
.nav-item i:hover, 
.accordion-button:hover, 
.list-group-item:hover {
  color: rgb(80, 112, 198);
}
.list-group-item:hover {
  font-weight: bolder;
  background-color: #E0E0E0 !important;
  box-shadow: 5px 5px rgb(11, 210, 245);
}
/* 
========================================
end of accordion
========================================
*/


/* 
========================================
stepper
========================================
*/
.stepper-head-icon {
  transition: background-color 0.3s ease-in-out; /* Smooth transition for background color changes */
}
.stepper-head-text {
  color: #666;  /* Default color for text in inactive steps - hardcoded instead of var() */
  transition: color 0.3s ease-in-out;  /* Smooth transition for color change */
}
.stepper-step.stepper-active .stepper-head-text {
  color: #004085;  /* Change color for active steps - hardcoded instead of var() */
}
.stepper-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0; /* Adjust margin for smaller screens */
  width: 100%;
  overflow: hidden; /* Controls visibility of content only, not text */
  transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;  /* Transition for expanding/collapsing content */
}
.stepper-step {
  cursor: pointer;
  margin-bottom: 15px;
  margin-top: 15px;
}
.stepper-step:not(.stepper-active) .stepper-content {
  max-height: 0;  /* Collapse inactive steps */
  opacity: 0;  /* Make content transparent */
}
.stepper-active .stepper-content {
  display: contents;  /* Display the contents for active steps */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  width: 100%; /* Ensure full width */
  text-align: left; /* Align text to the left */
  opacity: 1;  /* Full visibility for content of active steps */
}
.stepper-active .stepper-content > * { /* Selects all direct children */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  width: 100%; /* Ensure full width */
  text-align: left; /* Align text to the left */

}
.stepper-step.stepper-active .stepper-head-icon {
  background-color: #127cec;  /* Optional: change icon color for active step */
}
/* 
========================================
end of stepper
========================================
*/