/*
Theme Name:   Voxel (child theme)
Theme URI:    https://getvoxel.io/
Author:       27collective
Author URI:   https://27collective.net/
Template:     voxel
Version:      1.0
Text Domain:  voxel-child
*/

:root{
	--e-tint-black:hsla(0, 0%, 0%, 0);
	--e-bg-tint:linear-gradient(to bottom, hsla(0, 0%, 0%, 0) 0%,    hsla(0, 0%, 0%, 0.013) 13.7%,    hsla(0, 0%, 0%, 0.049) 25.3%,    hsla(0, 0%, 0%, 0.104) 35.1%,    hsla(0, 0%, 0%, 0.175) 43.3%,    hsla(0, 0%, 0%, 0.259) 50.1%,    hsla(0, 0%, 0%, 0.352) 55.9%,    hsla(0, 0%, 0%, 0.45) 60.9%,    hsla(0, 0%, 0%, 0.55) 65.2%,    hsla(0, 0%, 0%, 0.648) 69.3%,    hsla(0, 0%, 0%, 0.741) 73.2%,    hsla(0, 0%, 0%, 0.825) 77.3%,    hsla(0, 0%, 0%, 0.896) 81.7%,    hsla(0, 0%, 0%, 0.951) 86.8%,    hsla(0, 0%, 0%, 0.987) 92.9%,    hsl(0, 0%, 0%) 100%  );
	--e-tint-blue:hsla(210, 85.83%, 47.06%, 0);
	--e-bg-blue-tint:linear-gradient(to bottom,  hsla(210, 85.83%, 47.06%, 0) 0%,    hsla(210, 85.83%, 47.06%, 0.013) 13.7%,    hsla(210, 85.83%, 47.06%, 0.049) 25.3%,    hsla(210, 85.83%, 47.06%, 0.104) 35.1%,    hsla(210, 85.83%, 47.06%, 0.175) 43.3%,    hsla(210, 85.83%, 47.06%, 0.259) 50.1%,    hsla(210, 85.83%, 47.06%, 0.352) 55.9%,    hsla(210, 85.83%, 47.06%, 0.45) 60.9%,    hsla(210, 85.83%, 47.06%, 0.55) 65.2%,    hsla(210, 85.83%, 47.06%, 0.648) 69.3%,    hsla(210, 85.83%, 47.06%, 0.741) 73.2%,    hsla(210, 85.83%, 47.06%, 0.825) 77.3%,    hsla(210, 85.83%, 47.06%, 0.896) 81.7%,    hsla(210, 85.83%, 47.06%, 0.951) 86.8%,    hsla(210, 85.83%, 47.06%, 0.987) 92.9%,    hsl(210, 85.83%, 47.06%) 100%  );
	--e-bgrad:linear-gradient(180deg, rgb(12 93 201 / 70%) 0%, rgba(12,93,201,0) 64%, rgba(12,93,201,0) 100%);
	--zoom-cursor:url(/wp-content/uploads/2023/05/zoom-cursor-v2.svg);
}
/* h1, h2, h3, h4{text-wrap: balance;} */
.nopointer{pointer-events:none;}
.elementor-element.bgrad, .bgrad{background:var(--e-bgrad);}
.event-hero .elementor-widget-image .elementor-widget-container>a,
a.event-hero, .car_makes-img-block{
	cursor:var(--zoom-cursor) 26 26, zoom-in;
}
p.lead {
    font-size: calc(var(--e-global-typography-text-font-size) * 1.2);
	font-weight:bold;
}
.flexgap .flexify {
    gap: 0.5em;
}

.post-content h2, .post-content h3, .post-content h4, .post-content h5{
	padding-top:3.5em;
}

html{
	scroll-behavior:smooth;
}
.toc-accordion {
	margin-bottom: 20px;
}
.toc-accordion details {
	border: 1px solid grey;
	border-radius: 5px;
}
.toc-accordion details:not([open]) {
	animation-name: fold-in;
	animation-duration: 0.2s;
}
.toc-accordion details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	padding: 1rem;
	cursor: pointer;
}
.toc-accordion details summary::-webkit-details-marker,
.toc-accordion details summary::marker{
	content: "";
	display: none;
}
.toc-accordion details summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	margin-right: 1rem;
	cursor: pointer;
	transform: rotate(0deg);
    transition: all 150ms ease-in-out;
}
.toc-accordion details .content {
	padding-bottom: 1rem;
}
.toc-accordion details .content ul{
	margin:0;
}

