/*
Theme Name: Clarity
Theme URI: 
Author: Bensch Lüdiger
Author URI: https://benschluediger.com
Description: 
Requires at least: 6.8
Tested up to: 6.9
Requires PHP: 5.7
Version: v0.6_2026_02
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clarity
Tags: 
*/

/* 1. HTML */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 1.1 Root */
:root {
    --vh-in-px: calc(100vh / 1vh * 1px);
	--vw-in-px: calc(100vw / 1vw * 1px);
	--aspect-ratio: calc( var(--vh-in-px) / var(--vw-in-px) );
}
/* 1.2 Basic */
html { 
	scroll-behavior: smooth;
	text-rendering: optimizeLegibility;
} 
header {
	position: fixed;
	z-index: 1;
	bottom: 0;
	width: 100vw;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 1.2 Typography */
body {
	 font-family: "Euclid Circular B", system-ui, -apple-system, sans-serif !important;
}
strong, b {
	font-weight: 600;
}
a { 	
	text-underline-offset: 0.12em;
	text-decoration-color: var(--wp--preset--color--light);
	text-decoration: none;
}
a:hover {
	color: var(--wp--preset--color--dark) !important;
	text-decoration-color: var(--wp--preset--color--blue);
}
h1,
.has-xxl-font-size {
	margin-left: -.05em !important;
	margin-right: -5% !important; 
	letter-spacing: -3%;
}
.has-xl-font-size {
	margin-left: -.04em !important;
	margin-right: -2% !important; 
}
/* 1.3 User client */
::selection {
    background-color: var(--wp--preset--color--yellow);
}	
:not(.dot)::selection {	
    color: var(--wp--preset--color--dark); 
}
img::selection {
	background-color: var(--wp--preset--color--blue);
}
a, details * {
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
li::marker { 	
	color: var(--wp--preset--color--dark); 
}
/* 2. ELEMENTS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 2.1 Standard elements */
details {
	width: fit-content;
	width: -webkit-fit-content;
}
details summary {
	list-style: none;
	width: fit-content;
	width: -webkit-fit-content;
}
details > summary::before {
	content: '▶︎';
	font-size: .84rem;
	width: .42rem;
	display: inline-block;
	margin-right: var(--wp--preset--font-size--small);
	position: relative;
	bottom: .05em;
	color: var(--wp--preset--color--dark-20);
	transition: color .25s;
	-webkit-transition: color .25s;
	-moz-transition: color .25s;
	-o-transition: color .25s;	
}
details[open] > summary::before {
	content: '●';
	color: unset;
	font-size: unset;	
}
details[open] > summary ~ * {
	opacity: 1;
}
details:not([open]) > summary:hover::before {
	color: var(--wp--preset--color--dark);
}
details:not([open]) > summary ~ * {
	opacity: 0;
	transition: opacity 1s .25s;
	-webkit-transition: opacity 1s .25s;
	-moz-transition: opacity 1s .25s;
	-o-transition: opacity 1s .25s;		
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 2.2 Custom id elements */
#cta {
	margin-left: -.15em !important;
}
#testimonials .wp-block-columns {
	overflow: scroll;
	padding: var(--wp--preset--spacing--fct-1-6) var(--wp--style--root--padding-left);
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	margin-bottom: 50vh;	
	flex-direction: column;
}
#testimonials .wp-block-columns::-webkit-scrollbar {
	display: none;
}
#testimonials .wp-block-column {
	min-width: calc(100% - var(--wp--style--root--padding-left) * 2);
	max-width: var(--wp--style--global--content-size);
	max-height: fit-content;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	filter: drop-shadow(0 0 var(--wp--preset--spacing--fct-1-6) rgba(0,0,0,0.05));
	margin: auto;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 2.3 Custom class elements */
.dot {
	color: transparent;
}
.dot::after {
	content: "•";
	padding: 0 .05em;
	pointer-events: none;
}
.has-dark-color .dot::after {
	color: var(--wp--preset--color--dark);
}
.has-light-color .dot::after {
	color: var(--wp--preset--color--dark);
}
.has-dark-5-color .dot::after {
	color: var(--wp--preset--color--dark-5);
}
.has-dark-10-color .dot::after {
	color: var(--wp--preset--color--dark-10);
}
.has-dark-15-color .dot::after {
	color: var(--wp--preset--color--dark-15);
}
.has-dark-25-color .dot::after {
	color: var(--wp--preset--color--dark-25);
}
.has-dark-35-color .dot::after {
	color: var(--wp--preset--color--dark-35);
}
.has-dark-50-color .dot::after {
	color: var(--wp--preset--color--dark-50);
}
.has-indent {
	text-indent: var(--wp--preset--spacing--fct-1-2)
}
p.has-indent ~ p {
	margin-top: 0 !important;
}

