/*
 * MooseLodgeSites Demonstration Sandbox
 * Self-contained styles for the /demonstration page. No external fonts or assets.
 */

*, *::before, *::after { box-sizing: border-box; }

:root {
	--ui-bg: #eef1f5;
	--ui-panel: #ffffff;
	--ui-border: #d9dee6;
	--ui-text: #1f2733;
	--ui-muted: #6b7684;
	--ui-brand: #12294a;
	--ui-brand-2: #c8a24a;
	--ui-radius: 12px;
	--ui-shadow: 0 8px 24px rgba(20, 32, 54, 0.10);
	/* Denton Properties identity strip (dark ink + gold), pinned to bottom. */
	--mlse-dpfoot-h: 30px;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

.mlse-demo-body {
	background: var(--ui-bg);
	color: var(--ui-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* Reserve room for the fixed DP footer strip so it never overlaps content
	   (box-sizing: border-box, so this shrinks the flex content area within 100vh). */
	padding-bottom: var(--mlse-dpfoot-h);
}

/* ---------- Persistent top CTA bar ---------- */
.mlse-topbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 22px;
	background: var(--ui-brand);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	position: sticky;
	top: 0;
	z-index: 20;
}
.mlse-topbar-brand { display: flex; align-items: center; gap: 10px; }
.mlse-topbar-logo { color: var(--ui-brand-2); font-size: 20px; }
.mlse-topbar-title { font-weight: 700; letter-spacing: 0.2px; }
.mlse-topbar-sub {
	font-weight: 500;
	opacity: 0.7;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-left: 4px;
}
.mlse-topbar-actions { display: flex; gap: 10px; }
.mlse-cta {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: transform 0.08s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	white-space: nowrap;
}
.mlse-cta:active { transform: translateY(1px); }
.mlse-cta--info {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
}
.mlse-cta--info:hover { background: rgba(255, 255, 255, 0.2); }
.mlse-cta--buy {
	background: var(--ui-brand-2);
	color: #1a1204;
	box-shadow: 0 4px 12px rgba(200, 162, 74, 0.4);
}
.mlse-cta--buy:hover { opacity: 0.92; }

/* ---------- Split layout ---------- */
.mlse-split {
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(320px, 380px) 1fr;
	gap: 0;
	min-height: 0;
}

.mlse-pane { min-height: 0; overflow: auto; }

.mlse-pane--editor {
	background: var(--ui-panel);
	border-right: 1px solid var(--ui-border);
}
.mlse-editor-inner { padding: 22px 24px 40px; }
.mlse-editor-heading { margin: 0 0 6px; font-size: 22px; }
.mlse-editor-intro { margin: 0 0 22px; color: var(--ui-muted); font-size: 14px; }

/* Scope disclaimer -- top of the left pane, above the tab row. Distinct from
   .mlse-tooltip on purpose: that one is a dismissible, once-per-session hint
   about a specific control; this frames the entire demo and never goes away.
   The gold left rule ties it to the brand strip without shouting. */
.mlse-scope-banner {
	margin: 0 0 18px;
	padding: 12px 14px;
	border: 1px solid var(--ui-border);
	border-left: 4px solid var(--ui-brand-2);
	border-radius: 8px;
	background: var(--ui-panel);
}
.mlse-scope-banner p { margin: 0; }
.mlse-scope-banner p + p { margin-top: 6px; }
.mlse-scope-banner-text {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ui-text);
}
.mlse-scope-banner-more {
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ui-muted);
}
.mlse-scope-banner-more a {
	color: var(--ui-brand);
	font-weight: 600;
}
.mlse-scope-banner-more a:hover { text-decoration: underline; }

/*
 * Left-pane tab bar: reproduces WordPress core's native .nav-tab / .nav-tab-active
 * styling (the exact look Community Sites Engine's admin dashboard shows,
 * since it relies on WP core's classes verbatim), plus the flex-wrap wrapper
 * geometry from LSE's own .lse-admin-tabs rule (row-gap:6px; column-gap:4px; .nav-tab
 * float:none; margin:0 0 -1px). All values are inlined as static literals -- this
 * plugin does not load LSE's or wp-admin's stylesheets.
 */
