/* ## Single Spaces
================================= */
/* ## VARS */
	:root{
		--radius-default: 16px;
	}


/* ## ATOMIC CLASSES */
	.full-right{margin-right: calc(50% - 50vw);}
	.mb0{margin-bottom:0}
	.mb0-5{margin-bottom:0.5rem}
	.mb1{margin-bottom:1rem}
	.mb2{margin-bottom:2rem}
	.mb3{margin-bottom:3rem}
	.mb4{margin-bottom:4rem}
	.mb5{margin-bottom:5rem}
	.mb6{margin-bottom:6rem}
	.mt0{margin-top:0}
	.mt1{margin-top:1rem}
	.mt2{margin-top:2rem}
	.mt3{margin-top:3rem}
	.mt4{margin-top:4rem}
	.mt5{margin-top:5rem}
	.mt6{margin-top:6rem}
	.colgap1{column-gap:1rem;}
	.rowgap1{row-gap:1rem;}
	.d-block{display:block;}
	.d-flex{display:flex;}
	.flex-vert{flex-direction: column;}
	.flex-align-center{align-items: center;}
	.flex-space-between{justify-content: space-between;}
	.img-rounded{border-bottom-right-radius: 50px;}
	.capitalise{text-transform: capitalize;}
	.pos-rel{position: relative;}
	.txt-center{text-align:center}
	.txt-right{text-align:right}
	.txt-color-white{color:white}
	.txt-color1{color:var(--nv-primary-accent)}
	.txt-color2{color:var(--nv-secondary-accent)}
	.txt-sm{font-size: 14px;}
	.txt-uc{text-transform: uppercase;}
	.w100{width:100%;}
	

/* ## GLOBAL */
	html{
		scroll-behavior: smooth;
	}	
	body.dux-bookings{
		.alignfull{
			width: 100vw;
			max-width: 100vw;
			margin-left: calc(50% - 50vw);
			margin-right: calc(50% - 50vw);
			padding: 0 7.5px;
		}
		a.link{
			color: var(--nv-c-2);
			text-decoration: underline;
		}
		a.link-large{
			font-size: 20px;
		}
		.post-item img.post-image{
			border-bottom-right-radius: var(--radius-default);
			aspect-ratio: 4 / 3;
			width: 100%;
			object-fit: cover;
			object-position: center;
		}
		.banner{
			min-height: 80vh;
			&.banner-short{
				min-height: 45vh;
				padding-block: 9vh;
			}
			background-size: cover;
			background-color: rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			> .container{
				position: relative;
				.inner{
					max-width: 600px;
					margin-bottom: 2rem;
					h1.entry-title{
						margin-bottom: 0.5rem;
						color: white;
						position: relative;
						font-size: clamp(45px, 32.273px + 3.977vw, 80px);
						opacity: 1;
						transform: translateY(0);
						transition: all 1s ease 0.5s;
						@starting-style{
							opacity: 0;
							transform: translateY(30px);
						}
					}
					.subhead{
						font-size: 20px;
						color: white;
						opacity: 1;
						transition: all 1s ease 0.5s;
						transform: translateY(0);
						@starting-style{
							opacity: 0;
							transform: translateY(80px);
						}
					}
					.teaser{
						font-weight: 700;
						color: white;
						font-size: 20px;
						transform: translateY(0);
						transition: all 1s ease 1.2s;
						@starting-style{
							opacity: 0;
							transform: translateY(20px);
						}
					}
				}

			}
			.post-image{
				position: absolute;
				inset: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				filter: brightness(0.4);
				border: none;
			}
		}
		.entry-header{
			padding-block: 3.5rem 0;
			margin-bottom: 0;
			text-align-last: left;
		}
		.post-body{
			padding-block: clamp(30px, 17.273px + 3.977vw, 65px);
			body.post-type-archive-space &{
				padding-top: 0;
			}
		}
		.subhead{
			font-size: 1rem;
			font-weight: 800;
			color: var(--nv-primary-accent);
		}
		.post-txn{
			display: flex;
			column-gap: 1rem;
			flex-wrap: wrap;
			a{
				text-decoration: underline;
				font-size: small;
				font-weight: 800;
				white-space: nowrap;
			}
		}
		.section-separator{
			height: 1px;
			margin-right: calc(50% - 50vw);
			background-color: #E7E7E7;
			margin-block: 6rem;
			&:last-child{
				margin-bottom: 0;
			}
		}
		.navigation.pagination .nav-links{
			justify-content: end;
			display: flex;
			gap: 1rem;
		}
	}

/* ## LINKS
================================= */
	.link-overlay{
		position: absolute;
		inset: 0;
	}

