/* ======================================================================
   Style isolation
   ======================================================================
   Every rule below this point is scoped under .arts-calendar-scope, the
   wrapper the plugin renders around each calendar instance. Two things
   happen here:

   1. This block resets the handful of inherited/UA-default properties
      that most commonly leak IN from a host theme (heading margins, list
      bullets, link underlines/colors, button/input skinning, box model).
      Declared with !important on purpose, but scoped to a small, named
      set of properties rather than a blanket "all" reset, so it can't
      fight the plugin's own layout rules for properties it doesn't
      touch (color, spacing, flex/grid, etc.).

   2. Every selector further down is prefixed with .arts-calendar-scope,
      which raises their specificity a notch above typical theme
      selectors (element selectors, single classes) so the plugin's own
      styling reliably wins for properties the reset above doesn't cover.

   This is not the same guarantee as full Shadow DOM isolation - a theme
   rule that is itself very specific or !important can still win. But it
   resolves the overwhelming majority of real-world "theme clobbers
   plugin" / "plugin clobbers theme" conflicts (bullets, underlines,
   button skins, heading spacing, box-sizing) without requiring a
   rewrite of how the calendar is rendered.
   ====================================================================== */

.arts-calendar-scope {
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: #1d2327;
	text-align: left;
	background: transparent;
}

.arts-calendar-scope *,
.arts-calendar-scope *::before,
.arts-calendar-scope *::after {
	box-sizing: inherit !important;
}

