/* Adjustments for the main content with fixed navbar */

/* Add padding to the top of the main content to account for the fixed navbar */
main {
  padding-top: 5rem;
}

/* Ensure the main content has proper spacing */
main h1 {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/* Adjust the input container spacing */
.input-container {
  margin-top: 1rem;
  margin-bottom: 0;
}

/* Adjust form layout */
form {
  margin-bottom: 0;
}

/* Ensure the button group doesn't add extra space */
.button-group {
  margin-bottom: 0;
}

/* Make sure the page background extends properly but doesn't create extra scrolling */
body {
  min-height: 100vh;
  background-color: var(--background);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Prevent unnecessary scrolling when no content is generated */
html, body {
  overflow-y: auto;
}

/* Only show scrollbar when needed */
.output-container:empty,
.explanation-container:empty,
.video-container:empty {
  display: none;
}

/* Hide empty containers */
.explanation-container, .video-container {
  margin-top: 2rem;
}

/* Ensure containers are only visible when they have content */
main > div:empty {
  display: none;
}

/* Ensure the page has proper height */
main {
  min-height: calc(100vh - 5rem);
  display: flex;
  flex-direction: column;
}

/* Handle canvas container */
.canvas-container[style*="visibility: hidden"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}