.mlse-lefttabs {
	display: flex;
	flex-wrap: wrap;
	row-gap: 6px;               /* LSE .lse-admin-tabs */
	column-gap: 4px;            /* LSE .lse-admin-tabs */
	margin: 0 0 22px;
	padding: 0;
	border-bottom: 1px solid #c3c4c7; /* WP core .nav-tab-wrapper */
	line-height: inherit;
}
.mlse-ltab {
	float: none;               /* LSE override of core float:left */
	margin: 0 0 -1px;          /* LSE: overlap the wrapper's bottom border */
	padding: 5px 10px;         /* WP core .nav-tab */
	border: 1px solid #c3c4c7; /* WP core .nav-tab */
	border-bottom: none;       /* WP core .nav-tab */
	background: #dcdcde;       /* WP core .nav-tab (inactive) */
	color: #50575e;            /* WP core .nav-tab (inactive) */
	font-family: inherit;
	font-size: 14px;           /* WP core .nav-tab */
	line-height: 1.71428571;   /* WP core .nav-tab */
	font-weight: 600;          /* WP core .nav-tab */
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.mlse-ltab:hover,
.mlse-ltab:focus {
	background-color: #fff;    /* WP core .nav-tab:hover/:focus */
	color: #3c434a;
}
.mlse-ltab:focus-visible {
	outline: 1px solid #3582c4;
	outline-offset: -1px;
}
.mlse-ltab.is-active,
.mlse-ltab.is-active:hover,
.mlse-ltab.is-active:focus {
	margin-bottom: -1px;                /* WP core .nav-tab-active */
	border-bottom: 1px solid #f0f0f1;   /* WP core .nav-tab-active */
	background: #f0f0f1;                /* WP core .nav-tab-active */
	color: #3c434a;
}

/* Only the active tab's fields are shown. */
.mlse-tabpanel { display: none; }
.mlse-tabpanel.is-active { display: block; }
.mlse-tabpanel .mlse-field + .mlse-field { margin-top: 16px; }

/* ---------- Repeater rows (mirrors LSE's admin "Add Type" / row + Remove UI) ---------- */
.mlse-repeater { display: flex; flex-direction: column; gap: 8px; }
.mlse-repeat-rows { display: flex; flex-direction: column; gap: 8px; }
.mlse-repeat-row { display: flex; gap: 8px; align-items: center; }
.mlse-repeat-row .mlse-repeat-input { flex: 1 1 auto; min-width: 0; }
.mlse-repeat-row input[type="text"] {
	padding: 8px 10px;
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	font: inherit;
	color: var(--ui-text);
	background: #fbfcfd;
}
.mlse-repeat-row input:focus {
	outline: none;
	border-color: var(--ui-brand);
	box-shadow: 0 0 0 3px rgba(18, 41, 74, 0.12);
	background: #fff;
}
/* Multi-part block rows (Philanthropy): stack title + text + controls. */
.mlse-repeat-row--block {
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 10px;
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	background: #fbfcfd;
}
.mlse-repeat-row--block .mlse-repeat-text {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	font: inherit;
	color: var(--ui-text);
	background: #fff;
	resize: vertical;
	min-height: 58px;
}
.mlse-repeat-row-controls { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.mlse-repeat-select {
	padding: 6px 8px;
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	font: inherit;
	background: #fff;
	color: var(--ui-text);
}
.mlse-repeat-row--block .mlse-repeat-text:focus,
.mlse-repeat-select:focus {
	outline: none;
	border-color: var(--ui-brand);
	box-shadow: 0 0 0 3px rgba(18, 41, 74, 0.12);
}
/* WP-style compact secondary buttons. */
.mlse-btn-sm {
	font: inherit;
	font-size: 13px;
	line-height: 1.4;
	padding: 5px 10px;
	border: 1px solid #c3c4c7;
	border-radius: 3px;
	background: #f6f7f7;
	color: #2c3338;
	cursor: pointer;
	white-space: nowrap;
}
.mlse-btn-sm:hover { background: #f0f0f1; border-color: #8c8f94; }
.mlse-repeat-remove { color: #b32d2e; flex: 0 0 auto; }
.mlse-repeat-remove:hover { color: #b32d2e; border-color: #b32d2e; }
.mlse-repeat-add { align-self: flex-start; margin-top: 2px; }

.mlse-form { display: flex; flex-direction: column; gap: 16px; }
.mlse-field { display: flex; flex-direction: column; gap: 6px; }
.mlse-label {
	font-weight: 600;
	font-size: 13px;
	color: var(--ui-text);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.mlse-field input,
.mlse-field select,
.mlse-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	font: inherit;
	color: var(--ui-text);
	background: #fbfcfd;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mlse-field input:focus,
.mlse-field select:focus,
.mlse-field textarea:focus {
	outline: none;
	border-color: var(--ui-brand);
	box-shadow: 0 0 0 3px rgba(18, 41, 74, 0.12);
	background: #fff;
}
.mlse-field textarea { resize: vertical; min-height: 84px; }

/* Site Design picker -- radio rows, mirroring the real Organization Profile
   screen's design picker (.lse-font-picker / .lse-font-row) rather than a
   dropdown, so the demo's control matches the product's own control. */
.mlse-designs { display: grid; gap: 8px; }
.mlse-design-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--ui-border);
	border-radius: 8px;
	background: #fbfcfd;
	cursor: pointer;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.mlse-design-row:hover { border-color: var(--ui-brand); }
.mlse-design-row:has(input:checked) {
	border-color: var(--ui-brand);
	box-shadow: 0 0 0 2px rgba(18, 41, 74, 0.12);
}
.mlse-design-name { font-weight: 600; }

/* The generic .mlse-field input rule above makes every input full-width and
   boxed; radios must opt out of it. */
.mlse-field input[type="radio"] {
	width: auto;
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.mlse-field-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ui-muted); }

.mlse-status {
	margin-top: 16px;
	min-height: 18px;
	font-size: 13px;
	color: var(--ui-muted);
	transition: opacity 0.2s ease;
}
.mlse-status.is-saving { color: var(--ui-brand); }
.mlse-status.is-error { color: #b3261e; }

/* ---------- Dismissible info tooltip (left pane UX chrome) ---------- */
/* Uses the sandbox's own --ui-* tokens so it reads as part of the editor,
   not a new visual language. Inserted after an anchor element by demo.js. */
.mlse-tooltip {
	position: relative;
	background: var(--ui-panel);
	border: 1px solid var(--ui-border);
	border-left: 3px solid var(--ui-brand-2);
	border-radius: 8px;
	padding: 11px 34px 11px 13px;
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ui-text);
	box-shadow: var(--ui-shadow);
}
.mlse-tooltip-close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: transparent;
	border: 0;
	padding: 2px 5px;
	font-size: 16px;
	line-height: 1;
	color: var(--ui-muted);
	cursor: pointer;
}
.mlse-tooltip-close:hover { color: var(--ui-text); }

/* ---------- Denton Properties footer strip (fixed, dark ink + gold) ---------- */
/* Deliberately hardcoded dark/gold (not the --ui-* palette) so it matches the
   DP identity strip used across mooselodgesites.com's own pages. A footnote —
   minimal, and never competing with the topbar's CTAs. */
.mlse-dp-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 30;
	height: var(--mlse-dpfoot-h);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	padding: 0 14px;
	background: #232323;
	color: #cfd2cf;
	border-top: 1px solid #B8863A;
	font-size: 12px;
	line-height: 1.3;
}
.mlse-dp-foot-copy { white-space: nowrap; }
.mlse-dp-foot-disclaimer { color: #9a9a93; }
.mlse-dp-foot-sep { color: #5A5A56; }
.mlse-dp-foot-link {
	color: #B8863A;
	text-decoration: none;
	white-space: nowrap;
}
.mlse-dp-foot-link:hover { text-decoration: underline; }

/* ---------- Preview pane ---------- */
.mlse-pane--preview {
	background: var(--ui-bg);
	display: flex;
	flex-direction: column;
}
.mlse-preview-toolbar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 18px;
	border-bottom: 1px solid var(--ui-border);
	background: #f7f9fb;
}
.mlse-preview-label {
	font-weight: 700;
	font-size: 15px;
	color: var(--ui-text);
}
.mlse-preview-hint {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--ui-muted);
}

.mlse-preview-frame {
	flex: 1 1 auto;
	overflow: auto;
	padding: 22px;
}
.mlse-preview-panel { display: none; }
.mlse-preview-panel.is-active { display: block; }

/* Subtle refresh pulse when preview content is swapped. */
.mlse-preview-panel.is-updating .pv { animation: mlse-pulse 0.4s ease; }
@keyframes mlse-pulse {
	0% { opacity: 0.55; }
	100% { opacity: 1; }
}

/* ============================================================
 * Preview mockup (.pv) -- MIRRORS the real Community Sites Engine
 * front end (assets/css/lse-frontend.css). Three-layer system:
 *   (a) outer body layer tinted 100% toward the heading color;
 *   (b) a flat-toned header strip + a no-background footer that
 *       sit outside the content panel;
 *   (c) a centered, rounded, drop-shadowed content panel whose
 *       background is Accent blended into bg at LSE's default
 *       Page Background Intensity (100% => pure Accent), so its
 *       text/headings/links use the on-accent role (LSE's
 *       lse-chrome-full behavior, baked in as a fixed value).
 * Values copied from lse-frontend.css; keyed off this plugin's
 * own --pv-* palette vars. No LSE stylesheet is loaded.
 * ============================================================ */
.pv {
	--pv-primary: #5C1A1A;    /* LSE heading */
	--pv-secondary: #D4A017;
	--pv-accent: #D4A017;
	--pv-bg: #FAF3E8;
	--pv-surface: #FFFFFF;
	--pv-text: #2E2420;
	--pv-muted: #A08F7E;
	--pv-on-primary: #FAF3E8; /* LSE on_heading */
	--pv-on-accent: #2E2420;
	--pv-font-heading: Georgia, 'Times New Roman', Times, serif;
	--pv-font-body: Georgia, 'Times New Roman', Times, serif;

	max-width: 900px;
	margin: 0 auto;
	border-radius: var(--ui-radius);
	overflow: hidden;
	box-shadow: var(--ui-shadow);
	/* body layer: LSE blends 100% toward heading (= pure heading). */
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-primary) 100%, var(--pv-bg));
	color: var(--pv-text);
	font-family: var(--pv-font-body);
}

