/* ==========================================================================
   Monroe Community College - Omni CMS Calendar Custom CSS
   Full production stylesheet.
   ========================================================================== */

/* 1. Global Module Canvas & Typography Scope */
#view-container,
#view-container .hero-text h1,
#view-container .page-title,
#view-container .event-list-title,
#view-container .event-detail .event-title,
#view-container .controls .dropdown-trigger,
#view-container .controls .link,
#view-container .controls .mobile-filter,
#view-container .controls .mobile-filter-close,
#view-container .controls .view-selector,
#view-container form[data-action="event-search"] input[type="search"] {
	font-family: 'Poppins', sans-serif !important;
}

#view-container {
	background-color: #FFFFFF !important;
}

/* 2. Transparent Calendar Hero Section (Scoped STRICTLY inside #view-container) */
#view-container #hero-title,
#view-container #hero-container,
#view-container .hero,
#view-container .hero-text,
#view-container .hero-wrapper,
#view-container .calendar-hero {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: none !important;
}

/* Remove gradient pseudo-elements inside calendar module only */
#view-container #hero-title::before, #view-container #hero-title::after,
#view-container .hero::before, #view-container .hero::after,
#view-container .hero-text::before, #view-container .hero-text::after,
#view-container .hero-wrapper::before, #view-container .hero-wrapper::after,
#view-container .calendar-hero::before, #view-container .calendar-hero::after {
	display: none !important;
	content: none !important;
	background: none !important;
}

#view-container #hero-subtitle {
	color: #888B8D !important;
	font-size: 1.5rem !important;
}

/* 3. Search Bar, Controls & Multi-Select Filters */
#view-container form[data-action="event-search"] input[type="search"] {
	font-family: 'Poppins', sans-serif !important;
	border: 2px solid #888B8D !important;
	border-radius: 4px !important;
	padding: 14px 20px !important;
	font-size: 1.35rem !important;
	color: #000000 !important;
	background-color: #FFFFFF !important;
}

#view-container form[data-action="event-search"] input[type="search"]:focus {
	border-color: #AC8100 !important;
	outline: 2px solid #AC8100 !important;
	outline-offset: 1px !important;
}

/* --- Filter Dropdown Triggers & Controls --- */
#view-container .controls .dropdown-trigger,
#view-container .controls .link,
#view-container .controls .mobile-filter,
#view-container .controls .mobile-filter-close,
#view-container .controls .view-selector,
#view-container .controls button,
#view-container .controls a,
#view-container #filter-by-type,
#view-container #filter-by-date,
#view-container #filter-by-tag {
	font-family: 'Poppins', sans-serif !important;
	border: none !important;
	border-bottom: 4px solid transparent !important;
	outline: none !important;
	box-shadow: none !important;
	color: #000000 !important;
	background: transparent !important;
	padding: 16px 24px !important;
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	position: relative !important;
	transition: all 0.2s ease-in-out !important;
	cursor: pointer !important;
}

/* Chevron indicator for dropdown triggers */
#view-container #filter-by-type::after,
#view-container #filter-by-date::after,
#view-container #filter-by-tag::after,
#view-container .controls .dropdown-trigger::after {
	content: " ▼" !important;
	font-size: 0.75em !important;
	margin-left: 10px !important;
	display: inline-block !important;
	vertical-align: middle !important;
	color: #888B8D !important;
	transition: transform 0.2s ease-in-out !important;
}

/* Hover State - Triggers */
#view-container .controls .dropdown-trigger:hover,
#view-container .controls .view-selector:hover,
#view-container .controls button:hover,
#view-container #filter-by-type:hover,
#view-container #filter-by-date:hover,
#view-container #filter-by-tag:hover {
	color: #AC8100 !important;
	border-bottom-color: #AC8100 !important;
	background-color: rgba(172, 129, 0, 0.08) !important;
}

#view-container #filter-by-type:hover::after,
#view-container #filter-by-date:hover::after,
#view-container #filter-by-tag:hover::after,
#view-container .controls .dropdown-trigger:hover::after {
	color: #AC8100 !important;
}

/* Active / Open / Filter-Applied State on Triggers */
#view-container .controls .dropdown-trigger.active,
#view-container .controls .dropdown-trigger.selected,
#view-container .controls .dropdown-trigger[aria-expanded="true"],
#view-container .controls .dropdown-trigger[data-has-value="true"],
#view-container .controls .view-selector.active,
#view-container .controls .view-selector[aria-selected="true"],
#view-container #filter-by-type.active,
#view-container #filter-by-type[aria-expanded="true"],
#view-container #filter-by-date.active,
#view-container #filter-by-date[aria-expanded="true"],
#view-container #filter-by-tag.active,
#view-container #filter-by-tag.selected,
#view-container #filter-by-tag[aria-expanded="true"],
#view-container #filter-by-tag[data-has-value="true"] {
	color: #000000 !important;
	font-weight: 800 !important;
	border-bottom: 4px solid #AC8100 !important;
	background-color: rgba(172, 129, 0, 0.15) !important;
	border-radius: 4px 4px 0 0 !important;
}

