/******/
/*** MENU ***/
/******/

.global-nav {
	width: 100%;
}

.navigation {
	display: inline-block;
}

.nav-backdrop {
	position: absolute;
    inset: 0;
    height: 100%;
    backdrop-filter: blur(1rem);
    mask-image: linear-gradient(
      to bottom,
      black 0% 50%,
      transparent 50% 100%
    );
}

.navigation__logo .logo {
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	width: 11.75rem;
	height: 5.313rem;
	display: block;
}

.main-menu ul {
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.menu-1 {
	padding-right: 5rem;
}

.menu-2 {
	margin-left: -5rem;
}

.faq-drawer input[type="checkbox"] {
	display: none;
}

.menu-item-has-children::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 0.5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	margin-bottom: 0.5rem;
	transform: rotate(45deg);
	transition: transform 300ms;
	vertical-align: middle;
}

.menu-item-has-children:hover:after {
	transform: rotate(-135deg);
	margin-bottom: 0;
}

.footer-menu a {
	color: var(--color-mint);
}

footer .logo img {
	max-width: 26rem;
}

.social-icons img {
	width: 2.25rem;
	height: 2.25rem;
}

.social-icons {
	display: flex;
	gap: 1.5rem;
}

.footer-info h5 {
	padding-top: 1.5rem;
}

.footer-info a  {
	color: var(--color-mint);
}

.sub-menu .badge a {
	position: relative;
	display: block;
	width: 100%;
	height: 13.73375rem;
	text-indent: -9999px;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.sub-menu li {
	width: 20%;
}

.sub-menu .badge.camp a {
	background-image: url('/wp-content/themes/down-home-ranch/assets/images/nav/about-camp.svg');
}

.sub-menu .badge.life a {
	background-image: url('/wp-content/themes/down-home-ranch/assets/images/nav/about-life.svg');
}

.sub-menu .badge.haven a {
	background-image: url('/wp-content/themes/down-home-ranch/assets/images/nav/about-haven.svg');
}

.sub-menu .badge.flora a {
	background-image: url('/wp-content/themes/down-home-ranch/assets/images/nav/about-flora.svg');
}

.sub-menu .badge.craft a {
	background-image: url('/wp-content/themes/down-home-ranch/assets/images/nav/about-craft.svg');
}

@media screen and ( min-width: 48rem ) {
	
	.menu-item-has-children {
		padding-bottom: 3rem;
		padding-top: 3rem;
	}
	
	.global-nav .menu-item-has-children .submenu-wrapper {
		display: none;
		position: fixed;
		z-index: 5;
		background-color: inherit;
		width: 100vw;
		left: 0;
		margin-top: 2.5rem;
	}
	
	.menu-item-has-children:hover .submenu-wrapper {
		display: flex;
		justify-content: center;
	}
	
	.menu-item-has-children .sub-menu {
		padding: 3rem;
		padding-top: 2.5rem;
		display: flex;
		justify-content: flex-start;
		max-width: 84rem;
	}
	
	.menu-item-has-children .submenu-wrapper {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		transition: transform 0.4s ease, opacity 0.2s ease, visibility 0.4s ease;
	}

	.scrolling_down .menu-item-has-children:hover .submenu-wrapper {
		visibility: hidden;
		transform: translateY(-15rem);
	}
	
	.scrolling_down.page-faq .menu-item-has-children:hover .submenu-wrapper {
		display: none;
	}
	
}

@media screen and ( max-width: 47.9375rem ) {
	
	.global-nav {
		top: 0;
	}
	
	.navigation {
		position: relative;
		padding: .125rem 0 .125rem .125rem;
	}
	
	.navigation__logo {
		width: 8rem;
	}
	
	.navigation__wrapper {
		flex-grow: 1;
		padding-right: .25rem!important;
		top: 2rem;
	}

	.navigation__links {
		position: fixed;
		width: 100%;
		height: 100vh;
		right: -63rem;
		top: 0rem;
		transition: right .2s ease-in;
		background: var(--color-white);
		color: var(--color-black);
		list-style: none;
		flex-direction: column;
		justify-content: flex-start;
		margin-block-start: 0rem;
		margin-block-end: 0rem;
	}
	
	.navigation__links li {
		padding: .5rem 0rem;
		text-align: center;
		width: 100%;
		flex-basis: 0;
	}
	
	.navigation__links a {
		text-decoration: none;
		font-size: 1.3rem;
	}
	
	#hamburger {
		visibility: hidden;
		width: 0;
	}
	
	.navigation__button {
		position: relative;
		display: inline-block;
		width: 2.25rem;
		height: 2rem;
		background: transparent;
		cursor: pointer;
		z-index: 999;
	}
	
	.navigation__button span {
		position: absolute;
		right: 0;
		display: inline-block;
		width: 1.5rem;
		height: .125rem;
		background-color: var(--color-cream);
		transform-origin: center;
		transition: opacity 0.2s linear, all 0.3s linear;
	}
	
	.navigation__button span:nth-of-type(1) {
		top: .5625rem;
	}
	
	.navigation__button span:nth-of-type(2) {
		top: .9375rem;
	}
	
	.navigation__button span:nth-of-type(3) {
		top: 1.3125rem;
	}

/* Here comes the magic */
	#hamburger:checked ~ .navigation__links {
  /* Or it can be "input[type="checkbox"] ~ .navigation__links" */
		right: 0;
	}

/* Styles for our "close" button */
	#hamburger:checked ~ .navigation__button span:nth-of-type(1) {
		transform: rotate(45deg);
		top: 1rem;
	}
	
	#hamburger:checked ~ .navigation__button span:nth-of-type(2) {
		opacity: 0;
	}
	
	#hamburger:checked ~ .navigation__button span:nth-of-type(3) {
		transform: rotate(-45deg);
		top: 1rem;
	}
	
	/* ACCORDION */
	.faq-drawer__content-wrapper {
		line-height: 1.35;
		max-height: 0rem;
		overflow: hidden;
		transition: 0.25s ease-in-out;
	}
	
	.faq-drawer__title {
		display: block;
		padding: 0;
		position: relative;
		margin-bottom: 0;
		transition: all 0.2s ease-out;
	}
	
	.faq-drawer__title::after {
		border-style: solid;
		border-width: .0625rem .0625rem 0 0;
		content: " ";
		display: inline-block;
		float: right;
		height: .625rem;
		left: -.125rem;
		position: relative;
		right: 1.5em;
		top: .125rem;
		transform: rotate(135deg);
		transition: 0.3s ease-in-out;
		vertical-align: top;
		width: .625rem;
	}
	
	.faq-drawer__trigger:checked + .faq-drawer__title + .faq-drawer__content-wrapper {
		max-height: 100vh;
	}
	
	.faq-drawer__trigger:checked + .faq-drawer__title::after {
		transform: rotate(-45deg);
		transition: 0.2s ease-in-out;
	}
	
	/* SUB-NAV */
	
	.navigation__links li a {
		font-weight: 600;
	}
	
	.navigation__links .sub-menu li a {
		font-weight: 400;
	}
	
	.navigation__links .menu-item-has-children .sub-menu {
		width: 100%;
		display: -webkit-box;
  		display: -webkit-flex;
  		display: -ms-flexbox;
  		display: flex;
  		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
	}
	
	.navigation__links .menu-item-has-children {
		border-bottom: solid .125rem var(--light-gray);
	}
	
	.navigation__links .menu-item-has-children ul li {
		padding-right: 0;
	}
	
	.navigation__links .menu-item-has-children li:after {
		content: '›';
		margin-left: .5rem;
	}
	
}