/* Style adjustments for Bootstrap icons */
.bi {
  vertical-align: -0.125em; /* Aligns the icon slightly above the baseline */
  fill: currentColor; /* Icon color will be the same as the text color */
}

/* Custom primary button styles with a unique violet theme */
.btn-bd-primary {
  /* Define custom property for violet background */
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

  /* Override Bootstrap button variables to apply custom styles */
  --bs-btn-font-weight: 600; /* Font weight for button text */
  --bs-btn-color: var(--bs-white); /* Text color for button */
  --bs-btn-bg: var(--bd-violet-bg); /* Background color for button */
  --bs-btn-border-color: var(--bd-violet-bg); /* Border color for button */
  --bs-btn-hover-color: var(--bs-white); /* Text color on hover */
  --bs-btn-hover-bg: #6528e0; /* Background color on hover */
  --bs-btn-hover-border-color: #6528e0; /* Border color on hover */
  --bs-btn-focus-shadow-rgb: var(
    --bd-violet-rgb
  ); /* Shadow color when button is focused */
  --bs-btn-active-color: var(
    --bs-btn-hover-color
  ); /* Text color when button is active */
  --bs-btn-active-bg: #5a23c8; /* Background color when button is active */
  --bs-btn-active-border-color: #5a23c8; /* Border color when button is active */
}

/* High z-index for mode toggle to ensure it stays on top of other elements */
.bd-mode-toggle {
  z-index: 1500; /* High stacking order */
}

/* Ensure the Bootstrap icon within the mode toggle dropdown is visible when active */
.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important; /* Override other display properties */
}

/*
 * Base structure
 */

/* Adds a shadow to the text for all body content */
body {
  text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5); /* Shadow for a 3D effect on text */
}

/* Limits the maximum width of the container for a centered look */
.cover-container {
  max-width: 60em; /* Maximum width of the main container */
}

/*
 * Header
 */

/* Custom font styling for elements with class 'raleway-name' */
.raleway-name {
  font-family: "Raleway", sans-serif; /* Specifies the font family */
  font-optical-sizing: auto; /* Enables automatic optical sizing */
  font-weight: 300; /* Font weight as light */
  font-style: normal; /* Normal font style */
}

/* Style for navigation links within the masthead */
.nav-masthead .nav-link {
  color: rgba(255, 255, 255, 0.5); /* Semi-transparent white color */
  border-bottom: 0.25rem solid transparent; /* Transparent border for a consistent link size */
}

/* Hover and focus effects for navigation links */
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
  border-bottom-color: rgba(
    255,
    255,
    255,
    0.25
  ); /* Changes border color on hover/focus */
}

/* Spacing for nav links to separate them from each other */
.nav-masthead .nav-link + .nav-link {
  margin-right: 1rem; /* Right margin for spacing between links */
}

/* Styles for the active state of navigation links */
.nav-masthead .active {
  color: #fff; /* White color for the active link */
  border-bottom-color: #fff; /* White border for the active link */
}

/* Container for language selection flags */
.language-container {
  display: inline-flex; /* Uses flexbox for alignment */
  align-items: center; /* Vertically centers items within the container */
  margin-right: 20px; /* Right margin for spacing */
  cursor: pointer; /* Changes cursor to indicate clickable area */
}

/* General rule for all flag images to maintain a consistent height */
.language-container img {
  height: 20px; /* Sets a fixed height for flag images */
  width: auto; /* Maintains aspect ratio of the flags */
}

.offcanvas-body {
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensures the offcanvas body takes full height of its container */
}

#chat-messages {
  flex-grow: 1;
  overflow-y: auto; /* Adds scroll to this container if content overflows */
}

.valid {
  color: green;
}

.invalid {
  color: red;
}

.pointer-cursor {
  cursor: pointer;
}

/* Gallery image container styles */
.image-container {
  height: 200px; /* Fixed height for all containers */
  width: auto; /* Width will adjust based on content */
  overflow: hidden; /* Hide overflow if image is larger */
  margin-bottom: 15px; /* Add some spacing between rows */
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.image-container img {
  height: 100%; /* Make image fill container height */
  width: auto; /* Width will adjust automatically */
  object-fit: cover; /* Maintain aspect ratio while covering container */
  object-position: center; /* Center the image within container */
}

/* Flowchart container styles */
.image-container.flowchart {
  height: 100%; /* Take full height of parent */
  width: 100%; /* Full width of container */
  display: flex; /* Enable flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
}

.image-container.flowchart img {
  width: 100%; /* Full width */
  height: auto; /* Height adjusts automatically */
  object-fit: contain; /* Ensures entire image is visible */
}

/* Accordion content improvements for better readability and visual hierarchy */
.accordion-body {
  padding: 1.5rem 1.25rem; /* Increased padding for more breathing room */
}

.accordion-body ul {
  margin-bottom: 0;
  padding-left: 1.5rem;
}

.accordion-body ul li {
  margin-bottom: 1.25rem; /* Vertical spacing between list items */
  line-height: 1.7; /* Improved readability with increased line height */
  padding-bottom: 1rem; /* Space before separator */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle visual separator */
}

.accordion-body ul li:last-child {
  margin-bottom: 0; /* Remove margin from last item */
  padding-bottom: 0; /* Remove padding from last item */
  border-bottom: none; /* Remove border from last item */
}

.accordion-body strong {
  font-size: 1.05rem; /* Slightly larger for emphasis */
  color: rgba(255, 255, 255, 0.95); /* Brighter for visual hierarchy */
}