/* =========================================================
   Pedalution Event Pages – front end
   Wide (≥1100px): left | main | right, sidebars sticky
   Tablet (782–1099px): left | main, right sidebar slides out
   Phone (<782px): one column, both sidebars slide out,
   bottom bar with Book Now / Contents / Menu
   ========================================================= */

:root {
	--pep-orange: #ed8b00;
	--pep-panel: #6b6b6b;
	/* Widths (overridden from Events → Page Layout Settings) */
	--pep-max: 1540px;
	--pep-left: 240px;
	--pep-right: 240px;
	--pep-gap: 30px;
	--pep-top: calc(2rem + var(--wp-admin--admin-bar--height, 0px));
}

/* ---------- Frame ---------- */

.entry-content > .pep-page,
.pep-page {
	display: grid;
	grid-template-columns: var(--pep-left) minmax(0, 1fr) var(--pep-right);
	gap: var(--pep-gap);
	align-items: start;
	/* Break out of the theme's content width (the frame sits inside EM's
	   container) and centre on the window */
	width: min(var(--pep-max), calc(100vw - 40px)) !important;
	max-width: none !important;
	margin-left: calc(50% - min(var(--pep-max), calc(100vw - 40px)) / 2) !important;
	margin-right: 0 !important;
}

.pep-area--left  { grid-column: 1; grid-row: 1; align-self: stretch; }
.pep-area--main  { grid-column: 2; grid-row: 1; min-width: 0; }
.pep-area--right { grid-column: 3; grid-row: 1; align-self: stretch; }

/* Twenty Twenty narrows children of groups and the content column; not inside the frame */
.pep-page .pep-area > *,
.pep-page [class*="__inner-container"] > *:not(.alignleft):not(.alignright) {
	max-width: none !important;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}
.pep-page .pep-area--main > * + * { margin-top: 0; }

