/* Venuera Calendar - front-end styles.
   The palette is driven by Venuera's own design tokens (--twp-*), which the
   add-on injects for the active Event Page Style (minimal / bold / dark)
   selected in Venuera settings. The --vc-* aliases below remap those tokens
   (with safe fallbacks) so the rest of this stylesheet stays readable and the
   calendar matches the site's chosen front-end look anywhere it is placed.

   Layout is server-rendered; every rule here is presentational only, so a CSS
   or JS failure can never break navigation, filtering or view switching. */

.venuera-calendar {
	--vc-bg: var(--twp-card, #ffffff);
	--vc-border: var(--twp-border, #e7e9ee);
	--vc-muted: var(--twp-muted, #667085);
	--vc-accent: var(--twp-accent, #4f46e5);
	--vc-accent-ink: var(--twp-accent-ink, #ffffff);
	--vc-text: var(--twp-text, #11151c);
	--vc-radius: var(--twp-radius, 16px);
	--vc-radius-sm: var(--twp-radius-sm, 10px);

	/* Derived surfaces - one source of truth for every tint in the calendar. */
	--vc-accent-soft: color-mix(in srgb, var(--vc-accent) 12%, var(--vc-bg));
	--vc-accent-softer: color-mix(in srgb, var(--vc-accent) 6%, var(--vc-bg));
	--vc-accent-line: color-mix(in srgb, var(--vc-accent) 32%, transparent);
	--vc-surface: color-mix(in srgb, var(--vc-border) 22%, var(--vc-bg));
	--vc-surface-2: color-mix(in srgb, var(--vc-border) 42%, var(--vc-bg));
	--vc-hairline: color-mix(in srgb, var(--vc-border) 72%, transparent);
	--vc-event-bg: color-mix(in srgb, var(--vc-accent) 10%, var(--vc-bg));
	--vc-event-text: var(--vc-text);
	--vc-soldout-bg: var(--twp-pill-soldout-bg, #fdecea);
	--vc-soldout-text: var(--twp-pill-soldout-ink, #b42318);
	--vc-ok-bg: var(--twp-pill-available-bg, #e7f7ee);
	--vc-ok-text: var(--twp-pill-available-ink, #067647);
	--vc-today: color-mix(in srgb, var(--vc-accent) 9%, var(--vc-bg));
	--vc-shadow: var(--twp-shadow, 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06));
	--vc-shadow-hover: var(--twp-shadow-hover, 0 8px 16px rgba(16, 24, 40, .08), 0 24px 48px rgba(16, 24, 40, .14));
	--vc-shadow-pill: 0 1px 2px color-mix(in srgb, var(--vc-accent) 18%, transparent);
	--vc-ease: cubic-bezier(.2, .8, .28, 1);

	background: var(--vc-bg);
	border: 1px solid var(--vc-border);
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow);
	color: var(--vc-text);
	font-family: inherit;
	-webkit-font-smoothing: antialiased;
	margin: 0 0 1.75em;
	max-width: 100%;
	overflow: hidden;
	padding: clamp(0.9em, 2.2vw, 1.5em);
	position: relative;
}

/* Soft accent glow across the top edge - premium without being loud. */
.venuera-calendar::before {
	background: linear-gradient(90deg, transparent, var(--vc-accent), transparent);
	content: "";
	height: 2px;
	left: 0;
	opacity: 0.55;
	position: absolute;
	right: 0;
	top: 0;
}

/* =====================================================================
 * Header / toolbar
 * ================================================================== */

.venuera-calendar-header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.85em 1em;
	justify-content: space-between;
	margin-bottom: 1.1em;
}

/* Themes frequently underline every content link, recolour :hover, and set a
   global link colour that beats our unstyled anchors. The calendar's links are
   chrome, not prose, so opt them out explicitly AND re-anchor their colour to
   the active preset token.

   The colour reset needs !important: the Venuera theme ships
   `.pg-content a { color: var(--violet) }`, which has the same specificity as
   our scoped rule but is enqueued after the calendar stylesheet, so it wins on
   source order. Without this every anchor (Prev/Next, TODAY, the view switch,
   month-grid event pills) renders in the theme's link colour and the
   minimal/bold/dark palettes are silently ignored. Rules below that need a
   different colour (accent hover, active pill ink, sold-out) also declare
   !important so they still win over this reset.

   :visited is deliberately NOT listed here. Adding it raises this selector to
   specificity (0,2,1), which outranks the intentional overrides below such as
   `.venuera-calendar .venuera-calendar-cta` (0,2,0) - both !important, so
   specificity decides. The result was that once a visitor had opened an event,
   its "Get tickets" button rendered body-text dark on the accent fill instead
   of accent ink. Calendar links must not change colour after being visited, and
   neither this stylesheet nor the theme defines any other :visited colour, so
   omitting it leaves visited links on the normal cascade - which is exactly the
   unvisited appearance we want. */
.venuera-calendar a,
.venuera-calendar a:hover,
.venuera-calendar a:focus,
.venuera-calendar a:active {
	box-shadow: none;
	color: var(--vc-text) !important;
	text-decoration: none !important;
	text-underline-offset: initial;
}

/* Chrome links that intentionally sit at a quieter tone than body text. */
.venuera-calendar .venuera-calendar-today,
.venuera-calendar .venuera-calendar-view-link {
	color: var(--vc-muted) !important;
}

/* In the block editor preview the nav controls and view switch render as inert
   <span>s instead of <a>s (their real hrefs would point at the block-renderer
   REST route and 401 on click). They must still look identical to the live
   controls, so opt them out of pointer affordances only. */
.venuera-calendar .is-inert {
	cursor: default;
	pointer-events: none;
}

.venuera-calendar-nav {
	align-items: center;
	display: flex;
	gap: 0.45em;
	min-width: 0;
}

.venuera-calendar-controls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.venuera-calendar-nav-prev,
.venuera-calendar-nav-next {
	align-items: center;
	background: var(--vc-surface);
	border: 1px solid var(--vc-hairline);
	border-radius: 50%;
	color: var(--vc-text);
	cursor: pointer;
	display: inline-flex;
	font-size: 1rem;
	height: 2.15em;
	justify-content: center;
	line-height: 1;
	padding: 0;
	text-decoration: none;
	transition: background-color .18s var(--vc-ease), color .18s var(--vc-ease), transform .18s var(--vc-ease), box-shadow .18s var(--vc-ease);
	width: 2.15em;
}

/* Every hover/active rule below targets an <a> (or its children), so each one
   is scoped with .venuera-calendar to out-specify the anchor colour reset at
   the top of this file. Without that scoping the reset wins on source order and
   these accent/ink colours silently stop applying. */
.venuera-calendar .venuera-calendar-nav-prev:hover,
.venuera-calendar .venuera-calendar-nav-next:hover,
.venuera-calendar .venuera-calendar-nav-prev:focus-visible,
.venuera-calendar .venuera-calendar-nav-next:focus-visible {
	background: var(--vc-accent) !important;
	border-color: var(--vc-accent);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--vc-accent) 32%, transparent);
	color: var(--vc-accent-ink) !important;
	transform: translateY(-1px);
}

.venuera-calendar-nav-prev:active,
.venuera-calendar-nav-next:active {
	transform: translateY(0) scale(.94);
}

.venuera-calendar-title {
	align-items: baseline;
	display: inline-flex;
	gap: 0.4em;
	margin: 0 0.25em;
	min-width: 0;
}

.venuera-calendar-title-main {
	font-size: clamp(1.1rem, 2.4vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	white-space: nowrap;
}

.venuera-calendar-title-sub {
	color: var(--vc-muted);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.venuera-calendar-today {
	background: transparent;
	border: 1px solid var(--vc-hairline);
	border-radius: 999px;
	color: var(--vc-muted);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	margin-left: 0.35em;
	padding: 0.5em 0.9em;
	text-decoration: none;
	text-transform: uppercase;
	transition: border-color .18s var(--vc-ease), color .18s var(--vc-ease), background-color .18s var(--vc-ease);
}

.venuera-calendar .venuera-calendar-today:hover,
.venuera-calendar .venuera-calendar-today:focus-visible {
	background: var(--vc-accent-soft);
	border-color: var(--vc-accent);
	color: var(--vc-accent) !important;
}

/* ---- segmented view switch ---- */
.venuera-calendar-views {
	align-items: center;
	background: var(--vc-surface);
	border: 1px solid var(--vc-hairline);
	border-radius: 999px;
	display: inline-flex;
	gap: 2px;
	padding: 3px;
}

.venuera-calendar-view-link {
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--vc-muted);
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.55em 1.05em;
	text-decoration: none;
	transition: background-color .2s var(--vc-ease), color .2s var(--vc-ease), box-shadow .2s var(--vc-ease);
	white-space: nowrap;
}

.venuera-calendar .venuera-calendar-view-link:hover {
	background: color-mix(in srgb, var(--vc-accent) 10%, transparent);
	color: var(--vc-accent) !important;
}

.venuera-calendar .venuera-calendar-view-link.is-active,
.venuera-calendar .venuera-calendar-view-link.is-active:hover,
.venuera-calendar .venuera-calendar-view-link.is-active:focus {
	background: var(--vc-accent) !important;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--vc-accent) 35%, transparent);
	color: var(--vc-accent-ink) !important;
}

/* ---- category filter (scalable dropdown) ---- */
.venuera-calendar-categories {
	align-items: center;
	display: flex;
	gap: 0.35em;
	margin: 0;
}

.venuera-calendar-cat-select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--vc-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 0.85em center;
	background-repeat: no-repeat;
	background-size: 11px;
	border: 1px solid var(--vc-hairline);
	border-radius: 999px;
	color: var(--vc-text);
	cursor: pointer;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1;
	max-width: 220px;
	padding: 0.68em 2.2em 0.68em 1em;
	text-overflow: ellipsis;
	transition: border-color .18s var(--vc-ease), background-color .18s var(--vc-ease), box-shadow .18s var(--vc-ease);
}

.venuera-calendar-cat-select:hover,
.venuera-calendar-cat-select:focus {
	border-color: var(--vc-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc-accent) 14%, transparent);
	outline: none;
}

.venuera-calendar-cat-apply {
	background: var(--vc-accent);
	border: 0;
	border-radius: 999px;
	color: var(--vc-accent-ink);
	cursor: pointer;
	font: inherit;
	font-size: 0.8rem;
	font-weight: 700;
	padding: 0.6em 1em;
}

/* Legacy label hook kept for back-compat (markup uses screen-reader-text). */
.venuera-calendar-cat-label {
	color: var(--vc-muted);
	font-size: 0.8rem;
	margin-right: 0.35em;
}

/* =====================================================================
 * Month grid
 * ================================================================== */

.venuera-calendar-body {
	position: relative;
}

.venuera-calendar-month-grid {
	border-collapse: separate;
	border-spacing: 4px;
	margin: 0;
	table-layout: fixed;
	width: 100%;
}

/* Themes routinely style `table td` with generous padding and borders (the
   block themes' table styles do). Day cells are a layout grid, not tabular
   prose, so reset those with matching specificity - otherwise the padding
   eats the room event pills need. */
.venuera-calendar .venuera-calendar-month-grid tr,
.venuera-calendar .venuera-calendar-month-grid thead,
.venuera-calendar .venuera-calendar-month-grid tbody {
	background: none;
	border: 0;
}

.venuera-calendar-month-grid th {
	background: transparent;
	border: 0;
	color: var(--vc-muted);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.2em 0.3em 0.6em;
	text-align: center;
	text-transform: uppercase;
}

/* The theme ships `.pg-content thead th { background: var(--paper-soft) }` and
   `.pg-content th, .pg-content td { border: 1px solid var(--line) }` at
   specificity (0,2,0), which beats the single-class reset above. That paints a
   light strip and light hairlines over the calendar - clearly wrong in the
   dark preset, and off-palette in bold. Re-assert the calendar's own values
   with a selector the theme cannot outrank. */
.venuera-calendar .venuera-calendar-month-grid thead th,
.venuera-calendar .venuera-calendar-week-grid thead th {
	background: transparent;
	border: 0;
	color: var(--vc-muted);
}

.venuera-calendar .venuera-calendar-grid th,
.venuera-calendar .venuera-calendar-grid td {
	border-color: var(--vc-hairline);
}

.venuera-calendar-dow-short {
	display: none;
}

.venuera-calendar-month-grid td {
	/* fallback, overridden by the specificity-matched rule below */
	background: var(--vc-bg);
	border: 1px solid var(--vc-hairline);
	border-radius: var(--vc-radius-sm);
	/* On table cells `height` behaves as a minimum, so dense days still grow
	   (there is deliberately no overflow:hidden here) while empty rows keep a
	   consistent rhythm. `min-height` is ignored on table-cell, hence this. */
	height: 116px;
	padding: 0.45em 0.45em 0.5em;
	position: relative;
	transition: background-color .18s var(--vc-ease), border-color .18s var(--vc-ease), box-shadow .18s var(--vc-ease), transform .18s var(--vc-ease);
	vertical-align: top;
	width: 14.28%;
}

.venuera-calendar .venuera-calendar-month-grid td,
.venuera-calendar .venuera-calendar-month-grid th {
	padding: 0.45em 0.4em 0.5em;
}

.venuera-calendar .venuera-calendar-month-grid th {
	padding-bottom: 0.6em;
	padding-top: 0.2em;
}

.venuera-calendar-month-grid td.has-events:hover {
	background: var(--vc-accent-softer);
	border-color: var(--vc-accent-line);
	box-shadow: var(--vc-shadow);
	transform: translateY(-2px);
	z-index: 2;
}

.venuera-calendar-month-grid td.is-empty {
	background: color-mix(in srgb, var(--vc-border) 10%, var(--vc-bg));
	border-color: color-mix(in srgb, var(--vc-border) 45%, transparent);
}

.venuera-calendar-month-grid td.is-outside {
	background: transparent;
	border-color: transparent;
	opacity: 0.42;
}

.venuera-calendar-month-grid td.is-outside .venuera-calendar-day-number {
	font-weight: 500;
}

.venuera-calendar-month-grid td.is-today {
	background: var(--vc-today);
	border-color: var(--vc-accent);
	box-shadow: 0 0 0 1px var(--vc-accent), 0 6px 18px color-mix(in srgb, var(--vc-accent) 18%, transparent);
	opacity: 1;
}

/* An empty "today" cell must not render as a heavy filled block - mark it with
   the day-number circle only so it stays clean on tall (mobile) rows. */
.venuera-calendar-month-grid td.is-today.is-empty {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}

.venuera-calendar-day-header {
	align-items: center;
	display: flex;
	gap: 0.35em;
	justify-content: space-between;
	margin-bottom: 0.42em;
}

.venuera-calendar-day-number {
	color: var(--vc-muted);
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
	margin-left: auto;
}

.venuera-calendar-day-count {
	background: var(--vc-accent-soft);
	border-radius: 999px;
	color: var(--vc-accent);
	font-size: 0.62rem;
	font-weight: 800;
	line-height: 1;
	margin-left: 0;
	margin-right: auto;
	order: -1;
	padding: 0.3em 0.5em;
}

.venuera-calendar-month-grid td.is-today .venuera-calendar-day-number {
	align-items: center;
	background: var(--vc-accent);
	border-radius: 50%;
	color: var(--vc-accent-ink);
	display: inline-flex;
	height: 1.85em;
	justify-content: center;
	width: 1.85em;
}

.venuera-calendar-day-events {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* =====================================================================
 * Event pills
 * ================================================================== */

.venuera-calendar-event {
	background: var(--vc-event-bg);
	border: 1px solid transparent;
	border-radius: 7px;
	box-shadow: var(--vc-shadow-pill);
	color: var(--vc-event-text);
	display: block;
	font-size: 0.75rem;
	line-height: 1.32;
	overflow: hidden;
	padding: 0.34em 0.5em 0.34em 0.62em;
	position: relative;
	text-decoration: none;
	transition: background-color .16s var(--vc-ease), color .16s var(--vc-ease), transform .16s var(--vc-ease), box-shadow .16s var(--vc-ease);
}

/* Accent spine instead of a hard border-left: survives colour inversion. */
.venuera-calendar-event::before {
	background: var(--vc-accent);
	border-radius: 3px;
	bottom: 3px;
	content: "";
	left: 0;
	position: absolute;
	top: 3px;
	transition: background-color .16s var(--vc-ease);
	width: 3px;
}

.venuera-calendar-event-main {
	display: block;
	min-width: 0;
}

.venuera-calendar-event-time {
	color: var(--vc-accent);
	display: block;
	font-size: 0.7rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	transition: color .16s var(--vc-ease);
}

.venuera-calendar-event-title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1.28;
	overflow: hidden;
	/* Break on spaces first; only split a word when it genuinely cannot fit. */
	overflow-wrap: break-word;
	word-break: normal;
}

.venuera-calendar-event-cat {
	color: var(--vc-muted);
	display: block;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	margin-top: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	transition: color .16s var(--vc-ease);
	white-space: nowrap;
}

.venuera-calendar a.venuera-calendar-event:hover,
.venuera-calendar a.venuera-calendar-event:focus-visible {
	background: var(--vc-accent) !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--vc-accent) 38%, transparent);
	color: var(--vc-accent-ink) !important;
	transform: translateY(-1px);
}

