/* ==========================================================================
   Events Manager styling. Pairs with the formats in docs/events-manager-formats.md
   (paste them into Events > Settings > Formatting).
   ========================================================================== */

/* Let Events Manager output use the full content width */
.wp-block-post-content > .em,
.wp-block-post-content > .vg-em-single,
.wp-block-post-content > .vg-em-list { max-width: min(1216px, 100%) !important; }
.wp-block-post-content > .em:has(.vg-em-single) { max-width: none !important; }

/* ---------- List rows ---------- */

.vg-em-month {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	font-family: var(--vg-display);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1.75rem;
	color: var(--vg-heading-ink);
	margin: 2.5rem 0 1rem;
}
.vg-em-month::after { content: ""; flex-grow: 1; height: 1px; background: rgba(255, 255, 255, 0.35); }

.vg-em-row {
	display: grid;
	grid-template-columns: 7rem 16rem minmax(0, 1fr) 13rem;
	background: var(--vg-raised);
	color: var(--vg-ink);
	border: 1px solid var(--vg-border);
	border-radius: var(--vg-radius-lg);
	overflow: hidden;
	margin-bottom: 1.25rem;
}
.vg-em-row__date {
	background: var(--vg-midnight);
	color: var(--vg-parchment);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1rem 0.5rem;
}
.vg-em-row__dow, .vg-em-row__mon { font-family: var(--vg-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8125rem; color: var(--vg-gold); }
.vg-em-row__day { font-family: var(--vg-display); font-weight: 700; font-size: 2.25rem; line-height: 1.1; }
.vg-em-row__art { display: flex; align-items: center; justify-content: center; min-height: 11rem; background: var(--vg-midnight); }
.vg-em-row__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vg-em-row__body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.vg-em-row__body > * { margin: 0; }
.vg-em-row__title { font-family: var(--vg-display); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 1.625rem; line-height: 1.15; }
.vg-em-row__title a { color: var(--vg-heading-ink); text-decoration: none; }
.vg-em-row__title a:hover { color: var(--vg-heading-ink); text-decoration: underline; }
.vg-em-row__meta { font-size: 0.875rem; color: var(--vg-muted); }
.vg-em-row__excerpt { font-size: 0.9375rem; }
.vg-em-row__actions {
	padding: 1.25rem;
	border-left: 1px solid var(--vg-border);
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	justify-content: center;
}
.vg-em-row__actions .vg-btn { width: 100%; }

/* Category lists output by #_EVENTCATEGORIES */
.vg-em-row__cats ul, .vg-em-hero__cats ul, .vg-em-ticket ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vg-em-row__cats a, .vg-em-hero__cats a, .vg-em-ticket ul a {
	display: inline-block;
	font-family: var(--vg-heading);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	padding: 0.25rem 0.55rem;
	border: 1px solid var(--vg-border);
	border-radius: 2px;
	color: var(--vg-muted);
	text-decoration: none;
}
.vg-em-hero__cats a { background: var(--vg-midnight); border-color: var(--vg-midnight); color: var(--vg-gold); }
.vg-em-row__cats a, .vg-em-ticket ul a { color: var(--vg-muted); }

@media (max-width: 1000px) {
	.vg-em-row { grid-template-columns: 6rem minmax(0, 1fr); }
	.vg-em-row__art { display: none; }
	.vg-em-row__actions { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--vg-border); flex-direction: row; flex-wrap: wrap; }
	.vg-em-row__actions .vg-btn { width: auto; flex: 1 1 10rem; }
}

/* ---------- Single event ---------- */

