/*
	Decillion Digital - mobile navigation layer
	Loaded last (after style.css / responsive.css / *-ui.css) so it can override the
	template's phone menu, which stacked the toggler under the logo and pushed the
	page down with a full-bleed purple list.

	Below 768px the menu is an overlay card that drops out of the header bar:
	logo left, animated burger right, dimmed backdrop behind, no page reflow.
	Behaviour lives in js/nav-mobile.js.
*/

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

	/* ---------- header bar ---------- */

	.main-header .header-upper .auto-container{
		padding-left:15px;
		padding-right:15px;
	}

	.header-style-two .header-upper .inner-container{
		position:relative;
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:14px;
		padding:0px 16px;
	}

	/* the .clearfix pseudo-elements would otherwise count as flex items and shove the burger inwards */
	.header-style-two .header-upper .inner-container:before,
	.header-style-two .header-upper .inner-container:after{
		display:none;
	}

	/* the template pulls the logo out of the flow below 992px - put it back in the flex row */
	.main-header .header-upper .logo-outer{
		position:static;
		float:none;
		width:auto;
		padding:10px 0px;
	}

	.main-header .logo-outer .logo img,
	.main-header.fixed-header .logo-outer .logo img{
		height:40px;
	}

	/* static so the dropdown panel below anchors to .inner-container, not to the burger */
	.main-header .header-upper .nav-outer{
		position:static;
		float:none;
		width:auto;
		margin-left:auto;
		padding:0px;
	}

	.main-header .main-menu,
	.main-menu .navbar-header{
		position:static;
		float:none;
		width:auto;
		padding:0px;
		margin:0px;
		text-align:right;
	}

	/* ---------- burger ---------- */

	.navbar-light .navbar-toggler.dd-nav-toggler{
		display:flex;
		align-items:center;
		justify-content:center;
		width:44px;
		height:44px;
		padding:0px;
		border:none;
		border-radius:12px;
		background-color:var(--dd-purple-50);
		transition:background-color 0.25s ease;
		-webkit-tap-highlight-color:transparent;
	}

	.navbar-light .navbar-toggler.dd-nav-toggler:focus-visible{
		outline:2px solid var(--dd-purple-600);
		outline-offset:2px;
	}

	.navbar-light .navbar-toggler.dd-nav-toggler[aria-expanded="true"]{
		background-color:var(--dd-purple-600);
	}

	.dd-nav-toggler .dd-burger{
		position:relative;
		display:block;
		width:20px;
		height:14px;
	}

	.dd-nav-toggler .dd-burger span{
		position:absolute;
		left:0px;
		width:100%;
		height:2px;
		border-radius:2px;
		background-color:var(--dd-purple-800);
		transition:transform 0.3s ease, opacity 0.2s ease, background-color 0.25s ease;
	}

	.dd-nav-toggler .dd-burger span:nth-child(1){ top:0px; }
	.dd-nav-toggler .dd-burger span:nth-child(2){ top:6px; }
	.dd-nav-toggler .dd-burger span:nth-child(3){ top:12px; }

	.dd-nav-toggler[aria-expanded="true"] .dd-burger span{
		background-color:#ffffff;
	}

	.dd-nav-toggler[aria-expanded="true"] .dd-burger span:nth-child(1){
		transform:translateY(6px) rotate(45deg);
	}

	.dd-nav-toggler[aria-expanded="true"] .dd-burger span:nth-child(2){
		opacity:0;
	}

	.dd-nav-toggler[aria-expanded="true"] .dd-burger span:nth-child(3){
		transform:translateY(-6px) rotate(-45deg);
	}

	/* ---------- dropdown panel ---------- */

	.main-header .main-menu .navbar-collapse,
	.main-header .main-menu .collapse{
		display:block !important;	/* the open/close animation is opacity + transform, not display */
		position:absolute;
		top:calc(100% + 8px);
		left:0px;
		right:0px;
		width:auto !important;
		max-height:calc(100vh - 140px);
		overflow-y:auto;
		-webkit-overflow-scrolling:touch;
		padding:8px;
		margin:0px;
		background-color:#ffffff;
		border-radius:16px;
		box-shadow:0 18px 40px rgba(14,0,40,0.22);
		opacity:0;
		visibility:hidden;
		transform:translateY(-10px);
		transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
		pointer-events:none;
		z-index:5;
	}

	.main-header.dd-nav-open .main-menu .navbar-collapse{
		opacity:1;
		visibility:visible;
		transform:translateY(0px);
		transition:opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
		pointer-events:auto;
	}

	/* ---------- items ---------- */

	.main-header .main-menu .navbar-collapse > .navigation{
		width:100% !important;
		margin:0px !important;
		border:none !important;
	}

	.main-header .main-menu .navbar-collapse > .navigation > li{
		width:100%;
		margin:0px !important;
		padding:0px !important;
		border:none !important;
		opacity:0;
		transform:translateY(-6px);
		transition:opacity 0.3s ease, transform 0.3s ease;
	}

	.main-header.dd-nav-open .main-menu .navbar-collapse > .navigation > li{
		opacity:1;
		transform:translateY(0px);
	}

	.main-header.dd-nav-open .main-menu .navbar-collapse > .navigation > li:nth-child(1){ transition-delay:0.05s; }
	.main-header.dd-nav-open .main-menu .navbar-collapse > .navigation > li:nth-child(2){ transition-delay:0.10s; }
	.main-header.dd-nav-open .main-menu .navbar-collapse > .navigation > li:nth-child(3){ transition-delay:0.15s; }
	.main-header.dd-nav-open .main-menu .navbar-collapse > .navigation > li:nth-child(4){ transition-delay:0.20s; }

	.main-header .main-menu .navbar-collapse > .navigation > li > a{
		position:relative;
		display:block;
		padding:14px 16px !important;
		border:none !important;
		border-radius:12px;
		font-family:'Montserrat', sans-serif;
		font-size:16px !important;
		font-weight:600;
		line-height:24px;
		text-align:left;
		color:var(--dd-text) !important;
		background:transparent !important;
		transition:color 0.25s ease, background-color 0.25s ease;
	}

	/* the desktop underline marker has no place in the stacked list */
	.main-header .main-menu .navbar-collapse > .navigation > li > a:after{
		display:none;
	}

	.main-header .main-menu .navbar-collapse > .navigation > li + li{
		border-top:1px solid rgba(44,13,110,0.08) !important;
	}

	.main-header .main-menu .navbar-collapse > .navigation > li > a:hover,
	.main-header .main-menu .navbar-collapse > .navigation > li > a:active,
	.main-header .main-menu .navbar-collapse > .navigation > li > a:focus,
	.main-header .main-menu .navbar-collapse > .navigation > li.current > a,
	.main-header .main-menu .navbar-collapse > .navigation > li.current-menu-item > a{
		color:var(--dd-purple-600) !important;
		background-color:var(--dd-purple-50) !important;
	}

	/* active page / section marker */
	.main-header .main-menu .navbar-collapse > .navigation > li.current > a:before{
		content:'';
		position:absolute;
		left:6px;
		top:16px;
		bottom:16px;
		width:3px;
		border-radius:3px;
		background-color:var(--dd-purple-600);
	}

	/* Contact Us reads as the action it is */
	.main-header .main-menu .navbar-collapse > .navigation > li.nav-cta{
		border-top:none !important;
		padding:8px 0px 4px !important;
	}

	.main-header .main-menu .navbar-collapse > .navigation > li.nav-cta > a{
		text-align:center;
		color:#ffffff !important;
		background-color:var(--dd-purple-600) !important;
	}

	.main-header .main-menu .navbar-collapse > .navigation > li.nav-cta > a:hover,
	.main-header .main-menu .navbar-collapse > .navigation > li.nav-cta > a:focus,
	.main-header .main-menu .navbar-collapse > .navigation > li.nav-cta.current > a{
		color:#ffffff !important;
		background-color:var(--dd-purple-800) !important;
	}

	.main-header .main-menu .navbar-collapse > .navigation > li.nav-cta.current > a:before{
		display:none;
	}

	/* ---------- backdrop ---------- */

	.dd-nav-backdrop{
		position:fixed;
		top:0px;
		left:0px;
		right:0px;
		bottom:0px;
		z-index:1020;
		background-color:rgba(14,0,40,0.45);
		opacity:0;
		transition:opacity 0.25s ease;
		pointer-events:none;
	}

	.dd-nav-backdrop.is-visible{
		opacity:1;
		pointer-events:auto;
	}

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

	/* ---------- spacing that follows the slimmer header ---------- */

	html{ scroll-padding-top:84px; }
	.main-slider-two.flush-bottom .slide-item{ padding-top:130px; }
	.contact-hero{ padding-top:130px; }
}

@media only screen and (min-width: 768px){
	/* desktop keeps the template's inline menu - the mobile-only chrome stays out of the way */
	.dd-nav-backdrop{ display:none; }
}

@media (prefers-reduced-motion: reduce){
	.main-header .main-menu .navbar-collapse,
	.main-header .main-menu .navbar-collapse > .navigation > li,
	.dd-nav-toggler .dd-burger span,
	.dd-nav-backdrop{
		transition-duration:0.01ms !important;
		transition-delay:0s !important;
	}
}