/* General Reset and Box-Sizing */
* {
    box-sizing: border-box;
}

html, body {   /* Using this code the page doesn't move left and right */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    margin: 0;
    padding: 0;
    width: 100%; /* Ensure the width doesn't exceed the viewport */ 
    height: auto; /* Allow vertical expansion */
}

/* Section Styling */
section {
    max-width: 90%;
    margin: 20px auto; /* Center sections vertically and horizontally */
    padding: 15px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
    overflow: visible; /* Ensure content is not clipped */
}

/* Flexbox Main Container */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%; /* Full-width for main content */
    min-height: 100vh; /* Ensure the main container takes full viewport height */
}

/* Ensure Images are Responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center images horizontally */
}

/* General Styles */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5efe4;
    color: #333;
}


/* Header */
.mobile-header {
    text-align: center;
    background-color: #8B3E2F; /* Deep red for header background */
    color: #FDF3E7; /* Softer cream text for header */
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 0px; /* Consistent gap below header */
}

.mobile-header h1 {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    color: #FFFFFF; /* Bright white for main title */
}

.mobile-header .subheading {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 15px;
    color: #FDEBD0; /* Softer shade for subheading */
}

/* Did You Know Section */
.did-you-know {
    padding: 20px;
    background-color: #FFF5EB;
    border-radius: 12px;
    margin: 20px auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
    max-width: 90%;
}

.did-you-know h2 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #8B3E2F; /* Deep red to match the theme */
    text-align: center;
    margin-bottom: 15px;
    letter-spacing: 0.5px; /* Subtle spacing for a refined look */
}

.did-you-know ul {
    list-style-type: disc;
    padding-left: 20px;
    line-height: 1.6;
    color: #555;
}

.did-you-know ul li {
    margin-bottom: 5px;
}

.did-you-know ul li strong {
    color: #8B3E2F; /* Highlight key text */
}

/* Input Section */
.input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    background-color: #f9f9f9; /* Light white background for the section */
    border-radius: 15px;
    margin: 0px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly elevated effect */
    max-width: 90%;
    text-align: center;
}

.input-section h2 {
    font-size: 1.6rem; /* Slightly larger to stand out */
    font-weight: bold;
    color: #8B3E2F; /* Deep red to maintain theme consistency */
    margin-bottom: 0px;
    font-weight: 600;
    text-transform: capitalize; /* Keep it clean and readable */
}

.input-section .input-instructions {
    font-size: 1rem;
    color: #555;
    margin-bottom: 15px;
    line-height: 1.4;
}

textarea {
    width: 95%;
    max-width: 600px;
    height: 150px;
    padding: 15px;
    border: 1px solid #ccc; /* Slightly darker border */
    border-radius: 8px;
    font-size: 1rem;
    margin-bottom: 15px;
    background-color: #f7f7f7; /* Light gray for text box */
    color: #333; /* Darker color for the text */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle depth effect */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

textarea:focus {
    border-color: #8B3E2F;
    box-shadow: 0 0 8px rgba(139, 62, 47, 0.3); /* Highlight on focus */
    outline: none;
}

.button-group {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-reset, .btn-analyze {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold;
    text-transform: uppercase;
}

.btn-reset {
    background-color: #E74C3C;
    color: #fff;
}

.btn-reset:hover {
    background-color: #C0392B;
    transform: scale(1.05);
}

.btn-analyze {
    background-color: #2ECC71;
    color: #fff;
}

.btn-analyze:hover {
    background-color: #27AE60;
    transform: scale(1.05);
}



/* Results Section */
.results-section {
    padding: 25px 20px;
    background-color: #fff;
    border-radius: 15px; /* Softer edges */
    margin: 20px auto; /* Consistent margin for uniform spacing */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* Enhance shadow visibility */
    text-align: center;
    max-width: 90%;
    border: 1px solid rgba(139, 62, 47, 0.2); /* Add a subtle border for clarity */
    position: relative; /* Ensure proper positioning */
    overflow: visible; /* Prevent content from being clipped */
    min-height: 300px; /* Ensure the section has enough height */
}

/* Results Section Title */
.results-section h2 {
    font-size: 1.6rem;
    color: #8B3E2F;
    margin-bottom: 15px;
    font-weight: bold;
}

.results-placeholder {
    color: #777; /* Neutral gray for unobtrusive messaging */
    font-size: 1rem; /* Standard size for placeholder text */
    margin-top: 10px;
    line-height: 1.5;
}

#results-details {
    text-align: left;
    margin: 20px 0;
    font-size: 1rem;
}

#results-details p {
    margin: 10px 0;
    font-size: 1rem;
    color: #555;
}