#view-container .controls .dropdown-trigger[aria-expanded="true"]::after,
#view-container #filter-by-type[aria-expanded="true"]::after,
#view-container #filter-by-date[aria-expanded="true"]::after,
#view-container #filter-by-tag[aria-expanded="true"]::after {
	transform: rotate(180deg) !important;
	color: #AC8100 !important;
}

/* Keyboard accessibility focus ring */
#view-container .controls .dropdown-trigger:focus-visible,
#view-container .controls .view-selector:focus-visible {
	outline: 2px solid #AC8100 !important;
	outline-offset: 2px !important;
}

/* --- Dropdown Menu Containers & Items --- */
#view-container #filter-by-type ~ .dropdown-menu,
#view-container #filter-by-tag ~ .dropdown-menu,
#view-container .dropdown-menu {
	border: 1px solid #888B8D !important;
	border-top: 3px solid #AC8100 !important;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
	border-radius: 0 0 6px 6px !important;
	background-color: #FFFFFF !important;
	padding: 10px 0 !important;
}

/* Menu items: Flexbox alignment prevents checkmark wrapping */
#view-container .dropdown-menu a,
#view-container .dropdown-menu button,
#view-container .dropdown-menu .dropdown-item,
#view-container .dropdown-menu label,
#view-container .dropdown-menu li {
	color: #000000 !important;
	padding: 12px 20px !important;
	font-size: 1.3rem !important;
	font-weight: 600 !important;
	border-left: 5px solid transparent !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
	cursor: pointer !important;
	
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Menu items Hover state */
#view-container .dropdown-menu a:hover,
#view-container .dropdown-menu button:hover,
#view-container .dropdown-menu .dropdown-item:hover,
#view-container .dropdown-menu label:hover {
	background-color: rgba(172, 129, 0, 0.1) !important;
	color: #AC8100 !important;
}

/* --- Multi-Select Categories: Selected Options State --- */
#view-container .dropdown-menu .dropdown-item.active,
#view-container .dropdown-menu .dropdown-item.selected,
#view-container .dropdown-menu .dropdown-item[aria-selected="true"],
#view-container .dropdown-menu li.selected,
#view-container .dropdown-menu li.active,
#view-container .dropdown-menu label.selected,
#view-container .dropdown-menu label:has(input:checked) {
	background-color: rgba(172, 129, 0, 0.18) !important;
	color: #000000 !important;
	font-weight: 800 !important;
	border-left: 5px solid #AC8100 !important;
}

/* Checkmark indicator: Locks inline on the far right */
#view-container .dropdown-menu .dropdown-item.active::after,
#view-container .dropdown-menu .dropdown-item.selected::after,
#view-container .dropdown-menu .dropdown-item[aria-selected="true"]::after,
#view-container .dropdown-menu li.selected::after,
#view-container .dropdown-menu label.selected::after,
#view-container .dropdown-menu label:has(input:checked)::after {
	content: "✓" !important;
	color: #AC8100 !important;
	font-weight: 800 !important;
	font-size: 1.2rem !important;
	margin-left: 12px !important;
	float: none !important;
	flex-shrink: 0 !important;
}

/* Checkbox Accent Color Override */
#view-container .dropdown-menu input[type="checkbox"] {
	accent-color: #AC8100 !important;
	margin-right: 12px !important;
	transform: scale(1.3) !important;
}

/* 4. Page Headings & Dynamic Active Filter Label Override */

/* Main Title: "MCC Events Calendar" */
#view-container h1.page-title,
#view-container h2.page-title,
#view-container .page-title,
#view-container .hero-text h1,
#view-container #hero-title h1,
#view-container .calendar-hero h1 {
	color: #000000 !important;
	font-size: 5.25rem !important;
	font-weight: 800 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.035em !important;
	margin-bottom: 1.75rem !important;
}

/* Dynamic Active Multi-Select Filter Label String */
#view-container .event-list-header,
#view-container .event-list-header h2,
#view-container h2.event-list-heading,
#view-container h2.events-title,
#view-container .events-title,
#view-container .active-filters,
#view-container .active-tags,
#view-container .selected-tags,
#view-container .tag-list,
#view-container [class*="filter-summary"],
#view-container [class*="active-tag"],
#view-container [class*="selected-filter"] {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: #AC8100 !important;
	letter-spacing: 0.01em !important;
	margin-top: 0.5rem !important;
	margin-bottom: 0.75rem !important;
	word-break: break-word !important;
}

#view-container .event-list-header *,
#view-container .event-list-heading *,
#view-container .events-title *,
#view-container .active-filters *,
#view-container .active-tags *,
#view-container .selected-tags *,
#view-container .tag-list *,
#view-container [class*="filter-summary"] * {
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
}

