/* ---------- Mobile menu: right-side slide-in drawer ---------- */
.st-burger,
.st-overlay,
.st-drawer{ display: none; }

@media (max-width: 991px){
	/* hide the old drop-down (SlickNav) menu */
	.responsive-menu,
	.navbar-toggle{ display: none !important; }

	.main-header .navbar > .container{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.st-burger{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 12px;
		background: var(--accent-color);
		cursor: pointer;
		transition: transform .25s ease;
	}
	.st-burger:active{ transform: scale(.94); }
	.st-burger span{
		display: block;
		width: 22px;
		height: 3px;
		border-radius: 3px;
		background: var(--primary-color);
	}
	.st-burger span:nth-child(2){ width: 16px; align-self: flex-end; margin-right: 11px; }

	.st-overlay{
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .55);
		backdrop-filter: blur(2px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .4s ease, visibility .4s ease;
		z-index: 9998;
	}

	.st-drawer{
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(86vw, 340px);
		background: #fff;
		box-shadow: -12px 0 40px rgba(0, 0, 0, .25);
		border-radius: 24px 0 0 24px;
		transform: translateX(105%);
		transition: transform .45s cubic-bezier(.22, .8, .25, 1);
		z-index: 9999;
		overflow: hidden;
	}

	body.st-drawer-open{ overflow: hidden; }
	body.st-drawer-open .st-overlay{ opacity: 1; visibility: visible; }
	body.st-drawer-open .st-drawer{ transform: translateX(0); }

	.st-drawer-head{
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 18px 20px;
		border-bottom: 1px solid rgba(0, 0, 0, .08);
	}
	.st-drawer-logo img{ max-height: 48px; max-width: 190px; width: auto; height: auto; }
	.st-drawer-close{
		width: 40px;
		height: 40px;
		border: 0;
		border-radius: 12px;
		background: var(--secondary-color);
		color: var(--primary-color);
		font-size: 18px;
		cursor: pointer;
		transition: transform .3s ease, background .2s ease;
	}
	.st-drawer-close:hover{ background: var(--accent-color); transform: rotate(90deg); }

	.st-drawer-nav{ flex: 1; overflow-y: auto; padding: 10px 14px; }
	.st-drawer-nav ul{ list-style: none; margin: 0; padding: 0; }
	.st-drawer-nav > ul > li{
		opacity: 0;
		transform: translateX(24px);
		transition: opacity .4s ease, transform .4s ease;
	}
	body.st-drawer-open .st-drawer-nav > ul > li{ opacity: 1; transform: none; }
	body.st-drawer-open .st-drawer-nav > ul > li:nth-child(1){ transition-delay: .12s; }
	body.st-drawer-open .st-drawer-nav > ul > li:nth-child(2){ transition-delay: .18s; }
	body.st-drawer-open .st-drawer-nav > ul > li:nth-child(3){ transition-delay: .24s; }
	body.st-drawer-open .st-drawer-nav > ul > li:nth-child(4){ transition-delay: .30s; }
	body.st-drawer-open .st-drawer-nav > ul > li:nth-child(5){ transition-delay: .36s; }
	body.st-drawer-open .st-drawer-nav > ul > li:nth-child(6){ transition-delay: .42s; }

	.st-drawer-nav a,
	.st-sub-toggle{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 13px 14px;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: var(--primary-color);
		font-family: var(--default-font);
		font-size: 17px;
		font-weight: 500;
		text-align: left;
		cursor: pointer;
		transition: background .2s ease;
	}
	.st-drawer-nav a:hover,
	.st-sub-toggle:hover{ background: var(--secondary-color); color: var(--primary-color); }

	.st-sub-toggle i{ font-size: 12px; transition: transform .3s ease; }
	.st-has-sub.st-open > .st-sub-toggle{ background: var(--secondary-color); }
	.st-has-sub.st-open > .st-sub-toggle i{ transform: rotate(180deg); }

	.st-sub{
		max-height: 0;
		overflow: hidden;
		padding-left: 12px;
		transition: max-height .4s ease;
	}
	.st-has-sub.st-open > .st-sub{ max-height: 420px; }
	.st-sub a{ font-size: 15px; font-weight: 400; padding: 10px 14px; }

	.st-drawer-nav a.st-drawer-cta{
		justify-content: center;
		margin-top: 12px;
		background: var(--accent-color);
		font-weight: 600;
		border-radius: 50px;
	}

	.st-drawer-foot{
		padding: 16px 20px 20px;
		border-top: 1px solid rgba(0, 0, 0, .08);
		display: grid;
		gap: 10px;
	}
	.st-drawer-foot > a{
		color: var(--primary-color);
		font-size: 15px;
		overflow-wrap: anywhere;
	}
	.st-drawer-foot > a i{ width: 20px; }
	.st-drawer-social{ display: flex; gap: 10px; margin-top: 4px; }
	.st-drawer-social a{
		width: 38px;
		height: 38px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--secondary-color);
		color: var(--primary-color);
		transition: background .2s ease, transform .2s ease;
	}
	.st-drawer-social a:hover{ background: var(--accent-color); transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce){
	.st-drawer, .st-overlay, .st-sub, .st-drawer-nav > ul > li{ transition: none !important; }
}