/* 3. WORDPRESS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 3.1 Wordpress blocks */
.wp-block-button.has-dark-hover-background-color:hover a {
	background-color: var(--wp--preset--color--dark) !important;	
}
.wp-block-button.has-dark-50-hover-background-color:hover a {
	background-color: var(--wp--preset--color--dark-50) !important;	
}
.wp-block-button.has-dark-35-hover-background-color:hover a {
	background-color: var(--wp--preset--color--dark-35) !important;	
}
.wp-block-button.has-light-hover-background-color:hover a {
	background-color: var(--wp--preset--color--light) !important;	
}
.wp-block-button.has-blue-hover-background-color:hover a {
	background-color: var(--wp--preset--color--blue) !important;	
}
.wp-block-button.has-petrol-hover-background-color:hover a {
	background-color: var(--wp--preset--color--petrol) !important;	
}
.wp-block-button.has-yellow-hover-background-color:hover a {
	background-color: var(--wp--preset--color--yellow) !important;	
}
.wp-block-button.has-red-hover-background-color:hover a {
	background-color: var(--wp--preset--color--red) !important;	
}
.wp-block-button.has-dark-hover-border-color:hover a {
	border-color: var(--wp--preset--color--dark) !important;	
}
.wp-block-button.has-dark-50-hover-border-color:hover a {
	border-color: var(--wp--preset--color--dark-50) !important;	
}
.wp-block-button.has-light-hover-border-color:hover a {
	border-color: var(--wp--preset--color--light) !important;	
}
.wp-block-button.has-blue-hover-border-color:hover a {
	border-color: var(--wp--preset--color--blue) !important;	
}
.wp-block-button.has-petrol-hover-border-color:hover a {
	border-color: var(--wp--preset--color--petrol) !important;	
}
.wp-block-button.has-yellow-hover-border-color:hover a {
	border-color: var(--wp--preset--color--yellow) !important;	
}
.wp-block-button.has-red-hover-border-color:hover a {
	border-color: var(--wp--preset--color--red) !important;	
}
.wp-block-button.has-no-hover-border-color:hover a {
	border: none; !important;	
}
.wp-block-button.has-dark-hover-color:hover a {
	color: var(--wp--preset--color--dark) !important;	
}
.wp-block-button.has-dark-50-hover-color:hover a {
	color: var(--wp--preset--color--dark-50) !important;	
}
.wp-block-button.has-white-hover-color:hover a {
	color: var(--wp--preset--color--white) !important;	
}
.wp-block-button.has-blue-hover-color:hover a {
	color: var(--wp--preset--color--blue) !important;	
}
.wp-block-button a {
	line-height: 1.3;
	min-height: 3.5em;
}
.wp-block-button.is-style-square a {
	aspect-ratio: 1/1;
}

/* 3.2 Wordpress patterns */

/* 4. COMPONENTS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 4.1 Teaser component */
.is-teaser > summary {
	cursor: pointer; 
}
.is-teaser[open] > summary {
	cursor: text !important;
}
.is-teaser summary .dot:last-child {
	display: none;
}
.is-teaser > summary::before {
	display: none;
}
.is-teaser > summary::after {
	display: inline-block;		
	white-space: nowrap;	
	content: '•••';
	font-size: .9em;
	letter-spacing: 0.05em;	
	width: 0;
	margin-left: .4em;
	overflow-x: visible;				
	transition: color .5s, letter-spacing .125s ease-in, transform .125s ease-in;	
	-webkit-transition: color .5s, letter-spacing .125s ease-in, transform .125s ease-in;
	-moz-transition: color .5s, letter-spacing .125s ease-in, transform .125s ease-in;
	-o-transition: color .5s, letter-spacing .125s ease-in, transform .125s ease-in;
	will-change: letter-spacing;
}
.is-teaser:not([open]):not(.is-viewport-observer) > summary::after {
	color: var(--wp--preset--color--dark);	
}
.is-teaser:not([open]) > summary a:not(:hover) {
	text-decoration-color: rgba(255,255,255,0);
}
.is-teaser:not([open]) > summary:hover::after {
	letter-spacing: .333em !important;
	transform: translate3d(.15em,0,0);
	color: var(--wp--preset--color--dark) !important;	
	transition-delay: 0s !important;
	-webkit-transition-delay: 0s !important;
	-moz-transition-delay: 0s !important;
	-o-transition-delay: 0s !important;
}
.is-teaser.upper:not([open]) > summary::after {
	/* in animate dots? */
}
.is-teaser[open] > summary::after,
.is-teaser.is-viewport-observer > summary::after {
	letter-spacing:-.415em;
}
.is-teaser[open]:has(div) > summary .dot:last-child {
	display: inline;
	visibility: visible;
}
.is-teaser[open]:has(div) > summary .dot:last-child::after,
.is-teaser[open]:has(div) > summary::after {
	visibility: hidden;
}
.is-teaser.paragraph summary::after {
	margin-left: 0;
	margin-top: .5rem;
}
.is-teaser[open].paragraph summary::after {
	visibility: hidden;
}
.is-teaser[open].paragraph summary{
	/* height: 0; */
	overflow: hidden;
	transition: height .5s ease;
}