/* Header strip: fixed 20% Accent blend into bg (LSE .lse-site-header). */
.pv-site-header {
	max-width: 960px;
	margin: 0 auto;
	/* Bottom padding raised in the same proportion as CSE 1.12.42's Classic
	   header (2rem -> 2.75rem, x1.375), so a wrapped nav reads as sitting
	   inside the card rather than falling out of it. */
	padding: 2rem 1rem 2rem;
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-accent) 20%, var(--pv-bg));
	color: var(--pv-text);
	font-family: var(--pv-font-body);
	text-align: center;
}
.pv-site-identity {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1rem;
}
.pv-site-org-name {
	margin: 0;
	min-width: 0;
	font-size: clamp(1.5rem, 4vw, 2.75rem);
	line-height: 1.2;
	font-weight: 700;
	text-align: center;
	font-family: var(--pv-font-heading);
	color: var(--pv-primary);
}
.pv-site-nav { margin-top: 1rem; }
.pv-nav-menu {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Row gap tightened to match CSE 1.12.42 (each link carries its own
	   vertical padding below). The preview's nav is only four items, so it
	   rarely wraps and this is seldom visible -- kept in step anyway. */
	gap: 0.1rem 0.75rem;
	margin: 0;
	padding: 0;
}
.pv-nav-menu li { position: relative; }
.pv-nav-menu a {
	display: inline-block;
	padding: 0.5rem 0;
	color: var(--pv-primary);
	text-decoration: none;
	font-weight: 600;
	cursor: default;
}
.pv-nav-menu a:hover { color: var(--pv-accent); }

