/* ./public/css/feedbackBaseline.css */

/* Basic body layout using Flexbox */
body {
    display: flex; /* Enables Flexbox for layout */
    flex-direction: column; /* Stacks children vertically */
    min-height: 100vh; /* Ensures the body takes up the full viewport height */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Main content area that stretches to fill available space */
main {
    flex: 1; /* Allows the main content to grow and fill remaining space */
    overflow-y: auto; /* Allow vertical scrolling within main content */
    padding-bottom: 2rem; /* Add some padding at the bottom */
}

/* General container for consistent padding */
.container {
    padding-left: 5%; /* Adds padding on the left for spacing */
    padding-right: 5%; /* Adds padding on the right for spacing */
    width: 100%;
    max-width: 1200px; /* Set a reasonable max-width */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Styling for card images */
.card-img-top {
    width: 65px; /* Initial width of the image */
    height: auto; /* Maintains aspect ratio */
    padding-top: 20px; /* Adds spacing above the image */
    padding-left: 10px; /* Adds spacing to the left of the image */
    max-width: 100px; /* Restricts the maximum width of the image */
    max-height: 100px; /* Restricts the maximum height of the image */
}

/* "New" tag styling */
.new-tag {
    position: absolute; /* Positions the tag relative to the nearest positioned ancestor */
    top: 10px; /* Places the tag 10px from the top */
    right: 10px; /* Places the tag 10px from the right */
    background: red; /* Sets the background color to red */
    color: white; /* Sets the text color to white */
    padding: 10px; /* Adds padding around the text */
    font-size: 1rem; /* Sets the font size */
    border-radius: 3px; /* Rounds the corners slightly */
}

/* Footer styling */
footer.bg-light {
    margin-top: 80px !important; /* Adds spacing above the footer with higher priority */
}

/* Separator line for articles */
.article-separator {
    border-top: 2px solid #ccc; /* Creates a solid line with a gray color */
    margin: 20px auto; /* Adds vertical spacing and centers horizontally */
    width: 50%; /* Restricts the width to half the container */
    min-height: 1px; /* Ensures the separator is visible */
}

/* Removes borders from card elements */
.card {
    border: none; /* Removes default border */
}

/* Utility class to hide elements */
.hidden {
    display: none; /* Hides the element completely */
}

/* Layout for feedback steps using Grid */
.feedback-steps-container {
    display: grid; /* Uses a grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Creates flexible columns */
    gap: 20px; /* Adds spacing between grid items */
    margin: 40px 0; /* Adds vertical spacing around the grid */
}

/* Individual feedback step card styling */
.feedback-step {
    display: flex; /* Uses Flexbox for layout */
    flex-direction: column; /* Stacks elements vertically */
    border-radius: 8px; /* Rounds the corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
    overflow: hidden; /* Prevents content from spilling outside */
    background-color: #fff; /* Sets the background color to white */
}

/* Feedback step image styling */
.feedback-step-image img {
    width: 100%; /* Makes the image fill the container's width */
    height: 250px; /* Sets a fixed height */
    object-fit: cover; /* Ensures the image covers the container without distortion */
}

/* Text content within feedback steps */
.feedback-step-text {
    padding: 20px; /* Adds spacing around the text */
    text-align: center; /* Centers the text horizontally */
}

/* Feedback step heading styling */
.feedback-step-text h5 {
    font-size: 1.5rem; /* Sets the heading font size */
    margin-bottom: 10px; /* Adds spacing below the heading */
    color: #333; /* Sets the text color to dark gray */
}

/* Feedback step paragraph styling */
.feedback-step-text p {
    font-size: 1rem; /* Sets the paragraph font size */
    color: #555; /* Sets the text color to a lighter gray */
    line-height: 1.6; /* Improves readability with line spacing */
}

/* Hero section background styling */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
    /* Adds a dark gradient background */
    background-size: cover; /* Ensures the background covers the entire container */
}

/* White text utility class */
.text-white {
    color: white !important; /* Forces text color to white */
}

/* Semi-transparent white text utility class */
.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important; /* Sets a lighter, semi-transparent white color */
}

/* Button styling for success actions */
.btn-success {
    background-color: #28a745; /* Sets the background color to green */
    color: white; /* Sets the text color to white */
}

/* Button styling for primary actions */
.btn-primary {
    background-color: #007bff; /* Sets the background color to blue */
    color: white; /* Sets the text color to white */
}

/* Call-to-action (CTA) section styling */
#cta {
    background-color: #f8f9fa; /* Sets the background color to light gray */
}

/* Testimonials section styling */
.testimonials {
    background-color: #007bff; /* Sets the background color to blue */
    color: white; /* Sets the text color to white */
}

/* Fix for testimonial author names */
.testimonials .blockquote-footer {
    color: rgba(255, 255, 255, 0.7) !important; /* Ensure text is visible on blue background */
    background-color: transparent; /* Remove any background color */
}

/* Feedback form container */
.feedback-form {
    max-width: 600px; /* Limits the form's width */
}

/* Style for the information icon */
.info-icon {
    font-size: 0.9rem; /* Sets the font size slightly smaller */
    color: #007bff; /* Sets the icon color to blue */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
    margin-left: 5px; /* Adds spacing to the left of the icon */
}

/* Max-width container for aligned text */
.max-width-container {
    max-width: 900px; /* Restricts the maximum width of the container */
    margin: 0 auto; /* Centers the container horizontally */
}

/* Reduce images size */
.img-fluid {
    max-width: 65%; /* Reduce width of its original size */
    height: auto; /* Maintain aspect ratio */
}

.copy-icon {
    cursor: pointer;
}

#copyMessage {
    font-size: 0.9rem;
    color: green; /* or any other color */
    display: none; /* Hidden by default */
    margin-top: 5px;
}

.visible {
    display: inline;
}

.noUnderline {
    text-decoration: none;
    color: inherit;
}

/* Ensure form elements don't cause overflow */
.form-control, .form-select, .btn {
    max-width: 100%;
    box-sizing: border-box;
}

/* Screen reader only - visually hidden but accessible to screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}