/* 5. HELPERS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 5.1 Layout helpers */
.is-position-fixed {
	position: fixed;
	width: 100%;
	max-height: 0;
	overflow-y: visible;
		
}
.is-position-sticky {
	position: sticky;
	position: -webkit-sticky;
}
.is-position-fixed,
.is-position-sticky {
	top: 0;
}
:has(.is-position-fixed) {
	margin-top: 50vh;
}
.is-position-back {
	z-index: 0 !important;
	transform: translatez(-1);
	isolation: isolate;	
}
.is-position-back ~ * {
	position: relative;
	z-index: 1;
}
.is-force-wide-size {
	position: static;
	width: var(--wp--style--global--wide-size);
}
.is-overflow-x {
	overflow-x: scroll;
}
.is-overflow-x > * {
	flex: 0 0 auto;
}
.is-nobreak {
	white-space: nowrap;
}
/* 5.2 Visibility helpers */
.is-hidden {
	display: none !important;
}
.is-invisible {
	visibility: hidden;
}
/* 5.3 Effects helpers */
.is-blur {
	filter: blur(50px);
	-webkit-filter: blur(50px);
}
.has-backdrop-blur,
.has-backdrop-blur.wp-block-button a {
	backdrop-filter: blur(.5em);
}
.has-backdrop-blur.wp-block-button {
	backdrop-filter: none;
}
.is-multiply {
	mix-blend-mode: multiply;
}

.is-fadein {
	opacity: 0;
}
/* 5.4. Interaction helpers */
.is-scrollsnap {
	scroll-snap-type: x mandatory;	
}
.is-scrollsnap > * {
	scroll-snap-align: start;	
}
/* 5.5 Fallback helpers */
body:not(.noscript) .fallback,
body.noscript .fallback + .default {
	display: none !important;
}

body.noscript .fadein {
	opacity: 1;
	transform: translatey(0);		
}

/* 6. EFFECTS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 6.1 Transitions effects */
p a,
.wp-block-button a { 	
	transition: color .2s ease, text-decoration-color .2s ease, background-color .2s ease, border-color 0.2s ease;
	-webkit-transition: color .2s ease, text-decoration-color .2s ease, background-color .2s ease, border-color 0.2s ease;
	-moz-transition: color .2s ease, text-decoration-color .2s ease, background-color .2s ease, border-color 0.2s ease;
	-o-transition: color .2s ease, text-decoration-color .2s ease, background-color .2s ease, border-color 0.2s ease;
}
.fadein {
	opacity: 0;
	transform: translatey(1.5rem);	
	transition: transform .5s, opacity 1s;
	-webkit-transition: transform .5s, opacity 1s;
	-moz-transition: transform .5s, opacity 1s;
	-o-transition: transform .5s, opacity 1s;	
}

.fadein.delayed,
.fadein:has(.delayed) {
	transition-delay: .25s !important;
	-webkit-transition-delay: .25s !important;
	-moz-transition-delay: .25s !important;
	-o-transition-delay: .25s !important;	
	transition-duration: 1.25s !important;
	-webkit-transition-duration: 1.25s !important;
	-moz-transition-duration: 1.25s !important;
	-o-transition-duration: 1.25s !important;
}
.is-hover-observer .appear,
.is-hover-observer .wp-block-cover__background {
	opacity: 0 !important;
	transition: opacity .25s !important;
	-webkit-transition: opacity .25s !important;
	-moz-transition: opacity .25s !important;
	-o-transition: opacity .25s !important;		
}
.is-hover-observer:hover .appear,
.is-hover-observer:hover .wp-block-cover__background {
	opacity: 1 !important;
}
/* 6.2 Animation effects */

