/* ===============================================================
   pageframe.css
   Loads AFTER main.css on any page that includes it, so these
   rules override main.css for that page only. Old pages that
   don't link this file are completely untouched.
   =============================================================== */

/* Replaces the stretched pagebg_lrg.png with a plain CSS box.
   No image = no distortion, no matter how tall the page gets. */
#pagelrg {
	background-image: none;
	background-color: #ffffff;
	border-radius: 12px 12px 12px 12px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
	padding-bottom: 10px;
	min-height: calc(100vh - 40px);
}

/* Switches the menus from "absolute" (pinned to the document,
   scrolls away) to "fixed" (pinned to the browser window, stays
   visible). No top/left/right numbers are set here on purpose —
   leaving them out means each menu keeps the exact position it
   already has today; only the scrolling behaviour changes. */
.leftlrg {
	position: fixed;
}

.rightlrg {
	position: fixed;
}

/* ===============================================================
   MOBILE MENU (below 1024px)
   Menus slide off-screen and are opened via two small toggle
   buttons + a dark backdrop. Above 1024px none of this applies —
   desktop behaviour is untouched.
   =============================================================== */

/* Toggle buttons + backdrop: hidden on desktop by default */
.menu-toggle-left,
.menu-toggle-right,
.menu-overlay {
	display: none;
}

@media (max-width: 1024px) {

	.leftlrg,
	.rightlrg {
		top: 0;
		width: 300px;
		max-width: 85vw;
		height: 100vh;
		overflow-y: auto;
		overflow-x: hidden;
		box-sizing: border-box;
		padding: 10px;
		z-index: 2000;
		background-color: #ffffff;
		transition: transform 0.3s ease;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
	}

	.leftlrg {
		left: 0;
		transform: translateX(-100%);
	}

	.rightlrg {
		right: 0;
		transform: translateX(100%);
	}

	.leftlrg.menu-open,
	.rightlrg.menu-open {
		transform: translateX(0);
	}

	/* Toggle buttons: shown only on mobile widths */
	.menu-toggle-left,
	.menu-toggle-right {
		display: block;
		position: fixed;
		top: 12px;
		z-index: 2100;
		width: 42px;
		height: 42px;
		background-color: #000;
		color: #fff;
		border: none;
		border-radius: 6px;
		font-size: 20px;
		cursor: pointer;
	}

	.menu-toggle-left {
		left: 12px;
	}

	.menu-toggle-right {
		right: 12px;
	}

	/* Dark backdrop shown behind an open menu */
	.menu-overlay {
		position: fixed;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1900;
	}

	.menu-overlay.active {
		display: block;
	}
}