.arts-calendar-scope h1,
.arts-calendar-scope h2,
.arts-calendar-scope h3,
.arts-calendar-scope h4,
.arts-calendar-scope h5,
.arts-calendar-scope h6,
.arts-calendar-scope p {
	margin: 0 0 0.6em !important;
	font-family: inherit !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.arts-calendar-scope ul,
.arts-calendar-scope ol {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.arts-calendar-scope a {
	font-family: inherit !important;
	background: none !important;
	text-shadow: none !important;
}

.arts-calendar-scope button,
.arts-calendar-scope input,
.arts-calendar-scope select,
.arts-calendar-scope textarea {
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: normal !important;
	border-radius: 0;
	box-shadow: none !important;
}

.arts-calendar-scope button {
	background: none;
	cursor: pointer;
}

.arts-calendar-scope img {
	max-width: 100%;
	border: 0 !important;
	vertical-align: middle;
}

.arts-calendar-scope table {
	border-collapse: collapse;
}

/* Design tokens shared by both view skins (Editorial / Structured) and
   the shared components (search bar, pagination, modals). Admin-selected
   colors/fonts from the Design tab are injected as inline !important
   overrides elsewhere and always take precedence over these defaults. */
.arts-calendar-scope {
	/* Establishes this element as a query container, so the @container
	   rules throughout this file (search bar/tile grid/list item/
	   slider layout collapsing) respond to how wide THIS element
	   actually renders - e.g. a narrow sidebar rail on a desktop
	   browser - rather than the @media rules alongside them, which only
	   ever look at the full browser viewport width and can't tell the
	   calendar is embedded somewhere narrow. The @media rules are left
	   in place as a fallback for the small number of browsers that
	   don't yet support container queries; on an actual mobile phone
	   the two produce the same result, since viewport width and this
	   container's width are normally close to equal there. */
	container-type: inline-size;
	container-name: arts-calendar;
	--arts-font-serif: Georgia, "Times New Roman", serif;
	--arts-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--arts-text: #1d2327;
	--arts-text-muted: #646970;
	--arts-border: #e2e2e2;
	--arts-border-strong: #c3c4c7;
	--arts-surface: #ffffff;
	--arts-surface-muted: #f6f6f4;
	--arts-accent: #185fa5;
	--arts-accent-tint: #e6f1fb;
	--arts-radius: 8px;
	--arts-radius-lg: 12px;
	/* Vertical offset applied when jumping to #arts-events-results after a
	   search, pagination click, or month change. Without this, a site's
	   sticky/fixed header can cover the top portion of the target,
	   effectively pushing the visible landing point further down the
	   page than intended. If results still land too high or too low on a
	   given site, override this value in the Custom CSS field (Design >
	   Tile & list) to match that site's actual sticky header height,
	   e.g.: .arts-calendar-scope { --arts-scroll-offset: 140px; } */
	--arts-scroll-offset: 100px;
}

/* Global Styles */

.arts-calendar-scope .arts-events-container {
	color:black;
}
.arts-calendar-scope .arts-events-container a {
	text-decoration: none !important;
}
.arts-calendar-scope .arts-events-container a:hover {
	text-decoration: underline !important;
}
/* Search bar styles */

.arts-calendar-scope .arts-events-search-bar {
	background: #eee;
	padding:20px;
	/* Bottom margin reduced 20px -> 0px: this was the source of the
	   vertical gap above the Tile/List/Month view-toggle icons, which
	   sit immediately after the search bar in the markup. */
	margin: 50px 0 0;
}
.arts-calendar-scope .arts-events-search-bar input,
 .arts-calendar-scope select {
	background:white;
	padding:10px 5px;
	width: auto;
}
.arts-calendar-scope .arts-events-search-bar.stackedinputs #arts-event-keyword,
.arts-calendar-scope .arts-events-search-bar.stackedinputs select {
	width:100%;
}
.arts-calendar-scope .arts-events-search-bar.stackedinputs arts-event-startdate,
 .arts-calendar-scope .arts-events-search-bar.stackedinputs arts-event-enddate {
	width: auto !important;
}
.arts-calendar-scope .arts-events-view-toggle {
	/* Vertical space below the icons, reduced twice now: originally
	   30px, then -20px to 10px, and now -20px again to -10px per this
	   request. A negative margin here pulls whatever follows (the
	   search bar, or the results area if search is disabled) up by
	   10px past the icon row's own bottom edge - if that ends up
	   looking too tight against the icons' padding/hover background,
	   dial this back toward 0 rather than further negative. */
	margin-bottom:-10px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
}

/* Month view's grid/table layout isn't a good fit for a single-column
   width (the day-of-week columns get squeezed illegibly), so hide the
   Month view toggle icon whenever the calendar is rendering in that
   single-column layout - i.e. the same ≤560px breakpoint the tile grid
   and list rows already collapse at. Only the icon is hidden; if Month
   view happens to already be the active view when this fires, it's left
   as-is (the still-visible Tile/List icons can be used to switch away).
   Mirrored as both @media (real narrow viewport, e.g. a phone) and
   @container (this instance's own rendered width, e.g. a narrow sidebar
   rail on a wide desktop browser) - see the comment on .arts-calendar-
   scope (container-type/container-name) near the top of this file. */
@media screen and (max-width: 560px) {
	.arts-calendar-scope .arts-events-view-toggle .arts-events-toggle-btn[data-view="calendar"] {
		display: none;
	}
}

@container arts-calendar (max-width: 560px) {
	.arts-calendar-scope .arts-events-view-toggle .arts-events-toggle-btn[data-view="calendar"] {
		display: none;
	}
}
.arts-calendar-scope .arts-calendar-nav-below,
 .arts-calendar-scope .arts-events-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top:20px;
	align-items: center;
}
.arts-calendar-scope .arts-events-pagination .pagination-numbers {
	flex-wrap: wrap;
}
.arts-calendar-scope .arts-calendar-nav-below .arts-calendar-nav-link {
   /* color: #029ed9; */
	font-weight:bold;
}
.arts-calendar-scope #arts-events-display-wrapper .pagination-link {
 /*   color:#029ed9; */
 color:black;
 padding:5px;
}
.arts-calendar-scope #arts-events-display-wrapper .pagination-link.current-page {
	background: black;
	color:white;
}
.arts-calendar-scope #arts-events-display-wrapper .pagination-dots {
	align-self: center;
}
.arts-calendar-scope .arts-events-buttons {
	margin-top:10px;
}
.arts-calendar-scope .arts-events-buttons button {
	background: #b1b1b1;
	color:white;
	cursor:pointer;
	font-size:14px;
	padding:5px 10px;
	margin-right:10px;            
}
.arts-calendar-scope .arts-events-buttons button:hover {
	background: #999 !important;            
}
.arts-calendar-scope .arts-date-quick-buttons {
	display:inline-flex; 
	gap:6px; 
	margin-left:10px; 
	flex-wrap:wrap;
}
.arts-calendar-scope .arts-date-quick-buttons button {
	background: #b1b1b1;
	color:white;
	cursor:pointer;
	font-size:14px;
	padding:5px 10px;
	transition: background-color 0.15s ease;
}
.arts-calendar-scope .arts-date-quick-buttons button:hover {
	background: #999 !important;            
}
.arts-calendar-scope .arts-date-quick-buttons button[aria-pressed="true"] {
	background: var(--arts-accent, #185fa5) !important;
	color: #fff !important;
}


@media screen and (max-width:768px) {.arts-calendar-scope .arts-date-quick-buttons { margin-left:0px; margin-top:10px;}

}

/* Container-query mirror of the @media rule above - see the comment on
   .arts-calendar-scope (container-type/container-name) near the top of
   this file for why both exist. */
@container arts-calendar (max-width: 768px) {
	.arts-calendar-scope .arts-date-quick-buttons { margin-left:0px; margin-top:10px; }
}

/* ======================================================================
   Search layouts - "Toolbar" and "Panel" (Classic, above, is unchanged).
   Selected per-calendar from Design > Search > Search layout. Both reuse
   the exact same form fields/IDs as Classic, just grouped differently,
   so no JS needs to know which layout is active.
   ====================================================================== */

.arts-calendar-scope .arts-search-layout-toolbar.arts-events-search-bar,
.arts-calendar-scope .arts-search-layout-panel.arts-events-search-bar {
	background: var(--arts-surface);
	border: 1px solid var(--arts-border);
	border-radius: var(--arts-radius-lg);
	padding: 16px 18px;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-search-row,
.arts-calendar-scope .arts-search-layout-panel .arts-search-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-search-row-fields,
.arts-calendar-scope .arts-search-layout-panel .arts-search-row-fields {
	margin-bottom: 10px;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-search-field,
.arts-calendar-scope .arts-search-layout-panel .arts-search-field {
	flex: 1;
	min-width: 140px;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-search-field-keyword,
.arts-calendar-scope .arts-search-layout-panel .arts-search-field-keyword {
	flex: 2;
	min-width: 180px;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-search-field input,
.arts-calendar-scope .arts-search-layout-toolbar .arts-search-field select,
.arts-calendar-scope .arts-search-layout-panel .arts-search-field input,
.arts-calendar-scope .arts-search-layout-panel .arts-search-field select {
	width: 100%;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-search-dates,
.arts-calendar-scope .arts-search-layout-panel .arts-search-dates {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-search-dates label,
.arts-calendar-scope .arts-search-layout-panel .arts-search-dates label {
	font-size: 13px;
	color: var(--arts-text-muted);
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-search-spacer {
	flex: 1;
}

/* Quick-date buttons: segmented pill group (Toolbar) / outlined pills (Panel) */
.arts-calendar-scope .arts-search-layout-toolbar .arts-date-quick-buttons {
	background: var(--arts-surface-muted);
	border-radius: var(--arts-radius);
	padding: 3px;
	margin-left: 0;
	gap: 2px;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-date-quick-buttons button {
	background: transparent;
	color: var(--arts-text);
	border-radius: 6px;
	font-size: 12px;
	padding: 6px 10px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-date-quick-buttons button:hover {
	background: var(--arts-surface) !important;
}

.arts-calendar-scope .arts-search-layout-panel .arts-date-quick-buttons {
	margin-left: 0;
}

.arts-calendar-scope .arts-search-layout-panel .arts-date-quick-buttons button {
	background: transparent;
	color: var(--arts-text);
	border: 1px solid var(--arts-border-strong);
	border-radius: 999px;
	font-size: 12px;
	padding: 6px 12px;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.arts-calendar-scope .arts-search-layout-panel .arts-date-quick-buttons button:hover {
	background: var(--arts-surface-muted) !important;
}

.arts-calendar-scope .arts-search-layout-toolbar .arts-date-quick-buttons button[aria-pressed="true"],
.arts-calendar-scope .arts-search-layout-panel .arts-date-quick-buttons button[aria-pressed="true"] {
	background: var(--arts-accent) !important;
	color: #fff !important;
	border-color: var(--arts-accent) !important;
}

/* Search = the one primary action; Reset = a quiet secondary action */
.arts-calendar-scope .arts-search-layout-toolbar .arts-events-buttons,
.arts-calendar-scope .arts-search-layout-panel .arts-events-buttons {
	margin-top: 0;
	display: flex;
	gap: 10px;
}

.arts-calendar-scope .arts-search-layout-toolbar #arts-events-search-button,
.arts-calendar-scope .arts-search-layout-panel #arts-events-search-button {
	background: var(--arts-text);
	color: #fff;
	border-radius: var(--arts-radius);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 20px;
	margin-right: 0;
	transition: background-color 0.15s ease;
}

.arts-calendar-scope .arts-search-layout-toolbar #arts-events-search-button:hover,
.arts-calendar-scope .arts-search-layout-panel #arts-events-search-button:hover {
	background: var(--arts-accent) !important;
}

.arts-calendar-scope .arts-search-layout-toolbar #arts-events-reset-button,
.arts-calendar-scope .arts-search-layout-panel #arts-events-reset-button {
	background: transparent;
	color: var(--arts-text-muted);
	text-decoration: underline;
	padding: 8px 6px;
	margin-right: 0;
}

.arts-calendar-scope .arts-search-layout-toolbar #arts-events-reset-button:hover,
.arts-calendar-scope .arts-search-layout-panel #arts-events-reset-button:hover {
	background: transparent;
	color: var(--arts-text);
}

/* Panel-only: section micro-labels and the mobile date disclosure */
.arts-calendar-scope .arts-search-layout-panel .arts-search-group-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--arts-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin: 0 0 8px;
	cursor: default;
	list-style: none;
}

.arts-calendar-scope .arts-search-layout-panel .arts-search-group-label::-webkit-details-marker {
	display: none;
}

.arts-calendar-scope .arts-search-layout-panel .arts-search-when-disclosure {
	border-top: 1px solid var(--arts-border);
	padding-top: 12px;
	margin-bottom: 14px;
}

.arts-calendar-scope .arts-search-layout-panel summary.arts-search-group-label {
	cursor: pointer;
	position: relative;
	padding-right: 20px;
}

.arts-calendar-scope .arts-search-layout-panel summary.arts-search-group-label::after {
	content: "\25BE";
	position: absolute;
	right: 0;
	top: 0;
}

.arts-calendar-scope .arts-search-layout-panel .arts-search-when-disclosure[open] summary.arts-search-group-label::after {
	content: "\25B4";
}

.arts-calendar-scope .arts-search-layout-panel .arts-search-row-actions {
	justify-content: flex-end;
}

@media screen and (max-width: 560px) {
	.arts-calendar-scope .arts-search-layout-toolbar .arts-search-row-when {
		flex-direction: column;
		align-items: stretch;
	}
	.arts-calendar-scope .arts-search-layout-toolbar .arts-search-spacer {
		display: none;
	}
	.arts-calendar-scope .arts-search-layout-toolbar .arts-events-buttons,
	.arts-calendar-scope .arts-search-layout-panel .arts-events-buttons {
		flex-direction: column;
	}
	.arts-calendar-scope .arts-search-layout-toolbar #arts-events-search-button,
	.arts-calendar-scope .arts-search-layout-panel #arts-events-search-button,
	.arts-calendar-scope .arts-search-layout-toolbar #arts-events-reset-button,
	.arts-calendar-scope .arts-search-layout-panel #arts-events-reset-button {
		width: 100%;
		text-align: center;
	}
}

/* Container-query mirror - see the comment on .arts-calendar-scope
   (container-type/container-name) near the top of this file. */
@container arts-calendar (max-width: 560px) {
	.arts-calendar-scope .arts-search-layout-toolbar .arts-search-row-when {
		flex-direction: column;
		align-items: stretch;
	}
	.arts-calendar-scope .arts-search-layout-toolbar .arts-search-spacer {
		display: none;
	}
	.arts-calendar-scope .arts-search-layout-toolbar .arts-events-buttons,
	.arts-calendar-scope .arts-search-layout-panel .arts-events-buttons {
		flex-direction: column;
	}
	.arts-calendar-scope .arts-search-layout-toolbar #arts-events-search-button,
	.arts-calendar-scope .arts-search-layout-panel #arts-events-search-button,
	.arts-calendar-scope .arts-search-layout-toolbar #arts-events-reset-button,
	.arts-calendar-scope .arts-search-layout-panel #arts-events-reset-button {
		width: 100%;
		text-align: center;
	}
}

/* Calendar Styles */

.arts-calendar-scope .arts-events-calendar-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}
.arts-calendar-scope .arts-events-calendar-table th,
 
.arts-calendar-scope .arts-events-calendar-table td {
	border: 1px solid #ccc;
	padding: 8px;
	vertical-align: top;
	min-height: 25px;
	width: 14.28%;
}
.arts-calendar-scope .arts-events-calendar-table td {
	height: 100px;
}
.arts-calendar-scope .arts-events-calendar-day .day-number {
	font-weight: bold;
	margin-bottom: 4px;
}
.arts-calendar-scope .arts-events-calendar-day .arts-event-title {
   /* color: #029ed9; */
	font-size:12px;
	border-bottom: 1px solid #e4e4e4;
	margin: 2px 0;
	padding: 10px 5px;
	border-radius: 4px;
}
.arts-calendar-scope .arts-show-popup {
	/* color: #029ed9; */
	font-size:12px;
	font-weight:bold;
	margin-top: 15px;
	display: block;
}
/* Calendar Modal Styles */

.arts-calendar-scope .arts-events-modal {
	position: fixed;         
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2147483647;
	background-color: rgba(0, 0, 0, 0.5); 
	display: flex;           
	align-items: center;     
	justify-content: center; 
}
.arts-calendar-scope .arts-events-modal-content {
	background: #fff;
	border-radius: 6px;
	height: 90%;
	margin:10px auto 0;
	padding: 20px;
	overflow: auto;
	max-width: 600px;
	width: 90%;       
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	position: relative;    
}
.arts-calendar-scope .arts-events-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	background: none;
	border: none;
	font-size: 18px;
	font-weight: bold;
}
.arts-calendar-scope #arts-events-modal-title {
	margin-top: 0;
	margin-bottom: 1em;
	text-align:center;
}
.arts-calendar-scope .arts-modal-event-item {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}
.arts-calendar-scope .arts-modal-event-item:last-child {
	border-bottom: none;
}
.arts-calendar-scope .arts-modal-event-item a {
	line-height:1.2;
}
.arts-calendar-scope .arts-modal-event-item a .arts-modal-event-time {
	display:inline-block;
	width:75px;
	vertical-align:top;
}
.arts-calendar-scope .arts-modal-event-item a .arts-modal-event-title {
	display:inline;
}
.arts-calendar-scope #arts-events-modal-more {
	display: inline-block;
	margin-top: 1em;
	padding: 8px 16px;
	background: #0073aa;
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 4px;
}
.arts-calendar-scope #arts-events-modal-more:hover {
	background: #005177;
}
.arts-calendar-scope .arts-events-modal {
	display: none; 
}
/* ======================================================================
   Tile view - "Editorial" skin
   ====================================================================== */