.venuera-calendar-event:hover::before,
.venuera-calendar-event:focus-visible::before {
	background: var(--vc-accent-ink);
}

.venuera-calendar-event:hover .venuera-calendar-event-time,
.venuera-calendar-event:hover .venuera-calendar-event-cat,
.venuera-calendar-event:focus-visible .venuera-calendar-event-time,
.venuera-calendar-event:focus-visible .venuera-calendar-event-cat {
	color: var(--vc-accent-ink) !important;
	opacity: 0.92;
}

.venuera-calendar-event:active {
	transform: translateY(0) scale(.985);
}

/* The sold-out pill is itself an <a>, so it has to out-declare the anchor
   colour reset above to keep its warning tone. */
.venuera-calendar a.venuera-calendar-event.is-soldout {
	background: var(--vc-soldout-bg);
	color: var(--vc-soldout-text) !important;
}

.venuera-calendar-event.is-soldout::before {
	background: var(--vc-soldout-text);
}

.venuera-calendar-event.is-soldout .venuera-calendar-event-time {
	color: var(--vc-soldout-text);
}

.venuera-calendar-event.is-soldout .venuera-calendar-event-title {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--vc-soldout-text) 55%, transparent);
}

.venuera-calendar a.venuera-calendar-event.is-soldout:hover,
.venuera-calendar a.venuera-calendar-event.is-soldout:focus-visible {
	background: var(--vc-soldout-text) !important;
	box-shadow: 0 4px 14px color-mix(in srgb, var(--vc-soldout-text) 32%, transparent);
	color: #fff !important;
}

