.header-dropdown-overlay {
	position: fixed;
	top: var(--base-header-height, 0);
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--modal-overlay); /* Semi-transparent black */
	display: none;
	z-index: 98; /* Lower than the filters and calendar modals (z-index: 99) */
}

.header-dropdown-overlay.active {
	display: block;
}

.header-dropdown-modals {
    position: absolute;
	top: 100%; /* Start right below the header row */
	left: 0;
    width: 100%;
    z-index: 99;
    background: var(--modal-background-transparent);
	border-bottom-left-radius: var(--border-radius-lg);
	border-bottom-right-radius: var(--border-radius-lg);
	padding-left: var(--screen-padding);
    padding-right: var(--screen-padding);
    padding-bottom: var(--gap-xl); /* Space between session cards */
}

/* =================================================== */
/* ================ Filters Modal ==================== */
/* =================================================== */

.filters-modal {
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	box-sizing: border-box;
	outline: none;
	gap: var(--filters-modal-gap);
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	padding-bottom: 1rem;
	width: 100%;	
}

/* ===================================== */
/* ========== Calendar Modal =========== */
/* ===================================== */

.calendar-modal {
    padding: 0px;
}

.filters-modal,
.calendar-modal {
	position: static;
	z-index: 99; /* Lower than the header, but higher than other content */
	box-sizing: border-box;
	
	/* Set a maximum height to ensure content doesn't overflow the viewport */
	max-height: calc(100vh - var(--header-height));
	
	/* Enable scrolling within the modals when content exceeds max-height */
	overflow-y: auto;
	
	/* Apply a touch-friendly scrolling property for mobile devices */
	-webkit-overflow-scrolling: touch;
}

/*
 * Add these new classes to prevent background scroll.
 */
html.header-dropdown-open,
body.header-dropdown-open {
	overflow: hidden;
}

/* =================================================== */
/* ========== Session Card Info Popup Modal ========== */
/* =================================================== */

.hero-banner-image {
  width: 100%;
  height: 15vh;
  display: block;
  object-fit: cover;
  border-radius: var(--border-radius-lg);
  max-height: 12.5rem;
}

#session-info-modal-content-wrapper.modal-content-wrapper {
	gap: var(--gap-lg);
}

.session-info-modal-details-wrapper {
  width: 100%;
  display: flex;
  flex: 1;
  overflow-y: auto;
  flex-direction: column;
  justify-content: start;
}

.session-info-modal-description,
.session-info-modal-details {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.session-info-modal-details {
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--gap-sm);
}

.session-info-modal-details .session-details {
	row-gap: var(--gap-sm); 
  }

.session-info-modal-details .session-instructors .instructor-pill {
	color: var(--text-label-light);
}

.session-info-modal-description {
  padding-left: var(--padding-xl);
  padding-right: var(--padding-xl);
}

#session-info-modal-cta-button {
  position: sticky;
  bottom: 0;
  z-index: 10;
  margin-top: auto; /* Pushes the button to the bottom in a flex container */
  /* These will match the modal's padding, creating a full-width look */
  margin-left: calc(-1 * var(--modal-content-padding));
  margin-right: calc(-1 * var(--modal-content-padding));
  width: calc(100% + 2 * var(--modal-content-padding));
}