/**
 * LVM WordPress event-page template
 *
 * Canonical layout for ASH XO, RNB vs GARAGE and Glitterfest event pages.
 * Event copy, venue information and ticket IDs may change; these layout class
 * names and spacing values should remain consistent.
 *
 * Required title pattern:
 *   H1: ASH XO Day Party London
 *   Key facts: Saturday 21 November 2026 · 2pm–7pm · Outernet Live, Central London
 *
 * Keep the H1 short: brand/event name plus city. Put the full date, time and
 * venue on the separate, smaller .lvm-event-key-facts line below it.
 */

/* Short event/city H1. The .entry-title selector supports WordPress themes
 * where the title is generated automatically rather than added as a block. */
.lvm-event-page-title,
.entry-header .entry-title {
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 700;
	line-height: 1.15;
}

/* Full date, time and venue displayed separately beneath the H1. */
.lvm-event-key-facts {
	max-width: 900px;
	margin: 0 auto 28px !important;
	color: #333;
	text-align: center;
	font-size: clamp(17px, 2vw, 22px);
	font-weight: 650;
	line-height: 1.4;
}

/* Match WordPress's centred 580px single-column content width. */
.lvm-event-support,
.lvm-event-faqs,
.lvm-event-final-cta,
.lvm-event-malta-card {
	box-sizing: border-box;
	width: calc(100% - 4rem);
	max-width: 58rem;
	margin-right: auto !important;
	margin-left: auto !important;
}

/* Support information card. */
.lvm-event-support {
	margin-top: 34px !important;
	margin-bottom: 12px !important;
	padding: 20px 22px;
	border-radius: 12px;
	background: #f5f5f5;
}

.lvm-event-support p {
	margin: 0 0 12px;
}

.lvm-event-support p:last-child {
	margin-bottom: 0;
}

/* Compact, centred FAQs. WordPress adds padding to section elements by
 * default, so it must be explicitly removed here. */
.lvm-event-faqs {
	margin-top: 20px !important;
	margin-bottom: 28px !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.lvm-event-faqs h2 {
	margin-top: 0 !important;
	margin-bottom: 18px !important;
}

.lvm-event-faqs details {
	margin: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.16);
}

.lvm-event-faqs details:last-child {
	border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.lvm-event-faqs summary {
	position: relative;
	padding: 18px 38px 18px 0;
	cursor: pointer;
	font-weight: 700;
	line-height: 1.35;
	list-style: none;
}

.lvm-event-faqs summary::-webkit-details-marker {
	display: none;
}

.lvm-event-faqs summary::after {
	content: "+";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 25px;
	font-weight: 500;
}

.lvm-event-faqs details[open] summary::after {
	content: "−";
}

.lvm-event-faqs summary:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

.lvm-event-faqs details p {
	margin: 0;
	padding: 8px 38px 18px 0;
	line-height: 1.55;
}

/* Final button returns visitors to the single embedded checkout. */
.lvm-event-final-cta {
	margin-top: 30px !important;
	margin-bottom: 12px !important;
	text-align: center;
}

.lvm-event-final-cta a {
	display: inline-block;
	min-width: 220px;
	padding: 15px 28px;
	border-radius: 999px;
	background: #169cf2;
	color: #fff !important;
	font-weight: 750;
	text-decoration: none !important;
	box-shadow: 0 6px 16px rgba(22, 156, 242, 0.25);
}

.lvm-event-final-cta a:hover,
.lvm-event-final-cta a:focus-visible {
	background: #087fc9;
	transform: translateY(-1px);
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

#tickets {
	scroll-margin-top: 28px;
}

/* Secondary cross-sell shown only after the visitor has reached the end of
 * the current event page. It must remain visually quieter than Buy Tickets. */
.lvm-event-malta-card {
	margin-top: 32px !important;
	margin-bottom: 18px !important;
	padding: 26px 24px 28px;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 18px;
	background: linear-gradient(135deg, #fff4f8 0%, #fff8e8 100%);
	text-align: center;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
}

.lvm-event-malta-card__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.lvm-event-malta-card__title {
	margin: 0 0 10px;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.15;
}

.lvm-event-malta-card__copy {
	max-width: 690px;
	margin: 0 auto 20px;
	font-size: 18px !important;
	line-height: 1.45;
}

.lvm-event-malta-card__button {
	display: inline-block;
	padding: 13px 24px;
	border: 2px solid #111;
	border-radius: 999px;
	background: #111;
	color: #fff !important;
	font-weight: 750;
	text-decoration: none !important;
}

.lvm-event-malta-card__button:hover,
.lvm-event-malta-card__button:focus-visible {
	background: transparent;
	color: #111 !important;
	transform: translateY(-1px);
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.lvm-event-page-title,
	.entry-header .entry-title {
		font-size: 30px;
		line-height: 1.18;
	}

	.lvm-event-key-facts {
		margin-bottom: 20px !important;
		padding: 0 16px;
		font-size: 17px;
	}

	.lvm-event-support,
	.lvm-event-faqs,
	.lvm-event-final-cta,
	.lvm-event-malta-card {
		width: calc(100% - 4rem);
	}

	.lvm-event-support {
		padding: 18px;
	}

	.lvm-event-faqs summary {
		padding: 16px 34px 16px 0;
	}

	.lvm-event-final-cta a {
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
	}

	.lvm-event-malta-card {
		margin-top: 26px !important;
		padding: 22px 18px 24px;
		border-radius: 15px;
	}

	.lvm-event-malta-card__copy {
		font-size: 17px !important;
	}

	.lvm-event-malta-card__button {
		box-sizing: border-box;
		width: 100%;
	}
}