.arts-calendar-scope .arts-events-tiles-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 30px;
}

@media screen and (max-width: 992px) {
	.arts-calendar-scope .arts-events-tiles-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 560px) {
	.arts-calendar-scope .arts-events-tiles-container {
		grid-template-columns: 1fr;
	}
}

/* Container-query mirrors - see the comment on .arts-calendar-scope
   (container-type/container-name) near the top of this file. This pair
   is what makes the tile grid collapse to a single column when the
   calendar is embedded in a narrow sidebar rail on a desktop browser,
   where the viewport itself is wide enough that the @media rules above
   never fire. */
@container arts-calendar (max-width: 992px) {
	.arts-calendar-scope .arts-events-tiles-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container arts-calendar (max-width: 560px) {
	.arts-calendar-scope .arts-events-tiles-container {
		grid-template-columns: 1fr;
	}
}

.arts-calendar-scope .arts-events-tile {
	position: relative;
	background: var(--arts-surface);
	border: 1px solid var(--arts-border);
	border-radius: var(--arts-radius-lg);
	overflow: hidden;
}

.arts-calendar-scope .arts-events-tile.ac-shadow {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Anchor target for post-search/pagination/month-change scrolling (see
   #arts-events-results in the PHP output). scroll-margin-top keeps this
   from landing underneath a site's sticky header. */
.arts-calendar-scope #arts-events-results {
	display: block;
	scroll-margin-top: var(--arts-scroll-offset);
}

.arts-calendar-scope .arts-tile-image-link {
	display: block;
	line-height: 0;
	font-size: 0;
}

.arts-calendar-scope .arts-events-tile img {
	height: 190px !important;
	width: 100%;
	object-fit: cover;
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	display: block;
	vertical-align: top;
	border-radius: var(--arts-radius-lg) var(--arts-radius-lg) 0 0 !important;
}

.arts-calendar-scope .arts-tile-date-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	background: var(--arts-surface);
	color: var(--arts-text);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--arts-radius);
}