.pep-sticky {
	position: sticky;
	top: var(--pep-top);
	max-height: calc(100vh - var(--pep-top) - 2rem);
	overflow-y: auto;
	box-sizing: border-box;
	padding: 2rem;
	border-radius: 10px;
	background: var(--pep-panel);
	color: #fff;
	font-size: 1.7rem;
	scrollbar-width: thin;
}
.pep-sticky > * { margin-top: 0 !important; margin-bottom: 1.6rem !important; }
.pep-sticky > *:last-child { margin-bottom: 0 !important; }
.pep-sticky a { color: #fff; }
.pep-sticky a:hover,
.pep-sticky a:focus { color: var(--pep-orange); }

.pep-drawer-close { display: none; }

/* ---------- Sections in the main column ---------- */

.pep-page .wp-block-group.is-style-pep-section {
	box-sizing: border-box;
	margin: 0 0 var(--pep-gap);
	padding: 3rem;
	border-radius: 12px;
	background-color: #fff;
	color: #000;
}
.pep-page .is-style-pep-section > .wp-block-group__inner-container { margin: 0; }
.pep-page .is-style-pep-section > :first-child,
.pep-page .is-style-pep-section > .wp-block-group__inner-container > :first-child { margin-top: 0 !important; }
.pep-page .is-style-pep-section > :last-child,
.pep-page .is-style-pep-section > .wp-block-group__inner-container > :last-child { margin-bottom: 0 !important; }

.pep-page .is-style-pep-banner {
	box-sizing: border-box;
	margin: 0 0 2rem !important;
	padding: 1rem 2rem !important;
	border-radius: 10px;
	background: #000;
	color: #fff;
	font-size: 2.4rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}
.pep-page .is-style-pep-banner p { margin: 0; }
.pep-page .is-style-pep-banner a { color: var(--pep-orange); }

/* Headings & text: from Page Layout Settings → Headings & text (CSS variables set on .pep-page).
   Prefixed with .pep-page so they beat Twenty Twenty's .entry-content h2/p/li rules, which load
   later; anything set on a block in the layout editor (inline styles) still wins. */
.pep-area--main :is(h2, h3, h4, h5, h6) { scroll-margin-top: var(--pep-top); }
.pep-page :is(.pep-area--main, .pep-area--booking) h2 { margin: var(--pep-h2-above) 0 var(--pep-h2-below); font-size: var(--pep-h2-size); font-weight: var(--pep-h2-weight); line-height: var(--pep-h2-lh); letter-spacing: var(--pep-h2-ls); text-transform: var(--pep-h2-case); color: var(--pep-h2-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) h3 { margin: var(--pep-h3-above) 0 var(--pep-h3-below); font-size: var(--pep-h3-size); font-weight: var(--pep-h3-weight); line-height: var(--pep-h3-lh); letter-spacing: var(--pep-h3-ls); text-transform: var(--pep-h3-case); color: var(--pep-h3-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) h4 { margin: var(--pep-h4-above) 0 var(--pep-h4-below); font-size: var(--pep-h4-size); font-weight: var(--pep-h4-weight); line-height: var(--pep-h4-lh); letter-spacing: var(--pep-h4-ls); text-transform: var(--pep-h4-case); color: var(--pep-h4-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) h5 { margin: var(--pep-h5-above) 0 var(--pep-h5-below); font-size: var(--pep-h5-size); font-weight: var(--pep-h5-weight); line-height: var(--pep-h5-lh); letter-spacing: var(--pep-h5-ls); text-transform: var(--pep-h5-case); color: var(--pep-h5-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) h6 { margin: var(--pep-h6-above) 0 var(--pep-h6-below); font-size: var(--pep-h6-size); font-weight: var(--pep-h6-weight); line-height: var(--pep-h6-lh); letter-spacing: var(--pep-h6-ls); text-transform: var(--pep-h6-case); color: var(--pep-h6-color, inherit); }
.pep-page :is(.pep-area--main, .pep-area--booking) p { margin: var(--pep-p-above) 0 var(--pep-p-below); font-size: var(--pep-p-size); font-weight: var(--pep-p-weight); line-height: var(--pep-p-lh); letter-spacing: var(--pep-p-ls); text-transform: var(--pep-p-case); }
.pep-page :is(.pep-area--main, .pep-area--booking) :is(ul, ol) { margin-top: 0; margin-bottom: var(--pep-list-below); font-size: var(--pep-list-size); font-weight: var(--pep-list-weight); line-height: var(--pep-list-lh); letter-spacing: var(--pep-list-ls); text-transform: var(--pep-list-case); }
.pep-page :is(.pep-area--main, .pep-area--booking) li { margin-top: var(--pep-list-above); margin-bottom: 0; font-size: inherit; line-height: inherit; }
.pep-page :is(.pep-area--main, .pep-area--booking) li > :is(ul, ol) { margin-bottom: 0; }

/* ---------- Panels in the old tab colours ----------
   Panel – orange: orange border, light see-through background (old Overview tab)
   Panel – white:  white border, dark see-through background (old Reviews tab)
   Panel – black:  black border, orange see-through background (old Booking/Details tabs)
   The panel's first heading becomes a full-width header strip in the border colour. */

/* No !important on these: anything set on the block in the layout editor
   (border, padding, colours…) is applied inline and wins. */
.pep-page .wp-block-group.is-style-pep-orange,
.pep-page .wp-block-group.is-style-pep-white,
.pep-page .wp-block-group.is-style-pep-black {
	box-sizing: border-box;
	margin: 0 0 var(--pep-gap);
	padding: 0 2.5rem 2.5rem;
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	overflow: hidden;
}
.pep-page .wp-block-group.is-style-pep-orange { border-color: var(--pep-orange); background-color: rgba(255, 255, 255, .4); color: #000; }
.pep-page .wp-block-group.is-style-pep-white  { border-color: #fff; background-color: rgba(0, 0, 0, .4); color: #fff; }
.pep-page .wp-block-group.is-style-pep-black  { border-color: #000; background-color: rgba(237, 139, 0, .4); color: #000; }
.pep-page .is-style-pep-white a { color: var(--pep-orange); }

.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > h2:first-child,
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > h2:first-child {
	margin: 0 -2.5rem var(--pep-strip-below);
	padding: 1.2rem 2.5rem;
	font-size: var(--pep-strip-size);
	font-weight: var(--pep-strip-weight);
	line-height: var(--pep-strip-lh);
	/* The strip spans the panel's default side padding; if you change a panel's
	   side padding in the editor, set the heading's own colours/spacing to suit. */
	letter-spacing: var(--pep-strip-ls);
	text-transform: var(--pep-strip-case);
}
.pep-page .is-style-pep-orange > h2:first-child,
.pep-page .is-style-pep-orange > .wp-block-group__inner-container > h2:first-child { background: var(--pep-orange); color: var(--pep-strip-color, #000); }
.pep-page .is-style-pep-white > h2:first-child,
.pep-page .is-style-pep-white > .wp-block-group__inner-container > h2:first-child { background: #fff; color: var(--pep-strip-color, var(--pep-orange)); }
.pep-page .is-style-pep-black > h2:first-child,
.pep-page .is-style-pep-black > .wp-block-group__inner-container > h2:first-child { background: #000; color: var(--pep-strip-color, #fff); }

/* A panel with no heading at the top still gets its top padding */
/* (Classic themes wrap the panel's contents in an extra .wp-block-group__inner-container
   div, which the editor doesn't have; it must not get the spacing itself.) */
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container { margin: 0; }
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > :first-child:not(h2):not(.wp-block-group__inner-container),
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > :first-child:not(h2) { margin-top: 2.5rem; }
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > :last-child:not(.wp-block-group__inner-container),
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }

/* Summary box: white border, no fill (the WHEN/WHERE | metrics | BRIEF box) */
.pep-page .wp-block-group.is-style-pep-summary {
	box-sizing: border-box;
	margin: 0 0 2.5rem;
	padding: 2rem;
	border-width: 5px;
	border-style: solid;
	border-color: #fff;
	border-radius: 10px;
}
.pep-page .is-style-pep-summary .wp-block-columns { gap: 2em; margin-top: 0; margin-bottom: 0; }
.pep-page .is-style-pep-summary .wp-block-column > :first-child { margin-top: 0; }
.pep-page .is-style-pep-summary .wp-block-column > :last-child { margin-bottom: 0; }
/* Tidy spacing: groups inside the box add no space of their own (the theme gives them 3rem), so
   each section is spaced by its heading's "above" from Page Layout Settings. Alignment is left
   to the blocks (paragraph/heading alignment, or the pep-centre class). */
/* (Twenty Twenty's ".wp-block-group:not(.alignwide):not(.alignfull)" is as specific as a plain
   rule and loads later, so this one is made a step stronger.) */
.pep-page .wp-block-group.is-style-pep-summary .wp-block-group { margin-top: 0; margin-bottom: 0; }

/* pep-centre (Additional CSS class on any block or group): everything inside centred, including
   Site Reviews stars and Row/Stack contents */
.pep-page .pep-centre,
.pep-page .pep-centre :is(p, h2, h3, h4, h5, h6, li, div) { text-align: center; }
.pep-page .pep-centre :is(.glsr-summary, .glsr-summary-stars, .glsr-star-rating),
.pep-page .pep-centre .is-layout-flex { justify-content: center; }

/* Empty paragraphs (left by shortcodes and placeholders) take no space */
.pep-page p:empty { display: none; }

/* Headings inside panels */
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) h3 {
	padding-bottom: .6rem;
	border-bottom: 3px solid currentColor;
}

@media (max-width: 781px) {
	.pep-page .wp-block-group.is-style-pep-orange,
	.pep-page .wp-block-group.is-style-pep-white,
	.pep-page .wp-block-group.is-style-pep-black { padding: 0 1.6rem 1.6rem; }
	.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > h2:first-child,
	.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > h2:first-child { margin-left: -1.6rem; margin-right: -1.6rem; padding: 1rem 1.6rem; font-size: var(--pep-strip-size-m); }
	/* Stacked columns: the same gap as above a heading */
	.pep-page .is-style-pep-summary .wp-block-columns { row-gap: var(--pep-h3-above, 1.5rem); }
}

/* "In Contents only" headings: not shown, but still a target for the Contents links */
.pep-page :is(h1, h2, h3, h4, h5, h6).pep-toc-only {
	display: block !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	font-size: 0 !important;
	line-height: 0 !important;
	background: none !important;
}
/* A panel whose header strip is hidden still gets its top padding */
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .pep-toc-only:first-child + *,
.pep-page :is(.is-style-pep-orange, .is-style-pep-white, .is-style-pep-black) > .wp-block-group__inner-container > .pep-toc-only:first-child + * { margin-top: 2.5rem !important; }

/* ---------- Book Now ---------- */

.pep-btn {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 1.4rem 2rem;
	border: 0;
	border-radius: 100px;
	background: var(--pep-orange);
	color: #000 !important;
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: center;
	text-decoration: none !important;
	text-transform: none;
	cursor: pointer;
}
.pep-btn:hover,
.pep-btn:focus { background: #000; color: var(--pep-orange) !important; text-decoration: none; }
.pep-btn--alt { background: #000; color: var(--pep-orange) !important; }
.pep-btn--alt:hover,
.pep-btn--alt:focus { background: var(--pep-orange); color: #000 !important; }
.pep-btn--done { background: #fff; }
.pep-btn.is-disabled { background: #d6d6d6; color: #444 !important; cursor: default; }

/* ---------- Contents ---------- */

.pep-toc__title { margin: 0 0 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pep-toc__list { margin: 0; padding: 0; list-style: none; }
.pep-toc__list li { margin: 0; }
.pep-toc__list a {
	display: block;
	padding: .6rem 0 .6rem 1.2rem;
	border-left: 3px solid transparent;
	text-decoration: none;
	line-height: 1.3;
}
.pep-toc__list .is-h3 a { padding-left: 2.4rem; font-size: .9em; }
.pep-toc__list a.is-active { border-left-color: var(--pep-orange); color: var(--pep-orange); }
.pep-toc[data-empty] { display: none; }

/* ---------- Menu ---------- */

.pep-menu__title { margin: 0 0 1rem; font-weight: 700; }
.pep-menu__list,
.pep-menu__list .sub-menu { margin: 0; padding: 0; list-style: none; }
.pep-menu__list li { position: relative; margin: 0; }
.pep-menu__list a { display: block; padding: .5rem 3rem .5rem 0; }
.pep-menu__list .sub-menu { display: none; padding-left: 1.4rem; }
.pep-menu__list li.is-open > .sub-menu { display: block; }
.pep-menu__toggle {
	position: absolute;
	top: .2rem;
	right: 0;
	width: 2.6rem;
	height: 2.6rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
	cursor: pointer;
	transition: transform .15s;
}
.pep-menu__list li.is-open > .pep-menu__toggle { transform: rotate(180deg); }

/* ---------- Booking pop-up ---------- */

/* Basket mode: second button ("keep browsing") under EM's submit button, and the note after adding */
.pep-modal .pep-mb-more {
	display: block;
	width: 100%;
	margin-top: 1rem;
	padding: 1.4rem 2rem;
	border: 2px solid var(--pep-bf-btn-bg, #000);
	border-radius: 0;
	background: transparent;
	color: var(--pep-bf-btn-bg, #000);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
}
.pep-modal .pep-mb-more:hover,
.pep-modal .pep-mb-more:focus { background: var(--pep-bf-btn-bg, #000); color: var(--pep-bf-btn-fg, #fff); }
.pep-modal .pep-mb-more[disabled] { opacity: .5; cursor: default; }
.pep-modal .pep-mb-more.hidden { display: none; }
.pep-toast {
	position: fixed;
	left: 50%;
	bottom: 3rem;
	z-index: 100001;
	transform: translateX(-50%);
	padding: 1.2rem 2.4rem;
	border-radius: 100px;
	background: #000;
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
	transition: opacity .6s;
}
.pep-toast.is-gone { opacity: 0; }
@media (max-width: 781px) { .pep-toast { bottom: 8rem; } }

.pep-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(0, 0, 0, .65);
}
.pep-modal[hidden] { display: none; }
.pep-modal__box {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 90rem;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	background: #fff;
	color: #000;
	font-size: 1.7rem;
}
/* The close button sits in the top right corner of the pop-up's contents and stays
   there while they scroll (a zero-height sticky bar, so it takes no space). */
.pep-modal__bar {
	position: sticky;
	top: 0;
	z-index: 2;
	height: 0;
}
.pep-modal__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 4rem;
	height: 4rem;
	padding: 0;
	border-radius: 50%;
	background: #000;
	color: #fff;
	font-size: 2.6rem;
	line-height: 1;
}
.pep-modal__body { flex: 1 0 auto; padding: 5rem 3rem 3rem; }
.pep-modal__body > :first-child { margin-top: 0; }
.pep-modal__body > :last-child { margin-bottom: 0 !important; }
/* When the pop-up is one Group (e.g. Panel – black), the Group is the box: no white
   frame round it. The white behind only shows through see-through panel fills. */
.pep-modal__body:has(> .wp-block-group:only-child) { display: flex; flex-direction: column; padding: 0; }
.pep-modal__body > .wp-block-group:only-child { flex: 1 0 auto; margin: 0 !important; }

/* The close button fades back while the form scrolls on phones (front.js adds is-scrolling) */
.pep-modal__close { transition: opacity .3s; }
@media (max-width: 781px) {
	.pep-modal.is-scrolling .pep-modal__close { opacity: .25; }
}

/* Booking form (Events Manager) in the pop-up. Colours and spacing: Page Layout Settings → Booking form. */
.pep-modal .em-event-booking-form section { padding: 0; }
.pep-modal .em-booking-form-details { width: 100%; }
.pep-modal .em-tickets { border-width: 1px; }
.pep-modal :is(input[type=text], input[type=password], input[type=email], input[type=url], input[type=date], input[type=month], input[type=time], input[type=datetime], input[type=datetime-local], input[type=week], input[type=number], input[type=search], input[type=tel], input[type=color], textarea) { padding: var(--pep-bf-pad, 8px); }
.pep-modal .em-booking-submit,
.pep-modal input[type=submit].em-booking-submit {
	width: 100%;
	border-color: var(--pep-bf-btn-bg, #000) !important;
	background: var(--pep-bf-btn-bg, #000) !important;
	color: var(--pep-bf-btn-fg, #fff) !important;
}
@media (max-width: 600px) {
	.pep-modal .em-booking-form label,
	.pep-modal form.em-booking-form :is(select, input[type=text], input[type=email], input[type=tel], input[type=number], textarea) { width: 100%; }
}
html.pep-lock,
html.pep-lock body { overflow: hidden; }

/* ---------- Gallery ---------- */

.pep-gallery__heading { margin-top: 0; }

/* ---------- Bottom bar and slide-out panels (hidden on wide screens) ---------- */

.pep-bar { display: none; }
/* The bar and scrim can land straight inside .entry-content (e.g. on EM's Events page), where
   Twenty Twenty gives every child a width of 100% - 4rem, auto side margins and a bottom margin –
   which would pull a fixed bar in from the edges and up off the bottom. */
.entry-content > .pep-bar,
.entry-content > .pep-scrim,
.pep-bar,
.pep-scrim { width: auto !important; max-width: none !important; margin: 0 !important; }
.pep-scrim {
	position: fixed;
	inset: 0;
	z-index: 99990;
	background: rgba(0, 0, 0, .5);
}
.pep-scrim[hidden] { display: none; }

@media (max-width: 1099px) {
	.entry-content > .pep-page,
	.pep-page { grid-template-columns: var(--pep-left) minmax(0, 1fr); gap: 24px; }

	.pep-area--right {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99995;
		width: min(86vw, 34rem);
		overflow-y: auto;
		background: var(--pep-panel);
		transform: translateX(105%);
		transition: transform .2s ease;
	}
	.pep-area--right.is-open { transform: none; box-shadow: -4px 0 20px rgba(0, 0, 0, .35); }
	.pep-area--right .pep-sticky { position: static; max-height: none; overflow: visible; padding-top: 6rem; border-radius: 0; }
	.pep-area--right .pep-drawer-close { display: flex; }

	.pep-drawer-close {
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 1;
		width: 4rem;
		height: 4rem;
		padding: 0;
		border-radius: 50%;
		background: #000;
		color: #fff;
		font-size: 2.6rem;
		line-height: 1;
	}
	/* Keep it a circle whatever the theme does to buttons (padding, min-height, letter spacing…) */
	.pep-drawer-close {
		box-sizing: border-box !important;
		width: 4rem !important;
		height: 4rem !important;
		min-width: 4rem !important;
		min-height: 0 !important;
		max-width: 4rem !important;
		max-height: 4rem !important;
		aspect-ratio: 1;
		padding: 0 !important;
		margin: 0 !important;
		letter-spacing: 0 !important;
		align-items: center;
		justify-content: center;
		flex: none;
	}

	.pep-bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99980;
		display: flex;
		gap: 1rem;
		align-items: center;
		padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
		background: #000;
	}
	.pep-bar__book { flex: 1; }
	.pep-bar__book .pep-btn { padding: 1.1rem 1.4rem; font-size: 1.7rem; }
	.pep-bar__btn {
		flex: 0 0 auto;
		margin-left: auto;
		padding: 1.1rem 1.6rem;
		border: 2px solid #fff;
		border-radius: 100px;
		background: transparent;
		color: #fff;
		font-size: 1.6rem;
		font-weight: 700;
		text-transform: none;
	}
	.pep-bar__book + .pep-bar__btn { margin-left: 0; }
	/* No Book Now: Contents/Filters on the left, Menu on the right */
	.pep-bar > .pep-bar__btn:first-child { margin-left: 0; }
	.pep-bar__btn[data-pep-drawer="left"] { display: none; }
	body.pep-event { padding-bottom: 7rem; }
}

@media (max-width: 781px) {
	.entry-content > .pep-page,
	.pep-page {
		grid-template-columns: minmax(0, 1fr);
		width: calc(100vw - 2.4rem) !important;
		margin-left: calc(50% - 50vw + 1.2rem) !important;
	}
	.pep-area--main { grid-column: 1; }

	.pep-area--left {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 99995;
		width: min(86vw, 34rem);
		overflow-y: auto;
		background: var(--pep-panel);
		transform: translateX(-105%);
		transition: transform .2s ease;
	}
	.pep-area--left.is-open { transform: none; box-shadow: 4px 0 20px rgba(0, 0, 0, .35); }
	.pep-area--left .pep-sticky { position: static; max-height: none; overflow: visible; padding-top: 6rem; border-radius: 0; }
	.pep-area--left .pep-drawer-close { display: flex; }
	/* The bottom bar already has Book Now */
	.pep-area--left .pep-book { display: none; }

	.pep-bar__btn[data-pep-drawer="left"] { display: block; }

	.pep-page .wp-block-group.is-style-pep-section { padding: 2rem; }
	.pep-page .is-style-pep-banner { font-size: 1.9rem; }
	.pep-page :is(.pep-area--main, .pep-area--booking) h2 { font-size: var(--pep-h2-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) h3 { font-size: var(--pep-h3-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) h4 { font-size: var(--pep-h4-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) h5 { font-size: var(--pep-h5-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) h6 { font-size: var(--pep-h6-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) p { font-size: var(--pep-p-size-m); }
	.pep-page :is(.pep-area--main, .pep-area--booking) :is(ul, ol) { font-size: var(--pep-list-size-m); }

	.pep-modal { padding: 0; }
	.pep-modal__box { max-width: none; max-height: none; height: 100%; border-radius: 0; }
	.pep-modal__body { padding: 6rem 2rem 4rem; }
	.pep-modal__body > .wp-block-group:only-child { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pep-area--left,
	.pep-area--right,
	.pep-menu__toggle { transition: none; }
}

/* =========================================================
   Carried over from the old single event format
   ========================================================= */

/* Summary box (WHEN/WHERE | Metrics | BRIEF) */
.pep-page #Metrics { width: 100%; margin: 0; }
.pep-page #Metrics td { border: hidden; text-align: center; vertical-align: middle; }
.pep-page .img-center { display: block; width: 35px; height: 35px; margin: 0 auto; }
.pep-page #Metrics .enquiry-link { display: inline-flex; align-items: center; gap: 10px; }
.pep-page #Metrics .enquiry-link img { flex-shrink: 0; width: 35px; height: 35px; }
.pep-page .ev-tags { margin-top: 1em; text-align: center; }
.pep-page .ev-tags .emecp-tagcards { margin: 0; }

/* Route map: full width of its white section */
.pep-page #over-map-box { position: relative; z-index: 2; display: block; margin: 0 -3rem 2rem; }
@media (max-width: 781px) { .pep-page #over-map-box { margin: 0 -2rem 2rem; } }

/* Coupon code (EM Coupons): Apply/Remove button, white with black border */
.emc-coupons .em-coupon-code-fields { align-items: stretch; }
.emc-coupons .em-coupon-code-button {
	background: #fff !important;
	color: #000 !important;
	border: 2px solid #000;
	border-radius: 0;
	padding: 0 2rem;
	margin: 0;
	height: auto;
	min-height: 0;
	opacity: 1;
}
.emc-coupons .em-coupon-code-button:hover,
.emc-coupons .em-coupon-code-button:focus { text-decoration: underline; }
.emc-coupons .em-coupon-code-button:disabled { opacity: .6; cursor: wait; }

/* Less space between the cover image and the page (Twenty Twenty pads the
   article top by 8rem), and the three columns start level */
body.pep-event .post-inner { padding-top: 4rem; }
body.pep-event .entry-content > .em,
body.pep-event .entry-content .em-view-container,
body.pep-event .entry-content .em-event-single { margin-top: 0 !important; padding-top: 0 !important; }
.pep-page { margin-top: 0 !important; }
.pep-page .pep-area--main > * { margin-top: 0 !important; }
.pep-page .pep-area > .pep-sticky > :first-child { margin-top: 0 !important; }

/* Twenty Twenty sets overflow:hidden on #site-content, which stops position:sticky
   working. clip still hides sideways overflow but leaves sticky alone. */
body.pep-event #site-content { overflow: visible !important; overflow-x: clip !important; }

/* ---------- Venue pages ---------- */

/* "Next event here" box in the left sidebar */
.pep-next { margin: 0 0 2rem; }
.pep-next p { margin: 0 0 .6rem; }
.pep-next__title { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.4rem; }
.pep-next__name a { color: inherit; font-weight: 700; }
.pep-next__when { font-size: 1.5rem; opacity: .85; }
.pep-next .pep-btn { margin-top: .8rem; }
.pep-next__none { font-size: 1.5rem; opacity: .85; }

/* Venue map: framed like the route map */
.pep-venue-map { margin: 0 0 var(--pep-gap); border: 5px solid #fff; border-radius: 10px; overflow: hidden; background: #fff; }
.pep-venue-map .leaflet-container { margin: 0; }

.pep-map-key { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; padding: .8rem 1.2rem; list-style: none; background: #fff; color: #000; font-size: 1.4rem; }
.pep-map-key li { margin: 0; display: flex; align-items: center; gap: .6rem; }
.pep-map-key span { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 50%; }

/* ---------- Category and tag pages ---------- */

.pep-subcats { margin-top: 2rem; }
.pep-subcats__title { margin: 0 0 .8rem; font-weight: 700; }
.pep-subcats ul { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.pep-subcats li { margin: 0; }
/* Colours from the block's settings (default white with black border and text; orange on hover) */
.pep-page .pep-subcats a { display: inline-block; padding: .4rem 1.2rem; border: 3px solid var(--pep-sc-fg-border, var(--pep-sc-fg, #000)); border-radius: 100px; background: var(--pep-sc-bg, #fff); color: var(--pep-sc-fg, #000) !important; font-size: 1.5rem; font-weight: 700; text-decoration: none; }
/* Multicolour categories (tricolour, rainbow): gradient border, as on the category cards */
.pep-page .pep-subcats a.is-multi { border-color: transparent; background: linear-gradient(var(--pep-sc-bg, #fff), var(--pep-sc-bg, #fff)) padding-box, var(--pep-sc-multi) border-box; }
.pep-page .pep-subcats a.is-multi:hover, .pep-page .pep-subcats a.is-multi:focus { border-color: transparent; background: linear-gradient(var(--pep-sc-hoverbg, #ed8b00), var(--pep-sc-hoverbg, #ed8b00)) padding-box, var(--pep-sc-multi) border-box; }
.pep-page .pep-subcats a:hover, .pep-page .pep-subcats a:focus { background: var(--pep-sc-hoverbg, #ed8b00); border-color: var(--pep-sc-hoverbg, #ed8b00); color: var(--pep-sc-hoverfg, #000) !important; }

/* Fold-down sections (Details block), e.g. past events */
.pep-page .wp-block-details > summary { cursor: pointer; padding: .8rem 0; font-weight: 700; }
.pep-page .wp-block-details[open] > summary { margin-bottom: 1.5rem; }

/* AddToAny's own buttons under the content: the layouts have them in the right sidebar
   (this stylesheet only loads on pages using a layout) */
.addtoany_content_bottom, .addtoany_content_top { display: none !important; }

.pep-parent-cat { margin: 0 0 2rem; }

/* ---------- Bucket and checkout pages ---------- */

/* Bucket: "Proceed to checkout" (black, like the pop-up's checkout button) above
   "Empty bucket" (outline, like "keep browsing"), stacked full width */
.pep-page .em-cart-actions form { display: flex; flex-direction: column-reverse; gap: 1rem; margin: 2rem 0 0; }
.pep-page .em-cart-actions button {
	display: block;
	width: 100%;
	margin: 0;
	padding: 1.4rem 2rem;
	border: 2px solid var(--pep-bf-btn-bg, #000);
	border-radius: 0;
	background: var(--pep-bf-btn-bg, #000);
	color: var(--pep-bf-btn-fg, #fff);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	cursor: pointer;
}
.pep-page .em-cart-actions button.em-cart-actions-empty { background: transparent; color: var(--pep-bf-btn-bg, #000); }
.pep-page .em-cart-actions button.em-cart-actions-empty:hover,
.pep-page .em-cart-actions button.em-cart-actions-empty:focus { background: var(--pep-bf-btn-bg, #000); color: var(--pep-bf-btn-fg, #fff); }
.pep-page .em-cart-actions button:not(.em-cart-actions-empty):hover,
.pep-page .em-cart-actions button:not(.em-cart-actions-empty):focus { opacity: .85; }

/* Checkout: keep a gap between the card form and the button (Stripe's form changes height as it loads) */
.pep-page-content .em-booking-submit,
.pep-page-content input[type=submit].em-form-submit { margin-top: 2rem !important; }

/* Groups, columns etc. in page layouts: none of Twenty Twenty's own spacing (3rem above and below
   groups and columns, 3.2rem under each column, 2rem padding in coloured groups). Space comes
   from the layout instead – the heading/text settings, the Ped panel styles, and whatever is set
   on a block in the editor (Dimensions → margin/padding), which always wins. */
.pep-page :is(.wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text):not([style*="margin-top"]):not(.is-style-pep-banner) { margin-top: 0 !important; }
.pep-page :is(.wp-block-group, .wp-block-columns, .wp-block-cover, .wp-block-media-text):not([style*="margin-bottom"]):not([class*="is-style-pep-"]) { margin-bottom: 0 !important; }
.pep-page .wp-block-column:not([style*="margin-bottom"]) { margin-bottom: 0 !important; }
.pep-page .wp-block-group.has-background:not([style*="padding"]):not([class*="is-style-pep-"]) { padding: 0; }
/* Ped sections and panels keep their gap below (the theme's margin used to win over it) */
.pep-page .wp-block-group:is(.is-style-pep-section, .is-style-pep-orange, .is-style-pep-white, .is-style-pep-black):not([style*="margin-bottom"]) { margin-bottom: var(--pep-gap) !important; }
.pep-page .wp-block-group.is-style-pep-summary:not([style*="margin-bottom"]) { margin-bottom: 2.5rem !important; }

/* ---------- "Booked with us before?" login step ---------- */
.pep-login .pep-modal__box { max-width: 52rem; }
.pep-login__inner { text-align: center; }
.pep-login .wp-block-separator { margin: 2.4rem auto 1.6rem; border-color: currentColor; opacity: .4; }
.pep-login__title { margin: 0 0 .6rem; font-size: 2.6rem; }
.pep-login__intro { margin: 0 0 2rem; }
.pep-login__form { text-align: left; }
.pep-login__form .lwa { margin: 0 auto; max-width: 40rem; }
.pep-login__or { display: flex; align-items: center; gap: 1rem; margin: 2.4rem 0 1.6rem; color: #6b6b6b; font-size: 1.4rem; text-transform: uppercase; letter-spacing: .1em; }
.pep-login__or::before,
.pep-login__or::after { content: ""; flex: 1; border-top: 1px solid #c3c4c7; }
.pep-login__skip { display: block; width: 100%; max-width: 40rem; margin: 0 auto; }
.pep-login__note { margin: 1.2rem auto 0; max-width: 40rem; font-size: 1.5rem; }
.pep-login .pep-modal__box { background: var(--pep-panel); color: #fff; }
.pep-login :is(.pep-login__title, .pep-login__intro, .pep-login__note) { color: #fff; }
.pep-login .pep-login__or { color: rgba(255, 255, 255, .75); }
.pep-login .pep-login__or::before,
.pep-login .pep-login__or::after { border-top-color: rgba(255, 255, 255, .4); }
/* Your Login With Ajax styling is made for the dark sidebar (white Log In button and text), so the box matches it */
.pep-login .pep-login__form a { color: inherit !important; }
.pep-login .pep-login__form a:hover,
.pep-login .pep-login__form a:focus { color: var(--pep-orange) !important; }

/* Room under the booking form: a gap between the last question and the buttons, and space below them */
.pep-modal form.em-booking-form { padding-bottom: 3rem; }
.pep-modal .em-booking-submit,
.pep-modal input[type=submit].em-booking-submit { margin-top: 2rem !important; }
.pep-page-content form.em-booking-form { padding-bottom: 2rem; }

/* Bucket and checkout summaries: Spaces and Price keep their width (no "Space s" / "£7.5 0") */
.pep-page .em-cart-table table { width: 100%; }
.pep-page .em-cart-table :is(.em-cart-title-spaces, .em-cart-table-spaces) { width: 7.5rem; min-width: 7.5rem; white-space: nowrap; text-align: center; }
.pep-page .em-cart-table :is(.em-cart-title-price, .em-cart-table-price),
.pep-page .em-cart-table tr > :last-child { width: 9rem; min-width: 9rem; white-space: nowrap; }
.pep-page .em-cart-table tr > :only-child { width: auto; min-width: 0; white-space: normal; }

/* EM notices (e.g. "Your booking payment has been cancelled" after Stripe's back arrow): white with a
   black edge (red for errors) instead of EM's green and red. (EM's own rules are
   ".em .em-notice.em-notice-success" with !important, so these are made more specific.) */
:is(.pep-page, .pep-modal) .em-notice.em-notice.em-notice {
	margin: 0 0 2rem !important;
	padding: 1.4rem 1.8rem !important;
	border: 0 !important;
	border-left: 6px solid #000 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #000 !important;
	font-weight: 600;
	box-shadow: none !important;
}
:is(.pep-page, .pep-modal) .em-notice.em-notice.em-notice p { margin: 0 !important; color: inherit !important; font-size: inherit; }
:is(.pep-page, .pep-modal) .em-notice.em-notice.em-notice a { color: inherit !important; }
:is(.pep-page, .pep-modal) .em-notice.em-notice.em-notice-error { border-left-color: #c00 !important; }

/* Bottom bar waits below the screen until the Summary box has scrolled away (front.js) */
@media (max-width: 1099px) {
	.pep-bar { transition: transform .25s ease; }
	.pep-bar.is-away { transform: translateY(110%); }
	/* Menu button as icons: login (bike into a door, logged-out visitors) and hamburger */
	.pep-bar__btn--menu { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.4rem; }
	.pep-bar__btn--menu svg { display: block; width: auto; height: 2.6rem; }
	.pep-bar__btn--menu .pep-ico-login { height: 2.8rem; }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) { .pep-bar { transition: none; } }

/* Ped Login button: Log in (opens the login pop-up) / Log out, with the bike-and-door icons */
.pep-login-wrap { margin: 0 0 2rem; }
.pep-login-btn { display: flex !important; align-items: center; justify-content: center; gap: 1rem; width: 100%; }
.pep-login-btn .pep-ico { flex: none; width: auto; height: 2.4rem; }
/* Opened from the Ped Login button there's nothing to carry on to, so no "continue without" button */
.pep-login[data-pep-via="button"] .pep-login__skip { display: none !important; }
/* Login pop-up blocks ticked for other openings (Show to → Opens from) */
.pep-login .pep-from-off { display: none !important; }

/* Ped Cart: title like Contents, a tight list of ride codes with the date underneath */
.pep-cart { margin: 0 0 2rem; }
.pep-cart[hidden], .pep-checkout-wrap[hidden] { display: none !important; }
.pep-cart__title { margin: 0 0 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pep-cart__list { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.pep-cart__list li { margin: 0 0 .9rem !important; padding: 0 !important; line-height: 1.3; }
.pep-cart__list li::before { content: none !important; }
.pep-cart__list a { color: inherit; font-weight: 700; }
.pep-cart__when { display: block; font-size: .85em; opacity: .85; }
.pep-cart__empty { margin: 0; opacity: .85; }
/* Ped Checkout button */
.pep-checkout-wrap { margin: 0 0 2rem; }
.pep-checkout-btn { display: block !important; width: 100%; text-align: center; }

/* Ped Cart: "−" to remove a ride (right-aligned) and "Empty bucket", both orange */
.pep-cart__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pep-cart__remove,
.pep-cart__empty-all { padding: 0; border: 0; background: none; color: var(--pep-orange, #ed8b00) !important; cursor: pointer; font: inherit; }
.pep-cart__remove { font-size: 1.3em; font-weight: 700; line-height: 1; padding: 0 .2rem; }
.pep-cart__empty-all { margin-top: .4rem; font-size: .9em; text-decoration: underline; text-transform: none; letter-spacing: 0; }
.pep-cart__remove:hover, .pep-cart__empty-all:hover,
.pep-cart__remove:focus-visible, .pep-cart__empty-all:focus-visible { color: #fff !important; background: none; }
.pep-cart.is-busy { opacity: .5; pointer-events: none; }

/* Ped Contact: "Organiser: Will Pomeroy ✉". The text wraps like any paragraph; the envelope sits
   beside it, centred, 2rem away, in a 35px-wide slot – the series logo's size – so the text edges
   line up with a logo row below. Text-sized on one line, the full 35px once the text wraps
   (front.js adds is-wrapped). The row sits by the line's text alignment – the block's Align
   setting, or whatever the column/your CSS gives it – and when that's left, the envelope goes
   before the name (front.js adds is-start). */
.pep-contact-line { margin: var(--pep-p-above, 5px) 0 0; }
.pep-contact-line__in { display: inline-flex; align-items: center; gap: 2rem; max-width: 100%; vertical-align: top; text-align: inherit; }
.pep-contact-line.is-start .pep-contact-ico { order: -1; width: auto; } /* flush with the left edge */
.pep-contact-line.has-text-align-left { text-align: left; }
.pep-contact-line.has-text-align-center { text-align: center; }
.pep-contact-line.has-text-align-right { text-align: right; }
.pep-contact-line__text { margin: 0 !important; text-align: inherit; }
.pep-page .pep-contact-btn {
	display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
	color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; text-transform: none; white-space: normal;
	text-decoration: underline; text-underline-offset: .15em; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pep-page .pep-contact-btn:hover,
.pep-page .pep-contact-btn:focus-visible { text-decoration-thickness: 2px; background: none; color: inherit; }
.pep-page .pep-contact-btn:focus-visible { outline: 3px solid var(--pep-orange, #ed8b00); outline-offset: 2px; }
.pep-page .pep-contact-ico { display: flex; align-items: center; justify-content: center; flex: none; width: 35px; margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.pep-contact-ico .pep-ico-mail { display: block; width: 1.4em; height: 1.4em; transition: width .15s, height .15s; }
.pep-contact-line.is-wrapped .pep-ico-mail { width: 35px; height: 35px; }
/* the pop-up: grey like the login pop-up */
.pep-contact .pep-modal__box { max-width: 46rem; background: var(--pep-panel, #6b6b6b); color: #fff; }
.pep-contact .pep-modal__body { padding: 4rem 3rem 3rem; text-align: center; }
.pep-contact__title { margin: 0 0 1rem; font-size: 2.4rem; font-weight: 700; text-transform: uppercase; }
.pep-contact__intro { margin: 0 0 2rem; }
.pep-contact__q { display: block; margin: 0 0 .8rem; font-weight: 700; }
.pep-contact__row { display: flex; gap: 1rem; justify-content: center; }
.pep-contact__row input { width: 7rem; text-align: center; font-size: 1.8rem; }
.pep-contact__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.pep-contact__msg { min-height: 1.5em; margin: 1rem 0 0; color: #fff; font-weight: 600; }
.pep-contact__ok { margin: 0 0 2rem; color: #fff; font-weight: 600; }
.pep-contact__mark { font-weight: 900; font-size: 1.3em; line-height: 1; }
.pep-contact__mark.is-wrong { color: #e4002b; }
.pep-contact__mark.is-right { color: #2ecc40; }
.pep-contact__done .pep-btn { display: block; width: 100%; }