/*
 * Event listings (com_ems overrides and the gch-* mod_ems layouts) in the old site's look.
 *
 * The Events / Courses list, single event and booking pages reuse the old markup, so most of their look
 * comes from legacy/legacy.css; this file adds what the old pages set inline. The home page blocks
 * reproduce what the old client-side "eventswebclient" widget drew (Bootstrap 4 typography, rem = 10px).
 */

:root {
	--gch-ems-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--gch-ems-text: #373a3c;
	--gch-ems-link: var(--gch-accent-light);
	--gch-ems-button: var(--background-color);
	--gch-ems-button-hover: var(--background-color-hover);
	--gch-ems-button-text: var(--gch-cta-text);
	--gch-ems-rule: #ddd;
}

/* Visually hidden, still read by screen readers. */
.gch-ems-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
 * Events / Courses list (com_ems forthcomingminilist)
 * ------------------------------------------------------------------ */

.events-page .ievent {
	& div.datetime {
		width: 205px;
	}

	& div.datetime div.weekday {
		width: 45px;
	}

	& .ievent-mode {
		display: inline-block;
		width: 100px;
	}

	& .icon-line {
		pointer-events: none;
	}
}

/* ------------------------------------------------------------------
 * Single event (com_ems singleevent)
 * ------------------------------------------------------------------ */