/* Content panel: LSE .lse-page at 100% intensity => pure Accent bg,
   with the lse-chrome-full text treatment (on-accent) baked in. */
.pv-page {
	max-width: 960px;
	margin: 1.5rem auto 2rem;
	padding: 1.5rem 1rem 2rem;
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-accent) 100%, var(--pv-bg));
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	color: var(--pv-on-accent);
	font-family: var(--pv-font-body);
}
.pv-page a { color: var(--pv-on-accent); }
.pv-page-header h1 {
	margin: 0 0 1.5rem;
	font-family: var(--pv-font-heading);
	color: var(--pv-on-accent); /* chrome-full override (normally heading) */
}
.pv-page-content :first-child { margin-top: 0; }

/* Shared card treatment (LSE .lse-card): a lighter off-white derivative
   of bg with an accent border. Cards reset text back to --pv-text. */
.pv-card {
	box-sizing: border-box;
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-bg) 68%, white 32%);
	border: 1px solid var(--pv-accent);
	border-radius: 12px;
	padding: 1.25rem 1.5rem;
	color: var(--pv-text);
}

/* Home (LSE page-home.php): plain about area + details block. */
.pv-home-about { margin: 1.5rem 0; }
.pv-home-about-content { max-width: 700px; margin: 0 auto; line-height: 1.6; }
.pv-home-about-content :first-child { margin-top: 0; }
.pv-home-about-content :last-child { margin-bottom: 0; }
.pv-home-details p { margin: 0.5rem 0; }
.pv-hours-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.pv-hours-entry-label { font-weight: 600; }

