/*
 * VH Events: default styles for the plugin's own templates.
 *
 * A theme restyles them by setting these custom properties (on :root or any
 * ancestor); every one has a fallback here, so stylesheet order never matters:
 *
 *   --vh-events-accent        links, the date line           (currentColor)
 *   --vh-events-text          body text                       (inherit)
 *   --vh-events-muted         secondary text                  (#555)
 *   --vh-events-border        card and table borders          (#d8d8d8)
 *   --vh-events-surface       card background                 (transparent)
 *   --vh-events-outside       month grid days of other months (rgba(0, 0, 0, 0.03))
 *   --vh-events-card-background  month grid hover card         (#fff)
 *   --vh-events-card-width    month grid hover card           (20rem)
 *   --vh-events-heading-font  card and event titles           (inherit)
 *   --vh-events-heading-color month grid hover card title     (inherit)
 *   --vh-events-radius        card corners                    (6px)
 *   --vh-events-gap           space between cards             (1.5rem)
 *   --vh-events-card-min      narrowest a card gets           (16rem)
 *   --vh-events-max-width     the archive and single page     (72rem)
 *   --vh-events-padding       around them                     (2rem 1rem 3rem)
 *
 * A category's colours (set on its edit screen) arrive on each of its month
 * calendar events and nav links as --vh-event-bg and --vh-event-fg, with the
 * --colored modifier class.
 *
 * Anything more is a template override (vh-events/ in the theme), or drop this
 * file with add_filter( 'vh_events_enqueue_css', '__return_false' ), in which
 * case the theme must provide .vh-events-sr itself.
 */

/* Visually hidden, read by screen readers ("to" in date ranges, new-tab notes) */
.vh-events-sr {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}


/* PAGE: the archive and single templates' <main>, which a theme's own page
   wrapper does not reach */

.vh-events {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--vh-events-max-width, 72rem);
	padding: var(--vh-events-padding, 2rem 1rem 3rem);
}


/* LISTS: a grid of cards that drops to one column on narrow screens */

