/*
Theme Name: TheDevCave Child
Template: thedevcave
Author: TheDevCave
Author URI: https://thedevcave.com
Theme URI: https://thedevcave.com
Description: TheDevCave is the last theme you'll ever need. Welcome to the future.
Version: 2.3.5
Requires at least: 6.1
Tested up to: 6.6.2
Requires PHP: 7.4
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: thedevcave
*/

:root {
	--wp--preset--color--amber-darker: color-mix(in srgb, var(--wp--preset--color--amber), black 20%);
	--wp--preset--gradient--hero-text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 7px rgba(255, 255, 255, 1);
}

body.page-template-collection #request-info {
	display: none;
}

/* Admin Bar Site Icon Fix */
#wpadminbar #wp-admin-bar-site-name>.ab-item picture.site-icon,
#wpadminbar #wp-admin-bar-site-name>.ab-item picture.site-icon img {
	width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 2px;
}

/* Misc */
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }

/* Kiosk Mode */
body.kiosk header.site-header,
body.kiosk footer.site-footer,
body.kiosk #explore-community.wp-block-group {
	display: none;
}
body.kiosk .wp-block-group:has(> .wp-block-acf-builder-contact-info) {
	padding-top: var(--wp--preset--spacing--xx-large) !important;
}

/* Heading tag text accent */
.wp-block-heading span.tdc-text-accent {
  display: block;
  font-weight: 700;
  /* font-size: 1.333em; */
  text-decoration: none;
	margin-top: 8px;
	padding-bottom: 0;
	padding-left: 50px;
	background: transparent;
	border: 0;
}
@media (max-width: 781px) {
	.wp-block-heading span.tdc-text-accent {
		padding-left: 30px;
	}
}
.wp-block-heading:has(+ *) span.tdc-text-accent {
	margin-bottom: var(--wp--preset--spacing--medium);
}
.wp-block-heading:not(.has-text-color) span.tdc-text-accent {
	color: var(--wp--preset--color--jade);
}
.wp-block-heading.has-text-align-center span.tdc-text-accent {
	padding-left: 0;
}
h1.wp-block-heading span.tdc-text-accent {
  /* font-size: 0.8em;
  color: var(--wp--preset--color--white);
	margin-top: -14px;
	padding-left: 0; */
}

h1.wp-block-query-title {
	text-shadow: 0 0 15px rgba(255, 255, 255, 1), 0 0 7px rgba(255, 255, 255, 1);
}

/* Footer Mobile Styles */
@media (max-width: 781px){
	footer.site-footer .wp-block-columns .wp-block-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	footer.site-footer .wp-block-columns .wp-block-column .wp-block-social-links { 
		width: 100%;
		justify-content: center; 
	}
	footer.site-footer .wp-block-columns .wp-block-column .wp-block-navigation__container {
	    flex-direction: row;
		justify-content: center;
	    align-items: center;
	}
}

