/* General Styling */
.body-about-page {
  line-height: 1.6;
  color: #333333;
  background-color: #black;
  margin: 0;
  padding: 0;
}

.about-page-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}

/* Container */
.about-page-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

/* Headings */
.about-page-title, .about-page-section-title {

}

.about-page-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
}

.about-page-section-title {
  font-size: 1.8rem;
  margin-top: 20px;
}

/* Paragraphs */
.about-page-paragraph {
  font-size: 1rem;
  margin-bottom: 15px;
  text-align: justify;
}

/* Highlighted Text */
.about-page-highlight {
  color: #black;
  font-weight: bold;
}

/* List Styling */
.about-page-list {
  list-style-type: disc;
  margin: 10px 0 20px 20px;
  padding: 0;
}

.about-page-list-item {
  margin-bottom: 10px;
}

/* Link Styling */
.about-page-link {
  color: #457b9d;
  text-decoration: none;
}

.about-page-link:hover {
  text-decoration: underline;
}

/* Map Container */
.about-page-map {
  margin: 20px 0;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Strong Styling */
.about-page-paragraph strong {
  font-weight: bold;
  color: #333;
}

/* Container that holds the logo and background */
.image-container {
  position: relative;
  width: 100vw; /* Full width of the viewport */
  height: 60vh; /* Adjust the height of the image container to fit your needs */
  margin: 0 auto; /* Center horizontally */
  overflow: hidden; /* Crop the background image */
}

/* Background image that will scroll subtly and be cropped */
.image-container::before {
  content: '';
  position: absolute;
  top: 0%; /* Start the background in the middle */
  left: 0;
  width: 100%;
  height: 70%; /* Make the background cover the full container */
  background-image: url(/assets/background-f15e45a2cc9fb3a27b9c4dfe3f9f32b07b57af6f2046ebf05d988f9013e01792.jpg);
  background-position: center center; /* Ensure the background stays centered */
  background-size: cover; /* Cover the container without distorting the aspect ratio */
  background-attachment: fixed; /* Keeps the background fixed but allows subtle scroll */
  z-index: -1;
  transition: transform 0.3s ease-out; /* Smooth transition effect */
}

/* Foreground image (the logo) */
.foreground {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the logo */
  width: 50%; /* Adjust size of the logo */
  height: auto;
  z-index: 1; /* Place logo in front of the background */
}

/* Add some content that scrolls over the background */
.content {
  padding: 20px;
  text-align: center;
  z-index: 2;
  position: relative;
}

/* Optional: Smooth scroll for the page */
body {
  scroll-behavior: smooth;
}
/* Band Show Container */
.band-show-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* Align the content to the left */
  background-color: white;
  padding: 20px;
  margin: 20px auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  position: relative;
  max-width: 600px;
  width: 100%;
  box-sizing: border-box;
}

/* Edit Button */
.edit-band-link {
  color: #007bff;
  font-weight: bold;
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.9em;
}

.edit-band-link:hover {
  background-color: #007bff;
  color: white;
}

/* Band Image */
.band-image {
  width: 30%;  /* Set to 30% for flexibility */
  height: auto;
  aspect-ratio: 1; /* Ensures square aspect ratio */
  border-radius: 8px;
  overflow: hidden;
  margin-right: 20px;
  flex-shrink: 0; /* Prevent image from shrinking too small */
  position: relative;
}