.arts-calendar-scope .arts-events-tile .art-info {
	padding: 14px 16px 16px;
}

.arts-calendar-scope .arts-events-tile .art-info h3 {
	/* "Default" baseline for the Title font option (Design > General).
	   --arts-title-font-h3 is only ever set (via JS, on the
	   .arts-calendar-scope wrapper) when that option is "Inherit" - see
	   assets/js/script.js. When unset, this falls back to the plugin's
	   own sans-serif stack below. Plain CSS `inherit` doesn't work here:
	   this wrapper sets its own font-family (see the "Style isolation"
	   block up top), so a descendant asking to inherit just gets that
	   value back instead of the theme's. */
	font-family: var(--arts-title-font-h3, var(--arts-font-sans)) !important;
	font-weight: 400 !important;
	font-size: 18px !important;
	margin-bottom: 20px !important;
}

.arts-calendar-scope .arts-events-tile .art-info h3 a {
	color: var(--arts-text);
}

.arts-calendar-scope .arts-events-tile .art-info .art-venue {
	font-size: 13px;
	color: var(--arts-text-muted);
	margin-bottom: 0 !important;
	display: flex;
	align-items: center;
	gap: 5px;
}

.arts-calendar-scope .arts-events-tile .art-info .art-venue-icon {
	flex-shrink: 0;
	color: var(--arts-text-muted);
}

