/* ######### Phone-only compact header + slide-out nav drawer ######### */
/* Ships as one shared file, loaded the same way on every "resource" page
   (flags, fetishes, hanky/bear code, links, blog) and their submit forms,
   plus the blog's static export template -- one place to maintain the
   phone nav for all of them, instead of copy-pasting it per page.

   Hidden above 600px so tablet and desktop are untouched: the existing
   fixed-width image-banner + DHTML dropdown menus keep rendering exactly
   as they do today. Below 600px, the banner table is hidden and this
   compact bar + drawer takes over, since the banner is built from fixed-
   pixel image tiles that can't reflow to a phone width. */

.mobile-nav{ display: none; }

@media (max-width: 600px){
	.mobile-nav{ display: block; position: relative; z-index: 30; }
	/* #Table_01 is the one id every header variant shares (flags/fetishes/
	   hanky/bear/links pages wrap it in .site-header-inner; the blog's
	   static export doesn't) -- hiding it directly covers both shapes. */
	#Table_01{ display: none; }
	.site-header{ min-height: 0 !important; }
	body{ min-width: 0 !important; }
}

.mobile-nav-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
}

.mobile-nav-brand{
	font-family: 'Manrope', sans-serif;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--ink, #f7f5fa);
	text-decoration: none;
}
.mobile-nav-brand span{ color: var(--ink-faint, #8a7f9c); font-weight: 300; }

.mobile-nav-toggle{
	flex: none;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--line, #2a2233);
	border-radius: 8px;
	color: var(--ink, #f7f5fa);
	cursor: pointer;
}
.mobile-nav-toggle svg{ width: 20px; height: 20px; }
.mobile-nav-toggle .icon-close{ display: none; }
.mobile-nav-toggle[aria-expanded="true"] .icon-open{ display: none; }
.mobile-nav-toggle[aria-expanded="true"] .icon-close{ display: block; }

.mobile-nav-backdrop{
	position: fixed;
	inset: 0;
	background: rgba(6,5,9,0.6);
	z-index: 39;
}
.mobile-nav-backdrop[hidden]{ display: none; }

.mobile-nav-drawer{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(84vw, 320px);
	background: linear-gradient(180deg, #3a2850 0%, #0b0a10 100%);
	border-left: 1px solid var(--line, #2a2233);
	z-index: 40;
	overflow-y: auto;
	padding: 70px 22px 40px;
	box-shadow: -20px 0 50px -20px rgba(0,0,0,0.6);
}
.mobile-nav-drawer[hidden]{ display: none; }

.mobile-nav-drawer-close{
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 8px;
	color: #f7f5fa;
	cursor: pointer;
}
.mobile-nav-drawer-close svg{ width: 16px; height: 16px; }

.mobile-nav-group{ margin-bottom: 24px; }
.mobile-nav-group:last-child{ margin-bottom: 0; }

.mobile-nav-heading{
	display: block;
	font-family: 'Manrope', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a99bc4;
	margin-bottom: 10px;
}

.mobile-nav-group a{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	color: #f7f5fa;
	text-decoration: none;
	font-family: 'Inter', sans-serif;
	font-size: 14.5px;
	font-weight: 300;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mobile-nav-group a:last-child{ border-bottom: none; }
.mobile-nav-group a svg{ flex: none; width: 14px; height: 14px; opacity: 0.85; }