/* Optional: make hero buttons a bit bolder */
.hero-section .btn-light {
  color: #0d6efd;
  font-weight: 600;
}

.hero-section .btn-outline-light {
  border-width: 2px;
  font-weight: 600;
}


/* Hero */
.hero-section {
  position: relative;
  min-height: 100vh;
  padding-top: 70px; /* adjust to your navbar height */
  background: url('../img/church1.jpg') center bottom / cover no-repeat;

}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.7) 70%,
    rgba(0, 0, 0, 0.9) 100%
  ); /* blackish at bottom to match navbar */
}

.text-shadow {
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
}

.text-shadow-soft {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.navbar-overlay {
  background: rgba(0, 0, 0, 0.9);
}

/* kill default brand padding */
.navbar-brand {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* optional: almost flush; tweak as you like */
.container-fluid {
  padding-left: 0.25rem;
  padding-right: 0.75rem;
}


.section-padding {
    padding: 80px 0;
}

/* Placeholder for chart */
.chart-placeholder {
    background-color: #f8f9fa;
    border: 1px dashed #ccc;
    padding: 50px 20px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    height: 300px; /* Adjust height as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

/*  about section */
/* ===== About Section ===== */

.about-section {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  background: url('../img/pastor2.jpg') center center / cover no-repeat;
  overflow: hidden;
}

/* Dark + blur overlay over the background */
.about-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);

  /* <<< ADJUST BACKGROUND BLUR HERE >>> */
  /* Increase px for stronger blur, decrease for softer */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}

/* White semi‑transparent About card */
.about-image-wrapper img {
  object-fit: cover;
}

.about-card {
  position: relative;
  z-index: 1;

  /* <<< ADJUST CARD TRANSPARENCY HERE >>> */
  /* Last number (0.85) is opacity: 1 = solid white, 0 = fully transparent */
  background: rgba(255, 255, 255, 0.55);

  border-radius: 1rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55);
  padding: 2rem 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Text colors inside About card */
.about-card h2 {
  color: #111;
}
.about-card p,
.about-card li {
  color: #333;
}
.about-card .text-muted {
  color: #555 !important;
}
.about-lead {
  color: #f10a0a; /* or #000 or any dark shade you like */
}

/* Reveal animation (if not already defined globally) */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Small screen padding tweak */
@media (max-width: 767.98px) {
  .about-card {
    padding: 1.5rem 1.5rem;
  }
}

/* Contact: blackish parallax */
.contact-section {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  color: #fff;
  background: url('../img/ladiesbible.jpg') center center / cover no-repeat fixed;

  /* change to your own background image */
}

.contact-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8); /* blackish overlay */
}

/* keep text readable on dark bg */
.contact-section .text-white-50 {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Map container */
.google-map-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

.google-map-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Disable fixed parallax on mobile (better performance) */
@media (max-width: 991.98px) {
  .contact-section {
    background-attachment: scroll;
  }
}

/*parallax*/
/* desktop parallax */
.hero-section,
.about-section,
.contact-section {
  background-attachment: fixed;
}

@media (max-width: 991.98px) {
  /* let JS handle it on mobile */
  .hero-section,
  .about-section,
  .contact-section {
    background-attachment: scroll;
  }
}

/*MISSION VISION VALUES*/
/* ===== Mission & Vision Section (MVV) ===== */
/* ===== Mission & Vision Section (MVV) ===== */

.mv-section {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  color: #fff;
  background: url('../img/church1.jpg') center center / cover no-repeat;
  overflow: hidden;
}

.mv-bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

/* White semi‑transparent cards */
.mv-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 1rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
  padding: 2rem 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Card text colors */
.mv-card h3 {
  color: #111;
}
.mv-card p {
  color: #333;
}

/* Reveal-on-scroll base */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Responsive padding tweak for small screens */
@media (max-width: 767.98px) {
  .mv-card {
    padding: 1.5rem 1.5rem;
  }
}


.chart-placeholder { position: relative; }
#customLegend {
  display: flex;
  flex-wrap: wrap;         /* allow multiple rows on small screens /
  justify-content: center; / center horizontally /
  gap: 12px 18px;          / row-gap then column-gap */
  align-items: center;
  background: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: 9999;
}

#customLegend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;     /* keep label and swatch together */
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}

#customLegend .legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex: 0 0 auto;
}

#customLegend .muted { opacity: 0.45; }

/*apex chart*/
.apexcharts-datalabels text {
  transform-origin: center;
  transform-box: fill-box; /* ensures origin is inside the SVG element */
  transform: rotate(-45deg); /*change angle as desired */
}
#chartDetailed table{
  font-size: 12px;
}
#chartDetailed table td:nth-child(2) {
  text-align: left;
}
.trend { font-size: 12px; font-weight: bold;}
.trendup { color: #1aa34a; }    /* green */
.trenddown { color: #f30f07; }  /* red */
/* calendar */

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
  text-align: center;
}

.calendar-cell {
  padding: 0.35rem 0;
  border-radius: 0.35rem;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  font-size: 0.9rem;
}

.calendar-cell.header {
  font-weight: 600;
  background: #f8f9fa;
  cursor: default;
}

.calendar-cell.border {
  border: 1px solid transparent;
}

/* do NOT override .selected-day on hover */
.calendar-cell:not(.header):not(.selected-day):hover {
  border-color: #0d6efd33;
  background: #f0f7ff;

  transform: translateY(-1px);
}

.calendar-cell.today {
  border-color: #0d6efd;
  background: #e7f1ff;
  font-weight: 600;
}

.calendar-cell:not(.header):not(.selected-day):not(.today):hover {
  border-color: #0d6efd33;
  background: #f0f7ff;
  transform: translateY(-1px);
}

.calendar-cell.selected-day {
  background: #0d6efd;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0.35rem 0.75rem rgba(13, 110, 253, 0.35);
}

.calendar-cell.disabled-day {
  color: #adb5bd;
  background-color: #f8f9fa;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.8;
}


.calendar-cell.empty {
  visibility: hidden;
}
/* Card: stronger shadow */
#dateTimeSection .card {
  box-shadow: 0 0.5rem 1rem rgba(15, 23, 42, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 0.75rem;
}

#dateTimeSection.show-card .card {
  opacity: 1;
  transform: translateY(0);
}

/* From / To row: stack on mobile */
@media (max-width: 576px) {
  #dateTimeSection .row.g-2.align-items-center.mb-3 {
    flex-direction: column;
    align-items: flex-start !important;
  }
  #dateTimeSection .row.g-2.align-items-center.mb-3 > .col-auto {
    width: 100%;
  }
  #dateTimeSection .row.g-2.align-items-center.mb-3 select,
  #dateTimeSection .row.g-2.align-items-center.mb-3 button {
    width: 100%;
  }
}

/* Room row: nicer spacing on mobile */
@media (max-width: 576px) {
  #dateTimeSection .row.g-2.align-items-center.mb-3:first-of-type {
    flex-direction: column;
    align-items: flex-start !important;
  }
  #dateTimeSection #roomSelect {
    width: 100%;
  }
}

/* Table: smaller font, tighter padding */
#dayReservationsTable {
  font-size: 0.75rem !important;
}

#dayReservationsTable th,
#dayReservationsTable td {
  padding: 0.25rem 0.4rem !important;
  font-size:0.75rem !important;
  vertical-align: middle;
}
@media (max-width: 576px) {
  #timeRow {
    flex-direction: column;
    align-items: flex-start !important;
  }
  #timeRow > .col-auto {
    width: 100%;
  }
  #timeRow select,
  #timeRow button {
    width: 100%;
  }
}