.arts-calendar-scope .arts-events-tile .tile-overlay,
.arts-calendar-scope .arts-events-tile .date-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(29, 35, 39, 0.92);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	text-align: center;
}

.arts-calendar-scope .arts-events-tile .date-overlay {
	background-color: rgba(29, 35, 39, 0.96);
	/* Left-align the date/time list instead of the tile-overlay's
	   centered default above - this overlay only ever shows that list,
	   so it doesn't need to match .tile-overlay's title/"presented by"
	   styling. align-items controls the flex cross-axis (horizontal,
	   in this column layout); text-align handles the wrapped line
	   endings within the <p> itself. Padding added since centering
	   previously kept the text off the edges on its own - left-aligned
	   text needs it explicitly. */
	align-items: flex-start;
	text-align: left;
	padding: 0 16px;
}

.arts-calendar-scope .arts-events-tile .date-overlay p {
	/* Moves the date/time list down from where vertical centering
	   (justify-content: center, inherited above) would otherwise place
	   it. */
	margin-top: 20px;
}

.arts-calendar-scope .arts-events-tile .tile-overlay a {
	box-sizing: border-box;
	color: #fff;
	height: 100%;
	width: 100%;
	padding: 40px 16px 0;
	text-decoration: none;
}

.arts-calendar-scope .arts-events-tile .tile-overlay a:hover {
	text-decoration: none !important;
}

.arts-calendar-scope .arts-events-tile .tile-overlay h3 {
	font-family: var(--arts-font-serif) !important;
	font-weight: 400 !important;
	font-size: 16px !important;
	color: #fff !important;
	line-height: 1.4 !important;
	margin-top: 40px !important;
}

.arts-calendar-scope .arts-events-tile .tile-overlay .tile-presented-by {
	font-size: 16px;
}

.arts-calendar-scope .arts-events-tile:hover .tile-overlay h3:hover {
	text-decoration: underline;
}

.arts-calendar-scope .arts-events-tile:hover .tile-overlay {
	opacity: 1;
	visibility: visible;
}

.arts-calendar-scope .arts-events-tile:hover .art-info {
	visibility: hidden;
}

.arts-calendar-scope .arts-tile-date-badge:hover ~ .date-overlay,
.arts-calendar-scope .arts-tile-date-badge:focus-within ~ .date-overlay {
	opacity: 1;
	visibility: visible;
}

.arts-calendar-scope .art-info.visible100 {
	visibility: visible !important;
}

/* ======================================================================
   List view - "Structured" skin
   ====================================================================== */

.arts-calendar-scope #arts-events-list-view .arts-events-list-item {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: flex-start;
	background: var(--arts-surface);
	border: 1px solid var(--arts-border);
	border-radius: var(--arts-radius);
	padding: 14px;
	margin: 0 0 12px;
}

.arts-calendar-scope .arts-flex-row {
	flex-direction: row !important;
}

.arts-calendar-scope #arts-events-list-view .arts-events-list-item:last-child {
	margin-bottom: 0;
}

.arts-calendar-scope #arts-events-list-view .arts-events-list-img-container {
	width: 96px;
	flex-shrink: 0;
}

.arts-calendar-scope #arts-events-list-view .arts-events-list-item img {
	cursor: pointer;
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: var(--arts-radius);
	display: block;
}

.arts-calendar-scope #arts-events-list-view .arts-events-list-item img:hover {
	opacity: 0.85;
}

.arts-calendar-scope .arts-events-info {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
}

.arts-calendar-scope .arts-list-info-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.arts-calendar-scope .arts-events-info h2 {
	/* "Default" baseline for the Title font option (Design > General) -
	   see the matching comment on .arts-events-tile .art-info h3 above.
	   Uses the h2-specific variable since this is an <h2>, not an <h3>
	   - themes commonly style heading levels differently. */
	font-family: var(--arts-title-font-h2, var(--arts-font-sans)) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	margin-bottom: 4px !important;
}

.arts-calendar-scope .arts-events-info h2 a {
	color: var(--arts-text);
}

.arts-calendar-scope .arts-list-category-tag {
	flex-shrink: 0;
	background: var(--arts-surface-muted);
	color: var(--arts-text-muted);
	font-size: 11px;
	font-weight: 500;
	padding: 4px 9px;
	border-radius: var(--arts-radius);
	white-space: nowrap;
}

.arts-calendar-scope .arts-list-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 13px !important;
	color: var(--arts-text-muted);
	margin-bottom: 18px !important;
}

.arts-calendar-scope .arts-list-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.arts-calendar-scope .arts-list-meta-icon {
	flex-shrink: 0;
	color: var(--arts-text-muted);
}

