/*
 * This file contains the mechanical styling of megamenu, all the bits that
 * make it work. Nothing in this file should inform the LOOK of the menus.
 * There are a few things, like the hardcoded min-width and padding that are
 * here by necessity; the javascript that does too much of the work also makes
 * dumb assumptions about widths of elements.
 *
 * -ST 2019-09-19
 */

/* Rules for hiding elements on mobile/desktop */

@media (min-width: 768px) and (max-width: 991px) {
	#ph_megamenu_wrapper .ph-hidden-mobile {
		display: none !important;
	}
}

@media (min-width: 992px) {
	#ph_megamenu_wrapper .ph-hidden-desktop {
		display: none !important;
	}
}

/* make the mobile toggle less ugly */
header .row > .ph_megamenu_mobile_toggle.container {
	clear: both;
	position: static;
	padding: 1em;
}

/* default for the toggle */
.ph_megamenu_mobile_toggle .hide_megamenu {
	display: none;
}

/* prevent markers from blinking on/off before the JS takes effect */
#ph_megamenu .marker {
	display: none;
}

@media (min-width: 992px) {
	/* this is a trick done to break out of a container, XXX in the looks file? */
	#header #ph_megamenu_wrapper {
		position: absolute;

		left: 0;
		right: 0;
		bottom: 0;

		margin: 0;
		padding: 0;
	 }

	/* XXX setting a margin on the (invisible) toggle here gives some space to
	 * the otherwise floating menu, this is pretty horrible */
	.ph_megamenu_mobile_toggle {
		margin-bottom: 70px;
	}
	 
	 #header #ph_megamenu_wrapper.container {
		max-width: 100%;
	 }

/*
	 #header #ph_megamenu_wrapper nav {
		margin: auto;
		max-width: 1170px;
	 }
*/


	/* XXX should this be in the looks file? */
	#ph_megamenu {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: stretch;
		margin: 0;
	}

	#ph_megamenu .dropdown,
	#ph_megamenu .mega-menu {
		position: absolute;
		display: none;
		min-width: 220px;	/* hardcoded in the JS */

		top: 100%;		/* because using a flex in the li would center the menu */

	}

	#ph_megamenu .mega-menu {
		/* adjusted to fit entire screen */
		left: 0;
		right: 0;
	}

	/* NOTE hardcoded container width */
	#ph_megamenu .dropdown > div ,
	#ph_megamenu .mega-menu > div {
		max-width: 1170px;
		margin: 0 auto;
	}

	#ph_megamenu .dropdown li a {
		padding: 10px 20px; /* hardcoded in the JS */
	}

	#ph_megamenu .dropdown li,
	#ph_megamenu .mega-menu li {
		position: relative;
	}

	#ph_megamenu .dropdown .dropdown,
	#ph_megamenu .mega-menu .dropdown {
		top: 0;
		left: 100%; /* at the right edge, unless overridden by JS */
		z-index: 100; /* 100 is aribtrary, but probably OK */
	}

	#ph_megamenu .dropdown li a,
	#ph_megamenu .mega-menu li a {
		display: block;
	}
}

@media (max-width: 991px) {
	#ph_megamenu .dropdown {
		position: static;
	}

	#ph_megamenu li > a i.fa-home {
		display: none;
	}

	#ph_megamenu li > a span.hide {
		display: block;
	}

	#ph_megamenu li > a span.label {
		display: none;
	}

	#ph_megamenu .has-submenu .dropdown,
	#ph_megamenu .has-submenu .mega-menu {
		display: none;
	}

	/* styles to show submenu expansion markers on mobile */
	#ph_megamenu li > a span.marker-off, /* top level */
	#ph_megamenu .dropdown li a span.marker-off, /* dropdowns */
	#ph_megamenu .mega-menu ul li > a span.marker-off, /* mega menus */
	#ph_megamenu .mega-menu h3 span.marker-off { /* mega menu category */
		display: inline-block;
	}

	/* collapse megamenus on mobile */
	#ph_megamenu .mega-menu h3 + ul {
		display: none;
	}

	/* uncollapsed megamenu entry */
	#ph_megamenu .mega-menu h3 + ul.visible {
		display: block;
	}

	/* this overrides two of the homemade bootstrap classes */
	#ph_megamenu .ph-type-4,
	#ph_megamenu .ph-type-5 {
		margin: 0;
		padding: 0;
	}

	/* this overrides a bootstrap class */
	#ph_megamenu .has-megasubmenu {
		padding: 0;
	}

	/* reset the look for megamenu category titles on mobile */
	#ph_megamenu .ph-mega-categories-cat-title {
		border: none;
		margin: 0;
		padding: 0;
		font-weight: normal;
		font-size: 100%;
		line-height: 1;
	}
}