/**
 * WDM Customizations — sidebar navigation layout.
 *
 * Everything here is scoped to `.wdm-nav-active`, the body class added by
 * WDM_Sidebar_Nav, so disabling the module in settings reverts the theme
 * to stock rendering with no leftover styles.
 *
 * The theme already styles `.main-navigation a` and
 * `.home-sidebar .product-side-tab .nav-tabs a` with a single shared rule
 * (style.css:623), so link appearance needs no overriding. Only the
 * container geometry differs, and that is what this file corrects.
 */

/* ==========================================================================
 * PRO LAYOUT (vw-clothing-store-pro)
 *
 * The menu starts in the header and is moved into `.collections-menus` by
 * assets/js/pro-nav.js. Rules that hide the original positions are gated on
 * `.wdm-js` (JavaScript is running) or `.wdm-nav-moved` (the move succeeded),
 * so a JS failure leaves the theme rendering normally.
 * ========================================================================== */

/* Pre-hide the header menu to stop it flashing before the move. Gated on
   .wdm-js, which the plugin's head script sets and pro-nav.js removes if the
   relocation throws. */
.wdm-js .wdm-layout-pro .innermenubox .main-header {
	visibility: hidden;
}

/* Once moved, the emptied header slot collapses for good. */
.wdm-nav-moved .innermenubox .main-header {
	display: none;
}

/* The relocated menu inherits `.collections-menus a` from the theme
   (font: 500 15px/20px Fira Sans; color:#000) — see
   assets/css/main-css/header-footer.css:393. Only the list geometry needs
   setting, since the theme's own horizontal rules are keyed to
   `#menu-primary-menu` and never matched this menu. */
.wdm-layout-pro .collections-menus .wdm-relocated-nav {
	display: block;
	width: 100%;
	visibility: visible;
	position: static;
}

.wdm-layout-pro .collections-menus .main-navigation,
.wdm-layout-pro .collections-menus .menu {
	width: 100%;
}

.wdm-layout-pro .collections-menus .wdm-collections-menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	width: 100%;
}

.wdm-layout-pro .collections-menus .wdm-collections-menu > li {
	display: block;
	width: 100%;
	float: none;
	position: relative;
	padding: 0;
	text-align: left;
}

/* Matches the 14px rhythm the theme gives `.collections-menus a`. */
.wdm-layout-pro .collections-menus .wdm-collections-menu > li > a {
	display: block;
	padding: 0 0 14px;
}

/* Submenus fly out to the right of the narrow sidebar column instead of
   dropping underneath it. */
.wdm-layout-pro .collections-menus .wdm-collections-menu li ul.sub-menu {
	position: absolute;
	top: 0;
	left: 100%;
	z-index: 9999;
	min-width: 200px;
	display: none;
	background: #fff;
	box-shadow: 0 3px 4px 1px #eee;
}

.wdm-layout-pro .collections-menus .wdm-collections-menu li:hover > ul.sub-menu {
	display: block;
}

/* --------------------------------------------------------------------------
 * FREE LAYOUT (vw-clothing-store)
 *
 * Desktop: return the off-canvas container to normal flow.
 *
 * The theme sets `#mySidenav { display: inline-block; }` unconditionally,
 * which shrink-wraps the menu to its content instead of filling the 300px
 * sidebar. Below 1000px the theme's own media query turns `.sidenav` into a
 * fixed full-screen panel driven by the hamburger, so this block must not
 * apply there.
 * -------------------------------------------------------------------------- */
@media screen and (min-width: 1001px) {

	.wdm-nav-active .home-sidebar #header {
		/* Match the `ms-3` indent the hardcoded Collections block carried. */
		margin-left: 1rem;
	}

	.wdm-nav-active .home-sidebar #mySidenav {
		display: block;
		width: 100%;
		position: static;
		height: auto;
		visibility: visible;
		overflow: visible;
		background: transparent;
	}

	.wdm-nav-active .home-sidebar #site-navigation {
		width: 100%;
	}

	.wdm-nav-active .home-sidebar .wdm-collections-menu {
		/* Mirrors the `my-4` spacing on the theme's `.product-tab` list. */
		margin: 1.5rem 0;
		padding: 0;
		display: block;
		width: 100%;
		border-bottom: none;
		list-style: none;
	}

	.wdm-nav-active .home-sidebar .wdm-collections-menu > li {
		display: block;
		width: 100%;
		float: none;
		text-align: left;
	}

	/* Submenus fly out to the right of the fixed sidebar rather than
	   dropping underneath and being clipped by its scroll container. */
	.wdm-nav-active .home-sidebar .wdm-collections-menu li ul.sub-menu {
		top: 0;
		left: 100%;
	}

	/* The theme hides the close button on desktop via `a.closebtn`; keep it
	   hidden even if a child theme re-shows `.closebtn`. */
	.wdm-nav-active .home-sidebar #mySidenav .closebtn {
		display: none !important;
	}
}

/* --------------------------------------------------------------------------
 * Widget area (WDM_Widgets), appended after the primary menu.
 *
 * The theme's own sidebars use `.widget` / `.widget-title`, so the markup
 * reuses those classes and inherits most styling. Only the geometry inside
 * the 300px fixed column needs setting.
 * -------------------------------------------------------------------------- */
.wdm-nav-active .wdm-sidebar-widgets {
	display: block;
	width: 100%;
	clear: both;
	text-align: left;
}

.wdm-nav-active .wdm-sidebar-widgets .wdm-widget {
	margin: 0 0 1.75rem;
	padding: 0 20px;
	max-width: 100%;
	box-sizing: border-box;
}

.wdm-nav-active .wdm-sidebar-widgets .wdm-widget-title {
	font-size: 17px;
	margin: 0 0 0.75rem;
	padding: 0;
}

/* Keep widget media and form controls inside the fixed column. */
.wdm-nav-active .wdm-sidebar-widgets img {
	max-width: 100%;
	height: auto;
}

.wdm-nav-active .wdm-sidebar-widgets input,
.wdm-nav-active .wdm-sidebar-widgets select {
	max-width: 100%;
	box-sizing: border-box;
}

.wdm-nav-active .wdm-sidebar-widgets ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Widget links must not inherit the menu's link padding, which the theme
   applies broadly via `.main-navigation a`. */
.wdm-nav-active .wdm-sidebar-widgets a {
	display: inline;
	padding: 0;
	font-size: inherit;
	font-weight: inherit;
}

.wdm-nav-active .wdm-sidebar-widgets li > a {
	display: block;
	padding: 6px 0;
}

/* --------------------------------------------------------------------------
 * Mobile / tablet: leave the theme's off-canvas behaviour intact.
 *
 * With the hardcoded Collections list hidden, the hamburger button is now the
 * only route to navigation, so make sure it is visible and reachable.
 * -------------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {

	.wdm-nav-active .home-sidebar .toggle-nav {
		display: block;
	}

	.wdm-nav-active .home-sidebar #mySidenav .closebtn {
		display: block !important;
	}
}