/* ## Buttons
================================= */
	body.dux-bookings{
		button, 
		input.gform_button.button,
		.dux-btn{
			font-size: 18px;
			font-weight: 500 !important;
			color: white;
			background-color: var(--nv-primary-accent);
			border: solid 2px var(--nv-primary-accent);
			text-decoration: none;
			line-height: 1;
			display: inline-block;
			transition: all 0.3s ease;
			padding: 8px 24px;
			border-radius: 20px;
			text-transform: uppercase;
			cursor: pointer;
			text-align: center;
			&:hover{
				background-color: var(--nv-secondary-accent);
				color: var(--nv-primary-accent);
			}
			&.btn-minor{
				font-size: 14px;
				background-color: white;
				color: var(--nv-primary-accent);
				&:hover{
					background-color: var(--nv-secondary-accent);
					color: var(--nv-primary-accent);
				}
			}
		}
		#toggleForm{
			width: 100%;
			padding-block: 1rem;
			border-radius: 50px;
		}
	}

/* ## SLIDERS
================================= */
	body.dux-bookings{

		.slick-arrow{
			cursor: pointer;
			position: relative;
			transition: all 0.4s ease;
		}
		.slick-arrow:hover{
			transform:translateX(4px);
			opacity: 0.75;
		}
		
		/* default slider */
		.slides-default-styling{
			.item{
				margin-right: 30px;
				transition: all 0.4s ease;
				&:hover{
					opacity: 0.75;
				}
			}
			.slick-track{
				min-width: 100%;
			}
			.item.slick-current{
				border-bottom: 4px solid #f6bd17;
			}
			.item img{
				margin-bottom: 15px;
				display: block;
				height: 300px; 
				border-bottom-right-radius: 50px;
				width: 100%;
				object-fit: cover;
			}
		}

		@keyframes scrollTextAnimation {
			0%, 100% {
				opacity: 1;
				transform: translateX(0);
			}
			50% {
				opacity: 0.5;
				transform: translateX(-5px);
			}
		}
	}

/* ## SINGLE */
	body.dux-bookings.single{
		main#content{
			.overview{
				display: grid;
				grid-template-columns: 60% 1fr;
				column-gap: 60px;
				@media(max-width: 810px){
					grid-template-columns: 1fr;
					gap: 20px;
				}
				.copy{
					padding-right: clamp(0px, -32.727px + 10.227vw, 90px);
				}
			}
		}
		.sidebar{
			.core-info{
				.item{
					display: grid;
					grid-template-columns: 75px 1fr;
					column-gap: 1rem;
					margin-bottom: 0.5rem;
				}
			}
			 .label{
				font-weight: bold;
			}
		}
		.awards{
			background-color: #efefef;
			padding-block: 2rem;
			.inner{
				display: flex;
				flex-wrap: wrap;
				column-gap: 80px;
				row-gap: 20px;
				.item{
					img{
						height: 100px;
						width: auto;
					}
				}
			}
		}
	}

/* ## ARCHIVES
================================= */
	body.dux-bookings{
		&.paged .banner{
			min-height: 50vh;
		}
		#mainLoop{
			display: grid;
			display:grid;
			grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
			gap: 30px;
			padding-inline: 6vw;
			@media(max-width: 810px){
				grid-template-columns: 1fr;
			}
			.image-overlay{
				padding-top: 1rem;
				padding-left: 1rem;
				background: linear-gradient(135deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 45%);
				border-radius: var(--radius-default);
				[rel="tag"]{
					color: white;
					font-weight: bold;
					display: block;
				}
			}
			.post-item{
				display: grid;
				grid-template-rows: auto 1fr auto;
				transition: all 0.4s ease;
				top: 0;
				border-bottom: 2px solid transparent;
				padding-bottom: 6px;
				&:hover{
					top: -6px;
					border-bottom: 2px solid var(--nv-secondary-accent);
				}
				.post-text{
					padding-inline: 12px;
				}
				h2.post-title{
					font-size: 20px;
					margin-bottom: 0;
				}
				.post-excerpt{
					margin-bottom: 0;
				}
				.post-link{
					text-decoration: underline;
					text-decoration-color: var(--nv-secondary-accent);
					text-underline-offset: 7px;
					text-underline-position: left 10px;
				}
			}
		}

		/* ## TAGS PAGE */
		#mainLoop.tags-loop{
			grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
			.post-item{
				position: relative;
				a{
					display: block;
				}
				img.post-image{
					filter: brightness(50%);
					aspect-ratio: 1;
					max-height: 240px;
				}
				.post-title{
					position: absolute;
					inset: 0;
					display: grid;
					place-content: center;
					text-align: center;
					color: white;
					font-size: 32px;
					font-weight: 800;
					z-index: 2;
					pointer-events: none;
				}
			}
		}
	}
	
