/*
 Theme Name:   Confirm Biosciences
 Theme URI:    https://www.confirmbiosciences.com
 Description:  Confirm Biosciences
 Author:       Randy Baum
 Author URI:   https://www.randybaumdesign.com
 Template:     generatepress
 Version:      0.1
*/

:root {
  /* SPACING */
  --space-4xs: 0.125rem;
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: clamp(1.5rem, calc(1.125rem + 0.78125vw), 1.75rem);
  --space-lg: clamp(2.25rem, calc(1.125rem + 2.34375vw), 3rem);
  --space-xl: clamp(3.5rem, calc(1.25rem + 4.6875vw), 5rem);
  --space-2xl: clamp(5.75rem, calc(2.375rem + 7.03125vw), 8rem);
  --space-3xl: clamp(9.25rem, calc(4.75rem + 9.375vw), 12.25rem);
  --space-4xl: clamp(15rem, calc(7.5rem + 15.625vw), 20rem);
  /* TYPE SCALE */
  --text-xs: clamp(0.6875rem, calc(0.59375rem + 0.1953125vw), 0.75rem); 
  --text-sm: clamp(0.8125rem, calc(0.625rem + 0.390625vw), 0.9375rem); 
  --text-base: clamp(1rem, calc(0.8125rem + 0.390625vw), 1.125rem);
  --text-md: clamp(1.1875rem, calc(0.90625rem + 0.5859375vw), 1.375rem);
  --text-lg: clamp(1.4375rem, calc(1.15625rem + 0.5859375vw), 1.625rem);
  --text-xl: clamp(1.75rem, calc(1.375rem + 0.78125vw), 2rem);
  --text-2xl: clamp(2.0625rem, calc(1.40625rem + 1.3671875vw), 2.5rem);
  --text-3xl: clamp(2.5rem, calc(1.75rem + 1.5625vw), 3rem);
  --text-4xl: clamp(3rem, calc(2.0625rem + 1.953125vw), 3.625rem);
}

html :where(.wp-block-video) {
    margin-bottom: 0;
    margin-top: 0;
}

:where(.editor-styles-wrapper) ul.wp-block-list {
    margin: 0 auto !important;
	padding-left: 1.5em;
}

body .wp-block-quote:not(.is-large):not(.is-style-large) {
    border-left: none;
    padding: 0;
}

.editor-styles-wrapper .product-section__content:before {
	display: none;
}

/* 404 PAGE */

.error404 form {
	margin: 0 auto;
}

.taxonomy-product_analytes.wp-block-post-terms a {
	pointer-events: none;
}

@media (min-width: 1621px) {
	
	#primary-menu {
		padding-left: 3rem;
	}
	
	.nav-float-right #site-navigation {
		margin-left: 0;
		flex: 1;
	}
	
}

.mobile-menu-open .inside-header {
	background: var(--accent-dk);
}

/* GLOBAL */

b, strong {
	font-weight: 800;
}

p:empty {
  display: none;
}

.wp-block-table.wp-block-table {
	font-size: 110%;
}

.wp-block-table thead {
	border-bottom: 0;
}

figure.wp-block-embed-vimeo iframe {
	aspect-ratio: 16/9;
	height: min-content;
}

.category-news-and-insights :is(h1,h2,h3) {
	text-transform: uppercase;
	font-weight: 800;
}

.taxonomy-product_analytes {
	margin-bottom: 1.5em;
}

ul.wp-block-categories-list.wp-block-categories {
	list-style: none;
	margin: 0;
	column-gap: 1.5rem;
	display: grid;
	grid-template-columns: repeat(4,minmax(0,1fr));
	row-gap: 1.5rem;
}

ul.wp-block-categories-list.wp-block-categories a {
	background: var(--accent-dk);
	border-radius: 0.5rem;
	font-size: 1.5rem;
	aspect-ratio: 7/5;
	display: flex;
	justify-content: center;
	align-items: center;
}

.news-ticker__track {
  will-change: transform;
  animation: news-ticker__scroll linear infinite;
}

@keyframes news-ticker__scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--scroll-end)); }
}

.archive:not(.term-drug-of-abuse-testing) .product-analyte-title,
.archive:not(.term-drug-of-abuse-testing) .facetwp-facet-product_analytes,
.facetwp-counter {
	display: none;
}

