/* Owner: WP-B. Front-end styles for event pages and lists. Plain CSS; works in Twenty Ten (classic). */

.mw-es-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Banners (cancelled / taken place / date changed). Text colours are >= 7:1 on their backgrounds. */
.mw-es-banner {
	margin: 0 0 1.25em;
	padding: 0.75em 1em;
	border-left: 4px solid #4a4a4a;
	background: #f3f3f3;
	color: #1a1a1a;
}
.mw-es-banner p { margin: 0; }
.mw-es-banner--cancelled { border-left-color: #a00; background: #fbeaea; color: #5c0000; }
.mw-es-banner--date-changed { border-left-color: #8a5a00; background: #fff6e0; color: #3d2800; }
.mw-es-banner a { color: inherit; text-decoration: underline; }

.mw-es-image { margin: 0 0 1.25em; }
.mw-es-image img { max-width: 100%; height: auto; }

/* Details list. #content (Twenty Ten) gives dl/dd margins; zero them with equal or higher specificity. */
.mw-es-details,
#content .mw-es-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35em 1.25em;
	margin: 0;
	padding: 0;
}
.mw-es-details dt,
#content .mw-es-details dt { font-weight: bold; margin: 0; }
.mw-es-details dd,
#content .mw-es-details dd { margin: 0; }
.mw-es-details .mw-es-address { font-style: normal; margin: 0.25em 0 0; }
.mw-es-tz { color: #555; }

@media (max-width: 480px) {
	.mw-es-details { grid-template-columns: 1fr; }
	.mw-es-details dd,
	#content .mw-es-details dd { margin-bottom: 0.5em; }
}

/* Register button: white on #0b4f8a = 8.6:1 */
.mw-es-register { margin: 1.25em 0; }
#content .mw-es-button,
.mw-es-button {
	display: inline-block;
	padding: 0.6em 1.2em;
	background: #0b4f8a;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
	border-radius: 3px;
	border: 2px solid #0b4f8a;
}
#content .mw-es-button:hover,
.mw-es-button:hover { background: #083a66; border-color: #083a66; color: #fff; }
.mw-es-button:focus-visible,
.mw-es-list a:focus-visible {
	outline: 3px solid #1a1a1a;
	outline-offset: 2px;
}

.mw-es-notice {
	margin: 1.25em 0;
	padding: 0.75em 1em;
	background: #eef4fa;
	border: 1px solid #b6cbe0;
	color: #1a1a1a;
}
.mw-es-notice p:last-child { margin-bottom: 0; }

.mw-es-updated { color: #555; font-size: 0.9em; }

/* Lists ([mw_events], archive) */
.mw-es-list { list-style: none; margin: 0 0 1.5em; padding: 0; }
#content .mw-es-list { margin-left: 0; }
.mw-es-list__item,
#content .mw-es-list li.mw-es-list__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 0.9em;
	padding: 0 0 0.9em;
	list-style: none;
	border-bottom: 1px solid #e0e0e0;
}
.mw-es-list__thumb,
#content .mw-es-list a.mw-es-list__thumb {
	display: block;
	flex: 0 0 130px;
	width: 130px;
	height: 70px;
	overflow: hidden;
	background: #e9eef3;
	line-height: 0;
}
.mw-es-list__thumb img.mw-es-list__img,
#content .mw-es-list .mw-es-list__thumb img {
	display: block;
	width: 130px;
	height: 70px;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	object-fit: cover;
}
.mw-es-list__thumb--placeholder,
#content .mw-es-list a.mw-es-list__thumb--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1.1;
	color: #0b4f8a;
	text-decoration: none;
	border: 1px solid #c9d6e2;
	box-sizing: border-box;
}
.mw-es-list__day { font-size: 24px; font-weight: bold; }
.mw-es-list__mon { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.mw-es-list__body { flex: 1 1 auto; min-width: 0; }
/* Date badge on the right: same 70px height as the thumbnail, theme text colours, inherits the font. */
.mw-es-list__date {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 56px;
	height: 70px;
	padding: 0 6px;
	border: 1px solid #e0e0e0;
	border-top: 3px solid #0b4f8a;
	background: #fafafa;
	color: #4a4a4a;
	line-height: 1.15;
	text-align: center;
}
.mw-es-list__date-mon { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: #0b4f8a; font-weight: bold; }
.mw-es-list__date-day { font-size: 22px; font-weight: bold; color: #1a1a1a; }
.mw-es-list__date-yer { font-size: 11px; }
.mw-es-list__item:last-child,
#content .mw-es-list li.mw-es-list__item:last-child { border-bottom: 0; }
.mw-es-list__title { display: block; margin: 0 0 0.15em; font-weight: bold; }
#content h2.mw-es-list__title, #content h3.mw-es-list__title { margin: 0 0 0.15em; }
.mw-es-list__meta { display: block; color: #4a4a4a; }
.mw-es-list__sep { margin: 0 0.35em; }
.mw-es-list__status { color: #a00; margin-left: 0.5em; }
.mw-es-list__item--cancelled .mw-es-list__title a { text-decoration: line-through; }

.mw-es-section { margin-bottom: 2em; }

/* Section heading with the calendar menu on its right (event overview page). */
.mw-es-section__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5em 1em; margin: 0 0 0.9em; }
.mw-es-section__head h2,
#content .mw-es-section__head h2 { margin: 0; }

/* Calendar subscription menu: borderless icon buttons with a tooltip on hover/focus. */
.mw-es-calendar-links,
#content .mw-es-calendar-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.mw-es-calendar-links li,
#content .mw-es-calendar-links li { margin: 0; padding: 0; list-style: none; }
.mw-es-calendar-links__link,
#content .mw-es-calendar-links a.mw-es-calendar-links__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: #0b4f8a;
	text-decoration: none;
}
#content .mw-es-calendar-links a.mw-es-calendar-links__google { color: #1a73e8; }
#content .mw-es-calendar-links a.mw-es-calendar-links__rss { color: #e8710a; }
#content .mw-es-calendar-links a.mw-es-calendar-links__link:hover { background: #eef4fa; }
.mw-es-calendar-links__icon { display: block; width: 18px; height: 18px; }
.mw-es-calendar-links a:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }
/* Tooltip below the icon: white on #1a1a1a = 17:1. Anchored right so it stays inside the column. */
.mw-es-calendar-links__link::after {
	content: attr(data-mw-es-tip);
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 10;
	padding: 4px 8px;
	border-radius: 3px;
	background: #1a1a1a;
	color: #fff;
	font-size: 12px;
	font-weight: normal;
	line-height: 1.4;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s;
}
.mw-es-calendar-links__link:hover::after,
.mw-es-calendar-links__link:focus-visible::after,
.mw-es-calendar-links__link.is-copied::after { opacity: 1; visibility: visible; }

/* Phones: drop the badge (the date is in the meta line) to keep room for the title. */
@media (max-width: 480px) {
	.mw-es-list__date { display: none; }
}
.mw-es-pagination ul { list-style: none; margin: 1em 0; padding: 0; }
.mw-es-pagination li { display: inline-block; margin-right: 0.5em; }
