/* =====================================================================
	responsive.css — The Cleo Store Option A combined responsive fix
	Purpose:
		Preserve the legacy one-page / one-panel-at-a-time template.
		Do NOT convert #pages panels into stacked normal-flow sections.
		Do NOT make every .box visible at once.
		Desktop behavior remains owned by style.css + switcher.js.
	
	Changed-file contract:
		index.html re-enables this file.
		responsive.css only scales/simplifies the existing legacy layout.
		main.js keeps same-origin legacy JS loading and corrected page_ENTER hash.
	===================================================================== */

/* ---------------------------------------------------------------------
	0. Global responsive-safe helpers that do not change panel ownership
	--------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
	0A. Persistent navigation safety patch
	---------------------------------------------------------------------
	The legacy script animates .menu off-screen on the splash screen and
	back on-screen after Enter. During responsive repair/testing this made
	it hard to return to the Enter screen or open other panels if the menu
	state was left at marginTop:-52. Keep the menu available at all times.
	This does not change #pages panel ownership or stack hidden panels.
	--------------------------------------------------------------------- */

.menu {
	position: fixed !important;
	left: 0 !important;
	top: 0 !important;
	margin-top: 0 !important;
	z-index: 10050 !important;
}

#menu {
	z-index: 10051 !important;
}


html,
body {
	min-width: 0 !important;
}

.mobile-logo,
.mobile-submenu-item,
.hamburger-btn {
	display: none;
}

img {
	max-width: 100%;
}

/* ---------------------------------------------------------------------
	1. Narrow desktop / tablet: scale the legacy stage, do not restack it
	--------------------------------------------------------------------- */

@media (max-width: 999px) {
	body {
		overflow: hidden !important;
	}

	.extra {
		min-width: 0 !important;
		overflow: hidden !important;
	}

	.main2 {
		transform: scale(0.92);
		transform-origin: top center;
	}
}

@media (max-width: 920px) {
	.main2 {
		transform: scale(0.84);
	}
}

@media (max-width: 840px) {
	.main2 {
		transform: scale(0.78);
	}
}

/* ---------------------------------------------------------------------
	2. Mobile/tablet menu mode: hamburger menu without changing pages stack
	--------------------------------------------------------------------- */

@media (max-width: 768px) {
	body {
		overflow: hidden !important;
	}

	.extra {
		min-width: 0 !important;
		overflow: hidden !important;
	}

	/* Keep the legacy stage intact, just move/scale it below fixed nav. */
	.main2 {
		position: absolute !important;
		left: 50% !important;
		top: 92px !important;
		margin-left: -500px !important;
		margin-top: 0 !important;
		width: 1000px !important;
		height: 670px !important;
		transform: scale(0.72);
		transform-origin: top center;
		overflow: visible !important;
	}

	/* Critical Option A guardrails: never restack panels. */
	#content {
		position: absolute !important;
		left: 14px !important;
		top: 70px !important;
		width: auto !important;
		height: auto !important;
		overflow: visible !important;
		padding: 0 !important;
	}

	#content > ul > li {
		position: absolute !important;
		width: 972px !important;
		height: 601px !important;
		overflow: hidden !important;
	}

	.box {
		width: 840px !important;
		height: 540px !important;
		position: relative !important;
		padding: 61px 60px 0 72px !important;
		background: url(../images/content_bg.png) 0 0 no-repeat !important;
		overflow: hidden !important;
		box-sizing: content-box !important;
	}

	.scroll-pane {
		overflow: auto;
	}

	/* Fixed mobile nav. The normal menu opens only when JS adds .menu-open. */
	.menu {
		position: fixed !important;
		left: 0 !important;
		top: 0 !important;
		width: 100% !important;
		height: auto !important;
		min-height: 82px !important;
		z-index: 9999 !important;
		background: rgba(19, 13, 5, 0.97) !important;
		text-align: center !important;
		white-space: normal !important;
		box-sizing: border-box !important;
	}

	.mobile-logo {
		display: block !important;
		padding: 8px 56px 9px 10px;
		text-align: center;
		text-decoration: none;
		line-height: 1.25;
	}

	.mobile-logo-txt1 {
		display: block;
		font-family: 'metamorphousregular', serif;
		font-size: 20px;
		line-height: 24px;
		color: #ebb780 !important;
		text-shadow: 0 1px 3px rgba(0,0,0,0.8);
		white-space: nowrap;
	}

	.mobile-logo-txt2 {
		display: block;
		font-family: 'metamorphousregular', serif;
		font-size: 11px;
		line-height: 16px;
		color: #ebb780 !important;
		text-shadow: 0 1px 3px rgba(0,0,0,0.8);
		white-space: nowrap;
	}

	header {
		display: none !important;
	}

	.hamburger-btn {
		display: block !important;
		position: absolute !important;
		right: 18px !important;
		top: 26px !important;
		z-index: 10001 !important;
		width: 34px !important;
		height: 28px !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
		cursor: pointer;
	}

	.hamburger-btn span,
	.hamburger-btn span::before,
	.hamburger-btn span::after {
		display: block;
		width: 28px;
		height: 3px;
		background: #ebb780;
		border-radius: 2px;
		position: relative;
		transition: all 0.25s ease;
	}

	.hamburger-btn span::before,
	.hamburger-btn span::after {
		content: '';
		position: absolute;
		left: 0;
	}

	.hamburger-btn span::before {
		top: -9px;
	}

	.hamburger-btn span::after {
		top: 9px;
	}

	.hamburger-btn.is-active span {
		background: transparent;
	}

	.hamburger-btn.is-active span::before {
		top: 0;
		transform: rotate(45deg);
	}

	.hamburger-btn.is-active span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	#menu {
		display: none !important;
		width: 100% !important;
		height: auto !important;
		padding: 0 0 8px !important;
		margin: 0 !important;
		white-space: normal !important;
	}

	.menu.menu-open #menu {
		display: block !important;
	}

	#menu > li {
		display: block !important;
		float: none !important;
		width: 100% !important;
		height: auto !important;
		padding: 0 !important;
		margin: 0 !important;
		background: none !important;
		border-top: 1px solid rgba(255,255,255,0.08);
	}

	#menu > li > a {
		display: block !important;
		height: auto !important;
		padding: 11px 16px !important;
		box-sizing: border-box !important;
	}

	#menu > li > a .over {
		display: none !important;
	}

	#menu > li > a .txt1 {
		font-size: 15px !important;
		line-height: 1.35 !important;
		color: #ebb780 !important;
	}

	#menu li.with_ul .submenu {
		display: none !important;
	}

	#menu .mobile-submenu-item {
		display: block !important;
	}

	footer {
		position: fixed !important;
		left: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		height: 54px !important;
		overflow: hidden !important;
		z-index: 9998 !important;
	}

	.bot1 {
		display: none !important;
	}

	.bot2 {
		height: 54px !important;
		line-height: 54px !important;
		font-size: 11px !important;
		padding: 0 8px !important;
		box-sizing: border-box !important;
	}

	/* Decorative splash fan is too wide on mobile. The main splash card remains. */
	#menu_splash {
		display: none !important;
	}
}