.facetwp-facet.facetwp-facet {
	margin-bottom: 0;
}

/* FADE-IN EFFECT */

@media screen and (prefers-reduced-motion:no-preference) {
	
	@keyframes fade-in {
		from { opacity: 0; transform: translateY(1.5rem)}
		to { opacity: 1; transform: none}
	}

	.fade-in {
		opacity: 0;
		animation: fade-in 1s cubic-bezier(.4, 0, .2, 1) forwards;
		animation-timeline: view();
		animation-range: entry 0% cover 30%
	}
	
}

/* UNORDERED LIST */

ul.wp-block-list {
	margin-left: 1.5em;
}

ul.wp-block-list li {
	padding-left: 0.25em;
}

ul.wp-block-list li::marker {
	color: var(--accent-2);
}

ul.wp-block-list li:not(:last-child) {
	margin-bottom: 0.5em;
}

/* PRODUCT CAROUSEL */

.main-carousel {
	border: 2px solid;
	border-radius: 0.5rem;
  margin-bottom: 0.75rem;
	overflow: hidden;
}

.main-carousel a {
	cursor: zoom-in;
	width: 100%;
	display: flex;
}

.carousel-cell img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: contain;
	padding: 1.5rem;
	background: white;
}

.nav-carousel {
	padding: 0 0.5rem;
	cursor: pointer;
}

.nav-carousel .carousel-cell {
	margin-right: 0.75rem;
}

.carousel-btn {
	padding: 0;
	width: 5rem;
	height: 5rem;
	border: 2px solid var(--base-3);
	border-radius: 0.25rem;
}

.carousel-cell:not(.is-selected) .carousel-btn {
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.carousel-cell.is-selected .carousel-btn {
	opacity: 1;
	border-color: var(--accent-2);
}

.carousel-cell:not(.is-selected) .carousel-btn:is(:hover, :focus) {
	opacity: 1;
}

/* SPLIDE JS */

.splide__pagination__page {
	background-color: var(--base-3);
	opacity: 1;
}

.splide__pagination__page.is-active {
	background: var(--accent-2);
}

.splide__pagination__page:hover {
	background-color: var(--base-3);
	opacity: .75;
}

.testimonial .splide__pagination {
	gap: 0.5rem;
}

@media (min-width: 769px) {
  .triangle__svg {
    width: 100%;
    height: auto;
    display: block;
    max-width: 600px;
    margin: 0 auto;
  }

  .triangle__part {
    opacity: 0;
    transform: translateY(0);
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
    animation-fill-mode: forwards;
    animation-timeline: view(33.33%);
    will-change: opacity, transform;
  }

  .triangle__part--top {
    animation-name: triangle-in-up;
  }
  .triangle__part--left {
    animation-name: triangle-in-up;
    animation-delay: 0.5s;
  }
  .triangle__part--right {
    animation-name: triangle-in-up;
    animation-delay: 0.5s;
  }
  .triangle__part--middle {
    animation-name: triangle-in-down;
    animation-delay: 1s;
  }

  @keyframes triangle-in-up {
    from { opacity: 0; transform: translateY(3rem);}
    to   { opacity: 1; transform: translateY(0);}
  }
  @keyframes triangle-in-down {
    from { opacity: 0; transform: translateY(-3rem);}
    to   { opacity: 1; transform: translateY(0);}
  }

  @supports not (animation-timeline: view()) {
    .triangle__part {
      opacity: 1;
      transform: none;
      animation: none !important;
    }
  }
}

:root {
	--viewport-height: 100vh;
}

.admin-bar * {
	--viewport-height: calc(100vh - var(--wp-admin--admin-bar--height));
}

@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

html {
	scroll-behavior: smooth;
}

body {
	background: radial-gradient(circle,rgba(15, 33, 62, 1) 42%, rgba(7, 21, 43, 1) 150%);
	background-attachment: fixed;
}

.scroll-indicator__icon {
  animation: scroll-indicator__bounce 1.8s infinite;
}

@keyframes scroll-indicator__bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.75rem);
  }
}

.inside-header.grid-container {
	max-width: 120rem;
}

.nav-btn-contact {
	margin-left: auto;
}

.main-navigation .main-nav ul li.nav-btn-contact a {
	background: var(--accent-2);
	color: var(--contrast);
	font-weight: 500;
	border-radius: 0.125rem;
}

