/* MLY Announcements
   Everything is scoped under .mlya so nothing leaks into the theme.
   Colors and fonts come from the custom properties printed by MLYA_Presets. */

.mlya[hidden] { display: none; }

.mlya,
.mlya * { box-sizing: border-box; }

.mlya {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--mlya-body-font);
	-webkit-font-smoothing: antialiased;
}

.mlya__scrim {
	position: absolute;
	inset: 0;
	background: rgba(26, 24, 38, 0.62);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.mlya.is-open .mlya__scrim { opacity: 1; }

/* ------------------------------------------------------------------ Panel */

.mlya__panel {
	position: relative;
	width: 100%;
	max-width: var(--mlya-max-width);
	max-height: calc(100vh - 48px);
	overflow: hidden auto;
	background: var(--mlya-panel-bg);
	color: var(--mlya-panel-text);
	border-radius: var(--mlya-radius);
	box-shadow: var(--mlya-shadow);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.mlya.is-open .mlya__panel {
	opacity: 1;
	transform: translateY(0);
}

.mlya__inner { padding: 44px 46px 40px; }

.mlya__eyebrow {
	margin: 0 0 14px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--mlya-panel-eyebrow);
}

.mlya__heading {
	margin: 0;
	font-family: var(--mlya-head-font);
	font-size: clamp(24px, 4.2vw, 32px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--mlya-panel-heading);
}

.mlya__body {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--mlya-panel-text);
}

.mlya__body p { margin: 0 0 0.9em; }
.mlya__body p:last-child { margin-bottom: 0; }

.mlya__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mlya__actions { margin-top: 28px; }

/* ------------------------------------------------------------------ Image */

.mlya__media {
	position: relative;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

.mlya__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}

.mlya--media-top .mlya__media { aspect-ratio: 16 / 7; }
.mlya--media-top .mlya__inner { padding-top: 34px; }

/* Beside the text: two columns once there is room, stacked below that. */
.mlya--media-side .mlya__media { aspect-ratio: 16 / 9; }
.mlya--media-side .mlya__inner { padding-top: 34px; }

@media (min-width: 680px) {
	.mlya--media-side .mlya__panel {
		display: flex;
		align-items: stretch;
		max-width: 820px;
	}

	.mlya--media-side .mlya__media {
		flex: 0 0 42%;
		aspect-ratio: auto;
	}

	.mlya--media-side .mlya__inner {
		flex: 1 1 auto;
		padding: 44px 44px 40px 40px;
		min-width: 0;
	}
}

/* ------------------------------------------------------------------ Button */

.mlya__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 46px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--mlya-radius);
	background: var(--mlya-cta-bg);
	color: var(--mlya-cta-text);
	font-family: var(--mlya-body-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.2;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.mlya__cta:hover,
.mlya__cta:focus-visible {
	background: var(--mlya-cta-bg-hover);
	color: var(--mlya-cta-text-hover);
	text-decoration: none;
}

/* ------------------------------------------------------------------ Close */

.mlya__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mlya-panel-text);
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.18s ease, background-color 0.18s ease;
}

.mlya__close:hover,
.mlya__close:focus-visible {
	opacity: 1;
	background: var(--mlya-close-hover);
}

.mlya__close svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	fill: none;
}

/* Over a photograph the close button needs its own contrast. */
.mlya--media .mlya__close {
	background: rgba(24, 22, 34, 0.45);
	color: #ffffff;
	opacity: 1;
}

.mlya--media .mlya__close:hover,
.mlya--media .mlya__close:focus-visible { background: rgba(24, 22, 34, 0.7); }

@media (min-width: 680px) {
	.mlya--media-side .mlya__close {
		background: transparent;
		color: var(--mlya-panel-text);
		opacity: 0.65;
	}

	.mlya--media-side .mlya__close:hover,
	.mlya--media-side .mlya__close:focus-visible {
		opacity: 1;
		background: var(--mlya-close-hover);
	}
}

.mlya :focus-visible {
	outline: 2px solid var(--mlya-focus);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------ Presets */

.mlya--purple {
	--mlya-panel-bg: var(--mlya-brand);
	--mlya-panel-text: #ffffff;
	--mlya-panel-heading: #ffffff;
	--mlya-panel-eyebrow: rgba(255, 255, 255, 0.72);
	--mlya-cta-bg: #ffffff;
	--mlya-cta-text: var(--mlya-brand);
	--mlya-cta-bg-hover: var(--mlya-accent);
	--mlya-cta-text-hover: #ffffff;
	--mlya-close-hover: rgba(255, 255, 255, 0.16);
	--mlya-focus: #ffffff;
}

.mlya--rose {
	--mlya-panel-bg: var(--mlya-accent-deep);
	--mlya-panel-text: #ffffff;
	--mlya-panel-heading: #ffffff;
	--mlya-panel-eyebrow: rgba(255, 255, 255, 0.76);
	--mlya-cta-bg: #ffffff;
	--mlya-cta-text: var(--mlya-accent-deep);
	--mlya-cta-bg-hover: var(--mlya-ink);
	--mlya-cta-text-hover: #ffffff;
	--mlya-close-hover: rgba(255, 255, 255, 0.16);
	--mlya-focus: #ffffff;
}

.mlya--cream {
	--mlya-panel-bg: var(--mlya-cream);
	--mlya-panel-text: var(--mlya-ink);
	--mlya-panel-heading: var(--mlya-brand);
	--mlya-panel-eyebrow: var(--mlya-accent-deep);
	--mlya-cta-bg: var(--mlya-brand);
	--mlya-cta-text: #ffffff;
	--mlya-cta-bg-hover: var(--mlya-ink);
	--mlya-cta-text-hover: #ffffff;
	--mlya-close-hover: rgba(46, 43, 61, 0.08);
	--mlya-focus: var(--mlya-brand);
}

.mlya--cream .mlya__body { color: var(--mlya-slate); }

/* The rule anchors the panel, but a photo already does that job. */
.mlya--cream .mlya__panel { border-top: 5px solid var(--mlya-brand); }

.mlya--cream.mlya--media-top .mlya__panel { border-top: 0; }

/* ------------------------------------------------------------------ Small screens */

@media (max-width: 720px) {
	.mlya { padding: 16px; }
	.mlya__inner { padding: 36px 26px 30px; }
	.mlya--media-top .mlya__inner,
	.mlya--media-side .mlya__inner { padding-top: 28px; }
}

/* ------------------------------------------------------------------ Motion */

@media (prefers-reduced-motion: reduce) {
	.mlya__scrim,
	.mlya__panel { transition: none; }

	.mlya__panel { transform: none; }
}

/* Page scroll stays put while the pop-up is open. */
html.mlya-locked,
html.mlya-locked body { overflow: hidden; }