#results-details strong {
    color: #8B3E2F;
}

#chart-container {
    margin-top: 20px;
    text-align: center;
    max-width: 100%;
    padding: 10px 5px; /* Add horizontal padding for better fit */
    height: auto; /* Ensure dynamic height */
}

canvas {
    width: 100%; /* Stretch canvas to fit the container */
    max-width: 100%;
    height: 300px; /* Explicit height */
    display: block;
    margin: 0 auto; /* Center canvas */
}

.output-placeholder {
    color: #777;
    font-size: 1rem;
    margin: 15px 0;
}

/* Photo Gallery */
.photo-gallery {
    padding: 20px;
    background-color: #FFF5EB;
    border-radius: 12px;
    margin: 0px auto; /* Consistent spacing between sections */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 90%; /* Ensures the gallery doesn't exceed 90% of the viewport width */
}

/* Explore Petra Title */
.photo-gallery h2 {
    font-size: 1.6rem; /* Match the size of feedback title */
    font-weight: bold;
    color: #8B3E2F; /* Deep red to align with the theme */
    margin-bottom: 20px;
    text-align: center;
    text-transform: capitalize; /* Clean, consistent formatting */
    padding-bottom: 5px;
}

.gallery {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align items horizontally */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid layout */
    gap: 20px; /* Adds spacing between images */
}

.gallery-item img {
    display: block; /* Ensures the image takes the full width of the parent container */
    margin: 0 auto; /* Centers the image horizontally */
    max-width: 90%; /* Ensures the image fits within the parent container's width */
    height: auto; /* Maintains aspect ratio */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for images */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.gallery-item img:hover {
    transform: scale(1.05); /* Slight zoom effect */
}

.gallery-item p {
    margin-top: 10px;
    font-size: 0.8rem;
    color: #555;
    text-align: center;
}

html, body {
    min-height: 100%; /* Ensure the page takes up the full height */
    margin: 0; /* Remove default margins */
    display: flex;
    flex-direction: column;
}

main {
    flex: 1; /* Allow the main content to take up remaining space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between sections */
}

/* Footer */
.mobile-footer {
    text-align: center;
    background-color: #8B3E2F; /* Deep red background */
    color: #FDF3E7; /* Cream-colored text for footer */
    padding: 20px 15px; /* Add more padding for better spacing */
    margin-top: 15px; /* Ensure consistent spacing above footer */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
    position: relative; /* Ensure proper placement */
    overflow: hidden; /* Prevent content overflow */
    max-width: 100%; /* Ensure the footer spans the full width */
}

.social-links {
    margin-top: 10px; /* Add spacing above social icons */
    display: flex;
    justify-content: center;
    gap: 15px; /* Spacing between icons */
}

.social-links a {
    color: #FDF3E7; /* Cream-colored icons */
    font-size: 1.2rem; /* Ensure icons are readable */
    text-decoration: none;
    transition: transform 0.2s, color 0.2s; /* Smooth hover effect */
}

.social-links a:hover {
    transform: scale(1.2); /* Slight zoom effect */
    color: #F1C40F; /* Gold hover color */
}

.inline-example {
    color: #8B3E2F;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
}

.inline-example:hover {
    color: #C0392B;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    textarea {
        height: 100px;
    }

    .btn-reset, .btn-analyze {
        font-size: 0.9rem;
        padding: 8px 12px;
    }

    section {
        max-width: 600px; /* Set a wider max width for larger screens */
        padding: 15px; /* Adjust padding for smaller screens */
    }
}

@media (max-width: 480px) {
    section {
        margin: 10px auto;
        padding: 10px;
    }

    .mobile-footer {
        font-size: 0.9rem;
    }

    .social-links a {
        font-size: 1rem;
    }
}

@media (max-width: 320px) {
    #chart-container {
        padding: 5px; /* Minimize padding for narrow screens */
    }

    canvas {
        height: 250px; /* Slightly smaller canvas for mobile S */
    }

    .results-section {
        padding: 15px; /* Reduce padding in the results section */
    }
}