/* Custom Styles by devmazzara */

.cover {
    height: 200px; /* Adjust the height as needed */
    background-size: cover;
    background-position: center;
}

.cover h1 {
    margin-top: 0;
    padding-top: 50px; /* Adjust this to center the title vertically */
}


.header {
    height: 200px; /* Ensure this matches your image height */
    overflow: hidden;
    position: relative;
}

.bg-custom-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
}




.mt6 {
    margin-top: 6rem;
}
.mt8 {
    margin-top: 8rem;
}
.mt10 {
    margin-top: 10rem;
}


/* miscellaneous styles */
.front-page {
    padding: 1rem;
    margin-top: 0;
    font-size: 1.1rem;
}

.front-page h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

.front-page h2 {
    margin-top: 0;
}





/* Styles for the image gallery  */
.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.image-gallery figure {
    flex: 1 1 30%;
    margin: 0;
}

.image-gallery img {
    width: 100%;
    height: auto;
    display: block;
}

.image-gallery figcaption {
    text-align: center;
    font-size: 0.9rem;
    color: #555;
}


/* Footnote for properties values */
.footnote {
    font-size: 0.85rem; /* Small font size */
    color: #666; /* A subtle gray color */
    line-height: 1.4; /* Slightly increased line height for readability */
    margin-top: 1rem; /* Add some space above the footnote */
    text-align: left; /* Align text to the left */
    font-style: italic; /* Optional: Make the text italic */
}

.footnote small {
    font-size: inherit; /* Inherit the font size from the parent */
    color: inherit; /* Inherit the color from the parent */
}



/* Whatsapp styles */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center the content within the button */
    background-color: #25D366; /* WhatsApp green color */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Adjust margin as needed */
    width: 100%; /* Full width button */
}

.btn-whatsapp:hover {
    background-color: #128C7E; /* Darker green on hover */
}

.btn-whatsapp svg {
    margin-right: 10px;
    width: 24px;
    height: 24px;
}

.whatsapp-trigger {
    display: inline-flex;
    align-items: center;
    background-color: #25D366; /* WhatsApp green color */
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: bold;
    transition: background-color 0.3s;
}

.whatsapp-trigger:hover {
    background-color: #128C7E; /* Darker green on hover */
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}



/* Styles for the carousel */
.carousel-item img {
    max-height: 500px; /* Adjust the max height */
    object-fit: cover;
}

.carousel-caption h5 {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    padding: 0.5rem;
}





/* Styles for the flexbox for main index.html template */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1rem; /* Adjust the gap between items */
  padding: 1rem; /* Optional: Add some padding around the container */
}

.flex-item {
  flex: 0 1 calc(25% - 2rem); /* Default 4 items */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  padding: 1rem;
  aspect-ratio: 1;
  background-color: #f0f0f0;
  border: 0px solid #ccc;
  min-height: 150px; /* Minimum height to ensure uniformity */
}


.summary-with-image {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    text-align: left;
}

.summary-with-image-image {
  width: 100%;
  height: 200px; /* Set a fixed height for the image container */
  /* padding-top: 56.25%; /* Creates a 16:9 aspect ratio box */  */
  position: relative;
  overflow: hidden;
  background-color: #e0e0e0; /* Fallback background color */
}

.summary-with-image h2 {
  margin-top: 0;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  /* flex-grow: 1; /* Allow the title to take up space */ */
}

.summary-with-image p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis; /* Adds "..." if the text is too long */
  white-space: nowrap; /* Prevents the text from wrapping to a new line */
}


.summary-with-image .tags {
  font-size: 0.875rem;
  color: #555;
  margin-bottom: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* Keep tags on one line */
}


.summary-with-image .read-more {
  text-decoration: none;
  color: #007BFF;
  background-color: #e9ecef;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  align-self: flex-start; /* Aligns the button to the start */
  margin-top: auto; /* Push the button to the bottom of the container */
  transition: background-color 0.3s ease;
}

.summary-with-image .read-more:hover {
  background-color: #007BFF;
  color: #fff;
}

