.carousel-counter {
  position: absolute;
  top: auto;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.7);
  z-index: 10;
  pointer-events: none;
}
body {
  padding-top: 70px;
}

/* Center navbar items */
.navbar-nav {
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
}

.navbar-nav .nav-item {
  margin-left: 10px; /* Adjust as needed for spacing */
  margin-right: 10px; /* Adjust as needed for spacing */
}

.carousel-item img {
  height: 400px;
  object-fit: cover;
}

.small-calendar th, .small-calendar-cell {
  padding: 0.075rem;  /* Further reduced */
  font-size: 1rem;   /* Further reduced */
  text-align: center;
}
.small-calendar td {
  height: 0.5rem;     /* Further reduced */
  vertical-align: middle;
  text-align: center; /* Added to center day numbers */
}

.jumbotron {
  background-color: #f8f9fa;
}

/* Responsive Styles */
@media (max-width: 991.98px) { /* Bootstrap's lg breakpoint for navbar */
    .navbar-nav .nav-item {
        width: 100%; /* Make nav items take full width */
        text-align: center; /* Center text if desired */
    }
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem; /* Adjust padding for better touch targets */
    }
    /* Adjust user info display in navbar for smaller screens */
    .navbar-nav .nav-item.d-flex.align-items-center {
        flex-direction: column;
        align-items: center !important; /* Ensure alignment overrides Bootstrap */
    }
    .navbar-nav .nav-item.d-flex.align-items-center .navbar-text {
        margin-left: 0 !important; /* Reset margin for stacked layout */
        margin-top: 0.5rem; /* Add some space above the text */
    }
}

@media (max-width: 768px) {
  /* Carousel Images */
  .carousel-item img {
    max-height: 250px;
  }

  /* Jumbotron */
  .jumbotron {
    padding: 2rem 1rem;
  }

  /* Small Calendar */
  .small-calendar th, .small-calendar-cell {
    font-size: 0.75rem;   /* Increased for mobile */
    padding: 0.075rem;
    font-weight: bold; /* Make numbers bold */
  }
  .small-calendar td {
    height: 0.5rem;     /* Further reduced */
    /* text-align: center; will be inherited from main .small-calendar td style */
  }

  /* General image fluidity - encourage .img-fluid, but add a general rule */
  img {
    max-width: 100%;
    height: auto;
  }

  /* Reduce logo size on small screens */
  .navbar-brand img {
    height: 18px !important; /* 40% smaller than 30px */
  }
}

/* Extra small buttons */
.btn-xs {
  padding: 0.1rem 0.25rem;
  font-size: 0.75rem;
}

.btn-xxs {
  padding: 0.1rem 0.15rem;
  font-size: 0.5rem;
}

.preserve-whitespace {
  white-space: pre-wrap;
}

/* Landscape recommendation message styling */
@media (max-width: 768px) and (orientation: portrait) {
  #landscape-recommendation {
    display: block !important; /* Use !important to override inline style */
    background-color: #ffffe0; /* Light yellow background */
    color: #333; /* Dark text for contrast */
    padding: 10px;
    text-align: center;
    border: 1px solid #ccc; /* Optional: adds a light border */
    margin-bottom: 15px; /* Add some space below the message */
  }
}