/* 6.3 Scroll effects */
.is-scroll-observer {
	transform: translatez(1px);
}
.is-scroll-observer.appear,
.is-scroll-observer .appear {
	opacity: calc(2 - var(--scroll-value-log) * 3);
}
.is-scroll-observer.disappear,
.is-scroll-observer .disappear{
/*	opacity: calc(-1.5 + var(--scroll-value) * 3);	*/
	opacity: calc(-1 + var(--scroll-value) * 2);	
}
.is-scroll-observer.blur,
.is-scroll-observer .blur {
	filter: blur(calc((1 - var(--scroll-value)) * 1rem)); 
}
.is-scroll-observer.blur-exp,
.is-scroll-observer .blur-exp {
	filter: blur(calc((1 - var(--scroll-value-exp)) * 2rem - 1rem)); 	
}
.is-scroll-observer.blur-log,
.is-scroll-observer .blur-log {
	filter: blur(calc((1 - var(--scroll-value-log)) * 1rem)); 
}
/* 6.4 Viewport effects */
.in-viewport:not(.in-focus).entered.fadein,
.in-viewport:not(.in-focus).entered .fadein,
.in-viewport:not(.in-focus).entering.fadein,
.in-viewport:not(.in-focus).entering .fadein,
.in-viewport.in-focus.focused.fadein,
.in-viewport.in-focus.focused .fadein,
.in-viewport.above-mid.fadein,
.in-viewport.above-mid .fadein,
:not(.in-viewport).above.fadein,
:not(.in-viewport).above .fadein {
	opacity: 1;
	transform: translatey(0);
}

.in-viewport.focused.is-teaser:not([open]) > summary::after,
:not(.in-viewport).above.is-teaser:not([open]) > summary::after {
	color: var(--wp--preset--color--dark);				
	letter-spacing: 0.05em;	
	transition: color .4s, letter-spacing .4s, transform .4s;
	-webkit-transition: color .4s, letter-spacing .4s, transform .4s;
	-moz-transition: color .4s, letter-spacing .4s, transform .4s;
	-o-transition: color .4s, letter-spacing .4s, transform .4s;		
}

/* 7. RESPONSIVE */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* 7.1 Mobile only */
@media (max-width: 799px) {
	.is-mobile-hidden {
		display: none !important;
	}
	.is-mobile-flex-center {
		flex-direction: column;
	}
	.is-mobile-reverse img {
		flex-direction: row-reverse;
	}
	.is-mobile-square,
	.is-mobile-square img {
		aspect-ratio: 1/1 !important;
		object-fit: cover;
	}
	.is-mobile-portrait,
	.is-mobile-portrait img {
		object-fit: cover;
		max-width: 100vw;
		overflow: hidden;
	}	
	.is-mobile-portrait img {	
		transform: scale(1.2); 
	}
	.is-teaser > summary::after {
		display: block !important;
		margin-left: .025em !important;
		transform: translate3d(0.015em,.25em,0) !important;
		margin-bottom: .5em;
		letter-spacing: 0.05em !important;
	}
	.is-teaser[open] > summary::after {
		transform: translate3d(0.015em,.25em,0);
		margin-bottom: .5em;
		display: inline-block !important;
		letter-spacing: -.415em !important;
		transform: translate3d(0,0,0) !important;
		margin-left: .4em !important;
	}
	.is-teaser p {
		margin-block-start: 0;
		margin-block-end: 0;
	}
	.is-teaser > p .dot:last-child::after {
	/*	display: block !important; */
		transform: translate3d(0.015em,.25em,0);
		margin-bottom: .5em;
	}
}
/* 7.2 Desktop only: Content */
@media (min-width: 800px) {
	.is-desktop-hidden {
		display: none !important;
	}
	.is-desktop-landscape img {
		aspect-ratio: 16/9 !important;
		object-fit: cover;
	}
}
/* 7.3 Desktop only: Content */
@media (min-width: 1025px) {
	.is-teaser[open]:has(.is-force-wide-size) {
/*		max-width: calc(var(--wp--style--global--content-size) - 8.3333vw); */
		max-width: intrinsic;
		max-width: -webkit-fill-available;
	}
}

/* 8. BROWSER FALLBACKS */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Define fraction var for Firefox */
@supports (-moz-appearance: none) {
    :root {
		--wp--preset--spacing--fct-1-12: clamp(calc(0.694vw * 1.25), 0.694vw, 0.694vw);
		--wp--preset--spacing--fct-1-6: clamp(calc(1.388vw * 1.25), 1.388vw, 1.388vw);		
		--wp--preset--spacing--fct-1-4: clamp(calc(2.083vw * 1.25), 2.083vw, 2.083vw);		
		--wp--preset--spacing--fct-1-3: clamp(calc(2.777vw * 1.25), 2.777vw, 2.777vw);		
		--wp--preset--spacing--fct-1-2: clamp(calc(4.166vw * 1.25), 4.166vw, 4.166vw);		
		--wp--preset--spacing--fct-1: clamp(calc(8vw * 1.25), 8vw, 8vw);
		--wp--preset--spacing--fct-1-grow: clamp(calc(8vw * 2.5), 8vw, 8vw);		
	}
}

/* TEMPORARY AND EXPERIMENTAL */
/* - - - - - - - - - - - - - */

details > summary + * {
	transition: opacity .5s;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
}
details[open] > summary + * {
	opacity: 1;
}

.temp details > summary {
	cursor: text;
}
.temp details > summary::before,
.temp details > summary::after {
	display: none !important;	
}
.temp details > summary + * {
	display: none;
}