/* Custom horizontal breadcrumb style */
.breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5em;
  background: none;
  padding: 0;
  margin-bottom: 1em;
  font-size: 1.05em;
  list-style: none;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  color: #888;
  margin: 0 0.4em;
}
.breadcrumb-item a {
  color: #4c63d2;
  text-decoration: none;
}
.breadcrumb-item.active {
  color: #222;
  font-weight: 600;
}
/* Mobile-first custom styles */
:root{
  --cookie-bg: rgba(0,0,0,0.9);
}

/* Custom badge colors for meeting gender */
.bg-pink {
  background-color: #e83e8c !important;
}

html,body{height:100%;}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* construction banner sits at top and is full-width */
#construction-banner{
  position:sticky;
  top:0;
  z-index:1030; /* above content but below modals */
}

/* cookie consent fixed bottom on small screens */
.cookie-consent{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:1050;
  align-items:center;
  text-align:center;
  justify-content:center;
}

.cookie-consent .fw-bold{
  font-weight:700 !important;
  font-size:1.1rem;
}

.cookie-consent .small{
  font-weight:500;
}

@media(min-width:768px){
  .cookie-consent{padding:1rem 2rem;}
}

/* keep main content from hiding under fixed cookie bar on small screens */
main{padding-bottom:4.5rem;} /* leave room for cookie bar */

/* small visual tweaks */
.navbar-brand{font-weight:600;}
.card-title{font-weight:600}

/* Calendar styles */
.calendar-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  padding: 1.5rem;
}

/* Event badge type colors (used by calendar widgets) */
.calendar-event-badge.type-1 {
  background: #007bff; /* blue */
  color: #fff;
}
.calendar-event-badge.type-1:hover {
  background: #0069e0;
}
.calendar-event-badge.type-2 {
  background: #e83e8c; /* pink */
  color: #fff;
}
.calendar-event-badge.type-2:hover {
  background: #d6336c;
}

/* Ensure event modal detail text is white (overrides text-muted) */
.modal-content #eventDescription,
.modal-content #eventTime,
.modal-content #eventLocation,
#eventDetailBody,
#eventDetailModal .modal-body,
#eventModal .modal-body {
  color: #fff !important;
}

/* Emphasize Upcoming Events list on index */
#resources-upcoming-list {
  margin-top: 8px;
}
#resources-upcoming-list .list-group-item {
  background: #fff;
  color: #222;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 10px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#resources-upcoming-list .list-group-item + .list-group-item {
  margin-top: 10px;
}
#resources-upcoming-list .list-group-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
#resources-upcoming-list .upcoming-date {
  min-width: 76px;
  text-align: left;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 10px;
  border-radius: 8px;
}
#resources-upcoming-list strong {
  font-size: 1rem;
  font-weight: 700;
  color: inherit;
}

/* On larger screens make items stand out as light cards */
@media (min-width: 768px) {
  #resources-upcoming-list .list-group-item {
    background: #fff;
    color: #222;
  }
  #resources-upcoming-list .upcoming-date {
    background: #4a90e2;
    color: #fff;
  }
}

/* Make calendar button black on small screens for better contrast */
@media (max-width: 767px) {
  .btn[data-bs-target="#calendarModal"] {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
  }
  .btn[data-bs-target="#calendarModal"]:hover {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
  }
}

/* Ensure upcoming events have a visible card background on mobile */
@media (max-width: 767px) {
  #resources-upcoming-list .list-group-item {
    background: rgba(0,0,0,0.6) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
  }
  #resources-upcoming-list .upcoming-date {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
  }
}

#eventTime, #eventLocation {
  opacity: 0.9;
}