/* Entertainment (LSE page-entertainment.php): policy note + form. */
.pv-entertainment-policy-note {
	padding: 1rem;
	border: 1px solid var(--pv-muted);
	background-color: var(--pv-bg);
	color: var(--pv-text);
	font-size: 0.9rem;
}
.pv-form-section { margin-top: 1.5rem; }
.pv-contact-form p { margin-bottom: 1rem; }
.pv-contact-form label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.pv-checkbox-group { border: 0; padding: 0; margin: 0 0 1rem; }
.pv-checkbox-group legend { font-weight: 600; margin-bottom: 0.25rem; padding: 0; }
.pv-checkbox-group-option { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; margin-bottom: 0.35rem; }
.pv-checkbox-group-option input { margin: 0; }
.pv-contact-form input[type="text"],
.pv-contact-form input[type="email"],
.pv-contact-form input[type="tel"],
.pv-contact-form input[type="url"],
.pv-contact-form textarea {
	width: 100%;
	padding: 0.5rem;
	box-sizing: border-box;
	border: 1px solid var(--pv-muted);
	background-color: var(--pv-bg);
	color: var(--pv-text);
}
.pv-contact-form button[type="submit"] {
	background-color: var(--pv-accent);
	color: var(--pv-on-accent);
	border: none;
	padding: 0.6rem 1.25rem;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
}

/* Volunteer (LSE page-volunteer.php): plain bulleted roles list. */
.pv-volunteer-intro { margin: 1rem 0; }
.pv-volunteer-roles-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.pv-volunteer-roles-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--pv-muted); }
.pv-volunteer-roles-list li:last-child { border-bottom: 0; }
.pv-volunteer-role-name { font-weight: 700; }
.pv-volunteer-role-description { display: block; margin-top: 0.15rem; font-size: 0.9rem; color: var(--pv-muted); }

/* Philanthropy (LSE page-philanthropy.php): two-column Local | National. */
.pv-philanthropy-columns { display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 2rem; }
.pv-philanthropy-column { flex: 1 1 320px; min-width: 0; }
.pv-philanthropy-column-title {
	margin-top: 0;
	font-family: var(--pv-font-heading);
	color: var(--pv-on-accent); /* chrome-full override (normally heading) */
}
.pv-philanthropy-column .pv-philanthropy-block + .pv-philanthropy-block { margin-top: 1.5rem; }
.pv-philanthropy-block-title { margin: 0 0 0.5rem; font-family: var(--pv-font-heading); color: var(--pv-primary); }
.pv-philanthropy-block-text p { margin: 0 0 1rem; }
.pv-philanthropy-block-text :last-child { margin-bottom: 0; }

/* Vertical divider between the two columns (LSE .lse-col-divider), only
   once the columns are guaranteed side by side. */
@media (min-width: 760px) {
	.pv-col-divider { border-left: 1px solid var(--pv-accent); padding-left: 1.5rem; }
}

/* Minimal footer (LSE .lse-site-footer): no background of its own, sits on
   the tinted body layer; text uses on-heading; muted top border. */
.pv-site-footer {
	max-width: 960px;
	margin: 0 auto;
	padding: 1.5rem 1rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--pv-on-primary);
	font-family: var(--pv-font-body);
	border-top: 1px solid var(--pv-muted);
}
.pv-site-copyright { margin: 0; }
/* Address / phone under the copyright, mirroring the real
   .lse-site-footer-contact (margin-top: 0.5rem, phone not underlined). */
