/* Favr Events — front end. Inherits the theme's fonts and colours.
   Tune with custom properties, e.g. .favr-ev { --favr-ev-accent: #0a7; } */

.favr-ev,
.favr-ev-details,
.favr-ev-more,
.favr-ev-host,
.favr-ev-back,
.favr-my-events {
	--favr-ev-accent: var(--favr-brand, var(--favr-events-accent, var(--wp--preset--color--primary, #1f5fbf)));
	--favr-ev-border: color-mix(in srgb, currentColor 14%, transparent);
	--favr-ev-soft: color-mix(in srgb, currentColor 4%, transparent);
	--favr-ev-muted: color-mix(in srgb, currentColor 62%, transparent);
	--favr-ev-radius: 14px;
	box-sizing: border-box;
}

.favr-ev *,
.favr-ev-details * { box-sizing: border-box; }

.favr-ev__title { margin: 0 0 16px; }

.favr-ev-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border: 1px solid var(--favr-ev-border);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	line-height: 1.2;
	background: transparent;
	cursor: pointer;
}

.favr-ev-btn:hover { border-color: var(--favr-ev-accent); color: var(--favr-ev-accent); }

.favr-ev-btn--primary,
.favr-ev-btn--primary:hover {
	background: var(--favr-ev-accent);
	border-color: var(--favr-ev-accent);
	color: #fff;
}

/* ------------------------------------------------------------ Toolbar */

.favr-ev-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 20px;
}

.favr-ev-views,
.favr-ev-cats { display: flex; flex-wrap: wrap; gap: 6px; }

.favr-ev-views { padding: 3px; border: 1px solid var(--favr-ev-border); border-radius: 999px; }

.favr-ev-views a,
.favr-ev-cats a {
	padding: 5px 12px;
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
	font-size: .9em;
}

.favr-ev-cats a { border: 1px solid var(--favr-ev-border); }

.favr-ev-views a[aria-current],
.favr-ev-cats a[aria-current] { background: var(--favr-ev-accent); border-color: var(--favr-ev-accent); color: #fff; }

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

.favr-ev__month {
	margin: 28px 0 10px;
	font-size: .85em;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--favr-ev-muted);
}

.favr-ev__group { display: grid; gap: 12px; }

.favr-ev-card {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	gap: 16px;
	align-items: center;
	padding: 14px;
	border: 1px solid var(--favr-ev-border);
	border-radius: var(--favr-ev-radius);
}

.favr-ev-card.is-featured { border-color: color-mix(in srgb, var(--favr-ev-accent) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--favr-ev-accent) 30%, transparent) inset; }

.favr-ev-card__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 6px 0;
	border-radius: 10px;
	background: var(--favr-ev-soft);
	color: inherit;
	text-decoration: none;
	line-height: 1.1;
}

.favr-ev-card__month,
.favr-ev-card__dow { font-size: .72em; text-transform: uppercase; letter-spacing: .05em; color: var(--favr-ev-muted); }

.favr-ev-card__month { color: var(--favr-ev-accent); font-weight: 700; }

.favr-ev-card__day { font-size: 1.6em; font-weight: 700; }

.favr-ev-card__title { margin: 0 0 4px; font-size: 1.1em; line-height: 1.3; }

.favr-ev-card__title a { color: inherit; text-decoration: none; }

.favr-ev-card__title a:hover { color: var(--favr-ev-accent); text-decoration: underline; }

.favr-ev-card__when,
.favr-ev-card__meta { margin: 0; font-size: .92em; }

.favr-ev-card__meta { color: var(--favr-ev-muted); }

.favr-ev-card__media img,
.favr-ev-card__img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: 10px; }

.favr-ev-tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--favr-ev-soft);
	font-size: .78em;
	vertical-align: 1px;
}

.favr-ev-tag--featured { background: color-mix(in srgb, var(--favr-ev-accent) 14%, transparent); color: var(--favr-ev-accent); }

.favr-ev__pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
}

.favr-ev__ical { margin-left: auto; font-size: .9em; }

.favr-ev__empty { padding: 24px; border: 1px dashed var(--favr-ev-border); border-radius: var(--favr-ev-radius); text-align: center; }

@media (max-width: 600px) {
	.favr-ev-card { grid-template-columns: 56px minmax(0, 1fr); }
	.favr-ev-card__media { display: none; }
}

/* ------------------------------------------------------------ Compact */

.favr-ev-compact { margin: 0; padding: 0; list-style: none; }

.favr-ev-compact li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--favr-ev-border); }

.favr-ev-compact__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 44px;
	line-height: 1.1;
	font-size: .75em;
	text-transform: uppercase;
	color: var(--favr-ev-accent);
}

.favr-ev-compact__date strong { font-size: 1.7em; color: initial; color: inherit; }

.favr-ev-compact__text { display: flex; flex-direction: column; }

.favr-ev-compact__text small { color: var(--favr-ev-muted); }

.favr-ev-compact__all { margin: 10px 0 0; }

/* -------------------------------------------------------------- Month */

.favr-ev-month__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

.favr-ev-month__title { margin: 0; }

.favr-ev-grid { border: 1px solid var(--favr-ev-border); border-radius: var(--favr-ev-radius); overflow: hidden; }

.favr-ev-grid > .favr-ev-grid__row:nth-child(2) .favr-ev-grid__day { border-top: 0; }

.favr-ev-grid__row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.favr-ev-grid__row + .favr-ev-grid__row { border-top: 1px solid var(--favr-ev-border); }

.favr-ev-grid__wd { padding: 8px; font-size: .8em; text-align: center; text-transform: uppercase; color: var(--favr-ev-muted); }