/* Date Header Styling ("September 2026", etc.) */
#view-container .event-list-title-date,
#view-container .event-list-date-header,
#view-container h2.fc-toolbar-title,
#view-container .mc-calendar-title,
#view-container [class*="date-header"],
#view-container [class*="month-header"] {
	color: #AC8100 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 10px 0 !important;
	font-size: 2.75rem !important;
	font-weight: 800 !important;
}

#view-container .mc-calendar {
	border-radius: 4px !important;
}

/* 5. Event List Cards & Titles */
#view-container .event-label {
	color: #AC8100 !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	font-size: 1.05rem !important;
}

#view-container .event-list-content {
	color: #000000 !important;
	border: 1px solid #E0E0E0 !important;
	border-left: 6px solid #AC8100 !important;
	border-radius: 0 6px 6px 0 !important;
	padding: 24px !important;
	margin-bottom: 20px !important;
	background-color: #FFFFFF !important;
	transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

#view-container .event-list-content:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.09) !important;
}

/* Event Card Titles */
#view-container .event-list-title,
#view-container .event-list-title a,
#view-container .event-title {
	font-family: 'Poppins', sans-serif !important;
	color: #000000 !important;
	font-size: 2rem !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	text-decoration: none !important;
}

#view-container .event-list-title:hover,
#view-container .event-list-title a:hover {
	color: #AC8100 !important;
}

#view-container .event-list-left[aria-label="Placeholder image"] {
	border: 1px solid #888B8D !important;
	border-radius: 4px !important;
}

/* 6. Action Buttons & Links */
#view-container #submit-event,
#view-container .load-more-events-wrapper button {
	background-color: #000000 !important;
	color: #FFFFFF !important;
	border: 2px solid #000000 !important;
	font-weight: 700 !important;
	font-size: 1.25rem !important;
	border-radius: 4px !important;
	padding: 14px 28px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	transition: all 0.2s ease-in-out !important;
}

#view-container #submit-event:hover,
#view-container .load-more-events-wrapper button:hover {
	background-color: #AC8100 !important;
	border-color: #AC8100 !important;
	color: #000000 !important;
	cursor: pointer !important;
}

#view-container #rss-link,
#view-container #calendar-ical-download {
	color: #000000 !important;
	font-weight: 600 !important;
	font-size: 1.2rem !important;
	text-decoration: underline !important;
}

#view-container #rss-link:hover,
#view-container #calendar-ical-download:hover {
	color: #AC8100 !important;
}

/* 7. FullCalendar Grid View Overrides */
#view-container .fc-button-group button {
	background-color: #000000 !important;
	border-color: #000000 !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	font-size: 1.15rem !important;
	padding: 10px 18px !important;
}

#view-container .fc-button-group button:hover,
#view-container .fc-button-group button.fc-button-active {
	background-color: #AC8100 !important;
	border-color: #AC8100 !important;
	color: #000000 !important;
}

#view-container .fc-event {
	color: #000000 !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
}

#view-container .fc-event:hover {
	color: #AC8100 !important;
}

/* 8. Event Detail Page */
#event-detail-page {
	background-color: #FFFFFF !important;
}

#event-detail-page .page-title a {
	color: #000000 !important;
	font-size: 3.5rem !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}

#event-detail-page .page-title a:hover {
	color: #AC8100 !important;
}

#event-detail-page .main-content-area {
	color: #000000 !important;
}

#event-detail-page .main-content-area .event-label {
	color: #AC8100 !important;
}

#event-detail-page .main-content-area .event-title {
	font-family: 'Poppins', sans-serif !important;
	color: #000000 !important;
	font-size: 2.75rem !important;
	font-weight: 700 !important;
}

#event-detail-page .main-content-area .sponsored-by {
	color: #888B8D !important;
	font-weight: 500 !important;
}

#event-detail-page .main-content-area .event-description {
	color: #000000 !important;
	line-height: 1.6 !important;
	font-size: 1.2rem !important;
}

#event-detail-page .sidebar {
	color: #000000 !important;
}

#event-detail-page .sidebar .details {
	color: #000000 !important;
	border-top: 5px solid #AC8100 !important;
	background-color: #F8F9FA !important;
	padding: 28px !important;
	border-radius: 4px !important;
}

#event-detail-page .sidebar .details .date,
#event-detail-page .sidebar .details .organizer,
#event-detail-page .sidebar .details .location,
#event-detail-page .sidebar .details .tickets,
#event-detail-page .sidebar .details .rsvp,
#event-detail-page .sidebar .details .rsvp-wrapper {
	color: #000000 !important;
	font-size: 1.15rem !important;
}

#view-container #google_maps_iframe {
	border: 1px solid #888B8D !important;
	width: 100% !important;
	border-radius: 4px !important;
}

/* 9. Event Submission Form */
#event-submission-form .page-title {
	color: #000000 !important;
	font-size: 3.5rem !important;
	font-weight: 800 !important;
}