.vg-em-hero {
	margin-left: calc(var(--wp--style--root--padding-left, 1rem) * -1);
	margin-right: calc(var(--wp--style--root--padding-right, 1rem) * -1);
	padding: clamp(2rem, 5vw, 3.5rem) var(--wp--style--root--padding-left, 1rem) clamp(2.5rem, 6vw, 4rem);
	border-bottom: 4px solid var(--vg-gold);
	color: #FFFFFF;
	--vg-link: #FFFFFF;
	--vg-gold-ink: #FFFFFF;
}
.vg-em-hero__inner { max-width: 1216px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 3rem; align-items: center; }
.vg-em-hero__crumbs { font-family: var(--vg-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; margin: 0 0 1rem; }
.vg-em-hero__crumbs a { color: var(--vg-parchment) !important; }
.vg-em-hero__title { font-family: var(--vg-display); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.08; color: var(--vg-parchment) !important; margin: 1rem 0; }
.vg-em-hero__meta { font-size: 1rem; margin: 0; }
.vg-em-hero__art img { width: 100%; height: auto; border-radius: var(--vg-radius-lg); display: block; }
@media (max-width: 781px) { .vg-em-hero__inner { grid-template-columns: 1fr; } .vg-em-hero__art { order: -1; } }

.vg-em-body {
	max-width: 1216px;
	margin: 0 auto;
	padding: 3rem 0 4rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 22rem;
	gap: 3rem;
	align-items: start;
}
@media (max-width: 900px) { .vg-em-body { grid-template-columns: 1fr; } .vg-em-side { order: -1; } }
.vg-em-main > * + * { margin-top: 1rem; }
.vg-em-main p { font-size: 1.0625rem; line-height: 1.75; }
.vg-em-h { margin-top: 2.5rem !important; }
.vg-em-h::after { content: ""; display: block; width: 48px; height: 3px; background: var(--vg-gold); margin-top: 0.75rem; }
.vg-em-venue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); background: var(--vg-raised); color: var(--vg-ink); border: 1px solid var(--vg-border); border-radius: var(--vg-radius-lg); overflow: hidden; }
.vg-em-venue > div:first-child { padding: 1.5rem; }
.vg-em-venue iframe, .vg-em-venue .em-location-map-container { width: 100% !important; min-height: 260px; border: 0; }
@media (max-width: 600px) { .vg-em-venue { grid-template-columns: 1fr; } }
.vg-em-cal { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.vg-em-cal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1px solid var(--vg-border);
	border-radius: var(--vg-radius);
	background: var(--vg-raised);
	font-family: var(--vg-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.8125rem;
	text-decoration: none;
	color: #FFFFFF;
	border-color: #FFFFFF;
	background: transparent;
}
.vg-em-cal a:hover { background: rgba(255, 255, 255, 0.14); }
.vg-em-side { position: sticky; top: 1.5rem; }
.vg-em-ticket { background: var(--vg-raised); color: var(--vg-ink); border: 2px solid var(--vg-gold); border-radius: var(--vg-radius-lg); padding: 1.75rem; }
.vg-em-ticket > p { margin: 0; }
.vg-em-ticket__label { font-family: var(--vg-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--vg-gold-ink); margin-top: 1rem !important; }
.vg-em-ticket__label:first-child { margin-top: 0 !important; }
.vg-em-ticket .vg-btn { width: 100%; margin-top: 1.5rem; }

/* ---------- Calendar ([events_calendar]) ---------- */

.vg-em-calendar table { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--vg-raised); color: var(--vg-ink); }
.vg-em-calendar thead td, .vg-em-calendar th {
	background: var(--vg-midnight);
	color: var(--vg-gold);
	font-family: var(--vg-heading);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8125rem;
	padding: 0.75rem;
	text-align: left;
}
.vg-em-calendar td { border: 1px solid var(--vg-border); vertical-align: top; padding: 0.5rem 0.625rem; height: 7rem; font-size: 0.8125rem; }
.vg-em-calendar td a { color: var(--vg-gold); font-weight: 600; }
.vg-em-calendar .em-cal-nav, .vg-em-calendar .month_name { font-family: var(--vg-display); font-size: 1.75rem; color: #FFFFFF; }
.vg-em-calendar .em-cal-nav a { color: var(--vg-gold); }
.vg-em-calendar .eventless-pre, .vg-em-calendar .eventless-post { background: #0A3460; color: #C9DAEE; }

/* ---------- Search form ([event_search_form]) ---------- */

.vg-em-search input[type="text"],
.vg-em-search input[type="search"],
.vg-em-search select {
	min-height: 48px;
	border: 1px solid #D5E2F0 !important;
	border-radius: var(--vg-radius) !important;
	background: #FFFFFF !important;
	color: var(--vg-dark-ink) !important;
	padding: 0 0.875rem !important;
	font-family: inherit;
	font-size: 0.9375rem;
}
.vg-em-search button, .vg-em-search input[type="submit"] {
	min-height: 48px;
	background: var(--vg-gold) !important;
	color: var(--vg-midnight) !important;
	border: 0 !important;
	border-radius: var(--vg-radius) !important;
	font-family: var(--vg-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	padding: 0 1.5rem !important;
	cursor: pointer;
}

/* ==========================================================================
   Events Manager 6 on the blue design
   EM 6 ships its own stylesheet ("pixelbones") with dark text for white pages.
   These rules put its search bar, view switcher and default cards on-brand.
   ========================================================================== */

.em, .em.pixelbones {
	--accent-color: #E3B341;
	--accent-color-hover: #EDC35F;
	--text-color: #FFFFFF;
	--font-family: var(--wp--preset--font-family--body);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--body);
}
.em.pixelbones :is(h1, h2, h3, h4, h5, h6), .em :is(h1, h2, h3, h4, h5, h6) { color: inherit; }
.em.pixelbones a:not(.vg-btn):not(.button):not(.em-button), .em a:not(.vg-btn):not(.button):not(.em-button) { color: var(--vg-link); }

/* Our own layouts win over the plugin's defaults */
.em .vg-em-single, .em .vg-em-list, .vg-em-single, .vg-em-list { color: #FFFFFF; }
.em.pixelbones .vg-em-row__title a, .em .vg-em-row__title a, .vg-em-row__title a, .vg-home-event h3 a, .em .vg-home-event h3 a { color: #FFFFFF !important; text-decoration: none; }
.vg-em-row__title a:hover { text-decoration: underline !important; }
.vg-em-row__actions .vg-btn { white-space: nowrap; padding: 0 1rem; }
.em.pixelbones .vg-em-hero__title, .em .vg-em-hero__title { color: #FFFFFF !important; font-family: var(--vg-display); }
.vg-em-hero__crumbs a { text-decoration: underline; }
.em.pixelbones .vg-em-h, .em .vg-em-h { color: #FFFFFF; font-family: var(--vg-heading); text-transform: uppercase; letter-spacing: 0.06em; }
.em.pixelbones .vg-btn, .em .vg-btn { color: var(--vg-midnight) !important; text-decoration: none !important; }
.em.pixelbones .vg-btn--outline, .em .vg-btn--outline, .em .vg-btn--ghost { color: #FFFFFF !important; background: transparent; border-color: #FFFFFF; }
.em .vg-em-row img, .em .vg-em-hero img { max-width: 100%; border-radius: 0; }
.vg-em-hero__actions:not(:empty) { margin-top: 1.5rem; }
.vg-em-hero__actions .vg-btn { min-width: 12rem; }
.vg-em-ticket .vg-em-cal { margin-top: 0.5rem; flex-direction: column; }
.vg-em-ticket .vg-em-cal a { justify-content: center; color: #FFFFFF !important; }
.vg-em-hero__art:empty { display: none; }
.vg-em-hero__inner:has(.vg-em-hero__art:empty) { grid-template-columns: 1fr; }
.vg-em-main :is(h3, h4) { color: #FFFFFF; }
.vg-em-main a:not(.vg-btn) { color: #FFFFFF; text-decoration: underline; }

/* Search bar: a navy panel with white fields and a gold button */
.em.em-search, .em-search {
	background: var(--vg-navy);
	border: 1px solid var(--vg-border);
	border-top: 3px solid var(--vg-gold);
	border-radius: var(--vg-radius-lg);
	padding: 1.25rem;
	margin-bottom: 2rem;
	color: #FFFFFF;
	--vg-link: var(--vg-gold);
}
.em-search :is(input[type="text"], input[type="search"], input[type="date"], select, .em-selectize .selectize-input, .em-search-text, .em-search-geo input, .em-datepicker, .em-date-input) {
	background: #FFFFFF !important;
	color: var(--vg-dark-ink) !important;
	border: 1px solid #D5E2F0 !important;
	border-radius: var(--vg-radius) !important;
	min-height: 48px;
	font-family: inherit;
}
.em-search :is(input::placeholder) { color: #4A5868; }
.em-search :is(button[type="submit"], input[type="submit"], .button-primary, .em-search-submit button, .em-search-submit input) {
	background: var(--vg-gold) !important;
	color: var(--vg-midnight) !important;
	border: 2px solid var(--vg-gold) !important;
	border-radius: var(--vg-radius) !important;
	min-height: 48px;
	font-family: var(--vg-heading);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 0 1.5rem !important;
	cursor: pointer;
}
.em-search :is(button[type="submit"], .button-primary):hover { background: var(--vg-gold-hover) !important; border-color: var(--vg-gold-hover) !important; }
/* View switcher (List, Grouped, Grid, Calendar) and Advanced search toggle */
.em-search :is(.em-search-views-trigger, .em-search-advanced-trigger, .em-search-views button, .em-search-sort-trigger, button.em-clickable):not([type="submit"]) {
	background: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	border-radius: var(--vg-radius) !important;
	min-height: 48px;
	min-width: 48px;
}
.em-search :is(.em-search-views-trigger, .em-search-advanced-trigger) svg, .em-search .em-icon { filter: brightness(0) invert(1); }
.em-search-advanced, .em-search .em-search-advanced-sections { color: #FFFFFF; }
.em-search-advanced :is(label, legend, h3, h4, header) { color: #FFFFFF; font-family: var(--vg-heading); text-transform: uppercase; letter-spacing: 0.06em; }
/* Pop-ups the plugin opens (advanced search modal, view picker) are white panels with dark text */
.em-modal .em-modal-popup, .em-search-views-options, .em.em-modal, .tippy-box[data-theme~="light-border"] {
	--vg-link: #1464B0;
	color: var(--vg-dark-ink) !important;
}
.em-modal :is(h1, h2, h3, h4, label, legend, header, p) { color: var(--vg-dark-ink) !important; }

/* EM 6 default event cards (grid view, or if the theme formats are switched off) */
.em-view-container .em-item:not(.vg-em-row) {
	background: var(--vg-navy);
	border: 1px solid var(--vg-border);
	border-radius: var(--vg-radius-lg);
	color: #FFFFFF;
	overflow: hidden;
	--vg-link: var(--vg-gold);
	--vg-muted: var(--vg-on-dark-muted);
}
.em-view-container .em-item :is(.em-item-title, .em-item-title a) { color: #FFFFFF !important; font-family: var(--vg-display); text-decoration: none; }
.em-view-container .em-item .em-item-meta, .em-view-container .em-item .em-item-meta-line { color: var(--vg-on-dark-muted) !important; }
.em-view-container .em-item .em-item-meta-line svg, .em-view-container .em-item .em-icon { filter: brightness(0) invert(0.85); }
.em-view-container .em-item :is(a.button, .button, .em-item-read-more) {
	background: var(--vg-gold) !important;
	color: var(--vg-midnight) !important;
	border: 0 !important;
	border-radius: var(--vg-radius) !important;
	font-family: var(--vg-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	text-decoration: none !important;
}
.em-view-container .em-item-image img { border-radius: 0; }

/* Pagination and "no events" message */
.em-pagination, .em-pagination a, .em-pagination strong { color: #FFFFFF; font-family: var(--vg-heading); }
.em-pagination a { border: 1px solid rgba(255, 255, 255, 0.7); border-radius: var(--vg-radius); padding: 0.4rem 0.8rem; text-decoration: none; }
.em-pagination strong { background: var(--vg-gold); color: var(--vg-midnight); border-radius: var(--vg-radius); padding: 0.4rem 0.8rem; }
.em-list-no-items, .em-events-list .em-no-events { color: #FFFFFF; }

/* Calendar view from the search switcher */
.em-calendar, .em.em-calendar { --vg-link: var(--vg-gold); }
.em-calendar .em-cal-head, .em-calendar .month-nav, .em-calendar .em-cal-nav { color: #FFFFFF; }
.em-calendar .em-cal-body { background: var(--vg-navy); color: #FFFFFF; border-radius: var(--vg-radius-lg); }
.em-calendar .em-cal-body .em-cal-day { border-color: rgba(255, 255, 255, 0.2) !important; }
.em-calendar .em-cal-body .eventful .em-cal-day-date a, .em-calendar .em-cal-body .eventful-today .em-cal-day-date a { background: var(--vg-gold); color: var(--vg-midnight) !important; }
.em-calendar .em-cal-event a, .em-calendar .em-cal-event { color: #FFFFFF !important; }