html {
 scroll-behavior: smooth;
}

/* Container for the main question area styling */
main.col-md-9 {
 background: #ffffff;
 border-radius: 8px;
 padding: 20px;
 box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Heading style for the question title */
main.col-md-9 h2 {
 font-size: 2.5rem;
 font-weight: bold;
 color: #333;
 margin-bottom: 0.5em;
}

/* Styling for the question body content */
.question-body {
 background-color: #fafafa;
 padding: 15px;
 border-radius: 6px;
 margin-bottom: 20px;
 line-height: 1.6;
 font-size: 1.1rem;
 color: #444;
}

.question-body pre {
 white-space: pre-wrap; /* Wrap lines while preserving whitespace and line breaks */
 word-wrap: break-word; /* Break long words if necessary */
}


/* Style badges (for tags etc.) for visual appeal */
.badge {
 font-size: 0.9rem;
 padding: 0.5em 0.7em;
 border-radius: 20px;
}


.badge.bg-warning {
 background-color: #ffc107;
 color: #000;
 font-weight: bold;
 font-size: 1em;
}

.star-rating .star {
 font-size: 2rem;           /* Increased size */
 color: gray;               /* Default neutral color */
 transition: color 0.2s ease;
 cursor: pointer;
}

.star-rating .star:hover {
 color: darkorange;         /* Color change on hover for only the hovered star */
}

.star-rating .star.selected {
 color: darkorange;         /* Permanently colored when selected */
}

textarea {
 overflow: hidden; /* Hide the scrollbars */
 resize: none; /* Disable manual resizing */
 min-height: 50px; /* Optional: Set a minimum height */
}

[id] {
 scroll-margin-top: 100px; /* same as your offset */
}

.comment-container {
 border-top: 1px solid #ddd; /* Light gray border */
 padding-top: 10px; /* Add some spacing above the first line of the comment */
 margin-top: 15px; /* Ensure some spacing between comments */
}

.hidden {
 display: none;
}

.username {
 color: blue;
 font-weight: bold; /* Optional: make the text bold */
 margin:0 5px;
}

.username:hover {
 text-decoration: underline;
 color: darkblue;
}

.monospaced-content {
 font-family: "Courier New", Courier, monospace; 
 white-space: pre-wrap;  
 margin: 0;       
 tab-size: 4; 
 overflow-x: auto;     
}

aside.col-md-3 {
 position: sticky;
 top: 20px;  /* distance from top of viewport */
 align-self: flex-start; /* ensures it aligns at the top of its container */
 z-index: 100;  /* optional: bring sidebar above other content */
}

.attachment-container {
 background: #000;
 border: 1px solid #ddd;
 padding: 15px;
 border-radius: 8px;
 display: block;         /* Change from inline-block to block */
 max-width: 90%;         /* Optional: constrain width for better presentation */
 margin: 20px auto;      /* Center horizontally with auto left/right margins, add vertical spacing as needed */
 transition: box-shadow 0.3s ease;
 text-align: center;     /* Ensure contents (like images, links) are centered inside the container */
}


.attachment-container:hover {
 box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.attachment-container img {
 max-width: 100%;
 height: auto;
 border-radius: 4px;
 transition: transform 0.3s ease;
 cursor: pointer;
}

.attachment-container img:hover {
 transform: scale(1.05);
}

.attachment-link {
 display: inline-block;
 padding: 10px 15px;
 background-color: #007bff;
 color: #fff;
 border-radius: 4px;
 text-decoration: none;
 transition: background-color 0.3s ease;
}

.attachment-link:hover {
 background-color: #0056b3;
 color: #000000;
}

.share-section {
 position: relative; /* Establish a positioning context */
 cursor: pointer;
}

.share-container {
 position: absolute;
 top: 110%;             /* Positioned below the toggle button */
 left: 0;               /* Align container to the left of its parent */
 width: 360px;          /* Fixed width for three columns */
 background: white;
 padding: 1rem;
 box-shadow: 0 2px 6px rgba(0,0,0,0.15);
 display: none;          /* Hidden by default */
 z-index: 1000; 
}

.share-buttons {
 display: grid;
 grid-template-columns: repeat(3, 1fr); /* Three equal columns */
 gap: 8px;                              /* Space between buttons */
 justify-items: center;                 /* Center items within each grid cell */
}

.share-buttons a {
 width: 100%;           /* Make each button full width of its grid cell */
 text-align: center;    /* Center text/icon inside button */
}


/* Responsive design for smaller screens */
@media (max-width: 480px) {
 aside.col-md-3 {
  position: relative;  
 }
}