/* public/styles.css */

/* Define the custom font */
@font-face {
    font-family: 'Roboto';
    src: url('/Roboto-Regular.ttf') format('truetype'); /* Path to the font file */
    font-weight: normal; /* Normal weight */
    font-style: normal; /* Normal style */
}

nav {
    background-color: white; /* Updated: Set background color to white */
    color: black; /* Updated: Set text color to black */
    padding: 15px; /* Increased padding around the nav */
    width: 100%; /* Make the navbar full width */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Add a shadow for depth */
    border-radius: 10px; /* Rounded corners */
}

nav div {
    display: flex; /* Flexbox for layout */
    justify-content: space-between; /* Space between items */
    align-items: center; /* Center items vertically */
    max-width: 1200px; /* Optional: Set a max width for the content */
    margin: 0 auto; /* Center the content */
}

nav .nav-links {
    display: flex; /* Use flexbox for the links */
    align-items: center; /* Center items vertically */
}

nav a {
    color: black; /* Updated: Change link text color to black */
    text-decoration: none; /* Remove underline */
    padding: 15px; /* Adjusted padding for circular shape */
    border-radius: 50%; /* Make the links circular */
    display: inline-flex; /* Use inline-flex for centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
}

nav a:hover {
    background-color: #555; /* Darker background on hover */
    border-radius: 5px; /* Rounded corners */
}

body {
    background-color: #ffffff; /* White background */
    color: #000000; /* Black text */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff; /* Ensure container background is white */
    color: #000000; /* Ensure container text is black */
}

h1, h2, h3, h4, h5, h6 {
    color: #000000; /* Black text for headings */
}

a {
    color: #000000; /* Black text for links */
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button, .btn-primary {
    background-color: #000000; /* Black button background */
    color: #ffffff; /* White text on buttons */
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover, .btn-primary:hover {
    background-color: #333333; /* Darker shade on hover */
}

input, select, textarea {
    background-color: #f0f0f0; /* Light grey input background */
    color: #000000; /* Black text */
    border: 1px solid #cccccc;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #ffffff; /* Ensure table background is white */
}

th, td {
    padding: 10px;
    border: 1px solid #cccccc;
    text-align: left;
    color: #000000; /* Ensure table text is black */
}

th {
    background-color: #f9f9f9; /* Light grey for table headers */
}

@keyframes fadeIn {
    to {
        opacity: 1; /* End with the body fully visible */
    }
}

.social-media-post {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    margin: 20px 0; /* Add margin for spacing */
    background-color: #f0f0f0; /* Set background color to light grey */
    padding: 15px; /* Padding around the post */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.5); /* White shadow outside */
}

.post-image {
    width: 200px; /* Set the width to 200px to double the size */
    height: auto; /* Maintain aspect ratio */
    margin-right: 15px; /* Space between image and text */
    border-radius: 5px; /* Optional: rounded corners for the image */
}

.post-details {
    width: 50%; /* Set width to 50% */
    margin: 10px 0 0 15px; /* Add top margin and left margin for spacing */
    color: black; /* Change text color to black */
}

.post-date {
    font-weight: bold; /* Bold date */
    margin: 0; /* Remove default margin */
}

.post-caption {
    width: 80%; /* Set width to 50% */
    margin: 5px 0 0; /* Add margin for spacing */
}

.map {
    height: 200px; /* Set a fixed height for the map */
    width: 100%; /* Set a fixed width for the map */
}



.post-form {
    background-color: #f9f9f9; /* Light background for the form */
    padding: 20px; /* Padding around the form */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-width: 600px; /* Max width for the form */
    margin: 20px auto; /* Center the form */
}


label {
    display: block; /* Make labels block elements */
    margin-bottom: 5px; /* Space between label and input */
    font-weight: bold; /* Bold labels */
    color: white; /* Change text color to white */
}

input[type="file"],
input[type="date"],
input[type="text"],
textarea {
    width: 80%; /* Full width inputs */
    padding: 10px; /* Padding inside inputs */
    border: 1px solid #ccc; /* Light border */
    border-radius: 4px; /* Rounded corners */
    font-size: 25px; /* Font size */
}

input[type="file"] {
    border: none; /* Remove border for file input */
}

textarea {
    resize: vertical; /* Allow vertical resizing */
}

.submit-button {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    padding: 10px 20px; /* Padding for button */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Font size */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    width: 100%; /* Full width */
}

.submit-button:hover {
    background-color: #45a049; /* Darker green on hover */
}

.submit-button:disabled {
    background-color: #ccc; /* Grey background when disabled */
    cursor: not-allowed; /* Not-allowed cursor when disabled */
}

.location-map {
    width: 80%; /* Set the width of the map to 80% */
    margin-top: 25px;
}

#postButton {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    padding: 15px 30px; /* Increased padding for a larger button */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 18px; /* Increased font size */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    width: 25%; /* Full width */
    margin-top: 25px;
}

#postButton:hover {
    background-color: #45a049; /* Darker green on hover */
}

#postButton:disabled {
    background-color: #ccc; /* Grey background when disabled */
    cursor: not-allowed; /* Not-allowed cursor when disabled */
}

/* Modal styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.8); /* Black background with opacity */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    display: flex; /* Use flexbox for centering */
}

/* Modal content (image) */
.modal-content {
    max-width: 90%; /* Responsive max width */
    max-height: 80%; /* Responsive max height */
}

/* Close button */
.close {
    position: absolute; /* Position the close button */
    top: 20px; /* Distance from the top */
    right: 30px; /* Distance from the right */
    color: white; /* Close button color */
    font-size: 40px; /* Close button size */
    font-weight: bold; /* Close button weight */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Mobile styles */
@media (max-width: 768px) {
    .social-media-post {
        flex-direction: column; /* Stack elements vertically */
        align-items: flex-start; /* Align items to the start */
    }

    .post-image {
        width: 80%; /* Make the image full width */
        margin-bottom: 10px; /* Add margin below the image */
    }

    .post-details {
        width: 100%; /* Set width to 50% */
        margin: 10px 0 0 15px; /* Add top margin and left margin for spacing */
        color: black; /* Change text color to black */
    }

    .post-caption {
        width: 100%; /* Set width to 50% */
    }


    .vanlife-container {
        padding: 10px; /* Add padding to the container */
    }

    .form-group input[type="datetime-local"],
    .form-group textarea {
        width: 100%; /* Set width to 100% for mobile view */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }
    .social-media-post {
        width: 100%; /* Make the image take the full width of the container */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline spacing */
    }
    .social-media-post img {
        width: 100%; /* Make the image take the full width of the container */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline spacing */
    }
    .map {
        width: 100%; /* Make the image take the full width of the container */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline spacing */

    }
    .location-map {
        width: 100%; /* Set the width of the map to 80% */
        margin-top: 25px;
    }

    
}