.main-navigation .main-nav ul li.nav-btn-contact:is(:hover, :focus) a {
	background: var(--accent);
	color: var(--base-3);
}

.main-navigation ul ul li:not(:last-child)::after {
	content:'';
	display: block;
	border-top: 2px dotted rgb(0 0 0 / 15%);
}

.main-navigation .inside-navigation {
	justify-content: flex-end;
}

#primary-menu {
	width: 100%;
}

.site-logo a {
	vertical-align: text-bottom;
}

body:not(.home) .header-wrap .site-header {
	background: rgb(7 21 43 / 65%);
}

/* UNDERLINE */

mark.has-accent-2-color {
	color: inherit !important;
	text-decoration: underline;
	text-decoration-color: var(--accent-2);
	text-underline-offset: 0.1em;
	text-decoration-thickness: 0.1em;
}

@media (min-width: 769px) {
	
	.feature-grid__column-up {
			transform: translateY(calc(-1% * var(--scroll-position, 0)));
	}

	.feature-grid__column-down {
			transform: translateY(calc(0.5% * var(--scroll-position, 0)));
	}
	
}


@media (max-width: 768px) {
	
	.site-logo {
		width: calc(100% - 5rem);
	}
	
}

/* LOGO MARQUEE */

@keyframes marquee-scroll {
	0% { transform: translateX(0) }
	to { transform: translateX(-100%) }
}

.marquee-mask {
	-webkit-mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
	mask-image: linear-gradient(var(--mask-direction, to right), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}

.marquee-wrapper .logo-marquee {
	animation: none;
	animation-play-state: paused;
}

@media (prefers-reduced-motion: no-preference) {
	
	.marquee-wrapper[data-animate="true"] .logo-marquee {
		animation: marquee-scroll linear infinite;
		animation-play-state: running;
		animation-duration: 36s;
	}

}

@media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
	
	.marquee-wrapper[data-animate="true"] .logo-marquee {
		animation: marquee-scroll linear infinite;
		animation-play-state: running;
		animation-duration: 24s;
	}

}

.marquee-wrapper[data-animate="true"]:hover .logo-marquee {
	animation-play-state: paused;
}

/* FEATURE GRID */

.vertical-mask,
.timeline__list:not(.advantage__list):before {
	-webkit-mask-image: linear-gradient(var(--mask-direction, to top), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
	mask-image: linear-gradient(var(--mask-direction, to top), hsl(0 0% 0% / 0), hsl(0 0% 0% / 1) 20%, hsl(0 0% 0% / 1) 80%, hsl(0 0% 0% / 0));
}

.editor-styles-wrapper .vertical-mask {
	-webkit-mask-image: none;
	mask-image: none;
}

.splide__slide {
	margin-bottom: 1rem;
}

.splide__arrow:hover,
.splide__arrow:disabled {
	opacity: 1;
	background: #ccc;
}

/* ABOUT US */

.our-values__value {
	backdrop-filter: blur(5px);
}

@media (min-width: 769px) {
  .timeline__item {
    opacity: 0;
    transform: translateX(0);
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(.4,0,.2,1);
    animation-fill-mode: forwards;
    animation-timeline: view(33.33%);
  }
  .timeline__item:nth-child(odd) {
    animation-name: timeline-in-left;
  }
  .timeline__item:nth-child(even) {
    animation-name: timeline-in-right;
  }
  @keyframes timeline-in-left {
    from { opacity: 0; transform: translateX(-3rem);}
    to   { opacity: 1; transform: translateX(0);}
  }
  @keyframes timeline-in-right {
    from { opacity: 0; transform: translateX(3rem);}
    to   { opacity: 1; transform: translateX(0);}
  }
  @supports not (animation-timeline: view()) {
    .timeline__item {
      opacity: 1;
      transform: none;
      animation: none !important;
    }
  }
}

.team-grid__member-image {
	vertical-align: top;
}

.view-more-accordion_toggle svg {
	vertical-align: sub;
}

.advantage__title span:last-child {
	grid-column-start: 2;
}

/* FOOTER */

#newsletter-email {
	border-color: var(--base-3);
	width: 16rem;
}

.newsletter-signup button {
	background: var(--accent-2);
	color: var(--contrast);
}

.newsletter-signup button:is(:hover, :focus) {
	background: var(--accent-alt);
	color: var(--base-3);
}