/**
 * Lumen front-end styles.
 *
 * Goal: let an experience render edge-to-edge without the host theme's
 * content-width, padding, or typography leaking into the stage — while still
 * keeping the theme header/footer (chrome) intact above and below.
 */

/* Full-bleed: neutralize common theme content-width wrappers ON experience
   singles only, so we don't affect normal pages. */
body.lumen-experience .lumen-main,
body.lumen-experience #lumen-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

/* Many themes constrain .content / .entry-content / .site-main — when we are on
   a Lumen single, release the immediate wrappers around our main. */
body.lumen-experience .site-content,
body.lumen-experience .content-area,
body.lumen-experience .entry-content,
body.lumen-experience main {
	max-width: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	float: none;
}

/* The stage is the isolation boundary. Reset inherited typography so the
   bundle controls its own. */
.lumen-stage {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	line-height: normal;
	text-align: left;
	box-sizing: border-box;
}

.lumen-stage * {
	box-sizing: border-box;
}

/* Iframe stage: edge-to-edge. The experience runs in a viewport-sized frame
   and scrolls internally, so its native scroll animations keep working. A dark
   backdrop matches the bundles' loading screen so the unpack moment doesn't
   flash against a light page. */
.lumen-stage--iframe {
	position: relative;
	width: 100%;
	background: var(--lumen-stage-bg, #0c0a10);
}

.lumen-frame {
	display: block;
	width: 100%;
	border: 0;
	margin: 0;
}

/* Full-page experiences: the fitter JS sizes these to the space below the
   header; this is the no-JS / pre-fit fallback (full viewport). */
.lumen-frame[data-lumen-fit="viewport"] {
	height: 100vh;
	height: 100dvh;
}

/* Embedded inside normal content: a fixed pane that scrolls internally.
   Override the height with --lumen-embed-height if desired. */
.lumen-embed,
.lumen-block {
	width: 100%;
}

.lumen-frame[data-lumen-fit="embed"] {
	height: var(--lumen-embed-height, 85vh);
}

/* Bare mode: no chrome, fill the whole viewport. */
body.lumen-bare {
	margin: 0;
	padding: 0;
}

body.lumen-bare .lumen-frame[data-lumen-fit="viewport"] {
	height: 100vh;
	height: 100dvh;
}

/* Editor-only notice. */
.lumen-notice {
	padding: 14px 18px;
	border: 1px solid #d63638;
	background: #fcf0f1;
	color: #8a1f21;
	border-radius: 8px;
	font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}