/* Styles for the phone menu (#p4-mobile-nav). The original stylesheet was lost
   in the export; the menu's markup and script are still inline on each page.
   The layout hides the desktop menu at 480px and below, so this menu takes
   over at the same width. */

#p4-mobile-nav {
	display: none;
}

@media screen and (max-width: 480px) {
	/* push the page below the fixed menu bar (#c4p_main may be absolutely positioned) */
	body.responsive #c4p_main {
		margin-top: 52px;
	}

	#p4-mobile-nav {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		background: #fff;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 15px;
	}

	#p4-mobile-nav header {
		display: flex;
		align-items: center;
		height: 52px;
		padding: 0 4px 0 16px;
	}

	#p4-mobile-nav header .title {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #333;
		text-decoration: none;
		font-style: italic;
	}

	#p4-mobile-nav header .cart {
		display: none;
	}

	#p4-mobile-nav .toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		cursor: pointer;
	}

	#p4-mobile-nav .toggle svg {
		fill: #333;
	}

	/* Header button: hamburger when closed, X when open */
	#p4-mobile-nav header .close_btn,
	body.mobile-nav-open #p4-mobile-nav header .menu_btn {
		display: none;
	}

	body.mobile-nav-open #p4-mobile-nav header .close_btn {
		display: block;
	}

	#p4-mobile-nav nav {
		display: none;
		max-height: calc(100vh - 52px);
		overflow-y: auto;
		border-top: 1px solid #ddd;
	}

	body.mobile-nav-open #p4-mobile-nav nav {
		display: block;
	}

	body.mobile-nav-open {
		overflow: hidden;
	}

	#p4-mobile-nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	#p4-mobile-nav li {
		position: relative;
		border-bottom: 1px solid #eee;
	}

	#p4-mobile-nav li:last-child {
		border-bottom: 0;
	}

	#p4-mobile-nav li > a {
		display: block;
		padding: 13px 52px 13px 16px;
		color: #333;
		text-decoration: none;
	}

	#p4-mobile-nav li.nav_c > a {
		font-weight: bold;
	}

	/* the page being viewed */
	#p4-mobile-nav li.nav_a > a {
		font-weight: bold;
		box-shadow: inset 4px 0 0 #333;
	}

	#p4-mobile-nav li > .toggle {
		position: absolute;
		top: 0;
		right: 0;
	}

	/* Submenus: collapsed until the script sets max-height */
	#p4-mobile-nav li > ul {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease;
		background: rgba(0, 0, 0, 0.03);
		border-top: 1px solid #eee;
	}

	#p4-mobile-nav .level-1 > li > a { padding-left: 32px; }
	#p4-mobile-nav .level-2 > li > a { padding-left: 48px; }
	#p4-mobile-nav .level-3 > li > a { padding-left: 64px; }

	/* Submenu button: first icon points up (open), second points down (closed) */
	#p4-mobile-nav li > .toggle svg:first-child,
	#p4-mobile-nav li.open > .toggle svg:last-child {
		display: none;
	}

	#p4-mobile-nav li.open > .toggle svg:first-child {
		display: block;
	}
}