.favr-ev-grid__wd abbr { text-decoration: none; }

.favr-ev-grid__day { min-height: 96px; padding: 6px; border-left: 1px solid var(--favr-ev-border); font-size: .85em; }

.favr-ev-grid__day:first-child { border-left: 0; }

.favr-ev-grid__day.is-other { background: var(--favr-ev-soft); color: var(--favr-ev-muted); }

.favr-ev-grid__num { display: inline-block; min-width: 1.8em; font-weight: 600; }

.favr-ev-grid__label { display: none; }

.favr-ev-grid__day.is-today .favr-ev-grid__num { padding: 0 6px; border-radius: 999px; background: var(--favr-ev-accent); color: #fff; text-align: center; }

.favr-ev-grid__day ul { margin: 4px 0 0; padding: 0; list-style: none; }

.favr-ev-grid__day li { margin: 0 0 4px; }

.favr-ev-grid__day li a {
	display: block;
	padding: 3px 6px;
	border-radius: 6px;
	background: color-mix(in srgb, var(--favr-ev-accent) 10%, transparent);
	color: inherit;
	text-decoration: none;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
	hyphens: auto;
}

.favr-ev-grid__day li.is-featured a { background: color-mix(in srgb, var(--favr-ev-accent) 22%, transparent); }

.favr-ev-grid__time { color: var(--favr-ev-muted); font-size: .9em; }

/* Narrow containers (phones, or a theme's slim content column): the month becomes an agenda
   of the days that have events. */
.favr-ev--month { container-type: inline-size; }

@container (max-width: 620px) {
	.favr-ev-grid__row--head { display: none; }
	.favr-ev-grid__row { display: block; border-top: 0 !important; }
	.favr-ev-grid__day { display: none; min-height: 0; border-left: 0; }
	.favr-ev-grid__day.has-events:not(.is-other) { display: block; padding: 10px 12px; border-top: 1px solid var(--favr-ev-border); }
	.favr-ev-grid__label { display: inline; }
	.favr-ev-grid__day li a { -webkit-line-clamp: unset; }
}

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

.favr-ev-details {
	margin: 0 0 28px;
	padding: 20px;
	border: 1px solid var(--favr-ev-border);
	border-radius: var(--favr-ev-radius);
}

.favr-ev-details__ended { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--favr-ev-soft); font-weight: 600; }

.favr-ev-details__list { display: grid; gap: 14px; margin: 0; }

.favr-ev-details__list > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; }

.favr-ev-details__list dt { font-weight: 700; color: var(--favr-ev-muted); font-size: .85em; text-transform: uppercase; letter-spacing: .04em; padding-top: .2em; }

.favr-ev-details__list dd,
.favr-ev-details__list dt,
.favr-ev-details__list > div { margin: 0; padding: 0; }

.favr-ev-details__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.favr-ev-add { position: relative; }

.favr-ev-add summary { list-style: none; }

.favr-ev-add summary::-webkit-details-marker { display: none; }

.favr-ev-add ul {
	position: absolute;
	z-index: 5;
	top: calc(100% + 6px);
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--favr-ev-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.favr-ev-add li a { display: block; padding: 8px 10px; border-radius: 6px; color: inherit; text-decoration: none; }

.favr-ev-add li a:hover { background: var(--favr-ev-soft); }

@media (max-width: 600px) {
	.favr-ev-details__list > div { grid-template-columns: 1fr; gap: 2px; }
}

.favr-ev-more,
.favr-ev-host { margin: 32px 0 0; }

.favr-ev-more ul { padding-left: 1.2em; }

.favr-ev-host__card {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border: 1px solid var(--favr-ev-border);
	border-radius: var(--favr-ev-radius);
	color: inherit;
	text-decoration: none;
}

.favr-ev-host__card:hover { border-color: var(--favr-ev-accent); }

.favr-ev-host__card span { display: flex; flex-direction: column; }

.favr-ev-host__card small { color: var(--favr-ev-muted); }

.favr-ev-host__logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; }

.favr-ev-back { margin-top: 28px; }

/* Business profile: upcoming events section (Favr Directory). */
.favr-profile .favr-ev--compact { margin-top: 8px; }

/* -------------------------------------------------------- My Events */

.favr-my-events { margin: 0 0 32px; }

.favr-my-events__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }

.favr-my-events__head h2 { margin: 0; }

.favr-my-events__list { margin: 0; padding: 0; list-style: none; }

.favr-my-events__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--favr-ev-border); }

.favr-my-events__list small { color: var(--favr-ev-muted); }

.favr-ev-tag--pending { background: color-mix(in srgb, #dba617 18%, transparent); }

.favr-ev-tag--draft { background: color-mix(in srgb, #b91c1c 12%, transparent); }

.favr-ev-tag--publish { background: color-mix(in srgb, #15803d 14%, transparent); }

.favr-my-events__submit { position: sticky; bottom: 0; margin: 0; padding: 12px 0; background: var(--wp--preset--color--base, #fff); }

.favr-my-events .favr-notice { margin: 0 0 16px; padding: 12px 16px; border-radius: 8px; border-left: 4px solid var(--favr-ev-accent); background: var(--favr-ev-soft); }

.favr-my-events .favr-notice--error { border-left-color: #b91c1c; }

.favr-my-events .favr-notice--success { border-left-color: #15803d; }

.favr-my-events .favr-pending { grid-column: 1 / -1; }

@media (max-width: 600px) {
	.favr-my-events__list li { grid-template-columns: 1fr; }
}