/**
 * Hamburger Mobile Menu - default styles.
 * Override any of these custom properties from your theme's CSS to restyle
 * without touching this file, e.g.:
 *   :root { --hmm-bar-color: #fff; --hmm-bg: #111; }
 */
:root {
	--hmm-bar-color: #191919;
	--hmm-bg: #ffffff;
	--hmm-text: #191919;
	--hmm-overlay-bg: rgba(0, 0, 0, 0.5);
	--hmm-width: 320px;
	--hmm-z-index: 100000;
}

.hmm-toggle {
	position: fixed;
	top: 1rem;
	right: 1rem;
	/* Must stay above the drawer so it keeps working as the close control
	   (its bars already animate into an X) once the drawer is open. */
	z-index: calc(var(--hmm-z-index) + 2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--hmm-bg);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hmm-toggle .hmm-bar {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: var(--hmm-bar-color);
	transition: transform 0.25s ease, opacity 0.25s ease;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

body.hmm-open .hmm-toggle .hmm-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

body.hmm-open .hmm-toggle .hmm-bar:nth-child(2) {
	opacity: 0;
	/* On iOS Safari, an opacity:0 sibling next to elements with an active
	   transform can leave a hairline compositing seam at its own edges.
	   Collapsing its width removes the geometry the seam would render on. */
	transform: scaleX(0);
}

body.hmm-open .hmm-toggle .hmm-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.hmm-overlay {
	position: fixed;
	inset: 0;
	background: var(--hmm-overlay-bg);
	z-index: var(--hmm-z-index);
}

.hmm-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(var(--hmm-width), 85vw);
	background: var(--hmm-bg);
	color: var(--hmm-text);
	z-index: calc(var(--hmm-z-index) + 1);
	overflow-y: auto;
	padding: 4.5rem 1.5rem 2rem;
	transform: translateX(100%);
	transition: transform 0.3s ease;
	box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
}

body.hmm-open .hmm-drawer {
	transform: translateX(0);
}

body.hmm-open {
	overflow: hidden;
}

.hmm-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hmm-menu li {
	margin: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.hmm-menu a {
	display: block;
	padding: 0.9rem 0.25rem;
	color: var(--hmm-text);
	text-decoration: none;
	font-size: 1.1rem;
}

.hmm-menu a:hover,
.hmm-menu a:focus {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.hmm-menu .sub-menu {
	list-style: none;
	margin: 0 0 0 1rem;
	padding: 0;
}

/* The desktop-hide breakpoint is intentionally NOT hardcoded here - it's
   injected as inline CSS by hmm_enqueue_assets() so it stays in sync with
   the `hamburger_mobile_menu_breakpoint` PHP filter. */