@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

/* Custom styles for Meghan's Mountain Foundation */

:root {
  --dark-gray: #343a40;
  --medium-gray: #495057;
  --light-gray: #adb5bd;
  --very-light-gray: #f8f9fa;
  --white: #ffffff;
  --off-white: #f8f9fa;
  --light-blue-gray: #e0e7ef; /* Added new color */
  --dark-text: #212529;
}

body {
  background-color: var(--light-blue-gray); /* Updated background */
  color: var(--dark-text); /* Default text color for light background */
}

/* Navbar styles */
.navbar {
  background-color: var(--light-blue-gray); /* Updated background */
  z-index: 1030; /* Ensure navbar is above other content */
}

/* Mobile navigation styles */
@media (max-width: 767.98px) {
  /* Removed padding-top for main as mobile navbar is no longer sticky */

  /* Removed custom styles for .navbar-collapse and .navbar-nav .nav-link
     within the mobile view to rely on Bootstrap defaults. */

  .navbar.d-md-none .container-fluid {
    position: relative; /* Needed for absolute positioning of toggler */
    /* Add min-height to ensure toggler has space */
    min-height: 70px; /* Match or slightly exceed logo height */
  }
  .navbar.d-md-none .navbar-brand img {
    height: 70px; /* Increased height */
    width: auto;  /* Maintain aspect ratio */
  }
  .navbar.d-md-none .navbar-toggler {
    position: absolute;
    right: 1rem; /* Position toggler to the right */
    top: 0.75rem; /* Adjust top position to align better, removed transform */
    z-index: 1; /* Ensure it's above other elements if needed */
  }
}

/* Sidebar Styles */
#sidebar {
  position: fixed; /* Keep sidebar fixed */
  top: 0;
  left: 0;
  bottom: 0;
  padding-top: 1rem; /* Add some padding back for spacing */
  z-index: 100; /* Behind backdrop */
  background-color: var(--light-blue-gray); /* Updated background */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.1); /* Darker shadow for contrast */
  overflow-y: auto; /* Enable scrolling if content overflows */
}

/* Adjust main content padding/margin to account for fixed sidebar */
main {
  padding-top: 1rem; /* Add some top padding */
  /* No left margin by default (for small screens where sidebar is hidden) */
}

/* Apply left margin only when the sidebar is visible (md and up) */
@media (min-width: 768px) { /* Bootstrap md breakpoint */
  main {
    margin-left: 33.333333%; /* Corresponds to col-md-4 */
  }
}

@media (min-width: 992px) { /* Bootstrap lg breakpoint */
  main {
    margin-left: 25%; /* Corresponds to col-lg-3 */
  }
}

/* Navbar Brand Link */
.navbar-brand {
  color: var(--dark-text) !important; /* Dark brand text for light theme */
}
.navbar-brand:hover {
  color: var(--medium-gray) !important;
}


/* Sidebar link styling */
#sidebar .nav-link {
  font-weight: 500;
  color: var(--medium-gray); /* Default link color for light theme */
  padding: .5rem 1rem; /* Ensure consistent padding */
  border-radius: .25rem; /* Add slight rounding */
  margin-bottom: 2px; /* Add space between links */
}

#sidebar .nav-link.active {
  color: var(--dark-text); /* Dark text for active link */
  background-color: rgba(0, 0, 0, 0.1); /* Slightly darker background for active */
}

#sidebar .nav-link:hover:not(.active) {
  color: var(--dark-text); /* Dark text on hover */
  background-color: rgba(0, 0, 0, 0.07); /* Slightly darker background on hover */
}

/* Footer Styling */
footer {
  background-color: var(--light-blue-gray); /* Updated background */
  color: var(--medium-gray); /* Medium gray text in footer */
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* Darker border for contrast */
}

/* Donation Page Specific Styles */
#donation-info {
  max-width: 800px; /* Limit width */
  margin: 2rem auto; /* Center the section horizontally, add vertical margin */
  padding: 1.5rem; /* Add internal padding */
  background-color: var(--white); /* White background for contrast */
  border-radius: 0.25rem; /* Slightly rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* Funds Page - Donation Table Styles */
.donation-table {
  width: fit-content; /* Make container only as wide as the table */
  max-width: 90%; /* Prevent it from getting too wide on large screens */
  margin: 2rem auto; /* Center the container horizontally, add vertical margin */
  overflow-x: auto; /* Add horizontal scroll if needed on small screens */
}

.donation-table table th,
.donation-table table td {
  white-space: nowrap; /* Prevent text wrapping in table cells */
}

/* Prayers Page - Multi-column list */
.multi-column-list {
  column-width: 300px; /* Increased optimal column width */
  column-gap: 2rem;   /* Space between columns */
  list-style-position: inside; /* Ensures list markers stay within the column */
  padding-left: 0; /* Remove default padding if needed */
}

.multi-column-list li {
  break-inside: avoid-column; /* Prevents list items from breaking across columns */
  page-break-inside: avoid; /* Older property for compatibility */
  padding-bottom: 0.5rem; /* Add some space below each item */
  white-space: nowrap; /* Prevent text wrapping within list items */
}

/* Home Page Specific Styles */
.home-intro-text {
  font-family: 'Caveat', cursive; /* Handwritten font */
  font-size: 1.8rem; /* Increased size for handwritten style */
  font-weight: 400; /* Adjust weight if needed, 400 is normal */
  margin-bottom: 1rem; /* Add some space below each paragraph */
}

.home-main-image {
  width: 75%; /* Make the image larger within its container */
  max-width: 600px; /* Optional: Set a max pixel width */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Ensure it behaves as a block element */
  margin-left: auto; /* Center the image */
  margin-right: auto; /* Center the image */
}

/* Home Page Image Grid Styles */
.home-grid-image {
  width: 100%; /* Make image fill the column */
  max-height: 250px; /* Limit the height for consistency */
  object-fit: contain; /* Contain the entire image within the area */
  object-position: center; /* Center the image within its frame */
}

swiper-container {
  width: 100%;
  height: 400px;
}

swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

/* Specific styles for the home page image swiper */
.home-image-swiper swiper-slide img {
  height: 250px; /* Set a fixed height */
  width: 100%; /* Ensure image fills the slide width */
  object-fit: cover; /* Cover the area, cropping if needed */
  object-position: top; /* Align image to the top */
}

/* Set specific height for the home page swiper container */
.home-image-swiper {
  height: 250px; /* Match the image height */
}

/* Style for the second row text on the home page */
.home-second-row-text {
  font-size: 1.1rem; /* Increase font size slightly */
}

/* Adjustments for single-slide view (mobile/smaller screens) */
@media (max-width: 1199.98px) {
  .home-image-swiper {
    height: auto; /* Allow container height to adjust */
  }
  .home-image-swiper swiper-slide img {
    height: auto; /* Allow image height to adjust based on width */
    object-fit: contain; /* Show the whole image, scaled down */
    object-position: center; /* Center the contained image */
    max-height: 400px; /* Prevent excessively tall images */
  }
}

/* Adjust intro text font size for mobile */
@media (max-width: 767.98px) {
  .home-intro-text {
    font-size: 1.5rem; /* Adjust this value as needed */
  }
}