.toc-accordion details[open] summary::after {
	transform: rotate(45deg);
}
.toc-accordion details[open] .content {
  animation-name: fold-out;
  animation-duration: 0.2s;
}

@keyframes fold-out {
  0% {
    opacity: 0;
    margin-top: -1rem;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
@keyframes fold-in {
  0% {
    padding-bottom: 1rem;
  }
  100% {
    padding-bottom: 0;
  }
}

.elementor-widget-n-accordion .e-n-accordion-item .e-n-accordion-item-title-icon .e-closed,
.elementor-widget-n-accordion .e-n-accordion-item .e-n-accordion-item-title-icon .e-opened{
	align-items: center;
}

/* Styles for the modal container */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
    height: 100vh;
	overflow: hidden; /* Hide the main body scrollbar */

}

/* Styles for the modal content */
.modal-dialog {
/*   display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px; */
	display: flex;
    margin: auto;
    max-width: 400px;
    max-height: 80vh;
    flex-direction: column;
    position: relative;
    align-items: center;
	overflow-y: scroll;
}
/* Hide the scrollbar and make it invisible */
.modal-dialog::-webkit-scrollbar {
  width: 0; /* Remove scrollbar width */
}

/* Optional: Handle scrollbar thumb */
.modal-dialog::-webkit-scrollbar-thumb {
  background: transparent; /* Make scrollbar thumb transparent */
}

.modal-image{
	height: 80vh;
    object-fit: contain;
}

/* Styles for the close button */
.close.icon{
	position: relative;
	align-self: flex-end;
	right: 10px;
	font-size: 30px;
	cursor: pointer;
	color:white;
}
.close.btn {  
  font-size: 16px;
  cursor: pointer;
	padding: 8px 20px;
	background-color: black;
	border: 1px solid white;
	border-radius: 3px;
}

/* Always display scrollbar on the body but make it invisible */
body.modal-open {
  overflow-y: scroll;
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: transparent transparent; /* For Firefox */
}

/* Hide scrollbar thumb for webkit-based browsers (Chrome, Safari) */
body.modal-open::-webkit-scrollbar-thumb {
  background-color: transparent;
}

/* Hide scrollbar track for webkit-based browsers (Chrome, Safari) */
body.modal-open::-webkit-scrollbar-track {
  background-color: transparent;
}


/* Style for the modal content */
.elementor-element .elementor-button #openModalbtn{
	  cursor: pointer;
}

/* Hide content based on progressier */
/* body.progressier-standalone .custom-installation-banner{
  display:none;
} */
@media all and (display-mode: standalone) {
	.custom-installation-banner{
		display:none;
	}
}


.event-hero.featured .elementor-widget-image:not(.card-logo):before,
.event-hero .elementor-widget-image:not(.card-logo):before,
.event-hero .elementor-widget-video:before,
.car_makes-img-block.featured:before,
.car_makes-img-block:before {
	content: "";
	position: absolute;
	top: auto;
	bottom: -1px;
	height: 50%;
	width: 100%;
	z-index: 10;
	background:var(--e-bg-tint);
	display:block;
	pointer-events:none;
}

.event-hero.featured .elementor-widget-image:not(.card-logo):before, .car_makes-img-block.featured:before {	
	background:var(--e-bg-blue-tint);
}
.event-hero.featured:hover .elementor-widget-image:not(.card-logo):before {	
	background:var(--e-bg-tint);
}

/* .event-hero.featured:hover .elementor-widget-image .elementor-widget-container:before {
	filter: invert(100%) hue-rotate(180deg);
} */

