/*
 * Aflex_Nav.css
 * Styles for the MW_Aflex_Nav_Module
 * Includes: Black main bar, white angled top bar with mega slide animation, and submenu.
 */

/* --- Global Module & Positioning --- */

.mw-aflex-nav-module {
	/* Positioning context for absolute children (top bar). */
	position: relative !important; 
	/* High Z-Index to stack correctly above other Divi sections/rows. */
	z-index: 100 !important; 
	padding: 0 !important;
	margin: 0 !important;
	/* Removed overflow: hidden to allow the top bar to start far off-screen without clipping. */
}

/* --- Main Navigation Bar (Black - ID 17) --- */

.mw-aflex-main-bar-wrap {
	background-color: #000; /* Black background */
	padding: 7px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 10; /* Lower than the top bar */
}

/* Main Logo (AFLEX SVG) */
.mw-aflex-main-logo-svg {
	flex-shrink: 0;
	width: 198px;
	height: auto;
}
.mw-aflex-main-logo-svg svg {
	display: block;
	width: 100%;
	height: auto;
}

/* AU Made Logo SVG */
.mw-aflex-au-logo-svg {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	align-self: flex-end;
}
.mw-aflex-au-logo-svg svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Main Menu (Black Bar Content) */
.mw-aflex-main-bar-content {
	flex-grow: 1;
	text-align: right;
	padding-right: 20px;
}

.mw-aflex-main-ul {
	list-style: none;
	padding: 0 !important;
	margin: 30px 5px 0px 5px;
	display: flex;
	justify-content: flex-end;
	gap: 55px;
}

.mw-aflex-main-ul li {
	list-style: none;
}

.mw-aflex-main-ul a {
	color: #fff; /* White text */
	text-decoration: none;
	font-weight: bold;
	font-size: 20px;
	text-transform: uppercase;
	padding: 7px 3px;
}

/* Main Menu Hover Underline Effect */
.mw-aflex-main-ul li a { position: relative; display: inline-block; overflow: hidden; } 
.mw-aflex-main-ul li a:after { 
	content: ''; 
	position: absolute; 
	left: 50%; 
	bottom: 0; 
	width: 0; 
	height: 2px; 
	background: #0488BF; /* Blue accent */
	transform: scaleY(0); 
	transform-origin: bottom; 
	transition: all 0.3s ease; 
} 
.mw-aflex-main-ul li:hover a:after { 
	width: 100%; 
	left: 0; 
	transform: scaleY(1); 
}

/* -------------------------------------------------------------------------- */
/* --- Top Bar Styling (White, Angled, Animated - ID 19) --- */
/* -------------------------------------------------------------------------- */

.mw-aflex-topbar-wrap {
	position: absolute;
	top: 0;
	width: 100%;
	height: 200px; 
	/* background-color: #fff; */
	z-index: 50; /* Higher than main bar */
		
	/* MEGA SLIDE BASE STATE: Hidden far above the container */
	transform: translateY(-700px); 
	
	/* Smooth transition relies only on the transform property */
	transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ANIMATED STATE class added by JavaScript */
.mw-aflex-topbar-wrap.slide-in {
	/* SLIDE DOWN: Moves into its visible position at top: 0 */
	/* transform: translateY(0);  */
	transform: translateY( -200px );
}

/* Top Bar Content (Menu items) */

.mw-aflex-topbar-ul {
	list-style: none;
	padding: 0 30px !important;
	margin: 0;
	display: flex;
	justify-content: space-around;
	background: white;
	width: 540px;
	clip-path: polygon(0 0, 100% 0%, 97% 100%, 3% 100%);
	margin: 0 auto 0 calc(100vw - 635px);
}

.mw-aflex-topbar-ul li {
	margin: 0;
	list-style: none;
	/* CRITICAL FIX: Establish positioning context for the absolute submenu */
	position: relative; 
}

.mw-aflex-topbar-ul a {
	color: #000; /* Black text */
	text-decoration: none;
	font-weight: normal;
	font-size: 15px;
	text-transform: uppercase;
	white-space: nowrap;
}

.mw-aflex-topbar-ul a:hover {
	color: #0488BF;
}

/* -------------------------------------------------------------------------- */
/* --- Submenu (Dropdown) Styling --- */
/* -------------------------------------------------------------------------- */




/* -------------------------------------------------------------------------- */
/* --- Mega Menu Content Styling --- */
/* -------------------------------------------------------------------------- */

/* Container for the new mega menu links */
.mw-aflex-mega-resources-content {
	background: #e9e9e9 ;
	padding: 20px 30px 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	height: 100%;
}

/* Show the mega content when active */
.mw-aflex-topbar-wrap.mega-active .mw-aflex-mega-resources-content {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	height: 100%;
}

/* Styling the column layout */
.mw-aflex-mega-column {
	width: calc(33.33% - 14px); /* Three columns */
}

/* List styling inside the mega menu */
.mw-aflex-mega-column ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mw-aflex-mega-column li {
	list-style: none;
	margin-bottom: 8px;
}

.mw-aflex-mega-column a {
	color: #000;
	font-size: 14px;
	text-decoration: none;
	display: block;
	padding: 3px 0;
}

.mw-aflex-mega-column a:hover {
	color: #0488BF;
	text-decoration: underline;
}

.mw-aflex-topbar-wrap.mega-active {
	transform: translateY(0);
}