.vh-events-list {
	display: grid;
	gap: var(--vh-events-gap, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--vh-events-card-min, 16rem)), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A theme's content-list rules (bullets, indents) must not reach the cards.
   Responsive Pro indents with an ID selector, #content ul li { margin-left: 2em },
   which no class selector outranks. :not(#vh-events-none) matches every item
   but carries an ID's weight, so this wins without !important, and a theme
   can still override it with an ID selector of its own. */
.vh-events-list > .vh-events-list__item:not(#vh-events-none) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-events-list > .vh-events-list__item::marker {
	content: none;
}

.vh-events-empty {
	color: var(--vh-events-muted, #555);
}


/* CARD */

.vh-event-card {
	background: var(--vh-events-surface, transparent);
	border: 1px solid var(--vh-events-border, #d8d8d8);
	border-radius: var(--vh-events-radius, 6px);
	box-sizing: border-box;
	color: var(--vh-events-text, inherit);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	height: 100%;
	overflow: hidden;
	padding: 1rem;
}

.vh-event-card__image {
	margin: -1rem -1rem 0.5rem;
}

.vh-event-card__image img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vh-event-card__title {
	font-family: var(--vh-events-heading-font, inherit);
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0;
}

.vh-event-card__title a {
	color: inherit;
	text-decoration: none;
}

.vh-event-card__title a:hover,
.vh-event-card__title a:focus-visible {
	text-decoration: underline;
}

/* the whole card is the title link's target area */
.vh-event-card {
	position: relative;
}

.vh-event-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.vh-event-card__date,
.vh-event-card__repeats,
.vh-event-card__location {
	margin: 0;
}

.vh-event-card__date {
	color: var(--vh-events-accent, currentColor);
	font-weight: 600;
}

.vh-event-card__repeats,
.vh-event-card__location {
	color: var(--vh-events-muted, #555);
	font-size: 0.925em;
}


/* ARCHIVE */

.vh-events__header {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}

.vh-events__title {
	font-family: var(--vh-events-heading-font, inherit);
	margin: 0;
}

.vh-events__switch {
	margin: 0;
}

.vh-events a,
.vh-event a {
	color: var(--vh-events-accent, inherit);
}

/* Category links: a row of pills that wraps, the current one bold with a
   stronger border, so it is not shown by colour alone. Same
   :not(#vh-events-none) weight as the card list, against theme list rules. */
.vh-events-categories {
	margin-bottom: 1.5rem;
}

.vh-events-categories__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-events-categories__list > .vh-events-categories__item:not(#vh-events-none) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-events-categories__item::marker {
	content: none;
}

.vh-events-categories__item a {
	border: 1px solid var(--vh-events-border, #d8d8d8);
	border-radius: 999px;
	display: inline-block;
	padding: 0.3rem 0.9rem;
	text-decoration: none;
}

.vh-events-categories__item a:hover,
.vh-events-categories__item a:focus-visible {
	text-decoration: underline;
}

.vh-events-categories__item a[aria-current] {
	border-color: currentColor;
	font-weight: 600;
}

/* a category with colours: its link on its own colour; the current one keeps
   the bold text and text-coloured border above */
.vh-events-categories__item--colored a {
	background: var(--vh-event-bg);
	border-color: var(--vh-event-bg);
	color: var(--vh-event-fg);
}

.vh-events-categories__item--colored a[aria-current] {
	border-color: var(--vh-event-fg);
	box-shadow: 0 0 0 1px var(--vh-event-fg);
}

/* View links (Upcoming, Past, Month): a row of links, the current one bold
   and underlined, so it is not shown by colour alone */
.vh-events-views__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-events-views__list > .vh-events-views__item:not(#vh-events-none) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-events-views__item::marker {
	content: none;
}

.vh-events-views__item a {
	text-decoration: none;
}

.vh-events-views__item a:hover,
.vh-events-views__item a:focus-visible,
.vh-events-views__item a[aria-current] {
	text-decoration: underline;
	text-underline-offset: 0.25em;
}

.vh-events-views__item a[aria-current] {
	font-weight: 600;
}


/* MONTH GRID: a table on wide screens, a list of days on narrow ones. The
   template prints both; exactly one is displayed, so only one is read out. */

.vh-events-month__label {
	font-family: var(--vh-events-heading-font, inherit);
	margin: 0 0 0.75rem;
}

.vh-events-month__nav {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.vh-events-month__next {
	text-align: right;
}

.vh-events-month__grid {
	border-collapse: collapse;
	margin: 0 0 1.5rem;
	table-layout: fixed;
	width: 100%;
}

.vh-events-month__grid th {
	border-bottom: 1px solid var(--vh-events-border, #d8d8d8);
	font-weight: 600;
	padding: 0.5rem 0.4rem;
	text-align: left;
}

.vh-events-month__grid td {
	border: 1px solid var(--vh-events-border, #d8d8d8);
	height: 6.5rem;
	padding: 0.35rem 0.4rem;
	vertical-align: top;
}

.vh-events-month__day--outside {
	background: var(--vh-events-outside, rgba(0, 0, 0, 0.03));
}

.vh-events-month__date {
	display: inline-block;
	font-weight: 600;
	margin-bottom: 0.25rem;
	min-width: 1.75em;
	text-align: center;
}

/* today: outlined (and announced, by aria-current="date") */
.vh-events-month__day--today .vh-events-month__date {
	border-radius: 999px;
	outline: 2px solid var(--vh-events-accent, currentColor);
	outline-offset: 1px;
}

.vh-events-month__events {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-events-month__events > .vh-events-month__event:not(#vh-events-none) {
	list-style: none;
	margin: 0 0 0.4rem;
	padding: 0;
}

.vh-events-month__event::marker {
	content: none;
}

.vh-events-month__event {
	font-size: 0.875em;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.vh-events-month__event a {
	display: block;
	text-decoration: none;
}

.vh-events-month__event a:hover .vh-events-month__title,
.vh-events-month__event a:focus-visible .vh-events-month__title {
	text-decoration: underline;
}

.vh-events-month__time {
	color: var(--vh-events-muted, #555);
	display: block;
}

.vh-events-month__event--continues .vh-events-month__title {
	font-style: italic;
}

/* an event whose category has colours: the entry sits on the colour, the time
   in the text colour too (the muted grey would not read on it) */
.vh-events-month__event--colored a {
	background: var(--vh-event-bg);
	border-radius: 3px;
	color: var(--vh-event-fg);
	padding: 0.1em 0.35em;
}

.vh-events-month__event--colored .vh-events-month__time {
	color: inherit;
}

.vh-events-month__agenda {
	display: none;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.vh-events-month__agenda > .vh-events-month__agenda-day:not(#vh-events-none) {
	border-top: 1px solid var(--vh-events-border, #d8d8d8);
	list-style: none;
	margin: 0;
	padding: 0.75rem 0;
}

.vh-events-month__agenda-day::marker {
	content: none;
}

.vh-events-month__agenda-date {
	font-family: var(--vh-events-heading-font, inherit);
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

.vh-events-month__agenda .vh-events-month__event {
	font-size: 1em;
}

.vh-events-month__agenda .vh-events-month__time {
	display: inline;
	margin-right: 0.35em;
}

/* ADD TO CALENDAR (single events) and SUBSCRIBE (the archive and month
   pages): a label, then a row of links that wraps */
.vh-events-add,
.vh-events-subscribe {
	margin: 1.5rem 0;
}

.vh-events-add__label,
.vh-events-subscribe__label {
	font-weight: 600;
	margin: 0 0 0.35rem;
}

.vh-events-add__list,
.vh-events-subscribe__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-events-add__list > li:not(#vh-events-none),
.vh-events-subscribe__list > li:not(#vh-events-none) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vh-events-add__list > li::marker,
.vh-events-subscribe__list > li::marker {
	content: none;
}

.vh-events-add__note {
	color: var(--vh-events-muted, #555);
	font-size: 0.875em;
	margin: 0.35rem 0 0;
}


/* HOVER CARD (assets/month-card.js): beside an event in the grid, on mouse
   hover or keyboard focus. Placed by the script, in page coordinates. */
.vh-events-card-pop {
	background: var(--vh-events-card-background, #fff);
	border: 1px solid var(--vh-events-border, #d8d8d8);
	border-radius: var(--vh-events-radius, 6px);
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
	color: var(--vh-events-text, inherit);
	cursor: pointer;
	font-size: 0.9375rem;
	line-height: 1.4;
	max-width: calc(100vw - 16px);
	overflow: hidden;
	position: absolute;
	width: var(--vh-events-card-width, 20rem);
	z-index: 100000;
}

.vh-events-card-pop[hidden] {
	display: none;
}

@media (prefers-reduced-motion: no-preference) {
	.vh-events-card-pop {
		animation: vh-events-card-in 0.12s ease-out;
	}

	@keyframes vh-events-card-in {
		from {
			opacity: 0;
			transform: translateY(0.25rem);
		}
	}
}

.vh-events-card__image img {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.vh-events-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.75rem 1rem 1rem;
}

.vh-events-card__body p {
	margin: 0;
}

.vh-events-card__title {
	color: var(--vh-events-heading-color, inherit);
	font-family: var(--vh-events-heading-font, inherit);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.vh-events-card__when {
	color: var(--vh-events-accent, currentColor);
	font-weight: 600;
}

.vh-events-card__repeats,
.vh-events-card__location {
	color: var(--vh-events-muted, #555);
	font-size: 0.925em;
}

.vh-events-card__summary {
	margin-top: 0.25rem;
}

@media (max-width: 47.99em) {
	.vh-events-month__grid {
		display: none;
	}

	.vh-events-month__agenda {
		display: block;
	}
}


/* SINGLE EVENT */

.vh-event__title {
	font-family: var(--vh-events-heading-font, inherit);
}

.vh-event__notice {
	border-left: 4px solid var(--vh-events-border, #d8d8d8);
	color: var(--vh-events-muted, #555);
	padding: 0.25rem 0 0.25rem 0.75rem;
}

.vh-event__details {
	display: grid;
	gap: 0.75rem 1.5rem;
	grid-template-columns: max-content 1fr;
	margin: 1rem 0 1.5rem;
}

.vh-event__detail {
	display: contents;
}

.vh-event__details dt {
	font-weight: 600;
}

.vh-event__details dd {
	margin: 0;
}

.vh-event__location,
.vh-event__address {
	display: block;
}

.vh-event__repeats {
	color: var(--vh-events-muted, #555);
	display: block;
	margin-top: 0.25rem;
}

.vh-event-dates {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.vh-event-dates li {
	margin-bottom: 0.25rem;
}

.vh-event__image img {
	border-radius: var(--vh-events-radius, 6px);
	display: block;
	height: auto;
	max-width: 100%;
}

@media (max-width: 480px) {
	.vh-event__details {
		grid-template-columns: 1fr;
	}

	.vh-event__details dd {
		margin-bottom: 0.5rem;
	}
}