.tabnav ul.ts-nav.ts-nav-horizontal.flexify.simplify-ul.min-scroll li.menu-item:before,
.tabnav ul.ts-nav.ts-nav-horizontal.flexify.simplify-ul.min-scroll li.menu-item:after {
	content: "";
    position: relative;
	width: 5px;
}
.tabnav ul.ts-nav.ts-nav-horizontal.flexify.simplify-ul.min-scroll li.menu-item a {
    border-radius: 5px 5px 0 0;
	z-index:1;
}

.tabnav ul.ts-nav.ts-nav-horizontal.flexify.simplify-ul.min-scroll.min-scroll li.current-menu-item:before,
.tabnav ul.ts-nav.ts-nav-horizontal.flexify.simplify-ul.min-scroll.min-scroll li.current-menu-item:after {
    content: "";
    position: relative;
    left: 1px;
    border-bottom-right-radius: 5px;
    border: 1px solid var( --e-global-color-0d1f28c );
    height: 80%;
/*     width: 5px; */
    border-width: 0 1px 1px 0;
    background: var( --e-global-color-primary );
    bottom: -1px;
    align-self: end;
}
.tabnav ul.ts-nav.ts-nav-horizontal.flexify.simplify-ul.min-scroll.min-scroll li.current-menu-item:after {
    right: 1px;
    left: auto;
    border-bottom-left-radius: 5px;
    border-width: 0 0px 1px 1px;
    border-bottom-right-radius: 0;
}