.arts-calendar-scope .arts-list-desc {
	font-size: 14px !important;
	color: var(--arts-text);
	line-height: 1.5 !important;
	margin-bottom: 8px !important;
}

.arts-calendar-scope .arts-events-info .art-button,
.arts-calendar-scope .art-button {
	background: var(--arts-text);
	color: #fff;
	display: inline-block;
	text-align: center;
	padding: 8px 16px;
	border-radius: var(--arts-radius);
	font-size: 13px;
}

@media screen and (max-width: 560px) {
	.arts-calendar-scope #arts-events-list-view .arts-events-list-item {
		flex-direction: column;
	}
	.arts-calendar-scope #arts-events-list-view .arts-events-list-img-container,
	.arts-calendar-scope #arts-events-list-view .arts-events-list-item img {
		width: 100%;
		height: 160px;
	}
}

/* Container-query mirror - see the comment on .arts-calendar-scope
   (container-type/container-name) near the top of this file. */
@container arts-calendar (max-width: 560px) {
	.arts-calendar-scope #arts-events-list-view .arts-events-list-item {
		flex-direction: column;
	}
	.arts-calendar-scope #arts-events-list-view .arts-events-list-img-container,
	.arts-calendar-scope #arts-events-list-view .arts-events-list-item img {
		width: 100%;
		height: 160px;
	}
}

/* ======================================================================
   Event detail popup - "Editorial" skin (the default). Site owners can
   switch a given calendar to the "Structured" skin instead from the
   Design tab (Event Popup section); when they do, .arts-popup-structured
   is added to the modal root by PHP and the override block further
   below applies.
   ====================================================================== */

.arts-calendar-scope .arts-events-list-modal-content {
	border-radius: var(--arts-radius-lg) !important;
	max-width: 720px !important;
}

.arts-calendar-scope #arts-events-list-modal-image {
	float: left !important;
	width: 300px !important;
	max-width: 40% !important;
	margin: 0 20px 15px 0 !important;
}

.arts-calendar-scope #arts-events-list-modal-image:empty {
	display: none !important;
	margin: 0 !important;
}

.arts-calendar-scope #arts-events-list-modal-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--arts-radius);
	object-fit: cover;
}

.arts-calendar-scope #arts-events-list-modal-title {
	/* "Default" baseline for the Title font option (Design > General) -
	   see the matching comment on .arts-events-tile .art-info h3 above.
	   This is also an <h2>, so it shares the h2 variable with the List
	   view title above. Note: the "Structured" popup skin below always
	   inherits the theme's font for its title by its own separate
	   design, regardless of this option. */
	font-family: var(--arts-title-font-h2, var(--arts-font-sans)) !important;
	font-weight: 400 !important;
}

.arts-calendar-scope .arts-events-list-heading-bar {
	background: transparent !important;
	color: var(--arts-text-muted) !important;
	border-bottom: 1px solid var(--arts-border);
	border-radius: 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding-left: 0 !important;
	clear: both;
}

.arts-calendar-scope #arts-events-list-modal-body {
	clear: both;
}

/* Extra breathing room above these two specific section headings (not
   the shared .arts-events-list-heading-bar class in general, so
   Location - which reuses that class - is unaffected). */
.arts-calendar-scope #arts-events-list-heading-admission,
.arts-calendar-scope #arts-events-list-heading-datetimes {
	margin-top: 24px !important;
}

/* Match the popup's Admission Info / Individual Dates & Times / Location
   text weight to the event description's weight. Without this, the base
   reset's font-weight:500 on <p> elements (added to guard against
   inherited theme heading styles) made these dynamically-built <p>
   sections look bolder than the description, which comes from the feed
   as raw HTML that isn't necessarily wrapped in a <p> at all. Higher
   specificity (ID + descendant) than that base rule is what makes this
   reliably win. */
.arts-calendar-scope #arts-events-list-modal-description,
.arts-calendar-scope #arts-events-list-modal-description p,
.arts-calendar-scope #arts-events-list-modal-admission,
.arts-calendar-scope #arts-events-list-modal-admission p,
.arts-calendar-scope #arts-events-list-datetimes,
.arts-calendar-scope #arts-events-list-datetimes p,
.arts-calendar-scope #arts-events-list-modal-body,
.arts-calendar-scope #arts-events-list-modal-body p {
	font-family: inherit !important;
	font-weight: 400 !important;
}

/* "Structured" skin override - only applies when the modal root carries
   .arts-popup-structured (set from the calendar_feed_popup_style admin
   setting). The extra class raises specificity above the Editorial
   rules just above, so this reliably wins whenever it's present. */

.arts-calendar-scope .arts-events-list-modal.arts-popup-structured #arts-events-list-modal-title {
	font-family: inherit !important;
	font-weight: 500 !important;
}

.arts-calendar-scope .arts-events-list-modal.arts-popup-structured .arts-events-list-heading-bar {
	background: var(--arts-surface-muted) !important;
	color: var(--arts-text) !important;
	border-bottom: none;
	border-radius: var(--arts-radius) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding-left: 15px !important;
}

/* List Modal Styles */