.venuera-calendar-event.is-soldout:hover::before,
.venuera-calendar-event.is-soldout:focus-visible::before {
	background: #fff;
}

.venuera-calendar-event.is-soldout:hover .venuera-calendar-event-time,
.venuera-calendar-event.is-soldout:hover .venuera-calendar-event-cat {
	color: #fff !important;
}

/* Progressive reveal used by the "+N more" toggle. */
.venuera-calendar-event.is-revealing {
	animation: vc-pill-in .24s var(--vc-ease) both;
}

@keyframes vc-pill-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

/* ---- "+N more" toggle ---- */
.venuera-calendar-more {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--vc-accent);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.68rem;
	font-weight: 800;
	gap: 0.3em;
	letter-spacing: 0.02em;
	margin-top: 3px;
	padding: 0.24em 0.4em;
	text-align: left;
	transition: background-color .16s var(--vc-ease), color .16s var(--vc-ease);
	width: fit-content;
}

.venuera-calendar-more:hover,
.venuera-calendar-more:focus-visible {
	background: var(--vc-accent-soft);
	text-decoration: none;
}

.venuera-calendar-more svg {
	transition: transform .2s var(--vc-ease);
}

.venuera-calendar-more[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

/* =====================================================================
 * Week grid
 * ================================================================== */

.venuera-calendar-week-grid {
	background: var(--vc-hairline);
	border: 1px solid var(--vc-hairline);
	border-radius: var(--vc-radius-sm);
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(7, 1fr);
	overflow: hidden;
}

.venuera-calendar-week-grid .venuera-calendar-day {
	background: var(--vc-bg);
	border: 0;
	display: flex;
	flex-direction: column;
	min-height: 175px;
	padding: 0.7em 0.6em;
	transition: background-color .18s var(--vc-ease);
}

.venuera-calendar-week-grid .venuera-calendar-day.has-events:hover {
	background: var(--vc-accent-softer);
}

.venuera-calendar-week-grid .venuera-calendar-day.is-today {
	background: var(--vc-today);
	box-shadow: inset 0 3px 0 var(--vc-accent);
}

.venuera-calendar-week-grid .venuera-calendar-day-header {
	align-items: baseline;
	border-bottom: 1px solid var(--vc-hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	justify-content: flex-start;
	margin-bottom: 0.6em;
	padding-bottom: 0.5em;
}

.venuera-calendar-day-name {
	color: var(--vc-muted);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.venuera-calendar-week-grid .venuera-calendar-day-number {
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-left: auto;
}

.venuera-calendar-week-grid .venuera-calendar-day.is-today .venuera-calendar-day-number {
	color: var(--vc-accent);
}

.venuera-calendar-day-today-flag {
	background: var(--vc-accent);
	border-radius: 999px;
	color: var(--vc-accent-ink);
	font-size: 0.56rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1;
	order: 3;
	padding: 0.32em 0.55em;
	text-transform: uppercase;
	width: fit-content;
}

.venuera-calendar-week-grid .venuera-calendar-day-events {
	flex: 1 1 auto;
	gap: 4px;
}

.venuera-calendar-day-blank {
	color: var(--vc-muted);
	font-size: 0.9rem;
	opacity: 0.35;
	text-align: center;
	user-select: none;
}

/* =====================================================================
 * List view
 * ================================================================== */

.venuera-calendar-list {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.venuera-calendar-list-item {
	align-items: center;
	background: var(--vc-bg);
	border: 1px solid var(--vc-hairline);
	border-radius: var(--vc-radius-sm);
	display: flex;
	gap: 1em;
	padding: 0.75em 0.9em;
	position: relative;
	transition: border-color .2s var(--vc-ease), box-shadow .2s var(--vc-ease), transform .2s var(--vc-ease), background-color .2s var(--vc-ease);
}

.venuera-calendar-list-item::before {
	background: var(--vc-accent);
	border-radius: 999px;
	bottom: 12px;
	content: "";
	left: 0;
	opacity: 0;
	position: absolute;
	top: 12px;
	transition: opacity .2s var(--vc-ease);
	width: 3px;
}

.venuera-calendar-list-item:hover {
	background: var(--vc-accent-softer);
	border-color: var(--vc-accent-line);
	box-shadow: var(--vc-shadow-hover);
	transform: translateY(-2px);
}

.venuera-calendar-list-item:hover::before {
	opacity: 1;
}

.venuera-calendar-list-item.is-today {
	border-color: var(--vc-accent);
}

.venuera-calendar-list-item.is-today::before {
	opacity: 1;
}

.venuera-calendar-list-item.is-soldout {
	opacity: 0.88;
}

/* Sold-out events strike their title in the month and week grids; the list view
   must match. Two things have to be out-declared here: the global
   `.venuera-calendar a { text-decoration: none !important }` reset near the top
   of this file, and `.venuera-calendar-list-title a { text-decoration: none }`
   below - hence the extra class depth plus !important. */
.venuera-calendar .venuera-calendar-list-item.is-soldout .venuera-calendar-list-title a {
	text-decoration: line-through color-mix(in srgb, var(--vc-soldout-text) 55%, transparent) 1px !important;
}

.venuera-calendar-date-box {
	align-items: center;
	background: var(--vc-accent-soft);
	border: 1px solid transparent;
	border-radius: var(--vc-radius-sm);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 1px;
	justify-content: center;
	line-height: 1;
	min-width: 62px;
	padding: 0.55em 0.6em;
	text-align: center;
	transition: background-color .2s var(--vc-ease), border-color .2s var(--vc-ease);
}

.venuera-calendar-date-box.is-today {
	background: var(--vc-accent);
	border-color: var(--vc-accent);
}

.venuera-calendar-date-box.is-today .venuera-calendar-day-dow,
.venuera-calendar-date-box.is-today .venuera-calendar-day-num,
.venuera-calendar-date-box.is-today .venuera-calendar-day-mon {
	color: var(--vc-accent-ink);
}

.venuera-calendar-day-dow {
	color: var(--vc-muted);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.venuera-calendar-day-num {
	color: var(--vc-accent);
	font-size: 1.55rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.venuera-calendar-day-mon {
	color: var(--vc-muted);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.venuera-calendar-list-thumb {
	border-radius: var(--vc-radius-sm);
	display: block;
	flex: 0 0 auto;
	height: 60px;
	overflow: hidden;
	width: 84px;
}

.venuera-calendar-list-thumb img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .35s var(--vc-ease);
	width: 100%;
}

.venuera-calendar-list-item:hover .venuera-calendar-list-thumb img {
	transform: scale(1.06);
}

.venuera-calendar-list-info {
	flex: 1 1 auto;
	min-width: 0;
}

.venuera-calendar-list-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em;
	margin-bottom: 0.28em;
}

.venuera-calendar-list-badges:empty {
	display: none;
}

.venuera-calendar-badge {
	border-radius: 999px;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	line-height: 1;
	padding: 0.34em 0.6em;
	text-transform: uppercase;
	white-space: nowrap;
}

.venuera-calendar-badge.is-cat {
	background: var(--vc-surface-2);
	color: var(--vc-muted);
}

.venuera-calendar-badge.is-now {
	background: var(--vc-accent);
	color: var(--vc-accent-ink);
}

.venuera-calendar-badge.is-soon {
	background: var(--vc-accent-soft);
	color: var(--vc-accent);
}

.venuera-calendar-badge.is-recurring {
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--vc-hairline);
	color: var(--vc-muted);
}

.venuera-calendar-badge.is-out {
	background: var(--vc-soldout-bg);
	color: var(--vc-soldout-text);
}

.venuera-calendar-list-title {
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 0 0 0.18em;
}

.venuera-calendar-list-title a {
	/* Themes commonly force their own link colour on content links; the list
	   title must read as a heading until hovered. */
	color: var(--vc-text) !important;
	text-decoration: none;
	transition: color .16s var(--vc-ease);
}

.venuera-calendar-list-title a:hover,
.venuera-calendar-list-title a:focus-visible {
	color: var(--vc-accent) !important;
}

/* List view has no period to page through - hide the arrows there. */
.venuera-calendar-view-list .venuera-calendar-nav-prev,
.venuera-calendar-view-list .venuera-calendar-nav-next {
	display: none;
}

.venuera-calendar-view-list .venuera-calendar-title {
	margin-left: 0;
}

.venuera-calendar-list-meta {
	color: var(--vc-muted);
	display: block;
	font-size: 0.82rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.venuera-calendar-list-time {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.venuera-calendar-list-action {
	flex: 0 0 auto;
}

/* Scoped with .venuera-calendar so it outranks the anchor colour reset near the
   top of this file (which is also !important but only one class deep) - the CTA
   sits on the accent fill and must use the accent ink, not body text colour. */
.venuera-calendar .venuera-calendar-cta {
	align-items: center;
	background: var(--vc-accent);
	border: 0;
	border-radius: 999px;
	color: var(--vc-accent-ink) !important;
	display: inline-flex;
	font-size: 0.8rem;
	font-weight: 700;
	gap: 0.4em;
	line-height: 1;
	padding: 0.7em 1.1em;
	text-decoration: none;
	transition: box-shadow .2s var(--vc-ease), transform .2s var(--vc-ease), filter .2s var(--vc-ease);
	white-space: nowrap;
}

.venuera-calendar-cta svg {
	transition: transform .2s var(--vc-ease);
}

.venuera-calendar .venuera-calendar-cta:hover,
.venuera-calendar .venuera-calendar-cta:focus-visible {
	box-shadow: 0 6px 18px color-mix(in srgb, var(--vc-accent) 40%, transparent);
	color: var(--vc-accent-ink) !important;
	filter: saturate(1.1);
	transform: translateY(-1px);
}

.venuera-calendar-cta:hover svg {
	transform: translateX(3px);
}

.venuera-calendar-cta:active {
	transform: translateY(0) scale(.97);
}

.venuera-calendar .venuera-calendar-list-item.is-soldout .venuera-calendar-cta {
	background: var(--vc-surface-2);
	color: var(--vc-muted) !important;
}

.venuera-calendar .venuera-calendar-list-item.is-soldout .venuera-calendar-cta:hover {
	box-shadow: none;
	color: var(--vc-text) !important;
}

/* Legacy hook: theme .button styling inside the list action, if ever used. */
.venuera-calendar-list-action .button,
.venuera-calendar-list-action a.button {
	margin: 0;
}

/* =====================================================================
 * Empty states
 * ================================================================== */

.venuera-calendar-empty {
	align-items: center;
	color: var(--vc-muted);
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	padding: 2.4em 1em 2.1em;
	text-align: center;
}

.venuera-calendar-empty-icon {
	align-items: center;
	background: var(--vc-accent-soft);
	border-radius: 50%;
	color: var(--vc-accent);
	display: inline-flex;
	height: 58px;
	justify-content: center;
	margin-bottom: 0.6em;
	width: 58px;
}

.venuera-calendar-empty-title {
	color: var(--vc-text);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

.venuera-calendar-empty-text {
	font-size: 0.86rem;
	margin: 0;
	max-width: 42ch;
}

/* Month/week empty state floats over the (otherwise blank) grid so the grid
   structure stays visible without duplicating vertical space. */
.venuera-calendar-view-month .venuera-calendar-body,
.venuera-calendar-view-week .venuera-calendar-body {
	position: relative;
}

.venuera-calendar-view-month .venuera-calendar-empty,
.venuera-calendar-view-week .venuera-calendar-empty {
	background: color-mix(in srgb, var(--vc-bg) 88%, transparent);
	border-radius: var(--vc-radius-sm);
	inset: 0;
	justify-content: center;
	position: absolute;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	pointer-events: none;
}

/* =====================================================================
 * Hover tooltip (full event details)
 * ================================================================== */

.venuera-calendar-tooltip {
	background: var(--twp-card, #ffffff);
	border: 1px solid var(--twp-border, #e7e9ee);
	border-radius: var(--twp-radius-sm, 12px);
	box-shadow: 0 18px 44px rgba(16, 24, 40, .22), 0 2px 10px rgba(16, 24, 40, .10);
	color: var(--twp-text, #11151c);
	font-family: inherit;
	max-width: 330px;
	min-width: 252px;
	opacity: 0;
	overflow: hidden;
	/* Non-blocking card: it never intercepts pointer events, so hovering a
	   sibling event pill in the same day cell still works. */
	pointer-events: none;
	position: fixed;
	transform: translateY(6px) scale(.985);
	transform-origin: top center;
	transition: opacity .18s cubic-bezier(.2, .8, .28, 1), transform .18s cubic-bezier(.2, .8, .28, 1);
	visibility: hidden;
	z-index: 99999;
}

.venuera-calendar-tooltip.is-visible {
	opacity: 1;
	transform: none;
	visibility: visible;
}

.venuera-calendar-tooltip.is-above {
	transform-origin: bottom center;
}

.venuera-calendar-tooltip-media {
	background: color-mix(in srgb, var(--twp-accent, #4f46e5) 12%, var(--twp-card, #ffffff));
	display: block;
	height: 152px;
	object-fit: cover;
	width: 100%;
}

.venuera-calendar-tooltip-body {
	padding: 14px 16px 16px;
}

/* The tooltip lives OUTSIDE .venuera-calendar (it is appended to <body>), so it
   never benefits from the scoped resets above and every text element inside it
   must declare its own colour from the preset tokens. Anything left to
   inheritance loses to bare theme element selectors: the Venuera theme ships
   `h1, h2, h3, h4 { color: var(--ink) }` at specificity (0,0,1), which beat the
   title's inherited light colour and painted it near-black (#14121f) on the
   dark preset's #121a2e card - invisible. */
.venuera-calendar-tooltip-title {
	color: var(--twp-text, #11151c);
	font-size: 1.04rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.25;
	margin: 0 0 0.55em;
}

/* Belt and braces for the same class of bug: any heading, link, emphasis or
   bare span the tooltip markup may grow later inherits the card's text colour
   instead of the theme's. Scoped one class deep so it still loses to the
   intentional colours declared below (rows, strong, status pills). */
.venuera-calendar-tooltip h1,
.venuera-calendar-tooltip h2,
.venuera-calendar-tooltip h3,
.venuera-calendar-tooltip h4,
.venuera-calendar-tooltip h5,
.venuera-calendar-tooltip h6,
.venuera-calendar-tooltip p,
.venuera-calendar-tooltip a,
.venuera-calendar-tooltip b,
.venuera-calendar-tooltip em,
.venuera-calendar-tooltip small {
	color: var(--twp-text, #11151c);
}

.venuera-calendar-tooltip-row {
	align-items: baseline;
	color: var(--twp-muted, #667085);
	display: flex;
	font-size: 0.83rem;
	line-height: 1.45;
	margin: 0.24em 0;
}

.venuera-calendar-tooltip-row svg {
	flex: 0 0 auto;
	color: var(--twp-accent, #4f46e5);
	margin-right: 0.5em;
	margin-top: 0.1em;
}

.venuera-calendar-tooltip-row strong {
	color: var(--twp-text, #11151c);
	font-weight: 600;
	margin-left: 0.35em;
}

.venuera-calendar-tooltip-status {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	margin: 0.7em 0 0;
	padding: 0.36em 0.8em;
	text-transform: uppercase;
}

.venuera-calendar-tooltip-status.is-soldout {
	background: var(--twp-pill-soldout-bg, #fdecea);
	color: var(--twp-pill-soldout-ink, #b42318);
}

.venuera-calendar-tooltip-status.is-available {
	background: var(--twp-pill-available-bg, #e7f7ee);
	color: var(--twp-pill-available-ink, #067647);
}

/* Neutral state: the event has no ticket product attached, so it is neither
   "available" (green, implies you can buy) nor "sold out" (red). Uses the
   card's own muted tokens so it stays legible in every preset. */
.venuera-calendar-tooltip-status.is-info {
	background: color-mix(in srgb, var(--twp-muted, #667085) 14%, transparent);
	color: var(--twp-muted, #667085);
}

/* =====================================================================
 * Focus visibility (keyboard users)
 * ================================================================== */

.venuera-calendar a:focus-visible,
.venuera-calendar button:focus-visible,
.venuera-calendar select:focus-visible {
	outline: 2px solid var(--vc-accent);
	outline-offset: 2px;
}

/* =====================================================================
 * Responsive
 * ================================================================== */

@media (max-width: 900px) {
	.venuera-calendar-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.venuera-calendar-controls {
		width: 100%;
	}

	.venuera-calendar-cat-select {
		flex: 1 1 auto;
		max-width: none;
	}
}

@media (max-width: 782px) {
	.venuera-calendar-month-grid td {
		height: 92px;
	}

	.venuera-calendar-event-cat {
		display: none;
	}
}

@media (max-width: 640px) {
	.venuera-calendar {
		padding: 0.9em 0.7em;
	}

	.venuera-calendar-month-grid {
		border-spacing: 2px;
	}

	.venuera-calendar-month-grid td {
		height: 52px;
		padding: 0.2em 0.15em;
	}

	/* The desktop rule `.venuera-calendar .venuera-calendar-month-grid td`
	   (specificity 0,2,1) beats the single-class mobile override above, so the
	   6px desktop side padding survives on phones. On a 375px screen each day
	   cell is only ~44px wide, and that padding leaves the time chip ~24px of
	   content box for a ~28px "10:00" string - the last character gets clipped.
	   Re-declare the tight padding at matching specificity. */
	.venuera-calendar .venuera-calendar-month-grid td {
		padding: 0.2em 0.1em;
	}

	/* Keep the chip on one line and let it use the full cell width. */
	.venuera-calendar-month-grid .venuera-calendar-event-time {
		overflow: visible;
		white-space: nowrap;
	}

	/* On a phone the month grid collapses each event to a compact time chip so
	   all 7 columns and every start time stay visible - no clipping, no scroll.
	   Full titles live in the Week and List views. */
	.venuera-calendar-month-grid .venuera-calendar-event {
		font-size: 0.62rem;
		padding: 0.2em 0.25em;
		text-align: center;
	}

	.venuera-calendar-month-grid .venuera-calendar-event-title,
	.venuera-calendar-month-grid .venuera-calendar-event-cat {
		display: none;
	}

	.venuera-calendar-month-grid .venuera-calendar-event-time {
		font-weight: 700;
	}

	.venuera-calendar-dow-long {
		display: none;
	}

	.venuera-calendar-dow-short {
		display: inline;
	}

	.venuera-calendar-event {
		font-size: 0.66rem;
		padding: 0.26em 0.3em 0.26em 0.45em;
	}

	.venuera-calendar-event-main {
		display: block;
	}

	.venuera-calendar-event-time {
		display: block;
		font-size: 0.62rem;
	}

	.venuera-calendar-week-grid {
		grid-template-columns: 1fr;
	}

	.venuera-calendar-week-grid .venuera-calendar-day {
		min-height: 0;
	}

	.venuera-calendar-week-grid .venuera-calendar-day.is-empty {
		display: none;
	}

	.venuera-calendar-week-grid .venuera-calendar-day-header {
		margin-bottom: 0.45em;
	}

	.venuera-calendar-list-item {
		align-items: flex-start;
		flex-wrap: wrap;
	}

	.venuera-calendar-list-thumb {
		display: none;
	}

	.venuera-calendar-list-action {
		width: 100%;
	}

	.venuera-calendar-cta {
		justify-content: center;
		width: 100%;
	}

	.venuera-calendar-tooltip {
		max-width: min(330px, calc(100vw - 24px));
	}
}

/* =====================================================================
 * Motion & contrast preferences
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.venuera-calendar *,
	.venuera-calendar-tooltip {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.venuera-calendar-list-item:hover,
	.venuera-calendar-month-grid td.has-events:hover,
	.venuera-calendar-event:hover,
	.venuera-calendar-cta:hover {
		transform: none !important;
	}
}

@media print {
	.venuera-calendar {
		box-shadow: none;
	}

	.venuera-calendar-controls,
	.venuera-calendar-nav-prev,
	.venuera-calendar-nav-next,
	.venuera-calendar-today,
	.venuera-calendar-more {
		display: none !important;
	}
}