.pv-site-footer-contact { margin: 0.5rem 0 0; }
.pv-site-footer-contact a { color: inherit; text-decoration: none; }

/* ============================================================
 * MODERN design preview (.pv--modern) -- MIRRORS the real LSE
 * "Modern" site design (assets/css/lse-modern.css). Same --pv-*
 * palette vars as Classic; only the presentation differs: a light
 * ruled header, tinted title bands, plain-background content with
 * white-ish cards, and a solid heading-toned footer -- instead of
 * Classic's heading-tinted body layer and accent content panel.
 *
 * Sizes are fixed rather than the real stylesheet's clamp(...vw...)
 * values on purpose: inside this ~900px preview panel a vw unit
 * still resolves against the whole viewport, which would render
 * everything far too large for the mockup.
 * ============================================================ */
.pv.pv--modern {
	background-color: var(--pv-bg);
	color: var(--pv-text);
	line-height: 1.65;
}
.pv--modern h1,
.pv--modern h2,
.pv--modern h3 {
	font-family: var(--pv-font-heading);
	color: var(--pv-primary);
	line-height: 1.2;
	margin: 0;
}

/* Header: light, bottom-ruled, centered identity above a plain nav. */
.pv-modern-header {
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-bg) 92%, #ffffff);
	border-bottom: 1px solid var(--pv-muted);
	border-bottom-color: color-mix(in srgb, var(--pv-muted) 35%, transparent);
}
.pv-modern-header-inner {
	padding: 1.25rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.pv-modern-identity { display: inline-flex; align-items: center; gap: 1rem; }
.pv-modern-org-name {
	margin: 0;
	font-family: var(--pv-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--pv-primary);
}
.pv-modern-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem 1.25rem;
}
.pv-modern-nav-menu a {
	display: inline-block;
	padding: 0.35rem 0.1rem;
	color: var(--pv-text);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	cursor: default;
}
.pv-modern-nav-menu a:hover { color: var(--pv-accent); border-bottom-color: var(--pv-accent); }

/* Home hero (media type "none") and the interior page-header band share
   the same tinted treatment, exactly as they do in lse-modern.css. */
.pv-modern-hero-none,
.pv-modern-page-header {
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-primary) 16%, var(--pv-bg));
	text-align: center;
}
.pv-modern-hero-none .pv-modern-hero-overlay { padding: 3.5rem 1.5rem; }
.pv-modern-hero-title { margin: 0; font-size: 2.25rem; color: var(--pv-primary); }
.pv-modern-page-header { padding: 2.5rem 1.5rem; }
.pv-modern-page-header-title { margin: 0; font-size: 1.9rem; color: var(--pv-primary); }

/* Content columns. Home uses the narrower .pv-modern-sections, interior
   pages the wider .pv-modern-interior -- same split as the real design. */
.pv-modern-sections { max-width: 620px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }
.pv-modern-interior { max-width: 700px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }
.pv-modern-section + .pv-modern-section { margin-top: 2.5rem; }
.pv-modern-welcome-content { font-size: 1.05rem; color: var(--pv-text); }
.pv-modern-welcome-content p { margin: 0 0 1.1rem; }
.pv-modern-welcome-content :last-child { margin-bottom: 0; }
.pv-modern-intro { font-size: 1.05rem; color: var(--pv-text); margin: 0 0 2rem; }
.pv-modern-intro p { margin: 0 0 1.1rem; }
.pv-modern-intro :last-child { margin-bottom: 0; }

/* Cards. */
.pv-modern-card,
.pv-modern-visit-card {
	box-sizing: border-box;
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-bg) 85%, #ffffff);
	border: 1px solid var(--pv-muted);
	border-color: color-mix(in srgb, var(--pv-muted) 32%, transparent);
	border-radius: 16px;
	padding: 1.75rem;
	color: var(--pv-text);
	box-shadow: 0 10px 40px -24px rgba(0, 0, 0, 0.55);
}
.pv-modern-card + .pv-modern-card { margin-top: 1.5rem; }