.selected-event {
	& .event-image1 {
		width: 100%;
		height: auto;
	}

	/* Flex so the markup's whitespace adds no gaps; the old inline markup had none. */
	& .event-date {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;

		& .reg-link {
			margin: 0 4px 13px;
		}
	}

	& .date-list-heading {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	& .event-venue-label,
	& .speaker-label {
		font-weight: 700;
	}
}

@media (min-width: 768px) {
	.selected-event .event-image1 {
		width: 70%;
	}

	.registration-form textarea.form-control {
		width: 360px;
	}
}

/* "Add to calendar" menu: a <details> styled like the old hover list. */
.calendar-select {
	position: relative;
	display: inline-block;
	margin: 0 0 13px;

	& > summary {
		list-style: none;
		cursor: pointer;
		white-space: nowrap;

		&::-webkit-details-marker {
			display: none;
		}
	}

	& ul {
		position: absolute;
		z-index: 99;
		top: 100%;
		left: 0;
		margin: 0;
		padding: 0;
		list-style: none;
		background: #fff;
		border: 1px solid #d3d3d3;
	}

	& li a {
		display: block;
		padding: 5px 10px;
		text-decoration: none;
		white-space: nowrap;

		&:hover,
		&:focus-visible {
			background: #d3d3d3;
		}
	}
}

/* ------------------------------------------------------------------
 * Booking page (com_ems registration)
 * ------------------------------------------------------------------ */

.registration-form {
	scroll-margin-top: 2rem;

	/* The privacy notice: the old page squeezed it into a 40px box that overlapped the button. */
	& .gch-ems-note .form-control {
		height: auto;

		& > :last-child {
			margin-bottom: 0;
		}
	}

	/* "Comments" is a textarea now; size it like the one-line input it was. */
	& textarea.form-control {
		height: 40px;
		min-height: 40px;
		font: inherit;
		resize: vertical;
	}

	& .checkbox input {
		margin-right: 4px;
	}

	/* Required-field marker: the old yellow (#fc0) was 1.5:1 on white. */
	& .star {
		color: #8c7000;
	}

	/* Outcome of the in-page submission (media/js/ems.js). */
	& .gch-ems-reg-status {
		margin-bottom: 15px;
		padding: 10px 15px;
		color: #a94442;
		background-color: #f2dede;
		border: 1px solid #ebccd1;

		& p,
		& ul {
			margin: 0;
		}
	}

	& .gch-ems-reg-done {
		margin-bottom: 26px;
	}
}

/* ------------------------------------------------------------------
 * Home page: banner of featured events (mod_ems gch-banner)
 * ------------------------------------------------------------------ */

.gch-ems-banner {
	display: block;

	& .gch-ems-banner__item {
		display: block;
	}

	& img {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
	}
}

/* ------------------------------------------------------------------
 * Home page: "Events and Courses by Language" (mod_ems gch-language)
 * ------------------------------------------------------------------ */

.gch-ems-lang {
	font-family: var(--gch-ems-font);

	& > summary {
		display: block;
		padding: 5px 10px 7px;
		/* Shrinks on phones so it stays on one line (the old button overflowed the screen). */
		font-size: min(26px, 6vw) !important;
		line-height: 1.5;
		text-align: center;
		color: var(--gch-cta-text);
		background-color: var(--background-color);
		border-radius: 3px;
		transition: background-color .3s;
		cursor: pointer;
		list-style: none;
		user-select: none;

		&::-webkit-details-marker {
			display: none;
		}

		&:hover,
		&:focus-visible {
			color: var(--gch-cta-text);
			background-color: var(--background-color-hover);
		}

		& .fa {
			margin-left: 2px;
		}
	}

	& .gch-ems-lang__form {
		display: flex;
		gap: 8px;
		margin: 5px 0 15px;
	}

	& .gch-ems-lang__select {
		flex: 1;
		min-width: 0;
		height: auto;
		padding: 3.75px 5px 3.75px 7.5px;
		font: inherit;
		font-size: 18px;
		line-height: 1.5;
		color: #495057;
		background-color: #fff;
		border: 1px solid #ced4da;
		border-radius: 2.5px;
	}

	& .gch-ems-lang__go {
		padding: 0 20px;
		font: inherit;
		font-size: 16px;
		color: #fff;
		background-color: var(--gch-secondary-button);
		border: 0;
		border-radius: 3px;
		cursor: pointer;
		transition: background-color .3s;

		&:hover,
		&:focus-visible {
			background-color: var(--gch-secondary-hover);
		}

		&[hidden] {
			display: none;
		}
	}
}

/* ------------------------------------------------------------------
 * Home page: event cards with the calendar block (mod_ems gch-cards / gch-webcast)
 * ------------------------------------------------------------------ */

.gch-ems-cards {
	font-family: var(--gch-ems-font);
	font-size: 13px;
	line-height: 1.625;
	color: var(--gch-ems-text);
	text-align: left;

	& .gch-ems-cards__list {
		margin: 43px 0 10px;
		padding: 0;
		list-style: none;
	}

	& .gch-ems-empty {
		margin: 43px 8px 10px;
		font-size: 15px;
	}
}

/* List items: specific enough to beat the legacy ".module-ct ul li" rules. */
.gch-ems-cards .gch-ems-cards__list > .gch-ems-card {
	display: block;
	margin: 0;
	padding: 8px;
	list-style: none;

	& + .gch-ems-card {
		border-top: 1px solid var(--gch-ems-rule);
	}
}

/* Card content (also used by the single webcast card); two classes to outrank ".module-ct ul li a". */
.gch-ems-cards .gch-ems-card {
	& article {
		margin: 20px 0;
		padding: 10px 0 12.5px;
	}

	& .gch-ems-card__header {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px 15px;
		margin-bottom: 7.5px;
	}

	/* Phones: calendar centred on its own row above the title, as the old widget did. */
	& .gch-ems-card__heading {
		flex: 1 1 100%;
		min-width: 0;
	}

	& .gch-ems-card__title {
		margin: 0 0 3.5px;
		font-family: inherit;
		font-size: 17.5px;
		font-weight: 500;
		line-height: 1.25;
		color: var(--gch-ems-text);
		text-align: left;
		text-transform: none;
		letter-spacing: normal;

		& a {
			color: var(--gch-ems-link);
			text-decoration: none;

			&:hover,
			&:focus-visible {
				color: var(--gch-ems-link);
				text-decoration: underline;
			}
		}
	}

	& .gch-ems-card__subtitle {
		margin: 0 0 3.5px;
		font-size: 15px;
		font-weight: 500;
		line-height: 1.2;
	}

	& .gch-ems-card__image {
		display: block;

		& img {
			display: block;
			width: 100%;
			max-width: 100%;
			height: auto;
			margin: 7.5px 0 10px;
			border-radius: 2.5px;
		}
	}

	& .gch-ems-card__desc {
		text-align: justify;
		overflow-wrap: break-word;

		& p {
			margin: 0 0 10px;
		}

		& > :last-child {
			margin-bottom: 0;
		}
	}

	& .gch-ems-card__actions {
		margin: 17.5px 0 2.5px;
	}
}

/* Three classes: beats the legacy ".module-ct ul li a" link colours. */
.gch-ems-cards .gch-ems-card .gch-ems-btn {
	display: inline-block;
	padding: 5px 20px;
	font-size: 13.333px;
	line-height: 20px;
	color: var(--gch-ems-button-text);
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	vertical-align: middle;
	background-color: var(--gch-ems-button);
	border-radius: 3px;
	transition: background-color .3s;

	&:hover,
	&:focus,
	&:visited {
		color: var(--gch-ems-button-text);
		text-decoration: none;
	}

	&:hover,
	&:focus-visible {
		background-color: var(--gch-ems-button-hover);
	}
}

/* Calendar block: weekday / month day / time / (in N days) / Online | In House */
.gch-cal {
	--gch-cal-head: #e89e2a;
	--gch-cal-body: #edd1b5;
	/* Dark text on the coloured blocks: the old white text was 1.5–2.7:1. */
	--gch-cal-ink: #3b2a14;
	--gch-cal-date: #6b4a2f;

	flex: 0 0 auto;
	width: 120px;
	margin: 0 auto;
	font-size: 13px;
	line-height: 1.625;
	background: var(--gch-cal-body);
	order: -1;

	& .gch-cal__date {
		display: block;
	}

	& .gch-cal__weekday {
		display: block;
		padding: 5px 10px;
		font-size: 15px;
		color: var(--gch-cal-ink);
		text-align: center;
		background: var(--gch-cal-head);
	}

	& .gch-cal__month,
	& .gch-cal__day {
		font-size: 18px;
		font-weight: 500;
		color: var(--gch-cal-date);
	}

	& .gch-cal__month {
		padding: 0 10px 0 24px;
	}

	& .gch-cal__day {
		padding: 0 10px;
	}

	& .gch-cal__time {
		display: block;
		margin-top: 3px;
		font-family: Roboto, var(--gch-ems-font);
		font-size: 11px;
		font-weight: 700;
		text-align: center;

		& time {
			white-space: nowrap;
		}
	}

	& .gch-cal__time--long time,
	& .gch-cal__to {
		display: block;
	}

	& .gch-cal__to {
		margin-top: 3px;
		font-family: monospace;
		font-size: 10px;
	}

	& .gch-cal__from {
		display: block;
		margin-top: 3px;
		font-family: monospace;
		font-size: 10px;
		line-height: 24.375px;
		text-align: center;
	}

	& .gch-cal__mode {
		display: block;
		padding-bottom: 6px;
		font-size: 15px;
		line-height: 24.375px;
		color: var(--gch-cal-ink);
		text-align: center;
	}
}

.gch-ems-card.is-inhouse .gch-cal {
	--gch-cal-head: #d8afad;
	--gch-cal-body: #f0d8d7;
}

@media (min-width: 768px) {
	.gch-cal {
		order: 0;
		margin: 0;
	}

	.gch-ems-cards .gch-ems-card .gch-ems-card__heading {
		flex-basis: 140px;
	}
}

/*
 * Next webcast (gch-webcast): one wide card in the look of the old "Next Watchlive" widget on Watch Live —
 * centred bold title, gold calendar with month and day stacked, full-width image.
 */
.gch-ems-cards.gch-ems-cards--webcast {
	padding: 0 15px;
	font-family: inherit;
	font-size: 16px;
	line-height: 26px;

	/* The widget drew it as the first row of a table: offset and a rule above. */
	& .gch-ems-card {
		margin-top: 32px;
		padding: 8px;
		border-top: 1px solid #dee2e6;

		& article {
			margin: 0;
		}
	}

	& .gch-ems-card .gch-ems-card__title {
		font-size: 16.4px;
		font-weight: 800;
		line-height: 1.25;
		color: var(--gch-accent);
		text-align: center;

		& a {
			color: var(--gch-accent);
		}
	}

	& .gch-ems-card .gch-ems-card__subtitle {
		font-size: 14px;
		font-weight: 300;
		color: #8b6d4d;
	}

	& .gch-ems-card .gch-ems-btn {
		padding: 5px 20px;
		font-size: 16px;
		line-height: 24px;
		--gch-ems-button: var(--gch-accent-light);
		--gch-ems-button-hover: var(--gch-accent-light-hover);
		--gch-ems-button-text: #fff;
	}

	& .gch-cal {
		--gch-cal-head: var(--background-color-terciary);
		--gch-cal-body: #ebddae;

		width: 150px;
		font-size: 16px;
		line-height: 1.625;
		background: none;

		& .gch-cal__weekday {
			font-size: 20px;
		}

		& .gch-cal__month,
		& .gch-cal__day {
			display: block;
			padding: 0 10px;
			background: var(--gch-cal-body);
			font-size: 25px;
			font-weight: 400;
			text-align: center;
		}

		& .gch-cal__day {
			margin-top: -10px;
		}

		& .gch-cal__time {
			font-size: 15px;
		}

		& .gch-cal__from {
			font-size: 12px;
			line-height: 19.5px;
		}

		& .gch-cal__mode {
			display: none;
		}
	}
}

/* ------------------------------------------------------------------
 * "Upcoming …" lists embedded in articles (mod_ems gch-list)
 * ------------------------------------------------------------------ */

.gch-ems-list {
	& .gch-ems-list__items {
		margin: 0 0 26px;
		padding: 0;
		list-style: none;
	}

	& .gch-ems-list__item {
		display: flow-root;
		padding: 13px 0;

		& + .gch-ems-list__item {
			border-top: 1px solid var(--gch-ems-rule);
		}
	}

	& .gch-ems-list__image img {
		float: left;
		width: 160px;
		height: auto;
		margin: 0 20px 10px 0;
	}

	& .event-title {
		margin: 0 0 6px;
	}

	& .event-time {
		margin: 0 0 6px;
		font-weight: 700;
	}

	& .list-group-item-text {
		margin: 0 0 6px;
	}

	& .gch-ems-list__links {
		margin: 0;

		& .read-more + .read-more {
			margin-left: 1em;
		}
	}
}