@media (max-width: 620px) {
	.main2 {
		transform: scale(0.58);
		top: 96px !important;
	}
}

@media (max-width: 500px) {
	.main2 {
		transform: scale(0.46);
		top: 100px !important;
	}

	.mobile-logo-txt1 {
		font-size: 18px;
	}

	.mobile-logo-txt2 {
		font-size: 10px;
	}
}

@media (max-width: 390px) {
	.main2 {
		transform: scale(0.37);
	}

	.mobile-logo-txt1 {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------
	3. Desktop menu readability / hover-state stabilization
	---------------------------------------------------------------------
	The legacy script animates #menu > li > a .over and .txt1 on hover.
	After keeping the menu permanently visible, the text could appear too
	dark against the navigation background and the hover state could feel
	inconsistent. These rules keep the original structure but provide a
	CSS fallback for readable text, visible active state, and hover underline.
	--------------------------------------------------------------------- */

@media (min-width: 769px) {
	.menu {
		background: rgba(17, 11, 5, 0.86) url(../images/nav.png) 0 0 repeat-x !important;
	}

	#menu > li > a {
		overflow: hidden !important;
	}

	#menu > li > a .txt1 {
		color: #b99767 !important;
		text-shadow: 0 1px 3px rgba(0,0,0,0.85) !important;
		transition: color 0.22s ease, text-shadow 0.22s ease !important;
	}

	#menu > li:hover > a .txt1,
	#menu > li.sfHover > a .txt1,
	#menu > li.active > a .txt1,
	#menu > li > a:hover .txt1 {
		color: #f0d49a !important;
		text-shadow: 0 1px 5px rgba(0,0,0,0.95) !important;
	}

	#menu > li > a .over {
		top: -52px !important;
		background: #955015 !important;
		transition: top 0.24s ease !important;
	}

	#menu > li:hover > a .over,
	#menu > li.sfHover > a .over,
	#menu > li.active > a .over,
	#menu > li > a:hover .over {
		top: 46px !important;
	}

	.submenu {
		z-index: 10070 !important;
	}

	.submenu ul > li > a {
		color: #c8a978 !important;
		text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
	}

	.submenu ul > li > a:hover {
		color: #f0d49a !important;
	}
}


/* ---------------------------------------------------------------------
	4. Desktop nav row / submenu cleanup patch
	---------------------------------------------------------------------
	The legacy #menu was overflowing into a second visible row because
	mobile-only submenu items had higher selector specificity from style.css
	and were leaking into desktop. That second row overlapped the header logo.
	This section keeps the intended desktop top menu to one row, restores
	Party Costumes as a real desktop top-level button, and keeps the mobile
	duplicate Gallery/Party links hidden until hamburger mode.
	--------------------------------------------------------------------- */

