/*
 * MEG redesign: static pages (page.php, template-full-width.php) and the 404 page.
 * The page head and the whole 404 page are MEG. Page content is WPBakery and
 * plugin shortcode output: its markup is untouched; here it gets the container
 * width, the light page colours and dark cards for boxes and plugin forms.
 * Logical properties only; physical left/right lives in rtl.css.
 */

/* Page ---------------------------------------------------------------------- */

html body.meg main.meg-page-main {
	display: block;
}

/* Head: eyebrow (404), h1, dek (404), featured image (pages) -------------- */

html body.meg .meg-page__head,
html body.meg main.meg-404-main {
	background-color: var(--meg-offwhite);
	color: var(--meg-kohl);
	font: 500 16px/1.45 var(--meg-sans);
	-webkit-font-smoothing: antialiased;
}

html body.meg .meg-page__head a,
html body.meg .meg-page__head a:hover,
html body.meg .meg-page__head a:focus-visible,
html body.meg main.meg-404-main a,
html body.meg main.meg-404-main a:hover,
html body.meg main.meg-404-main a:focus-visible {
	color: inherit;
}

.meg-page__head > .meg-wrap {
	padding-block: 40px 32px;
}

.meg-page__head {
	border-block-end: 1px solid var(--meg-line);
}

html body.meg .meg-page__eyebrow {
	margin: 0 0 16px;
}

html body.meg .meg-page__title {
	max-inline-size: 18ch;
	margin: 0;
	font-size: clamp(40px, 5.6vw, 84px);
	overflow-wrap: anywhere;
	color: inherit;
}

html body.meg .meg-page__dek {
	max-inline-size: 60ch;
	margin: 20px 0 0;
	color: var(--meg-muted);
	font-size: 20px;
	line-height: 1.4;
}

html body.meg .meg-page__head .meg-search {
	max-inline-size: 720px;
	margin-block-start: 28px;
}

.meg-page__figure {
	margin-block: 0;
	padding-block-end: 32px;
}

.meg-page__art {
	aspect-ratio: 21 / 9;
}

/* Content: parent wrappers, MEG width -------------------------------------- */

/*
 * .container keeps its Bootstrap gutter so .vc_row negative margins still
 * line up; it widens to the MEG wrap so content starts under the title.
 */
html body.meg .meg-page__content {
	padding-block: 48px var(--meg-sec);
}

html body.meg .meg-page__content > .container {
	box-sizing: border-box;
	inline-size: auto;
	max-inline-size: var(--meg-max);
	margin-inline: auto;
	padding-inline: var(--meg-pad);
}

/* Default template: reading column, same width as the parent's 8/12 column. */
html body.meg .meg-page__content--narrow .meg-page__body,
html body.meg .meg-page__content--narrow .meg-page__comments {
	max-inline-size: 780px;
}

html body.meg .meg-page__comments {
	margin-block-start: 64px;
}

/*
 * The site's Additional CSS turns some #post-ID wrappers into fixed, centred
 * dark panels (Login: #post-1016 { position: fixed; transform: ... }). Our
 * #post-ID.meg-page__body matches it; on MEG pages it flows under the head.
 */
html body.meg-page #content .meg-page__body {
	display: block;
	position: static;
	inset: auto;
	transform: none;
	inline-size: auto;
	max-block-size: none;
	overflow: visible;
	background-color: transparent;
}

/* Content colours: light page like the article body ------------------------ */

/*
 * Parent skin text colours (light on dark) give way to the page colour, except
 * inside dark cards ([alc_box]) and plugin forms, which keep light text.
 */
html body.meg .meg-page__content {
	background-color: var(--meg-offwhite);
	color: var(--meg-kohl);
}

/* The site's Additional CSS sets .entry-content { color: white; }. */
html body.meg .meg-page__body .entry-content {
	color: inherit;
}

html body.meg .meg-page__body :is(p, li, dt, dd, blockquote, h1, h2, h3, h4, h5, h6, label, figcaption, th, td):not(:is(.card, .ur-frontend-form) *) {
	color: inherit;
}

html body.meg .meg-page__body a:not(.btn, .button, .vc_btn3, :is(.card, .ur-frontend-form) *) {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--meg-dusk);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

html body.meg .meg-page__body .card {
	color: rgba(248, 247, 243, 0.8);
}

html body.meg .meg-page__body .ur-frontend-form {
	background-color: var(--meg-kohl);
	color: rgba(248, 247, 243, 0.8);
}

/* Page links (<!--nextpage-->) --------------------------------------------- */

html body.meg .meg-page__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	clear: both;
	margin-block-start: 48px;
	padding-block-start: 24px;
	border-block-start: 1px solid var(--meg-line);
}

html body.meg .meg-page__pages .post-page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-inline-size: 44px;
	block-size: 44px;
	padding: 0 14px;
	border: 1px solid var(--meg-line);
	color: inherit;
	text-decoration: none;
}

html body.meg .meg-page__pages a.post-page-numbers:hover,
html body.meg .meg-page__pages a.post-page-numbers:focus-visible {
	border-color: currentcolor;
}

html body.meg .meg-page__pages .post-page-numbers.current {
	border-color: var(--meg-kohl);
	background-color: var(--meg-kohl);
	color: var(--meg-offwhite);
}

/* 404 ----------------------------------------------------------------------- */

html body.meg main.meg-404-main {
	overflow-x: clip;
}

html body.meg .meg-404__home {
	margin: 28px 0 0;
}

html body.meg .meg-404__home-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 0 20px;
	border: 1px solid var(--meg-kohl);
	text-decoration: none;
}

/* Outranks the link colour of the parent skin. */
html body.meg main.meg-404-main .meg-404__home-link {
	color: var(--meg-kohl);
}

html body.meg main.meg-404-main .meg-404__home-link:hover,
html body.meg main.meg-404-main .meg-404__home-link:focus-visible {
	background-color: var(--meg-kohl);
	color: var(--meg-offwhite);
	text-decoration: none;
}

.meg-404__latest {
	padding-block: 48px var(--meg-sec);
}

/* Below 760px --------------------------------------------------------------- */

@media (max-width: 760px) {
	.meg-page__head > .meg-wrap {
		padding-block: 24px;
	}

	html body.meg .meg-page__title {
		font-size: 40px;
	}

	html body.meg .meg-page__dek {
		font-size: 18px;
	}

	.meg-page__figure {
		padding-inline: 0;
		padding-block-end: 0;
	}

	.meg-page__art {
		aspect-ratio: 4 / 3;
	}

	html body.meg .meg-page__content,
	.meg-404__latest {
		padding-block-start: 32px;
	}
}