.arts-calendar-scope .arts-events-list-modal {
	position: fixed;         
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2147483647;
	background-color: rgba(0, 0, 0, 0.5); 
	display: flex;           
	align-items: center;     
	justify-content: center; 
}
.arts-calendar-scope .arts-events-list-modal-header {
	background: black;;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	color:white;
	margin:10px auto 0;
	padding: 20px;
	overflow: auto;
	max-width: 700px;        
	width: 90%;              
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	position: relative;      
}
.arts-calendar-scope .arts-events-list-modal-content {
	background: #fff;
	height: 100%;
	margin:0px auto;
	padding: 20px;
	overflow: auto;
	max-width: 700px;        
	width: 90%;              
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	position: relative;      
}
.arts-calendar-scope .arts-events-list-modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
	background: none;
	border: none;
	font-size: 18px;
	font-weight: bold;
	color:white;
}
.arts-calendar-scope #arts-events-list-modal-title {
	color:white;
	margin-top: 0;
	margin-bottom: 1em;                
}
.arts-calendar-scope .arts-events-list-heading-bar {
	background-color: black;
	color: #ffffff;
	margin-bottom: 15px !important;
	padding:15px;
	text-transform: uppercase;
}
.arts-calendar-scope .arts-modal-event-list-item {
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}
.arts-calendar-scope #arts-events-list-modal-image {
	max-width:300px;
	margin:0px auto 10px;
}
.arts-calendar-scope #arts-events-list-modal-description {
	margin-bottom:15px;
}
.arts-calendar-scope #arts-events-list-modal-button {
	display: inline-block;
	margin-top: 1em;
	padding: 8px 16px;
	background: #0073aa;
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 4px;
}
.arts-calendar-scope #arts-events-list-modal-more:hover {
	background: #005177;
}
.arts-calendar-scope .arts-events-list-modal {
	display: none; 
}
.arts-calendar-scope #arts-events-list-datetimes p:not(:last-child) {
	margin:0;
}
.arts-calendar-scope .arts-hide-section {
	display:none !important;
}
.arts-calendar-scope .arts-justify-end {
	justify-content: end !important;
}
/* Slider Controls */

