/* ==========================================================
   PAWTUCKET MOBILE BOTTOM NAVIGATION
   ========================================================== */


/* ==========================================================
   GLOBAL VARIABLES
   ========================================================== */

:root {
	/*
	 * Height of the mobile bottom navigation.
	 *
	 * Change this ONE value if the navigation height changes.
	 */
	--mobile-menu-height: 64px;
}


/* ==========================================================
   DEFAULT / DESKTOP
   ========================================================== */

#mobile-bottom-nav,
#mobile-menu-overlay {
	display: none;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media only screen and (max-width: 767px) {


	/* ======================================================
	   FOOTER
	   ======================================================

	   Pawtucket normally uses:

	       position: absolute;
	       bottom: 0;

	   Move the footer above the fixed mobile navigation.
	   ====================================================== */

	html body #footer {
		position: absolute !important;

		bottom: var(--mobile-menu-height) !important;

		margin-bottom: 0 !important;
		padding-bottom: 0 !important;
	}


	/* ======================================================
	   HIDE PAWTUCKET'S ORIGINAL HAMBURGER

	   The bottom Menu button triggers the same button
	   programmatically.
	   ====================================================== */

	.navbar-toggle {
		display: none !important;
	}


	/* ======================================================
	   MOBILE BOTTOM NAVIGATION
	   ====================================================== */

	#mobile-bottom-nav {
		display: flex;

		position: fixed;

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

		width: 100%;
		height: var(--mobile-menu-height);

		background: #fff;

		border-top: 1px solid #ddd;

		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);

		z-index: 999999;

		align-items: stretch;
		justify-content: space-around;
	}


	/* ======================================================
	   BOTTOM NAVIGATION ITEMS
	   ====================================================== */

	#mobile-bottom-nav .mobile-bottom-nav__item {
		flex: 1;

		display: flex;

		flex-direction: column;

		align-items: center;
		justify-content: center;

		padding: 5px 2px;

		color: #666;

		font-size: 11px;

		line-height: 1.2;

		text-decoration: none !important;

		-webkit-tap-highlight-color: transparent;
	}


	#mobile-bottom-nav .mobile-bottom-nav__item:hover,
	#mobile-bottom-nav .mobile-bottom-nav__item:focus {
		color: #11808D;

		background: transparent;

		text-decoration: none !important;
	}


	/* ======================================================
	   BOTTOM NAVIGATION ICONS
	   ====================================================== */

	#mobile-bottom-nav .mobile-bottom-nav__icon {
		display: flex;

		align-items: center;
		justify-content: center;

		font-size: 20px;

		line-height: 24px;

		margin-bottom: 2px;
	}


	#mobile-bottom-nav .mobile-bottom-nav__label {
		display: block;

		white-space: nowrap;
	}


	/* ======================================================
	   HAMBURGER SVG
	   ====================================================== */

	#mobile-bottom-nav .mobile-bottom-nav__hamburger {
		width: 22px;
		height: 24px;

		margin: 0 0 2px 0;

		padding: 0;
	}


	#mobile-bottom-nav .mobile-bottom-nav__hamburger svg {
		display: block;

		width: 22px;
		height: 22px;

		color: currentColor;
	}


	/* ======================================================
	   ACTIVE MENU BUTTON
	   ====================================================== */

	#mobile-bottom-nav .mobile-bottom-nav__menu.is-active {
		color: #11808D !important;
	}


	/* ======================================================
	   ORIGINAL PAWTUCKET MAIN MENU

	   The existing Bootstrap menu becomes a bottom sheet.
	   ====================================================== */

	#bs-main-navbar-collapse-1 {
		position: fixed !important;

		left: 15px !important;
		right: 15px !important;

		top: auto !important;

		bottom: var(--mobile-menu-height) !important;

		width: auto !important;

		max-height: calc(100vh - var(--mobile-menu-height)) !important;

		margin: 0 !important;
		padding: 0 !important;

		box-sizing: border-box !important;

		overflow-x: hidden !important;
		overflow-y: auto !important;

		background: #fff !important;

		border: 1px solid #ddd !important;
		border-bottom: 0 !important;

		border-radius: 4px 4px 0 0;

		box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15) !important;

		z-index: 999998 !important;
	}


	/* ======================================================
	   BOOTSTRAP COLLAPSE BEHAVIOR
	   ====================================================== */

	#bs-main-navbar-collapse-1.collapse {
		display: none !important;
	}


	#bs-main-navbar-collapse-1.collapse.in {
		display: block !important;
	}


	/* ======================================================
	   MAIN MENU NAVIGATION
	   ====================================================== */

	#bs-main-navbar-collapse-1 > .menuItems {
		display: block !important;

		float: none !important;

		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	#bs-main-navbar-collapse-1 .menuItems > li {
		float: none !important;

		display: block !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	#bs-main-navbar-collapse-1 .menuItems > li > a {
		display: block !important;

		padding: 14px 20px !important;

		font-size: 16px !important;

		line-height: 20px !important;

		border-bottom: 1px solid #eee !important;
	}


	/* ======================================================
	   USER ICON / USER NAVIGATION

	   This is the REAL user menu that exists INSIDE
	   #bs-main-navbar-collapse-1.

	   Do NOT confuse it with #user-navbar-toggle.
	   ====================================================== */

	#bs-main-navbar-collapse-1 #user-navbar,
	#bs-main-navbar-collapse-1 #lang-navbar {
		display: block !important;

		float: none !important;

		width: 100% !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	#bs-main-navbar-collapse-1 #user-navbar > li,
	#bs-main-navbar-collapse-1 #lang-navbar > li {
		float: none !important;

		display: block !important;

		margin: 0 !important;
		padding: 0 !important;
	}


	/* User icon button */

	#bs-main-navbar-collapse-1 #user-navbar > li > a.icon,
	#bs-main-navbar-collapse-1 #lang-navbar > li > a.icon {
		display: flex !important;

		align-items: center !important;
		justify-content: flex-start !important;

		width: 100% !important;

		padding: 14px 20px !important;

		font-size: 20px !important;

		line-height: 20px !important;

		border-bottom: 1px solid #eee !important;
	}


	#bs-main-navbar-collapse-1 #user-navbar > li > a.icon .glyphicon,
	#bs-main-navbar-collapse-1 #lang-navbar > li > a.icon .glyphicon {
		display: inline-block !important;

		font-size: 20px !important;

		line-height: 20px !important;

		margin: 0 !important;
	}


	/* ======================================================
	   LOGIN / REGISTER DROPDOWN
	   ====================================================== */

	#bs-main-navbar-collapse-1 #user-navbar .dropdown-menu {
		position: static !important;

		float: none !important;

		width: 100% !important;

		margin: 0 !important;

		padding: 0 !important;

		border: 0 !important;

		box-shadow: none !important;
	}


	#bs-main-navbar-collapse-1 #user-navbar .dropdown-menu > li {
		display: block !important;

		float: none !important;
	}


	#bs-main-navbar-collapse-1 #user-navbar .dropdown-menu > li > a {
		display: block !important;

		padding: 12px 20px 12px 50px !important;

		font-size: 15px !important;

		line-height: 20px !important;

		border-bottom: 1px solid #eee !important;
	}


	/* ======================================================
	   SEARCH FORM
	   ====================================================== */

	#bs-main-navbar-collapse-1 > .navbar-form {
		float: none !important;

		width: auto !important;

		margin: 0 !important;

		padding: 10px 20px !important;

		border: 0 !important;

		box-shadow: none !important;
	}


	#bs-main-navbar-collapse-1 > .navbar-form .formOutline {
		width: 100%;
	}


	#bs-main-navbar-collapse-1 > .navbar-form .form-group {
		display: inline-block;

		width: calc(100% - 45px);

		margin: 0;
	}


	#bs-main-navbar-collapse-1 > .navbar-form .form-control {
		width: 100%;
	}


	/* ======================================================
	   DROPDOWN MENUS
	   ====================================================== */

	#bs-main-navbar-collapse-1 .menuItems .dropdown-menu {
		position: static !important;

		float: none !important;

		width: 100% !important;

		margin: 0 !important;

		padding: 0 !important;

		border: 0 !important;

		box-shadow: none !important;
	}


	#bs-main-navbar-collapse-1 .menuItems .dropdown-menu > li > a {
		padding: 12px 20px 12px 35px !important;

		font-size: 15px !important;

		line-height: 20px !important;

		border-bottom: 1px solid #eee !important;
	}


	/* ======================================================
	   OVERLAY
	   ====================================================== */

	#mobile-menu-overlay {
		display: none;

		position: fixed;

		left: 0;
		right: 0;
		top: 0;

		bottom: var(--mobile-menu-height);

		background: rgba(0, 0, 0, 0.35);

		z-index: 999997;
	}


	#mobile-menu-overlay.is-visible {
		display: block;
	}

}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media only screen and (min-width: 768px) {


	/* ------------------------------------------------------
	   Disable custom mobile navigation
	   ------------------------------------------------------ */

	#mobile-bottom-nav {
		display: none !important;
	}


	#mobile-menu-overlay {
		display: none !important;
	}


	/* ------------------------------------------------------
	   Restore Pawtucket footer
	   ------------------------------------------------------ */

	#footer {
		position: absolute;

		bottom: 0;
	}


	/* ------------------------------------------------------
	   Original desktop navbar behavior
	   ------------------------------------------------------ */

	.navbar-toggle {
		display: none;
	}


	/* ------------------------------------------------------
	   Hide the separate mobile Login/Register collapse.

	   IMPORTANT:
	   This is NOT #user-navbar.

	   #user-navbar is the user icon INSIDE the main menu.
	   ------------------------------------------------------ */

	#user-navbar-toggle {
		display: none !important;
	}

}