/* ## GRAVITY FORMS
================================= */
body.dux-bookings{
	.gfield.disabled input{
		pointer-events: none;
		opacity: 0.5;
	}
	#tripleSeatForm{
		display: none;
		&:has(.gform_confirmation_wrapper, .gform_submission_error){
			display: block;
		}
		.gform_wrapper.gravity-theme .gfield_error [aria-invalid="true"] {
			border: none;
		}
		.gform_wrapper.gravity-theme .gfield:has(input:not([value=""])) label {
			top: -18px;
		}
		.datepicker{
			width: 100%;
		}
	}
}

/* ## TAGS FILTER
================================= */
body.dux-bookings{
	.categories-wrapper{
		padding-block: 30px 0px;
		margin-bottom: 3rem;
		border-bottom: solid 1px #cdcdcd;
	}

	#spaceCategories{
		display: flex;
		gap: 16px;
		font-weight: 600;
		text-transform: uppercase;
		justify-content: space-between;
		.terms{
			display: flex;
			gap: 16px;
			font-weight: 600;
		}
		a.active{
			border-bottom: 2px solid;
		}
	}
	@media(max-width: 810px){
		#spaceCategories, 
		#spaceCategories .terms{
			flex-wrap: wrap;
		}
	}
}
.facetwp-number.facetwp-number-max::placeholder {
	content: '$';
}

/* ## FILTERS (facetwp)
================================= */
body.dux-bookings{
	.facetwp-template{
		/* display: none; */
	}
	#filterSpaces{
		margin-top: 80px;
		display: flex;
		column-gap: 24px;
		row-gap: 24px;
		padding: 1rem 3rem;
		border-radius: 50px;
		/* overflow: clip; */
		background-color: rgb(255, 255, 255);
		box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
		.facet{
			display: flex;
			flex-direction: column;
			align-content: space-between;
			border-bottom: 1px solid black;
			min-width: 100px;
			flex-grow: 1;
			label{
				white-space: nowrap;
				text-transform: uppercase;
				font-family: var(--sans-medium);
				font-size: 12px;
				font-weight: 500;
			}
			.facetwp-facet {
				margin-bottom: 0;
				display: flex;
				min-height: 35px;
				align-items: center;
				select.facetwp-dropdown{
					max-width: 100%;
				}
				input, select{
					background-color: transparent;
					border: none;
					font-size:var(--bodyfontsize);
					padding: 0;
				}
				input.facetwp-location {
					margin: 0;
					padding-right: 30px;
				}
				&.facetwp-facet-proximity{
					justify-content: space-between;
					.facetwp-input-wrap{
						max-width: 60%;
						overflow-x: clip;
						input.facetwp-location{
							font-size: 14px;
						}
						.facetwp-icon{
							background-color: white;
							opacity: 1;
						}
					}
				}
			}
			.facetwp-facet-filter_pricing .facetwp-number-min{
				display: none;
			}
		}
		@media(max-width: 1200px){
			flex-wrap: wrap;
			padding: 1rem;
			border-radius: 12px;
		}
		.action{
			position: absolute;
      		left: calc(100% - 35px);
			display: flex;
			align-items: center;
			gap: 5px;
	  		button.dux-filter-btn{
				width: 50px;
				height: 50px;
				display: grid;
				place-content: center;
				border-radius: 50%;
				aspect-ratio: 1;
				padding: 0;
				border: solid 2px white;
				&:hover{
					border-color: white;
				}
			}
			.facetwp-facet.facetwp-facet-reset{
				margin-bottom: 0;
				a.facetwp-reset{
					cursor: pointer;
					display: grid;
					background: var(--nv-primary-accent);
					border: solid 2px white;
					border-radius: 50%;
					padding: 0;
					width: 35px;
					height: 35px;
					place-content: center;
				}
				a:after{
					content: url('templates/reset-icon.svg');
					height: 20px;
					width: 20px;
				}
			}
			@media(max-width: 810px){
				position: static;
			}
		}
	}
}

/* ## ACF Maps
================================= */
body.dux-bookings{
	.map-wrap{
		.address-data:not(:first-child,:last-child):after{
			content: ',';
		}
		.acf-map {
			width: 100%;
			height: 250px;
			border: none;
			margin: 0;
		}

		/* Fixes potential theme css conflict. */
		.acf-map img {
			max-width: inherit !important;
		}
	}
}

/* ## Lightbox
================================= */
	body.dux-bookings{
		.slick-lightbox {
			z-index: 99999;
		}
		.slick-lightbox-close {
			position: absolute;
			top: 6vh;
			right: 15px;
			display: grid;
			place-content: center;
			height: 48px;
			width: 36px;
			line-height: 0;
			font-size: 0;
			cursor: pointer;
			background: black !important;
			border: none;
			border-radius: 50%;
			&::before{
				font-size: 30px;
			}
		}
	}