.car_makes .elementor-widget-container  .elementor-shortcode{
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-gap: 20px;
	transition: .1s ease;
}
@media (max-width: 1024px){
	.car_makes .elementor-widget-container  .elementor-shortcode{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 767px){
	.car_makes .elementor-widget-container  .elementor-shortcode{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.car_makes-title-wrap {
	display: flex;
	justify-content: center;
	color: var(--e-global-color-secondary);
	font-size: 12px;
}
.car_makes-block {
	border: 1px solid var( --e-global-color-accent );
	border-radius: 10px;
	overflow: hidden;
	background: var(--e-global-color-primary);
	display:block;
}
.car_makes-img-block {
	position: relative;
	background: var(--e-global-color-primary);
}
.car_makes-block:hover img {
	opacity: 0.5;
}

.car_makes-img-block img {
	width: 100%;
	opacity: 1;
	transition-duration: 0.2s;
	aspect-ratio: 16/9;
	object-fit: cover;
}
.car_makes-title-wrap .title {
	margin: 0.5em;
}

.areas.simplify-ul {
	gap: 10px;
	display: flex;
	flex-wrap: wrap;
}
.areas li {
	flex: 1 0 200px;
}
@media (max-width: 767px){
	.areas li {
		flex: 1 0 calc(50% - 10px);
	}
}

.prev-next .elementor-shortcode {
    display: flex;
    justify-content: space-between;
    gap: 1em;
}
.prev-next .elementor-shortcode .prev, .prev-next .elementor-shortcode .next {
    flex: 0 1 50%;
}
.prev-next .elementor-shortcode .prev {
	text-align:left;
}
.prev-next .elementor-shortcode .next {
	text-align:right;
}

footer a{
	color:var( --e-global-color-primary );
}
footer a:hover{
	color:var( --e-global-color-primary );
}

.elementor-element.elementor-widget.elementor-widget-shortcode p.image-caption,
.elementor-element.elementor-widget.elementor-widget-shortcode p.image-caption a {
    font-size: clamp(10px, 2vw, 12px);
	font-weight:bold;
}

.char-count-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 5px;
}

.char-count {
    font-weight: bold;
}

.char-count.black {
    color: #000;
    background-color: #8CC63F;
    padding: 3px 5px;
    border-radius: 5px;
    margin-left: 5px;
}

.char-count.orange {
    background-color: orange;
    color: #000;
    padding: 3px 5px;
    border-radius: 5px;
    margin-left: 5px;
}

.char-count.red {
    background-color: red;
    color: #000;
    padding: 3px 5px;
    border-radius: 5px;
    margin-left: 5px;
}

/* DARK MODE */

.dark-toggle {
	cursor: pointer;
	display: flex;
	align-items: center;
	row-gap: 0.25rem;
	column-gap: 0.25rem;
}
.dark-toggle span {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	color:var( --e-global-color-secondary );
}
.dark-toggle input[type=checkbox] {
	display: none;
}

.dark-toggle__switch {
	--width: 24px;
	--height: 24px;
	--padding: 4px;

	display: block;
	overflow: hidden;
	position: relative;
	background-color: black;
	width: var(--width);
	height: var(--height);
	border: 1px solid white;
	border-radius: 1rem;
}

.dark-toggle__switch:focus {
	box-shadow: 0 0 0 2px white;
}

.dark-toggle__switch::before {
	content: "";
	position: absolute;
	z-index: 3;
	display: inline-block;
	background-color: yellow;
	width: calc(var(--height) - var(--padding) - var(--padding));
	height: calc(var(--height) - var(--padding) - var(--padding));
	top: 50%;
	left: var(--padding);
	border-radius: 50%;
	transform: translateY(-50%);
	transition: all 0.25s ease-in-out;
}

/* input:checked + .dark-toggle__switch::before {
	transform: translateY(-50%) translateX(calc(var(--width) / 2 - var(--padding) / 2));
} */

.dark-toggle__switch::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	z-index: 2;
	display: inline-block;
	background-color: black;
	transition: all 0.25s ease-in-out;
	transform: translateY(-50%);
	width: 1px;
	height: 1px;
	border-radius: 50%;
}

/*  dark mode v2 */
.light-switch-container{
	justify-content: center;
	flex-direction: column;
	display: flex;
	margin-left: 0.75rem;
	transition: all .3s ease;
	border-radius: 150px;
}

.light-switch{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border-width: 0;
}

.dark-toggle-switch{
	padding: 0.5rem;
	cursor: pointer;
	position: relative;
	border-radius: 50px;
	transition: all .3s ease;
}

.sun, .moon{
	display: block;
	vertical-align: middle;
	fill:var(--e-global-color-accent);
	transition: all .1s ease;
}

@media(min-width:1024px){
	.light-switch-container:hover {
		background: var(--e-global-color-secondary);
	}
	.light-switch-container[data-tooltip]:after {
		content: attr(data-tooltip);
		opacity: 0;
		visibility: hidden;
		position: absolute;
		right: 35px;
		padding: 6px 10px;
		border-radius: 50px;
		background-color: #0C5DC980;
		-webkit-backdrop-filter: blur(3px);
		backdrop-filter: blur(3px);
		color: var(--e-global-color-secondary);
		font-size: 13px;
		max-width: 300px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		transition: all .3s ease;
	}
	.light-switch-container[data-tooltip]:hover:after {
		visibility: visible;
		opacity: 1;
	}
	.light-switch-container .dark-toggle-switch:hover {
		background: var(--e-global-color-secondary);
	}
	.light-switch-container .dark-toggle-switch:hover .sun, .light-switch-container .dark-toggle-switch:hover .moon {
		fill: var(--e-global-color-primary);
	}
}

html.is-light .moon, html:not(.is-light) .sun{
	display:none;
}

/* html:not(.is-light) .dark-toggle__switch::after {
	z-index: 4;
	width: calc(var(--width) * 0.5);
	height: calc(var(--width) * 0.7);
} */

html.is-light .event-hero:not(.featured) .elementor-widget-image:before, 
html.is-light .car_makes-img-block:before {
	filter: invert(100%) hue-rotate(180deg);
}
/* body.is-dark .event-hero .elementor-widget-image .elementor-widget-container:before, 
body.is-dark .car_makes-img-block:before {
filter: none;
} */

html.is-light body{
	/* 	filter: invert(100%) hue-rotate(180deg); */
	--e-global-color-primary:#fff;
	--e-global-color-secondary:#000;
	--e-global-color-5f1c288:#fff;
	--e-global-color-accent:#0C5DC9;
	--e-global-color-5de9856:#FFFFFF00;
	--e-global-color-0a65d23:#00000000;
	/* 	--e-global-color-5de9856:#00000000;
	--e-global-color-0a65d23:#FFFFFF00; */
}