.arts-calendar-scope .artsopolis-calendar-slider {
    height: 300px;
    position: relative;
    width: 100%;
}
.arts-calendar-scope .artsopolis-calendar-slider li .b-share-cat {
    float: left;
    margin-left: 15px;
    margin-top: 13px;
}
.arts-calendar-scope .artsopolis-calendar-slider .silder-footer {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #cdcbcc;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    height: 40px;
    position: relative;
    width: 100%;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider {
    opacity: 0;
    margin-bottom: 0;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider ol {
	margin-top:0; 
   }
.arts-calendar-scope .artsopolis-calendar-slider .flex-control-paging li a {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: transparent;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    box-shadow: none;
    color: #fff;
    background: #000;
    height: 28px;
    text-indent: 0;
	text-decoration:none;
    width: 28px;
    display: block;
    border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    text-align: center;
    line-height: 28px;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-direction-nav a::before {
    content: "";
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-direction-nav a.flex-next::before {
    content: "";
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-control-paging li a.flex-active {
    background: #fff;
    color:#000;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-control-paging li a:hover {
    background: #fff;
    color:#000;
    text-decoration: none;
}
.arts-calendar-scope .apl-internal-content ol {
    margin-left: 0;
}
.arts-calendar-scope .artsopolis-calendar-slider .art-calendar-silder-footer .flex-control-nav {
    
    height: 100%;
    padding-top: 5px;
    text-align: right;
    margin-left: 0;
    position: relative;
    top: 0;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider {
    width: 100%;
}
.arts-calendar-scope #artsopolis-calendar-tabs-events ul li,

.arts-calendar-scope .ac-search-bkl ul li {
    padding-top: 0 !important;
}
.arts-calendar-scope #artsopolis-calendar-tabs-events ul li::before,

.arts-calendar-scope .ac-search-bkl ul li::before,

.arts-calendar-scope #artsopolis-calendar-pagination ul li::before {
    display: none;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-control-nav li {
    background-attachment: scroll;
    background-clip: border-box;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    cursor: pointer;
    display: inline-block;
    margin-right: 5px !important;
    margin-top: 2px !important;
    margin-left: 0 !important;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-control-nav li:hover a {
    color: #000000;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-direction-nav {
    bottom: 30px;
    display: none;
    position: absolute;
    right: 0;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-direction-nav a {
    font-size: 0;
    opacity: 0.4;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-direction-nav a .flex-active {
    color: #fcb234;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-direction-nav .flex-prev {
    /*background-image: url("../images/prev-arrow.png");*/
    background-repeat: no-repeat;
    height: 30px;
    left: -75px;
    opacity: 0.4;
    width: 30px;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-direction-nav .flex-next {
    /*background-image: url("../images/next-arrow.png");*/
    background-repeat: no-repeat;
    height: 30px;
    left: -40px;
    opacity: 0.4;
    width: 30px;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-clip: padding-box;
    background-color: #ebebeb;
    border-bottom-color: -moz-use-text-color;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-style: none;
    border-bottom-width: medium;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-left-color: -moz-use-text-color;
    border-left-style: none;
    border-left-width: medium;
    border-right-color: -moz-use-text-color;
    border-right-style: none;
    border-right-width: medium;
    border-top-color: -moz-use-text-color;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top-style: none;
    border-top-width: medium;
    box-shadow: none;
    float: left;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider .slides {
    background-attachment: scroll !important;
    background-clip: border-box !important;
    background-color: #ffffff !important;
    background-image: none !important;
    background-origin: padding-box !important;
    background-position: 0 0 !important;
    background-repeat: repeat !important;
    background-size: auto auto !important;
    height: 250px !important;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider:hover .flex-prev {
    left: -75px;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider:hover .flex-next {
    left: -40px;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider .slides li {
    height: 250px;
    margin-left: 0;
    padding-left: 0 !important;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-pic {
    background-color: #e4dfe1;
    float: left;
    height: 250px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 45%;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-pic img {
    height: 100%;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    position: relative;
    width: auto !important;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content {
    background-color: #ebebeb;
    box-sizing: border-box;
    float: left;
    height: 250px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 10px;
    position: relative;
    width: 55%;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content h2 {
    color: #666;
    font-size: 22px!important;
    font-weight: normal;
    max-height: 52px;
    overflow-x: hidden;
    overflow-y: hidden;
    line-height: 26px;
    margin-top:0!important;
    margin-bottom: 10px!important;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content h2 a {
    color: #666;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content h2:hover {
    text-decoration-color: -moz-use-text-color;
    text-decoration-line: underline;
    text-decoration-style: solid;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content .desc {
    font-size: 12px;
    margin-bottom: 5px;
    max-height: 82px;
    overflow-x: hidden;
    overflow-y: hidden;
    line-height: 20px;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content .date {
    color: #999999;
    font-size: 14px;
    margin-bottom: 10px;
    max-height: 20px;
    overflow-x: hidden;
    overflow-y: hidden;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content .b-share {
    bottom: 0;
    left: 20px;
    position: absolute;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content .meta {
    margin-bottom: 0;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content .meta.auth {
    color: #666;
    font-style: italic;
    margin-bottom: 10px;
    overflow-x: hidden;
    overflow-y: hidden;
    max-height: 40px;
    font-size: 14px;
    line-height: 20px;
}
.arts-calendar-scope .artsopolis-calendar-slider .slider-content a.vmore {
    bottom: 10px;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    position: absolute;
    right: 20px;
}
.arts-calendar-scope #artsopolis-calendar-settings table tr td i {
    color: #999;
    font-size: 11px;
    vertical-align: middle;
}
.arts-calendar-scope #artsopolis-calendar-settings table tr td .wp-picker-container + i {
    vertical-align: top !important;
}
.arts-calendar-scope .artsopolis-calendar-slider .flexslider .slides li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
}
.arts-calendar-scope .artsopolis-calendar-slider .flex-control-paging li a {
    padding-bottom: 0;
    border-bottom: none;
}


@media (max-width: 768px){.arts-calendar-scope .artsopolis-calendar-slider .slider-content {
        width: 100%;
        height: 250px;
    }
.arts-calendar-scope .artsopolis-calendar-slider .slider-pic {
        width: 100%;
    }
.arts-calendar-scope .artsopolis-calendar-slider {
        height:550px;
    }
.arts-calendar-scope .artsopolis-calendar-slider .flexslider .slides {
        height: 500px!important;
    }

}

/* Container-query mirror - see the comment on .arts-calendar-scope
   (container-type/container-name) near the top of this file. */
@container arts-calendar (max-width: 768px) {
	.arts-calendar-scope .artsopolis-calendar-slider .slider-content {
		width: 100%;
		height: 250px;
	}
	.arts-calendar-scope .artsopolis-calendar-slider .slider-pic {
		width: 100%;
	}
	.arts-calendar-scope .artsopolis-calendar-slider {
		height: 550px;
	}
	.arts-calendar-scope .artsopolis-calendar-slider .flexslider .slides {
		height: 500px !important;
	}
}
.arts-calendar-scope #arts-events-display-wrapper {
	position: relative;
}
.arts-calendar-scope .arts-pag-loader {
	text-align: center;
	background: rgba(255,255,255,.7);
	height: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 5;
	display: flex;
	justify-content: center;
	align-items: center;
}
/* --- Accessibility additions ---------------------------------------- */

/* Visually-hidden text for screen readers (labels, button context) that
   shouldn't take up visual space but must remain in the accessibility tree. */
/* Visually-hidden text for screen readers (labels, button context,
   status announcements) that shouldn't take up visual space but must
   remain in the accessibility tree. Scoped broadly under
   .arts-calendar-scope (rather than listing out each container that
   happens to use it) since it's a generic utility class used in several
   otherwise-unrelated places throughout the widget. */
.arts-calendar-scope .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
/* Visible focus indicator for keyboard users. The plugin previously relied
   entirely on the browser default (or none at all on custom buttons/spans),
   which fails WCAG 2.4.7 (Focus Visible). */
.arts-calendar-scope .arts-events-search-bar input:focus-visible,

.arts-calendar-scope .arts-events-search-bar select:focus-visible,

.arts-calendar-scope .arts-events-search-bar button:focus-visible,

.arts-calendar-scope .arts-events-view-toggle .arts-events-toggle-btn:focus-visible,

.arts-calendar-scope .arts-events-tile a:focus-visible,

.arts-calendar-scope .arts-events-list-item a:focus-visible,

.arts-calendar-scope .arts-calendar-nav-link:focus-visible,

.arts-calendar-scope .arts-events-modal-close:focus-visible,

.arts-calendar-scope .arts-events-list-modal-close:focus-visible,

.arts-calendar-scope #arts-events-tiles-wrapper:focus-visible,

.arts-calendar-scope #arts-events-results:focus-visible,

.arts-calendar-scope .art-button:focus-visible {
	outline: 3px solid #0a58ca;
	outline-offset: 2px;
}
/* Convert the view-toggle icon buttons to real, unstyled <button> elements
   while preserving their original span-based appearance. */
.arts-calendar-scope .arts-events-view-toggle .arts-events-toggle-btn {
	background: none;
	border: 0;
	padding: 6px;
	border-radius: var(--arts-radius);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.arts-calendar-scope .arts-events-view-toggle .arts-events-toggle-btn:hover {
	background: #f0f0f0;
}