/**
 * Mobile menu drawer - ensures menu shows when body has .drawer-nav-active.
 * Works with skokie-slim.css (which may lack full drawer rules from filemerge).
 *
 * @package Skokie_Park_Child
 */

@media (max-width: 959px) {
	/* Closed: menu hidden off-screen, invisible — match reference (hamburger only) */
	.main-nav .toggle-menu + .cm-menu,
	.main-nav .cm-menu ul {
		max-height: 0 !important;
		opacity: 0 !important;
		overflow: hidden !important;
		visibility: hidden !important;
		transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
	}

	.main-nav .cm-menu {
		position: fixed !important;
		top: 0;
		left: -100% !important;
		width: 80%;
		max-width: 320px;
		height: 100vh;
		background: #f0f7fc;
		z-index: 9999;
		margin: 0;
		padding: 80px 0 20px;
		overflow-y: auto;
		transition: left 0.3s ease-in-out;
		box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
		visibility: hidden !important;
	}

	/* Open: when body has drawer-nav-active — drawer slides in from left */
	body.drawer-nav-active .main-nav .toggle-menu + .cm-menu,
	body.drawer-nav-active .main-nav .cm-menu ul {
		max-height: none !important;
		opacity: 1 !important;
		overflow: visible !important;
		visibility: visible !important;
	}

	body.drawer-nav-active .main-nav .cm-menu,
	body.drawer-nav-active .main-nav .cm-menu ul {
		background: #e8f2fa !important;
	}

	body.drawer-nav-active .main-nav .cm-menu {
		left: 0 !important;
		visibility: visible !important;
		pointer-events: auto !important;
	}

	/* Overlay — full-screen dimming; click to close (menu has higher z-index so stays clickable) */
	.drawer-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9998;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		pointer-events: none;
	}

	body.drawer-nav-active .drawer-overlay {
		display: block;
		opacity: 1;
		pointer-events: auto;
	}

	/* Menu above overlay — receives clicks */
	body.drawer-nav-active .main-nav .cm-menu {
		pointer-events: auto !important;
	}

	/* Menu link styling — match reference (light blue drawer, dark blue links) */
	body.drawer-nav-active .main-nav .cm-menu li a,
	body.drawer-nav-active .main-nav .cm-menu a {
		display: block !important;
		padding: 12px 25px;
		color: #0c2340 !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		background: transparent !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
		cursor: pointer;
		pointer-events: auto;
	}

	body.drawer-nav-active .main-nav .cm-menu li a:hover,
	body.drawer-nav-active .main-nav .cm-menu li a:focus,
	body.drawer-nav-active .main-nav .cm-menu a:hover,
	body.drawer-nav-active .main-nav .cm-menu a:focus {
		background: rgba(0, 0, 0, 0.06) !important;
		color: #0c2340 !important;
	}
}