.wp-block-group.interior-jump-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 0;
}
.wp-block-group.interior-jump-nav ul li {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.wp-block-group.interior-jump-nav ul li::after {
	content: "|";
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}
.wp-block-group.interior-jump-nav ul li:last-child::after {
	content: "";
}
.wp-block-group.interior-jump-nav ul li a {
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 0 20px;
}
@media (max-width: 781px) {
	.wp-block-group.interior-jump-nav ul li::after {
		display: none;
	}
}


/* Facet */
.facetwp-template[data-name="floor_plans"],
.facetwp-template[data-name="qmis"] {
	/* Add your facet styles here */
	display: grid;
	grid-template: auto / repeat(3, 1fr);
	gap: var(--wp--preset--spacing--small);
}
.facetwp-facet {
	margin-top: 5px;
	margin-bottom: 0 !important;
}
.facetwp-facet.facetwp-type-slider .noUi-target {
	border-color: transparent;
}
.facetwp-facet.facetwp-type-slider .noUi-base .noUi-connect {
	background-color: var(--wp--preset--color--canyon-30);
	border-color: transparent;
}
.facetwp-facet.facetwp-type-slider .noUi-handle {
	background-color: var(--wp--preset--color--canyon);
	border-color: var(--wp--preset--color--sagebrush-30);
	cursor: pointer;
}
.facetwp-facet.facetwp-type-dropdown select.facetwp-dropdown {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="7" viewBox="0 0 13 7" fill="none"><path d="M6.1897 6.1897L12.3794 0H0L6.1897 6.1897Z" fill="%23CF8754"/></svg>');
	background-position: calc(100% - 12px) center;
	background-repeat: no-repeat;
	background-size: 12px 6px;
	border-color: var(--wp--preset--color--sagebrush-30);
	border-radius: 4px;
	padding: 10px calc(20px + 12px) 6px 12px;
	width: 100%;
	cursor: pointer;
}
.facetwp-facet-pagination .facetwp-pager {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 5px;
	margin-top: var(--wp--preset--spacing--medium);
}
.facetwp-facet-pagination .facetwp-pager .facetwp-page:not(.active) {
	background-color: var(--wp--preset--color--canyon);
	border-radius: 4px;
	border-width: 0;
	color: var(--wp--preset--color--white) !important;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 8px; /* 61.538% */
	padding: 15px 10px 13px;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	margin: 0;
}
.facetwp-facet-pagination .facetwp-pager .facetwp-page:not(.active):hover {
	background-color: var(--wp--preset--color--canyon-darker);
}
.facetwp-facet-pagination .facetwp-pager .facetwp-page.prev,
.facetwp-facet-pagination .facetwp-pager .facetwp-page.next {
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 8px; /* 61.538% */
	letter-spacing: 5px;
	text-transform: uppercase;
	padding: 15px 15px 13px;
	transition: all 0.2s ease-in-out;
}
.facetwp-facet-pagination .facetwp-pager .facetwp-page.active {
	font-weight: 700;
	line-height: 8px; /* 61.538% */
	margin: 0;
	padding: 15px 5px 13px;
}

@media (max-width: 1080px) {
	.facetwp-template[data-name="floor_plans"],
	.facetwp-template[data-name="qmis"] {
		grid-template: auto / repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.facetwp-template[data-name="floor_plans"],
	.facetwp-template[data-name="qmis"] {
		grid-template: auto / repeat(1, 1fr);
	}
}



/* Post Card */
.tdc-post-card {
	overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.tdc-post-card > .wp-block-group {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.tdc-post-card figure {
	overflow: hidden;
}
.tdc-post-card figure img {
	transition: transform 0.3s ease-in-out;
}
.tdc-post-card:hover figure img {
	transform: scale(1.05);
}
.tdc-post-card h2 {
	transition: color 0.3s ease-in-out;
}
.tdc-post-card:hover h2 {
	color: var(--wp--preset--color--amber);
}
.tdc-post-card .tdc-card-button {
	background-color: var(--wp--preset--color--amber);
	border-radius: 4px;
	outline-width: 2px;
	outline-offset: -2px;
	outline-color: var(--wp--preset--color--amber);
	color: var(--wp--preset--color--white);

	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: 5px;
	line-height: 0.61;
	text-transform: uppercase;

	margin: 0 !important;
	align-self: flex-start;
	padding: 18px 25px;

	transition: background-color 0.3s ease-in-out;
}
.tdc-post-card .tdc-card-button:hover {
	background-color: var(--wp--preset--color--amber-darker);
	outline-color: var(--wp--preset--color--amber-darker);
}


/* Hubspot Form Styles */
.hbspt-form {
	.hs-form {
		max-width: 60rem;
		margin: 0 auto;
		
		.hs-richtext img { display: none !important }
		
		fieldset {
			max-width: none;
			
			&.form-columns-3 .hs-form-field {
				width: 33.33%
			}
			
			.hs-form-field {
				position: relative;
				margin: 0;

				label {
					margin-bottom: 6px;
				}
				
				&.hs-fieldtype-select .input {
					position: relative;
					margin-bottom: 1.5rem;
					
					select { 
						width: 100%; 
						padding: 12px 40px 12px 12px;
						height: 48px;
						background: #fff url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="7" viewBox="0 0 13 7" fill="none"><path d="M6.1897 6.1897L12.3794 0H0L6.1897 6.1897Z" fill="%23D39030"/></svg>') no-repeat right 12px center;
						border: 0;
						border-radius: 4px;
						-webkit-appearance: none;
						-moz-appearance: none;
						appearance: none;
					}
				}
				&.hs-fieldtype-checkbox {
					label {
						position: static;
						display: inline-block;
					}
					input {
						width: 15px;
						display: inline-block;
					}
				}
				
				input:not([type="hidden"]), textarea {
					margin-bottom: 1.5rem;
					width: 100%;
					border-radius: 4px;
					border: 0;
					padding: 13px 12px;
				}
			}
		}
		.hs-submit {
			margin-top: 0.5rem;
			text-align: left;

			.hs-button {
				background: var(--wp--preset--color--amber);
				outline-color: var(--wp--preset--color--amber);
				color: var(--wp--preset--color--white);
				font-size: 13px;
				font-style: normal;
				font-weight: 700;
				letter-spacing: 5px;
				line-height: 0.61;
				outline-offset: -1px;
				outline-style: solid;
				outline-width: 1px;
				padding-top: 18px;
				padding-right: 25px;
				padding-bottom: 18px;
				padding-left: 25px;
				border: 0;
				border-radius: 4px;
				text-transform: uppercase;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				transition: background-color 0.3s ease-in-out, outline-color 0.3s ease-in-out;

				&:hover {
					background: var(--wp--preset--color--terracotta);
					outline-color: var(--wp--preset--color--terracotta);
				}
			}
		}
		
		.hs-error-msgs {
			position: absolute;
			top: 55px;
			width: 100%;
			font-size: 10px;
			color: #fff;
			
			label {
				position: static;
				color: $white;
				font-size: 10px;
			}
		}
	}
}