/* Home "Visit Us" card. */
.pv-modern-visit-heading { font-size: 1.4rem; margin: 0 0 1.25rem; }
.pv-modern-visit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1.5rem;
}
.pv-modern-visit-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--pv-accent);
	margin-bottom: 0.4rem;
}
.pv-modern-visit-value { display: block; font-size: 1rem; color: var(--pv-text); }
.pv-modern-visit-value a { color: var(--pv-text); text-decoration: none; }
.pv-modern-hours-list { list-style: none; margin: 0; padding: 0; }
.pv-modern-hours-list li { margin: 0 0 0.35rem; font-size: 0.95rem; }
.pv-modern-hours-label { font-weight: 600; }

/* Volunteer roles. */
.pv-modern-roles-list { list-style: none; margin: 0; padding: 0; }
.pv-modern-roles-list li {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--pv-muted);
	border-bottom-color: color-mix(in srgb, var(--pv-muted) 26%, transparent);
}
.pv-modern-roles-list li:last-child { border-bottom: 0; }
.pv-modern-role-name { font-weight: 600; }
.pv-modern-form-section { margin-top: 2rem; }

/* Philanthropy: two columns, accent-underlined titles, no vertical rule. */
.pv-modern-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.pv-modern-column-title {
	font-size: 1.25rem;
	margin: 0 0 1.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--pv-accent);
}
.pv-modern-block-title { margin: 0 0 0.6rem; font-size: 1.05rem; color: var(--pv-primary); }
.pv-modern-block-text { color: var(--pv-text); }
.pv-modern-block-text p { margin: 0 0 0.85rem; }
.pv-modern-block-text :last-child { margin-bottom: 0; }

/* Forms inside a Modern card: rounded, roomier fields. The form markup is
   identical to Classic's -- only these rules differ, exactly as in the real
   product (see the Forms section of lse-modern.css). */
.pv--modern .pv-contact-form input[type="text"],
.pv--modern .pv-contact-form input[type="email"],
.pv--modern .pv-contact-form input[type="tel"],
.pv--modern .pv-contact-form input[type="url"],
.pv--modern .pv-contact-form textarea {
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--pv-muted);
	border-color: color-mix(in srgb, var(--pv-muted) 45%, transparent);
	border-radius: 9px;
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-bg) 92%, #ffffff);
	color: var(--pv-text);
}
.pv--modern .pv-contact-form label,
.pv--modern .pv-checkbox-group legend { color: var(--pv-text); }
.pv--modern .pv-contact-form button[type="submit"] {
	border-radius: 9px;
	padding: 0.7rem 1.4rem;
}
.pv--modern .pv-entertainment-policy-note {
	background-color: var(--pv-bg);
	background-color: color-mix(in srgb, var(--pv-primary) 8%, var(--pv-bg));
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
	color: var(--pv-text);
	border: 0;
}

/* Footer: solid heading-toned band. */
.pv-modern-footer {
	background-color: var(--pv-primary);
	background-color: color-mix(in srgb, var(--pv-primary) 92%, #000000);
	color: var(--pv-on-primary);
	border-top: 0;
}
.pv-modern-footer-inner { padding: 2.25rem 1.5rem 2rem; text-align: center; }
.pv-modern-footer-contact { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--pv-on-primary); opacity: 0.82; }
.pv-modern-footer-contact a { color: inherit; text-decoration: none; }
.pv-modern-footer-sep { margin: 0 0.4rem; }
/* Now the footer's first line, not its last. The real rule is
   margin: 0; font-size: 15px at 88% of on-heading; the preview's contact line
   already stands in for that 15px at 0.9rem, so this matches it in scale. */
.pv-modern-footer-copyright { margin: 0; font-size: 0.9rem; color: var(--pv-on-primary); opacity: 0.88; }

@media (max-width: 760px) {
	.pv-modern-columns { grid-template-columns: 1fr; }
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
	.mlse-split { grid-template-columns: 1fr; }
	.mlse-pane--editor { border-right: none; border-bottom: 1px solid var(--ui-border); }
	.mlse-pane { overflow: visible; }
	.mlse-demo-body { height: auto; }
}
@media (max-width: 520px) {
	.mlse-topbar { flex-direction: column; align-items: stretch; gap: 10px; }
	.mlse-topbar-actions { justify-content: stretch; }
	.mlse-cta { flex: 1 1 auto; text-align: center; }
}