/* Styles for Pagefind search dropdown */
/* Ensure the dropdown is on top */
/* Set the dropdown to be fully opaque */
.pagefind-ui__results {
    z-index: 10000; /* Increase z-index to ensure it appears above all other elements */
    position: absolute; /* Position the dropdown absolutely */
    background-color: #ffffff; /* Solid white background */
    border: 1px solid #ccc; /* Optional: Add a border for better definition */
    border-radius: 5px; /* Add rounding to the corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for depth */
}


/* Ensure individual results have no transparency */
.pagefind-ui__result {
    background-color: #ffffff; /* Fully opaque white background */
    padding: 10px;
    margin-bottom: 5px;
    border-radius: 3px;
}

/* Set hover state with no transparency */
.pagefind-ui__result:hover {
    background-color: #f0f0f0; /* Light gray background on hover */
}

/* Ensure text visibility */
.pagefind-ui__result-title,
.pagefind-ui__result-excerpt {
    color: #333; /* Dark text for readability */
}

.pagesearch {
    /* Custom properties for Pagefind UI */
    --pagefind-ui-scale: 0.6; /* Adjust the scale of the UI elements */
    --pagefind-ui-primary: #034ad8; /* Primary color (e.g., for highlights or buttons) */
    --pagefind-ui-text: #393939; /* Text color */
    --pagefind-ui-background: #ffffff; /* Background color */
    --pagefind-ui-border: #eeeeee; /* Border color */
    --pagefind-ui-tag: #eeeeee; /* Tag background color */
    --pagefind-ui-border-width: 2px; /* Border width */
    --pagefind-ui-border-radius: 8px; /* Border radius for the dropdown and inputs */
    --pagefind-ui-image-border-radius: 8px; /* Border radius for any images */
    --pagefind-ui-image-box-ratio: 3 / 2; /* Image aspect ratio */
    --pagefind-ui-font: sans-serif; /* Font family */

    /* Additional custom styles */
    z-index: 10000; /* Ensure it's above other content */
    position: relative; /* Adjust positioning as needed */
    background-color: var(--pagefind-ui-background); /* Apply the background color */
    border-radius: var(--pagefind-ui-border-radius); /* Apply border radius */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow for depth */
    
    max-width: 400px; /* Set a maximum width for the search bar */
    margin: 0 auto; /* Center the search bar */
    /* padding: -1rem -1rem; /* Add some padding */ */
}

.pagesearch input {
    width: 100%; /* Make sure the input takes the full width */
    border: none; /* Remove default border */
    outline: none; /* Remove default outline */
    font-size: 1rem; /* Set a readable font size */
}

.pagesearch input::placeholder {
    color: #888; /* Style the placeholder text */
}



/* @media (max-width: 768px) { */
/*   .flex-item { */
/*     flex: 0 1 calc(50% - 2rem); /* 2 items per row on smaller screens */ */
/*   } */
/* } */
/**/
/* @media (max-width: 480px) { */
/*   .flex-item { */
/*     flex: 0 1 calc(100% - 2rem); /* 1 item per row on very small screens */ */
/*   } */
/* } */




/* 4 items per row for screens wider than 1350px */
@media (min-width: 1350px) {
  .flex-item {
    flex: 0 1 calc(25% - 2rem); /* 4 items per row */
  }
}

/* 3 items per row for screens between 1200px and 1350px */
@media (max-width: 1350px) and (min-width: 1200px) {
  .flex-item {
    flex: 0 1 calc(33.333% - 2rem); /* 3 items per row */
  }
}

/* 2 items per row for screens between 1000px and 1200px */
@media (max-width: 1200px) and (min-width: 1000px) {
  .flex-item {
    flex: 0 1 calc(50% - 2rem); /* 2 items per row */
  }
}

/* 2 items per row for screens between 600px and 1000px */
@media (max-width: 1000px) and (min-width: 600px) {
  .flex-item {
    flex: 0 1 calc(50% - 2rem); /* 2 items per row */
  }
}

/* 1 item per row for screens below 600px */
@media (max-width: 600px) {
  .flex-item {
    flex: 0 1 calc(100% - 2rem); /* 1 item per row */
  }
}