/* Hamburger Off-Canvas Menu
   Colors come from CSS variables injected by the plugin:
   --hocm-accent, --hocm-panel-bg, --hocm-panel-text  */

/* ---- The button (fixed so it sits above any theme header) ---- */
.hocm-burger{
	position:fixed;
	top:1rem;right:1rem;   /* fallback; overridden per-device by the plugin */
	z-index:99999;
	width:48px;height:48px;
	display:flex;flex-direction:column;
	justify-content:center;align-items:center;gap:6px;
	padding:12px;
	border:none;border-radius:50%;
	background:var(--hocm-burger-bg,#1a1a1a);
	box-shadow:0 2px 10px rgba(0,0,0,.25);
	cursor:pointer;
}
.hocm-burger span{
	display:block;width:22px;height:2px;border-radius:2px;
	background:var(--hocm-burger-color,#f5f2ec);
	transition:transform .3s ease,opacity .3s ease;
}
/* Bars morph into an X while open */
.hocm-burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.hocm-burger.is-open span:nth-child(2){opacity:0}
.hocm-burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---- The sliding panel (hidden off-screen by default) ---- */
.hocm-panel{
	position:fixed;top:0;
	width:320px;max-width:82vw;height:100vh;height:100dvh;
	z-index:99998;
	padding:5.5rem 2.25rem 2rem;
	background:var(--hocm-panel-bg,#1a1a1a);
	color:var(--hocm-panel-text,#f5f2ec);
	overflow-y:auto;
	right:0;transform:translateX(100%);   /* fallback; overridden per-device by the plugin */
	transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.hocm-panel.is-open{transform:translateX(0)}

/* ---- The menu links (wp_nav_menu output) ---- */
.hocm-menu{list-style:none;margin:0;padding:0}
.hocm-menu li{margin:0}
.hocm-menu a{
	display:block;
	color:var(--hocm-panel-text,#f5f2ec);
	text-decoration:none;
	font-size:1.25rem;
	padding:.7rem 0;
	border-bottom:1px solid rgba(255,255,255,.14);
	transition:color .2s ease,padding-left .2s ease;
}
.hocm-menu a:hover,
.hocm-menu a:focus{color:var(--hocm-accent,#c2552f);padding-left:.4rem}
.hocm-menu .sub-menu{list-style:none;margin:0;padding:0 0 0 1rem}
.hocm-menu .sub-menu a{font-size:1.05rem;opacity:.85}

/* ---- Dark overlay behind the panel ---- */
.hocm-overlay{
	position:fixed;inset:0;z-index:99997;
	background:rgba(0,0,0,.45);
	opacity:0;visibility:hidden;
	transition:opacity .35s ease;
}
.hocm-overlay.is-open{opacity:1;visibility:visible}

/* Lock background scrolling while the menu is open */
body.hocm-lock{overflow:hidden}

/* Visible keyboard focus */
.hocm-burger:focus-visible,
.hocm-menu a:focus-visible{outline:2px solid var(--hocm-accent,#c2552f);outline-offset:3px}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
	.hocm-panel,.hocm-overlay,.hocm-burger span,.hocm-menu a{transition:none}
}