@media (min-width: 769px) {
	.menu {
		height: 52px !important;
		min-height: 52px !important;
		overflow: visible !important;
	}

	#menu {
		display: inline-flex !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		justify-content: center !important;
		height: 52px !important;
		max-width: 100vw !important;
		white-space: nowrap !important;
	}

	#menu > li {
		float: none !important;
		display: inline-flex !important;
		align-items: stretch !important;
		height: 52px !important;
		vertical-align: top !important;
		white-space: nowrap !important;
		padding-left: 9px !important;
		padding-right: 0 !important;
	}

	#menu > li > a {
		display: inline-block !important;
		height: 52px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
		white-space: nowrap !important;
	}

	#menu > li > a .txt1 {
		font-size: 15px !important;
		line-height: 52px !important;
		white-space: nowrap !important;
	}

	/* Hide hamburger-only direct submenu links on desktop. */
	#menu > li.mobile-submenu-item {
		display: none !important;
		visibility: hidden !important;
	}

	/* This is the real desktop Party Costumes top-level link. */
	#menu > li.desktop-party-menu-item {
		display: inline-flex !important;
		visibility: visible !important;
	}

	/* Keep dropdowns above header/title artwork and away from blended text. */
	#menu > li.with_ul > .submenu {
		top: 52px !important;
		left: 12px !important;
		z-index: 10100 !important;
	}

	header {
		z-index: 4 !important;
		pointer-events: none !important;
	}
}

@media (max-width: 1220px) and (min-width: 769px) {
	#menu > li {
		padding-left: 6px !important;
	}

	#menu > li > a {
		padding-left: 7px !important;
		padding-right: 7px !important;
	}

	#menu > li > a .txt1 {
		font-size: 13px !important;
	}
}

@media (max-width: 768px) {
	/* In hamburger mode, use the mobile sub-items and avoid duplicate Party Costumes. */
	#menu > li.desktop-party-menu-item {
		display: none !important;
	}

	#menu > li.mobile-submenu-item {
		display: block !important;
		visibility: visible !important;
	}
}

/* ---------------------------------------------------------------------
	5. Desktop menu hover/dropdown refinement patch
	---------------------------------------------------------------------
	Fixes visible-but-confusing menu states after Option A:
	- Non-dropdown items should not appear to open an empty dropdown.
	- Only li.with_ul items display dropdown panels.
	- The hover/active marker is a thin underline, not a large blank panel.
	- Dropdowns sit above header/title art and have readable text/background.
	--------------------------------------------------------------------- */

@media (min-width: 769px) {
	/* Prevent the legacy hover overlay from looking like an empty dropdown. */
	#menu > li > a {
		position: relative !important;
		overflow: visible !important;
	}

	#menu > li > a .over {
		display: block !important;
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: -4px !important;
		width: 100% !important;
		height: 4px !important;
		background: #955015 !important;
		z-index: 2 !important;
		opacity: 0 !important;
		transition: opacity 0.18s ease, bottom 0.18s ease !important;
	}

	#menu > li:hover > a .over,
	#menu > li.sfHover > a .over,
	#menu > li.active > a .over,
	#menu > li > a:hover .over {
		top: auto !important;
		bottom: 0 !important;
		opacity: 1 !important;
	}

	/* Hide all dropdown containers unless the parent is an actual dropdown item. */
	#menu > li:not(.with_ul) > .submenu {
		display: none !important;
		visibility: hidden !important;
	}

	#menu > li.with_ul > .submenu {
		display: none !important;
		visibility: hidden !important;
		position: absolute !important;
		top: 52px !important;
		left: 10px !important;
		z-index: 20000 !important;
		min-width: 220px !important;
		background: rgba(15, 9, 4, 0.94) !important;
		box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45) !important;
		padding: 0 !important;
		pointer-events: auto !important;
	}

	#menu > li.with_ul:hover > .submenu,
	#menu > li.with_ul.sfHover > .submenu {
		display: block !important;
		visibility: visible !important;
	}

	#menu > li.with_ul > .submenu > ul {
		background: transparent !important;
		padding: 8px 0 !important;
		margin: 0 !important;
		min-width: 220px !important;
	}

	#menu > li.with_ul > .submenu ul > li {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 31px !important;
		margin: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}

	#menu > li.with_ul > .submenu ul > li > a {
		display: block !important;
		min-height: 31px !important;
		line-height: 31px !important;
		padding: 0 16px !important;
		color: #e4c78d !important;
		background: transparent !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
	}

	#menu > li.with_ul > .submenu ul > li > a:hover {
		color: #fff0c4 !important;
		background: rgba(149, 80, 21, 0.35) !important;
	}

	/* Keep the decorative header/title behind the menu and dropdowns. */
	header,
	.logo,
	.logo .txt1,
	.logo .txt2 {
		z-index: 1 !important;
		pointer-events: none !important;
	}

	.menu,
	#menu,
	#menu > li,
	#menu > li > a,
	#menu > li.with_ul > .submenu {
		pointer-events: auto !important;
	}
}