/**
 * Mobile slide-in navigation (max-width: 991px)
 */

@media (max-width: 991px) {

	/* Sit above page content only; navbar/panel stack above this */
	.mobile-menu-overlay {
		position: fixed;
		inset: 0;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.45);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.3s ease, visibility 0.3s ease;
	}

	body.mobile-menu-open .mobile-menu-overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	header .navbar.navbar-main {
		z-index: 2;
	}

	/* Slide-in panel */
	header .navbar .navbar-collapse.collapse,
	header .navbar .navbar-collapse.collapsing {
		display: block !important;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(320px, 88vw);
		height: 100% !important;
		max-height: none !important;
		margin: 0;
		padding: 88px 24px 32px;
		float: none;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 2;
		background-color: #fff;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
		transform: translateX(100%);
		transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
		visibility: hidden;
		pointer-events: none;
	}

	/* Keep burger/close icon above the panel */
	header .navbar .navbar-toggle {
		position: relative;
		z-index: 3;
	}

	body.mobile-menu-open header .navbar .navbar-collapse.collapse,
	body.mobile-menu-open header .navbar .navbar-collapse.collapsing {
		transform: translateX(0);
		visibility: visible;
		pointer-events: auto;
	}

	/* Readable link colors on white panel (overrides hero / .white header styles) */
	header .navbar .navbar-collapse .navbar-nav > li > a,
	header .navbar .navbar-collapse div.navbar-nav > ul > li > a,
	header .navbar.white .navbar-collapse .navbar-nav > li > a,
	header .navbar.white .navbar-collapse div.navbar-nav > ul > li > a,
	header .navbar.white .navbar-collapse .navbar-nav > li:not(.active) > a:not(:hover),
	header .navbar.white .navbar-collapse div.navbar-nav > ul > li:not(.current_page_item) > a:not(:hover) {
		color: #222 !important;
		text-shadow: none !important;
		-webkit-text-shadow: none !important;
	}

	header .navbar .navbar-collapse .navbar-nav > li > a:hover,
	header .navbar .navbar-collapse .navbar-nav > li > a:focus,
	header .navbar .navbar-collapse div.navbar-nav > ul > li > a:hover,
	header .navbar .navbar-collapse div.navbar-nav > ul > li > a:focus {
		color: #3d8abd !important;
		background-color: transparent !important;
	}

	header .navbar .navbar-collapse .navbar-nav > .active > a,
	header .navbar .navbar-collapse .navbar-nav > .active > a:hover,
	header .navbar .navbar-collapse .navbar-nav > .active > a:focus,
	header .navbar .navbar-collapse .navbar-nav .current_page_item > a,
	header .navbar .navbar-collapse div.navbar-nav > ul > .current_page_item > a,
	header .navbar .navbar-collapse div.navbar-nav > ul > .active > a {
		color: #3d8abd !important;
		background-color: transparent !important;
		background-image: none !important;
	}

	header .navbar .navbar-collapse .navbar-nav ul.dropdown-menu a,
	header .navbar .navbar-collapse .navbar-nav ul.dropdown-menu a:hover {
		color: #444 !important;
		background-color: transparent !important;
		text-shadow: none !important;
	}

	header .navbar .navbar-collapse .navbar-nav ul.dropdown-menu li:hover > a {
		color: #3d8abd !important;
	}

	header .navbar .navbar-collapse .dropdown-toggle .caret {
		border-top-color: #222;
	}

	/* Override theme collapse dropdown styles */
	header .navbar .in .navbar-nav > li > ul,
	header .navbar .in .navbar-nav > li ul,
	header .navbar .navbar-collapse .navbar-nav > li > ul,
	header .navbar .navbar-collapse .navbar-nav > li ul {
		position: static;
		visibility: visible;
		opacity: 1;
		height: auto;
		border-left: 0;
		box-shadow: none;
	}

	header .navbar .navbar-collapse > .navbar-nav,
	header .navbar .navbar-collapse > .navbar-nav.navbar-right,
	header .navbar div.navbar-nav > ul {
		margin: 0;
		float: none !important;
		text-align: left;
	}

	header .navbar .navbar-collapse .navbar-nav > li,
	header .navbar .navbar-collapse div.navbar-nav > ul > li {
		display: block;
		float: none;
	}

	header .navbar .navbar-collapse .navbar-nav > li > a,
	header .navbar .navbar-collapse div.navbar-nav > ul > li > a {
		margin: 0;
		padding: 14px 0;
		border-bottom: 1px solid #eee;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	header .navbar .navbar-collapse .navbar-nav > li > a:before,
	header .navbar .navbar-collapse .navbar-nav > li > a:after,
	header .navbar .navbar-collapse div.navbar-nav > ul > li > a:before,
	header .navbar .navbar-collapse div.navbar-nav > ul > li > a:after {
		display: none;
	}

	header .navbar .navbar-collapse .navbar-nav ul.dropdown-menu {
		position: static;
		display: block;
		float: none;
		width: 100%;
		padding-left: 16px;
		border: none;
		background: transparent;
		box-shadow: none;
	}

	header .navbar .navbar-collapse .navbar-nav ul.dropdown-menu a {
		padding: 10px 0;
		border: none;
		white-space: normal;
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* Burger → X */
	header .navbar .navbar-toggle.is-active .icon-bar {
		background-color: #3d8abd;
	}

	header .navbar .navbar-toggle.is-active .icon-bar:nth-child(3) {
		opacity: 0;
		transform: scaleX(0);
	}

	header .navbar .navbar-toggle.is-active .icon-bar:nth-child(2) {
		transform: translateY(6px) rotate(45deg);
	}

	header .navbar .navbar-toggle.is-active .icon-bar:nth-child(4) {
		transform: translateY(-6px) rotate(-45deg);
	}

	header .navbar .navbar-toggle .icon-bar {
		transition: transform 0.25s ease, opacity 0.25s ease;
	}

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

	.admin-bar header .navbar .navbar-collapse.collapse {
		top: 46px;
		height: calc(100% - 46px) !important;
		padding-top: 24px;
	}

	@media (min-width: 783px) {
		.admin-bar header .navbar .navbar-collapse.collapse {
			top: 32px;
			height: calc(100% - 32px) !important;
		}
	}
}