/**
 * Modern mobile drawer (#menu-mobile.ak-drawer, built by js/mobile-drawer.js).
 * Scoped with the id + !important because custom-advanced.css / dynamic-custom.css
 * style the same elements with high specificity.
 */
@media (max-width: 1023px) {
	#menu-mobile.ak-drawer {
		--akd-green: var(--ak-primary);
		--akd-green-dark: var(--ak-primary-dark);
		--akd-gold: #d4a53c;
		--akd-text: #1c2b28;
		--akd-muted: #5c706b;
		--akd-soft: var(--ak-primary-soft);
		--akd-line: var(--ak-line);

		width: min(86vw, 340px) !important;
		max-width: 340px !important;
		padding: 0 !important;
		background: #ffffff !important;
		box-shadow: 12px 0 40px rgb(var(--ak-primary-dark-rgb) / 0.28) !important;
		border-radius: 0 18px 18px 0;
		font-family: inherit;
		overscroll-behavior: contain;
	}

	/* ---------- Header ---------- */
	#menu-mobile.ak-drawer .ak-drawer-head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 12px 14px 14px;
		background: linear-gradient(135deg, var(--akd-green) 0%, var(--akd-green-dark) 100%);
		border-bottom: 3px solid var(--akd-gold);
	}

	#menu-mobile.ak-drawer .ak-drawer-brand {
		flex: 1 1 auto;
		min-width: 0;
		display: block;
		padding: 0 !important;
		background: none !important;
		box-shadow: none !important;
		color: #fff !important;
		font-weight: 700;
	}

	#menu-mobile.ak-drawer .ak-drawer-brand img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 6px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	}

	#menu-mobile.ak-drawer .ak-drawer-close {
		flex: 0 0 38px;
		width: 38px;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.12);
		color: #fff;
		font-size: 17px;
		cursor: pointer;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	#menu-mobile.ak-drawer .ak-drawer-close:hover,
	#menu-mobile.ak-drawer .ak-drawer-close:focus-visible {
		background: rgba(255, 255, 255, 0.25);
		transform: rotate(90deg);
		outline: none;
	}

	/* ---------- Search ---------- */
	#menu-mobile.ak-drawer .ak-drawer-search {
		position: relative;
		display: block !important;
		margin: 14px 14px 6px;
	}

	#menu-mobile.ak-drawer .ak-drawer-search i {
		position: absolute;
		left: 14px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--akd-muted);
		font-size: 14px;
		pointer-events: none;
	}

	#menu-mobile.ak-drawer .ak-drawer-search input[type='search'] {
		display: block !important;
		width: 100%;
		height: 44px;
		padding: 0 14px 0 38px;
		border: 1px solid var(--akd-line);
		border-radius: 999px;
		background: #f6f9f8;
		color: var(--akd-text);
		font-size: 15px;
		transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	}

	#menu-mobile.ak-drawer .ak-drawer-search input[type='search']:focus {
		outline: none;
		border-color: var(--akd-green);
		background: #fff;
		box-shadow: 0 0 0 3px rgb(var(--ak-primary-rgb) / 0.15);
	}

	/* ---------- Menu ---------- */
	#menu-mobile.ak-drawer .mobile-primary-menu {
		margin: 0 !important;
		padding: 6px 0 12px !important;
		background: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav,
	#menu-mobile.ak-drawer ul.ak-drawer-nav ul {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		background: none !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li {
		position: relative;
		display: block !important;
		width: auto !important;
		margin: 2px 10px !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li > a {
		display: flex !important;
		align-items: center;
		gap: 12px;
		min-height: 48px;
		padding: 8px 12px !important;
		border: 0 !important;
		border-radius: 12px !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--akd-text) !important;
		font-size: 15.5px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		text-decoration: none !important;
		transform: none !important;
		transition: background-color 0.2s ease, color 0.2s ease !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li.ak-has-sub > a {
		padding-right: 52px !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li > a .ak-ico {
		flex: 0 0 34px;
		width: 34px;
		height: 34px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		background: var(--akd-soft);
		color: var(--akd-green) !important;
		font-size: 15px;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li > a:hover,
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li > a:focus-visible {
		background: var(--akd-soft) !important;
		color: var(--akd-green) !important;
		outline: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li > a:hover .ak-label,
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li > a:focus-visible .ak-label {
		color: var(--akd-green) !important;
	}

	/* The theme's global hover/focus rules (a:not(...):hover *, li a:focus ...) force
	   every descendant of a link to white; labels must always follow their own link */
	#menu-mobile.ak-drawer .ak-label,
	#menu-mobile.ak-drawer a:hover .ak-label,
	#menu-mobile.ak-drawer a:focus .ak-label,
	#menu-mobile.ak-drawer li:hover > a .ak-label {
		color: inherit !important;
		background: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li:hover,
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li:focus-within {
		background: none !important;
		box-shadow: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li:not(.ak-active) > a:focus,
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li:not(.ak-active):hover > a {
		color: var(--akd-text) !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li:not(.ak-active) > a:hover,
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li:not(.ak-active) > a:focus-visible {
		background: var(--akd-soft) !important;
		color: var(--akd-green) !important;
	}

	/* The theme focuses the first link when the drawer opens and paints an orange
	   outline on :focus; keep a subtle ring for keyboard users only */
	/* mobile-menu-consolidated.js also sets an inline 'outline: 2px solid #ff7700' on the
	   first link when the drawer opens; !important here overrides that inline style */
	#menu-mobile.ak-drawer a:not(:focus-visible),
	#menu-mobile.ak-drawer button:not(:focus-visible) {
		outline: none !important;
	}

	#menu-mobile.ak-drawer a:focus-visible,
	#menu-mobile.ak-drawer button:focus-visible {
		outline: 2px solid var(--akd-gold) !important;
		outline-offset: 2px !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li > a:focus:not(:focus-visible) {
		background: transparent !important;
		color: var(--akd-text) !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li.ak-active > a:focus:not(:focus-visible) {
		background: var(--akd-green) !important;
		color: #fff !important;
	}

	/* Touch / hover state classes toggled by mobile-menu-consolidated.js */
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li:not(.ak-active) > a.active-touch,
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li:not(.ak-active) > a.hover-active {
		background: var(--akd-soft) !important;
		color: var(--akd-green) !important;
		transform: none !important;
		box-shadow: none !important;
		border: 0 !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li a.active-touch,
	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li a.hover-active {
		background: var(--akd-soft) !important;
		color: var(--akd-green) !important;
		transform: none !important;
		box-shadow: none !important;
	}

	/* Tap highlight: no grey flash on Android */
	#menu-mobile.ak-drawer a,
	#menu-mobile.ak-drawer button {
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	/* Active page */
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li.ak-active > a {
		background: var(--akd-green) !important;
		color: #fff !important;
		box-shadow: 0 4px 12px rgb(var(--ak-primary-rgb) / 0.25) !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li.ak-active > a .ak-label {
		color: #fff !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li.ak-active > a .ak-ico {
		background: rgba(255, 255, 255, 0.16);
		color: var(--akd-gold) !important;
	}

	/* Sub-menu toggle */
	#menu-mobile.ak-drawer .ak-sub-toggle {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: var(--akd-muted);
		font-size: 13px;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease;
	}

	#menu-mobile.ak-drawer .ak-sub-toggle:hover,
	#menu-mobile.ak-drawer .ak-sub-toggle:focus-visible {
		background: rgb(var(--ak-primary-rgb) / 0.1);
		color: var(--akd-green);
		outline: none;
	}

	#menu-mobile.ak-drawer .ak-sub-toggle i {
		transition: transform 0.25s ease;
	}

	#menu-mobile.ak-drawer li.ak-open > .ak-sub-toggle i {
		transform: rotate(180deg);
	}

	#menu-mobile.ak-drawer li.ak-active > .ak-sub-toggle {
		color: #fff;
	}

	/* Sub-menu list (collapsed by default) */
	#menu-mobile.ak-drawer ul.ak-drawer-nav > li > ul {
		display: none !important;
		margin: 4px 0 6px 28px !important;
		padding: 2px 0 2px 12px !important;
		border-left: 2px solid var(--akd-line) !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav > li.ak-open > ul {
		display: block !important;
		animation: akd-reveal 0.2s ease;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li a {
		display: block !important;
		padding: 10px 12px !important;
		border-radius: 10px !important;
		background: transparent !important;
		box-shadow: none !important;
		color: var(--akd-muted) !important;
		font-size: 14.5px !important;
		font-weight: 500 !important;
		line-height: 1.35 !important;
		text-decoration: none !important;
		transform: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li a .ak-label {
		color: inherit !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li a:hover,
	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li a:focus-visible,
	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li.ak-active a {
		background: var(--akd-soft) !important;
		color: var(--akd-green) !important;
		outline: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-nav ul li.ak-active a {
		font-weight: 700 !important;
	}

	@keyframes akd-reveal {
		from { opacity: 0; transform: translateY(-4px); }
		to { opacity: 1; transform: none; }
	}

	/* ---------- User buttons ---------- */
	#menu-mobile.ak-drawer ul.ak-drawer-user {
		display: flex !important;
		flex-wrap: wrap;
		gap: 8px;
		margin: 6px 14px 20px !important;
		padding: 14px 0 0 !important;
		border-top: 1px solid var(--akd-line) !important;
		list-style: none !important;
		background: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-user li {
		flex: 1 1 120px;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-user a.ak-user-btn {
		display: flex !important;
		align-items: center;
		justify-content: center;
		gap: 8px;
		min-height: 46px;
		padding: 10px 14px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: var(--akd-green) !important;
		box-shadow: 0 4px 12px rgb(var(--ak-primary-rgb) / 0.25) !important;
		color: #fff !important;
		font-size: 15px !important;
		font-weight: 600 !important;
		text-decoration: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-user a.ak-user-btn .ak-label,
	#menu-mobile.ak-drawer ul.ak-drawer-user a.ak-user-btn .ak-ico {
		color: #fff !important;
		background: none !important;
	}

	#menu-mobile.ak-drawer ul.ak-drawer-user a.ak-user-btn:hover,
	#menu-mobile.ak-drawer ul.ak-drawer-user a.ak-user-btn:focus-visible {
		background: var(--akd-green-dark) !important;
		outline: none !important;
	}

	/* Softer backdrop */
	#mobile-menu-overlay {
		background: rgb(var(--ak-primary-dark-rgb) / 0.45) !important;
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	#menu-mobile.ak-drawer *,
	#menu-mobile.ak-drawer .ak-drawer-close {
		transition: none !important;
		animation: none !important;
	}
}