/* Offcanvas Mobile Menu Styles */
.offcanvas .oamenu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
}

.offcanvas .oamenu > .nav-item {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* First level items - ALL use wrapper now */
.offcanvas .oamenu > .nav-item.first-level > .menu-item-wrapper {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: 56px;
}

.offcanvas .oamenu > .nav-item.first-level > .menu-item-wrapper > a,
.offcanvas .oamenu > .nav-item.first-level > .menu-item-wrapper > .nav-header {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 15px 20px;
	color: #fff;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.2s;
}

.offcanvas .oamenu > .nav-item.first-level > .menu-item-wrapper > a:hover,
.offcanvas .oamenu > .nav-item.first-level > .menu-item-wrapper > a:focus,
.offcanvas .oamenu > .nav-item.first-level > .menu-item-wrapper > .nav-header:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/* Toggle button - only visible on parent items */
.offcanvas .oamenu .menu-toggle {
	width: 60px;
	background: rgba(255, 255, 255, 0.05);
	border: none;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
}

.offcanvas .oamenu .menu-toggle:hover,
.offcanvas .oamenu .menu-toggle:focus {
	background: rgba(255, 255, 255, 0.15);
	outline: none;
}

.offcanvas .oamenu .menu-toggle i {
	transition: transform 0.3s ease;
}

.offcanvas .oamenu .nav-item.menu-open > .menu-item-wrapper .menu-toggle i {
	transform: rotate(180deg);
}

/* Submenu - hidden by default */
.offcanvas .oamenu .submenu {
	list-style: none;
	padding: 0;
	margin: 0;
	background: rgba(0, 0, 0, 0.3);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.offcanvas .oamenu .nav-item.menu-open > .submenu {
	max-height: 800px;
	transition: max-height 0.4s ease-in;
}

/* Submenu items */
.offcanvas .oamenu .submenu .nav-item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.offcanvas .oamenu .submenu .nav-item:last-child {
	border-bottom: none;
}

.offcanvas .oamenu .submenu .nav-item > a {
	display: block;
	padding: 12px 20px 12px 40px;
	font-size: 16px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: background-color 0.2s, padding-left 0.2s;
}

.offcanvas .oamenu .submenu .nav-item > a:hover,
.offcanvas .oamenu .submenu .nav-item > a:focus {
	background-color: rgba(255, 255, 255, 0.05);
	padding-left: 45px;
	color: #fff;
}

/* Deep nested submenus */
.offcanvas .oamenu .submenu .submenu {
	background: rgba(0, 0, 0, 0.2);
}

.offcanvas .oamenu .submenu .submenu .nav-item > a {
	padding-left: 60px;
	font-size: 15px;
}

.offcanvas .oamenu .submenu .submenu .nav-item > a:hover {
	padding-left: 65px;
}

/* Active/current item styling */
.offcanvas .oamenu .nav-item.current > .menu-item-wrapper > a,
.offcanvas .oamenu .nav-item.active > .menu-item-wrapper > a,
.offcanvas .oamenu .submenu .nav-item.current > a,
.offcanvas .oamenu .submenu .nav-item.active > a {
	background-color: rgba(3, 69, 191, 0.3);
	border-left: 3px solid #0345bf;
}

/* Social Icons */
.offcanvas .offcanvas-social {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 25px;
	padding: 20px;
}

.offcanvas .offcanvas-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 45px;
	height: 45px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #fff;
	font-size: 20px;
	text-decoration: none;
	transition: all 0.3s ease;
}

.offcanvas .offcanvas-social a:hover {
	background-color: #fff;
	color: #000;
	border-color: #fff;
	transform: scale(1.1);
}