.band-image .profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band-image .no-image {
  width: 100%;
  height: 100%;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

/* Band Info */
.band-info {
  flex: 1;
}

.band-name {
  font-size: 2em;
  font-weight: bold;
  margin-bottom: 10px;
}

.location {
  font-size: 10px; /* Slightly smaller text size */
  color: grey;
}

.band-info p {
  margin-bottom: 8px;
  font-size: 1.1em;
  color: #333;
}

.band-info p strong {
  font-weight: bold;
}

.band-info a {
  color: #007bff;
  text-decoration: none;
}

.band-info a:hover {
  text-decoration: underline;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
  .band-show-container {
    flex-wrap: wrap;  /* Allow items to wrap */
    justify-content: center;  /* Center align the content */
  }

  .band-image {
    width: 40%;  /* Slightly reduce the image size */
    margin-right: 0;
    margin-bottom: 20px; /* Add space below the image */
  }

  .band-info {
    width: 100%;  /* Make the info section take the full width */
    text-align: center; /* Center the text */
  }
}

@media (max-width: 480px) {
  .band-image {
    width: 50%;  /* Reduce image size even further on very small screens */
  }

  .band-name {
    font-size: 1.5em; /* Adjust font size for small screens */
  }

  .band-info p {
    font-size: 1em;  /* Adjust paragraph font size for small screens */
  }
}

.band-actions {
  text-align: center;
  margin-top: 20px; /* Add spacing above the buttons */
}

.band-actions .btn {
  margin: 5px; /* Add spacing between buttons */
}

/* Bands Index Page */
.bands-table {
  width: calc(100% - 40px); /* Adjust width to account for margins */
  margin: 20px auto; /* Center the table and add vertical spacing */
  border-collapse: collapse;
  margin-top: 20px;
}

.bands-table th,
.bands-table td {
  padding: 12px 15px;
  text-align: left;
  border: 1px solid #ddd;
}

.bands-table th {
  background-color: #f2f2f2;  /* Light grey background for headers */
  font-weight: bold;
}

.bands-table tbody tr:nth-child(even) {
  background-color: #f9f9f9;  /* Light stripe for even rows */
}

.bands-table tbody tr:hover {
  background-color: #f1f1f1;  /* Highlight row on hover */
}

.bands-table td a {
  color: #0066cc;  /* Links in a blue color */
  text-decoration: none;
}

.bands-table td a:hover {
  text-decoration: underline;  /* Underline on hover */
}

/* Add some spacing between the table and the content above */
h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
}

/* Container for each band */
.band-container {
  display: flex;
  align-items: center;
  background-color: #f9f9f9; /* Light background for the box */
  padding: 15px;
  margin: 20px; /* Add space around each band container */
  border: 1px solid #ddd; /* Border around each band box */
  border-radius: 8px;
  max-width: calc(100% - 40px); /* Ensure responsiveness with side margins */
  box-sizing: border-box; /* Include padding and border in the element's width */
}

/* Band Image (forced square) */
.band-image {
  width: 100px; /* Fixed size for the square */
  height: 100px;
  object-fit: cover; /* Ensures the image covers the area without stretching */
  border-radius: 8px; /* Optional rounded corners */
  margin-right: 15px; /* Space between the image and the text */
}

/* Band Info (Text on the right) */
.band-info {
  flex: 1; /* Take up remaining space */
}

/* Band Name */
.band-name {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 5px;
}

/* Band Details (Description and links) */
.band-details {
  margin-bottom: 10px;
}

/* Band Description */
.band-description {
  font-size: 1em;
  color: #555; /* Slightly lighter color for the description */
}

/* Profile links (bandcamp, instagram) */
.band-links {
  font-size: 0.9em;
  color: #007bff; /* Link color */
  text-decoration: none;
}

.band-links:hover {
  text-decoration: underline;
}

.pending {
  color: red;
  font-weight: bold;
}

.btn-approve {
  background-color: green;
  color: white;
}

.btn-delete {
  background-color: red;
  color: white;
}

//* General Styling */
.body-support-page {
  line-height: 1.6;
  color: #000000; /* Black text */
  background-color: #ffffff; /* White background */
  margin: 0;
  padding: 0;
}

/* Container */
.support-page-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff; /* White background */
}

/* Headings */
.support-page-title, .support-page-section-title {
  color: #000000; /* Black text */
}

.support-page-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
}

.support-page-section-title {
  font-size: 1.8rem;
  margin-top: 20px;
}

/* Paragraphs */
.support-page-paragraph {
  font-size: 1rem;
  margin-bottom: 15px;
  text-align: justify;
  color: #000000; /* Black text for paragraphs */
}

/* Highlighted Text */
.support-page-highlight {
  color: #000000; /* Black text for highlighted text */
  font-weight: bold;
}

/* List Styling */
.support-page-list {
  list-style-type: disc;
  margin: 10px 0 20px 20px;
  padding: 0;
  color: #000000; /* Black text for lists */
}

.support-page-list-item {
  margin-bottom: 10px;
}

/* Link Styling */
.support-page-link {
  color: #457b9d; /* Blue color for links */
  text-decoration: none;
}

.support-page-link:hover {
  text-decoration: underline;
}

/* General Contact Section */
.general-contact-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Space between map and text */
  margin-top: 20px;
}

.map-container {
  flex: 1 1 50%; /* Map takes up half of the section */
  min-width: 300px; /* Ensures the map doesn't shrink too much */
  height: 300px;
}

.contact-info {
  flex: 1 1 50%; /* Text takes up half of the section */
  min-width: 300px; /* Ensures text area doesn't shrink too much */
}

/* Map iframe styling */
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
  border-radius: 8px; /* Optional: Rounded corners */
}

/* General Styling */
.body-contribute-page {
  line-height: 1.6;
  color: #000000; /* Black text */
  background-color: #ffffff; /* White background */
  margin: 0;
  padding: 0;
}

/* Container */
.contribute-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

/* Headings */
.contribute-title, .contribute-section-title {
  color: #000000; /* Black text */
}

.contribute-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
}

.contribute-section-title {
  font-size: 1.8rem;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Paragraphs */
.contribute-paragraph {
  font-size: 1rem;
  margin-bottom: 15px;
  text-align: justify;
  color: #000000; /* Black text */
}

/* List Styling */
.contribute-list {
  list-style-type: disc;
  margin: 10px 0 20px 20px;
  padding: 0;
  color: #000000; /* Black text */
}

.contribute-list-item {
  margin-bottom: 10px;
}

/* Buttons */
.contribute-button {
  display: inline-block;
  background-color: #000000; /* Black button */
  color: #ffffff; /* White text */
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 4px;
  margin-top: 10px;
}

.contribute-button:hover {
  background-color: #333333; /* Darker shade on hover */
}
.date-overlay {
  position: absolute;
  top: 10px;  /* Adjust as needed */
  left: 10px;  /* Adjust as needed */
  padding: 5px;  /* Adjust for spacing */
  background-color: #231F20;  /* Optional, for better contrast */
  border-radius: 5px;  /* Optional, for rounded corners */
  color: #FAF9F6;  /* Ensure visibility */
  font-size: 12px;  /* Adjust the font size */
  line-height: 1;  /* Adjust the line height to control spacing */
}

.date-overlay span {
  display: block;
  text-align: center;
  margin: 0;  /* Ensure no margin */
  padding: 0;  /* Ensure no padding */
}

.day {
  font-weight: light;  /* You can emphasize the day if desired */
}

.date {
  font-size: 25px;  /* Adjust the size for the day of the month */
  font-weight: bolder;  /* You can emphasize the day if desired */

}

.month {
  font-style: light;  /* Optional: styling the month differently */
}


.footer-container {
  text-align: center;
  padding: 20px;
  background-color: #ffffff;
  color: #231F20;
  font-family: Arial, sans-serif;
  border-top: 1px solid #ccc;  /* Add a 1px grey line under the navbar */

}

.footer-container .description {
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.5;
}

.nav-links-custom {
  margin-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.nav-link-custom {
  color: #212529;
  text-decoration: none;
  font-size: 14px;
  font-weight: light;
}

.nav-link-custom:hover {
  text-decoration: underline;
}

.separator {
  color: #231F20;
}

.social-icons-custom {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-icon-custom {
  color: #231F20;
  font-size: 18px; /* Adjust icon size */
  transition: color 0.3s ease;
}

.social-icon-custom:hover {
  color: #7EBDC2;
}
/* Genre list styling */
.genre-list {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  gap: 10px; /* Space between items */
  margin: 20px auto; /* Center the list horizontally */
  width: 60%; /* Adjust to make the list closer to the center */
}

/* Each individual genre item */
.genre-item {
  display: flex;
  justify-content: space-between; /* Space between the columns */
  align-items: center; /* Align content vertically */
  padding: 10px 20px; /* Padding for each genre item */
  border: 1px solid #ddd; /* Light border */
  border-radius: 4px; /* Rounded corners */
  font-size: 16px; /* Font size for genre name */
  background-color: #f9f9f9; /* Light background for each item */
}

/* Styling for the 'Create New Genre' button */
.btn {
  display: inline-block;
  padding: 10px 20px;
  margin-bottom: 20px; /* Space between the button and genre list */
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Delete button styling */
.delete-btn {
  color: #d9534f; /* Red color for delete */
  text-decoration: none;
}
/* Navbar Styles */
.navbar {
  padding: 10px;
  border-bottom: 1px solid #ccc; /* Grey border */
  box-sizing: border-box; /* Include padding and border in width */
  display: flex;
  justify-content: center; /* Center the entire navbar */
  position: relative;
  width: 100%; /* Full width */
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Space out hamburger and links */
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box; /* Include padding in width */
}

/* Navbar links */
.navbar-links {
  display: flex;
  justify-content: center; /* Center the links */
  align-items: center; /* Vertically align links */
  flex-grow: 1; /* Allow links to take up available space */
}

.navbar-links ul {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 0;
  gap: 20px; /* Space between links */
}

.navbar-links ul li a {
  text-decoration: none;
  color: #212529; /* Black text */
  font-weight: 400; /* Normal weight */
  padding: 10px;
}

.navbar-links ul li a:hover {
  color: black; /* Black text on hover */
  text-decoration: underline; /* Underline on hover */
}

/* Hamburger styles for mobile */
.hamburger {
  display: none; /* Hidden on larger screens */
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 25px;
  width: 30px;
  cursor: pointer;
  z-index: 10;
}

.hamburger .bar {
  width: 30px;
  height: 4px;
  background-color: black;
  border-radius: 10px;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .navbar-container {
    justify-content: space-between; /* Space between hamburger and links */
  }

  .navbar-links {
    display: none; /* Hidden by default */
    flex-direction: column; /* Stack links vertically */
    align-items: flex-start; /* Align to the left */
    position: absolute;
    top: 60px; /* Position below the navbar */
    left: 0;
    right: 0;
    background-color: white;
    z-index: 9;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Dropdown effect */
    padding: 10px 20px;
  }

  .navbar-links.active {
    display: flex; /* Show when active */
  }

  .hamburger {
    display: flex; /* Show on mobile */
  }

  .navbar-links ul {
    flex-direction: column; /* Stack links vertically */
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .navbar-links ul li {
    margin: 10px 0; /* Space between links */
    width: 100%;
  }

  .navbar-links ul li a {
    width: 100%;
    text-align: left;
    padding: 10px;
  }
}

.past-events-table {
  display: grid;
  /* Default grid layout for 3 columns: Number, Date, Event */
  grid-template-columns: 50px 150px 1fr; 
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin: 20px;
  max-width: calc(100% - 40px);
  box-sizing: border-box;
}

/* Adjust grid for logged-in users by adding the "Actions" column */
.past-events-table.logged-in {
  grid-template-columns: 50px 150px 1fr 100px; /* 4 columns with Actions */
}

.past-events-header {
  display: contents;
  background-color: #f4f4f4;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #ddd;
}

.past-events-row {
  display: contents;
}

.past-event-column {
  padding: 5px;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}

/* Specific styles for each column */
.past-event-column:nth-child(1) {
  text-align: center;
}

.past-event-column:nth-child(2) {
  text-align: center;
}

.past-event-column:nth-child(3) {
  text-align: left;
}

/* Adjust actions column appearance */
.past-event-column.actions {
  width: 100px; /* Fixed width for actions column */
  text-align: center;
  padding: 5px;
}

/* Remove border for last row */
.past-event-column:last-child {
  border-bottom: none;
}

/* Pagination styling */
.pagination {
  display: flex;
  justify-content: center;
  margin: 20px;
  padding: 5px 0;
  width: calc(100% - 40px); /* Account for margins */
  box-sizing: border-box;
  gap: 5px;
  flex-wrap: nowrap; /* Prevent wrapping of buttons */
  overflow-x: auto;
}

/* Pagination button styling */
.pagination .page {
  display: inline-block;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

/* Active page button styling */
.pagination .page.current {
  font-weight: bold;
  background-color: #007bff;
  color: white;
}

/* Hover effect for pagination links */
.pagination .page:hover {
  background-color: #e0e0e0;
}

/* Disabled pagination button */
.pagination .page.disabled {
  color: #999;
  pointer-events: none;
}

/* Delete button styling */
.delete-button {
  background-color: #ff4d4d;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
}

/* Hover effect for delete button */
.delete-button:hover {
  background-color: #ff1a1a;
}


body {
  background-color: #ffffff;
  color: #ffffff; /* Optional: Adjust text color for readability */
  margin: 0;
  padding: 0;
  font-family: 'IBM Plex Sans', sans-serif;
}

.top-page-image {
  display: block; /* Makes the image behave like a block element */
  margin: 50px auto; /* Adds 50px margin on top/bottom and centers horizontally */
  max-width: 1200px; /* Ensures the image width aligns with other elements */
  width: 100%; /* Full width within the parent container */
  min-height: 400px; /* Sets a minimum height */
  height: auto; /* Maintains aspect ratio */
  justify-content: flex-start;
  border-radius: 0; /* Optional: No rounded corners */
  box-sizing: border-box; /* Includes padding and borders in width calculation */
  object-fit: cover; /* Ensures the image covers the minimum height without distortion */
}



/* General layout container to align the main-header and posts-grid */
.container {
  max-width: 1200px; /* Set a max width for consistency */
  margin: 0 auto; /* Center the container horizontally */
  padding: 0 50px; /* Add some padding for smaller screens */
  box-sizing: border-box; /* Include padding in width calculations */
}

/* Main header styling */
.main-header h1 {
  font-size: clamp(30px, 5vw, 50px); /* Scales with screen size */
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
  margin: 0px 0; /* Adjust vertical spacing */
  padding: 0; /* Remove inner padding */
  color: #231F20; /* Desired text color */
}




/* Posts grid with a maximum width for the grid container */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 50px;
  max-width: 1200px; /* Set a max width for the grid container */
  margin: 0px auto; /* Center the grid horizontally */
}

/* Restrict to a maximum of 3 columns on larger screens */
@media (min-width: 900px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Post container */
.post-container {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  border-radius: 0px;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  height: auto; /* Dynamically adjusts based on content */
  max-width: 400px; /* Set a maximum width for the post container */
}


.post-image-container {
  width: 100%;
  aspect-ratio: 1 / 1; /* Keeps the image square */
  background-color: #DCDCDC;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}

.post-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out; /* Smooth zoom transition */
}

/* Zooms the image on hover */
.post-container:hover .post-image {
  transform: scale(1.025); /* Slight zoom */
}

.post-link {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 4;
  opacity: 0;
  background-color: #ffffff;
  transition: opacity 0.3s ease-in-out;
}

/* Only affects the overlay opacity */
.post-container:hover .post-link {
  opacity: 0.5;
}

.placeholder {
  color: #888;
  font-size: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.event-title {
  color:   #231F20;
  text-align: center;
  font-size: 22px; /* Slightly smaller font size */
  margin: 10px 0; /* Reduced margin */
  padding: 0 10px; /* Less padding around the title */
}

.action-buttons {
  display: flex;
  justify-content: center; /* Centers the buttons */
  align-items: center; /* Vertically centers the buttons */
  gap: 50px; /* Adds space between the buttons */
  padding: 10px; /* Optional: Adjusts spacing inside the container */
}


.post-footer {
  display: flex;
  justify-content: space-between; /* Align time and donation */
  align-items: center;
  font-size: 14px; /* Slightly smaller text size */
  color:  #808080;
  padding: 5px 10px; /* Reduced padding */
  background-color: #f2f2f2;
  margin-top: auto; /* Push footer to the bottom of the container */
  border-top: 1px solid #ddd; /* Adds a light grey line above the footer */
}


.info-bar {
  display: flex; /* Use flexbox to make the text flexible */
  justify-content: center; /* Center-align the content horizontally */
  align-items: center; /* Center-align the content vertically */
  background-color: #ffffff; /* Light grey background */
  color: #231F20; /* Dark text color */
  margin: 50px 50px;
  padding: 15px; /* Space inside the bar */
  text-align: center; /* Center-align the text */
  border: 1px solid #ddd;
  border-radius: 0px;


  font-size: 18px; /* Slightly smaller font size */
  color: $231F20;
  font-weight: light; /* Make the text bold */
  box-sizing: border-box; /* Ensure padding is included in width calculation */
}


.visibility-status {
  font-size: 12px; /* Slightly smaller text size */
  margin: 5px 0;
  text-align: center;
}

.visibility-status span {
  font-weight: bold;
}

@media (max-width: 600px) {
  .container {
    max-width: 100%; /* Ensure the container spans the full width */
    margin: 0 auto; /* Center the container */
    padding: 20px; /* Add consistent padding */
    box-sizing: border-box; /* Ensure padding is part of the width */

  }

  .top-page-image {
  display: block; /* Makes the image behave like a block element */
  margin: 0px; /* Adds 50px margin on top/bottom and centers horizontally */
  }

  .posts-grid {
    gap: 10px; /* Adjust space between items */
    max-width: 100%; /* Match container width */
    margin: 0 auto; /* Center the grid */
    padding: 20px; /* Remove extra padding if unnecessary */
  }

  .post-container {
    max-width: 100%; /* Make sure the post fits within the grid */
    margin: 0; /* Remove extra margins */
    padding: 0; /* Adjust padding for uniformity */
  }

  .info-bar {
    margin: 10px auto; /* Center align and add consistent spacing */
    padding: 10px; /* Adjust padding */
    max-width: 100%; /* Ensure the info-bar fits within the container */
  }
}


/* General Form Styling */
form {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: #white;

}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
}

.form-input,
.form-select,
.form-checkbox {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.form-input {
  font-size: 1rem;
}

.form-select {
  font-size: 1rem;
}

.form-checkbox {
  width: auto;
  display: inline-block;
  margin-right: 10px;
}

.error-message {
  color: red;
  font-size: 0.875rem;
  margin-top: 5px;
}

.form-submit {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

.form-submit:hover {
  background-color: #0056b3;
}
/* Container for the entire post show page */
.post-show-container {
  max-width: 800px;         /* Set a max width for better control */
  margin: 0 auto;           /* Center the container */
  padding: 20px;            /* Add padding inside the container */
  display: flex;
  flex-direction: column;
  gap: 20px;                /* Add space between sections */
}

/* Title */
.event-info {
  text-align: center;       /* Center-align the title */
}

.event-title-container {
  width: 100%;
  max-width: 600px;         /* Match the width with the poster */
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0 auto;           /* Center the title */
}

.event-title {
  font-size: 2.5em;
  font-weight: bold;
  margin: 0;
  word-wrap: break-word;    /* Prevent overflow */
  line-height: 1.2;
  text-transform: capitalize; /* Optional: Capitalize each word */
}

/* Event Meta Information (Date, Time, Donation) */
.event-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;                /* Add space between the date and cost */
  color: grey;
}

.event-meta p {
  margin: 0;
}

.event-time {
  white-space: nowrap;      /* Prevent date and time from wrapping */
}

.event-cost, .membership-required {
  font-size: 14px;
  color: grey;
}

/* Poster Section */
.poster-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.show-poster {
  max-width: 600px;         /* Limit poster width */
  width: 100%;              /* Allow poster to scale responsively */
  height: auto;             /* Maintain aspect ratio */
  object-fit: contain;      /* Ensure the poster fits nicely */
}

/* Bands Section */
.event-bands {
  text-align: center;
  font-size: 1.1em;
  color: #333;
}

.event-bands .bands-list {
  display: flex;
  flex-direction: column; /* Ensure bands display vertically by default */
  justify-content: center;
  gap: 5px; /* Add space between bands */
}

.event-bands p {
  margin: 10px 0; /* Space between band name and text */
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  .event-bands .bands-list {
    flex-direction: column; /* Make sure it's still column on small screens */
  }
}


/* Back Link */
.back-link {
  text-align: center;
  margin-top: 20px;
}

/* Post Actions (Edit and Destroy Links) */
.post-actions {
  text-align: center;
  margin-top: 20px;
}

/* Post Actions (Edit and Destroy Links) */
.google-cal-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px; 
}


.post-action-link {
  color: #007bff;           /* Link color */
  text-decoration: none;    /* Remove underline */
  font-size: 1.2em;         /* Increase font size for links */
}

.post-action-link:hover {
  text-decoration: underline; /* Underline on hover */
}

.post-actions a + a {
  margin-left: 15px;        /* Add space between edit and destroy links */
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  .post-show-container {
    padding: 10px;         /* Reduce padding on mobile */
    margin-left: 10px;     /* Add a small margin on the left */
    margin-right: 10px;    /* Add a small margin on the right */
  }

  .event-title {
    font-size: 2em;        /* Make title font smaller for mobile */
  }

  .event-meta {
    flex-direction: column; /* Stack meta information on mobile */
    text-align: center;
  }

  .poster-container {
    margin: 15px 0;        /* Adjust margins for poster */
  }

  .show-poster {
    max-width: 100%;  

  .post-creator {
  font-size: 12px;
  color: #555;
  text-align: center;
  margin-top: 10px;
}


  /* google calendar stuff */

  

/* user_list.css */

/* Container for the entire user list */
.user-list-container {
  max-width: 800px;
  margin: 40px auto;
  padding: 10px; /* Reduced padding for a smaller container height */
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
}

/* Title for the user list section */
.user-list-title {
  text-align: center;
  margin-bottom: 10px; /* Reduced margin for a more compact title */
  font-family: Arial, sans-serif;
  font-size: 20px; /* Slightly smaller font size */
  color: #000;
}

/* Table styling for the user list */
.user-list-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px; /* Reduced margin at the bottom of the table */
}

.user-list-table th,
.user-list-table td {
  padding: 6px 10px; /* Reduced padding for smaller height */
  text-align: left;
  border: 1px solid #ccc;
  font-size: 14px; /* Reduced font size for smaller height */
}

.user-list-table th {
  font-weight: bold;
}

/* Action buttons for user list actions */
.user-list-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.user-list-actions button {
  padding: 4px 8px; /* Reduced padding for smaller buttons */
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px; /* Adjusted font size for smaller buttons */
}

.user-list-actions button:hover {
  background-color: #f5f5f5;
}

/* Delete button specific styling */
.user-list-actions .delete-button {
  background-color: #e74c3c;
  color: #fff;
  border: none;
}

.user-list-actions .delete-button:hover {
  background-color: #c0392b;
}

/* Form styling for inviting a user */
.invite-user-form {
  margin-top: 20px; /* Reduced top margin for a more compact form */
}

.invite-user-form div {
  margin-bottom: 8px; /* Reduced bottom margin for form fields */
}

.invite-user-form label {
  font-weight: bold;
  font-size: 14px; /* Reduced font size for labels */
}

.invite-user-form input[type="email"] {
  width: 100%;
  padding: 6px; /* Reduced padding for smaller input field height */
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px; /* Adjusted font size for smaller inputs */
}

.invite-user-form input[type="submit"] {
  padding: 8px 16px; /* Reduced padding for smaller button height */
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  font-size: 14px; /* Adjusted font size for smaller button */
}

.invite-user-form input[type="submit"]:hover {
  background-color: #f5f5f5;
}

/* Adding margins to the sides of the screen for the container */
body {
  margin-left: 20px;
  margin-right: 20px;
}
//* General Styling */
.body-support-page {
  line-height: 1.6;
  color: #000000; /* Black text */
  background-color: #ffffff; /* White background */
  margin: 0;
  padding: 0;
}

/* Container */
.support-page-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background-color: #ffffff; /* White background */
}

/* Headings */
.support-page-title, .support-page-section-title {
  color: #000000; /* Black text */
}

.support-page-title {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 20px;
}

.support-page-section-title {
  font-size: 1.8rem;
  margin-top: 20px;
}

/* Paragraphs */
.support-page-paragraph {
  font-size: 1rem;
  margin-bottom: 15px;
  text-align: justify;
  color: #000000; /* Black text for paragraphs */
}

/* Highlighted Text */
.support-page-highlight {
  color: #000000; /* Black text for highlighted text */
  font-weight: bold;
}

/* List Styling */
.support-page-list {
  list-style-type: disc;
  margin: 10px 0 20px 20px;
  padding: 0;
  color: #000000; /* Black text for lists */
}

.support-page-list-item {
  margin-bottom: 10px;
}

/* Link Styling */
.support-page-link {
  color: #457b9d; /* Blue color for links */
  text-decoration: none;
}

.support-page-link:hover {
  text-decoration: underline;
}

/* General Contact Section */
.general-contact-content {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* Space between map and text */
  margin-top: 20px;
}

.map-container {
  flex: 1 1 50%; /* Map takes up half of the section */
  min-width: 300px; /* Ensures the map doesn't shrink too much */
  height: 300px;
}

.contact-info {
  flex: 1 1 50%; /* Text takes up half of the section */
  min-width: 300px; /* Ensures text area doesn't shrink too much */
}

/* Map iframe styling */
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
  border-radius: 8px; /* Optional: Rounded corners */
}

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */