/*
Theme Name: tanzbuero
Theme URI: https://opencollective.com/tanzbuero
Author: C. Hausch
Author URI: https://hausch.io
Description:
Tags: 
Version: 0.20260506
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: tanzbuero
tanzbuero wordpress theme 2025-2026
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{appearance:none;border-radius:0}input[type="search"]{appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}

:root {
	--col-primary: #ff0000;
	--col-secondary: #00ff00;
	--col-background: #999999; /*#22AEBE; */
	--col-text: #00FBB8;
	--col-warning: #fb4b00;
	--col-invalid: #e5ff00;
	--font-family-primary: 'Raleway', sans-serif;
	--font-family-secondary: 'Lexend', sans-serif;
	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1.5rem;
	--font-size-lg: 2rem;
	--font-size-xl: 2.5rem;
	--font-size-xxl: 3rem;
	--margin-main: 1rem;
	--padding-main: 8rem;
	--padding-textblock: 8rem;
	--gutter: 2rem;
	--logo-size: 8rem;
	--content-width: calc(100vw - (var(--padding-main) * 2));
	--grain-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");

}

html, body {
	font-family: var(--font-family-primary);
	color: var(--col-text);
	background-color: var(--col-background);
	margin: 0;
	padding: 0;
	font-size: var(--font-size-base);
	line-height: 1.25;
	text-align: right;
	letter-spacing: 2px;
	font-weight: 100;
	text-transform: lowercase;
}


/* layout */

#header {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

#branding {
	position: fixed;
	top: var(--padding-main);
	right: var(--padding-main);
	width: fit-content;
	z-index: 1002;
}

#container {
	display: grid;
	min-height: 100vh;
}

#content {
	display: grid;
	grid-template-columns: 1fr;
	max-width: var(--content-width);
}

#content :where(article, header) {
	grid-column: span 1;
}

#content :where(header) {
	grid-column: 1 / -1;
}

#content :where(footer) {
	grid-column: 1 / -1;
}

#container, #footer {
	padding-left: var(--padding-main);
	padding-right: var(--padding-main);
}

#container {
	padding-top: calc(var(--padding-textblock) * 1.5);
	padding-bottom: calc(var(--padding-textblock) / 2);
}

#footer {
	padding-bottom: calc(var(--padding-textblock) / 2);
}

#wrapper {
	z-index: 1;
	position: relative;
}

/* menus */

#menu {
	position: fixed;
	top: var(--margin-main);
	left: var(--margin-main);
	width: fit-content;
	height: 100vh;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
  	justify-content: center;
	filter: drop-shadow(8px 8px 8px #FFA1A166);
}

#menu-main-menu {
	flex-direction: column-reverse;
	display: flex;
	/* gap: var(--gutter); */
}

#menu-footer-menu {
	justify-content: right;
	display: flex;
	flex-direction: row;
	/* gap: var(--gutter); */
}

/* fonts */
a {
	text-decoration-style: dotted;
	color: unset;
}

p {
	font-weight: 200;
	font-size: 1.5rem;
	margin-block-end: 1em;
	margin-block-start: 1em;
	hyphenate-character: auto;
	hyphens: auto;
}

#content  :where(article):is(.member, .event) p {
	font-size: var(--font-size-sm);
}

#content  :where(article):is(.member, .event) li {
	font-weight: 300;
}

.event-details h3 {
	font-weight: 300;
	font-style: oblique;
}

body.post-type-archive-member #content article h2.entry-title {
	font-size: var(--font-size-md);
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	text-transform: lowercase;
	text-wrap: balance
}

h1, h2, h3, h4, h5, h6 {
	grid-column: 1 / -1;
}

h1{
	font-size: 3.5rem;
	font-weight: 100;
}

li {
	text-wrap: balance;
}

#menu li {
	writing-mode: sideways-lr;
	font-size: 1.75rem;
	font-weight: 100;
}

#menu a {
	/* color: var(--col-text); */
	text-decoration: none;
	transition: color 0.3s ease;
}

#menu li, #menu-footer-menu li {
	text-transform: lowercase;
}

#footer {
	font-family: var(--font-family-secondary);
	font-size: 0.75rem;
}

#content :where(footer), .wp-singular :where(footer) {
	font-size: var(--font-size-sm);
}


#site-title {
  display: none;
}

.event-details {
	margin-block-end: var(--gutter);
	margin-block-start: var(--gutter);
	font-size: var(--font-size-md);
}



/** overrides **/

img {
	max-width: 100%;
	height: auto;
}

/* post thumbnails – uniform 1:1 clip */
.entry-summary a:has(.wp-post-image),
.entry-content a:has(.wp-post-image) {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	position: relative;
	isolation: isolate;
}

.entry-summary a:has(.wp-post-image)::after,
.entry-content a:has(.wp-post-image)::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: 1;
	background-image: var(--grain-texture);
	background-size: 140px 140px;
	background-repeat: repeat;
	/* mix-blend-mode: soft-light; */
	mix-blend-mode: exclusion;
	background-color: var(--col-text);
	filter: invert();
}

.wp-post-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	position: relative;
	z-index: 1;
}

.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	max-width: 100%;
}

.wpcf7-form-control:not(.wpcf7-submit),
.wpcf7-textarea,
.search-field {
	display: block;
	width: 100%;
	max-width: 100%;
}

.wpcf7-form-control, .wpcf7-textarea, .search-field, .search-submit, .wpcf7-submit {
	background-color: transparent;
	border: 1.5px solid var(--col-text);
	font-family: var(--font-family-primary);
	line-height: var(--font-size-base);
	font-size: var(--font-size-base);
	font-weight: 200;
	color: var(--col-text);
	padding: 0.15em 0.25em;
}


.search-submit, .wpcf7-submit {
	cursor: pointer;
}

.search-form {
	display: flex;
	gap: var(--margin-main);
}

.search-form > label {
	flex: 1 1 auto;
}

.wpcf7-form-control:focus-visible,
.search-submit:focus-visible {
	background-color: var(--col-text);
	color: var(--col-background);
	outline: none;
	box-shadow: none;
}

.wpcf7-spinner {display: block;top: 15px;left: 45%;}
.wpcf7-spinner {visibility: visible;}
/* visual */

.wpcf7-response-output, .wpcf7-not-valid-tip {
	font-size: var(--font-size-sm);
}

.wpcf7-not-valid-tip {
	color: var(--col-warning);
	margin-bottom: -3.5em;
}

.wpcf7 form.invalid .wpcf7-response-output {
	color: var(--col-invalid);
	border-color: var(--col-invalid);
}

#copyright {
	margin-block-end: 1rem;
	border-bottom: 1px solid;
	padding-block-end: 1rem;
}

#logo {
	width: var(--logo-size);
	max-width: 100%;
	height: auto;
	filter: drop-shadow(8px 8px 8px #FFA1A166);
	z-index: 20000;
}

.section-debug {
	border: 1px solid #66666666;
	margin: 1px
}

body {
	min-height: 100vh;
	/* background: linear-gradient(#fff3f3, #ecfffa); */
	scroll-behavior: smooth;
	z-index: -10;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.5;
	background-image: var(--grain-texture);
	background-size: 160px 160px;
	background-repeat: repeat;
	mix-blend-mode: soft-light;
}

.hidden {
	display: none;
}

/** responsive **/

.menu-toggle {
	display: none;
}

.hamburger {
	display: none;
	flex-direction: column;
    background: transparent;
	border: none;
	cursor: pointer;
	gap: 4px;
	padding: 0;
	width: 1em;
	height: 1em;
	aspect-ratio: 1 / 1;
	align-items: center;
	justify-content: center;
	font-size: 6em;
	position: fixed;
	top: calc(var(--padding-main) * 3);
	left: calc(var(--padding-main));
	transform: translateY(-50%);
	z-index: 1001;
	transition: opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;
	filter: none;
}

.hamburger.visible {
	opacity: 1;
	pointer-events: auto;
}

.hamburger .menu-icon,
.hamburger .close-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: opacity 0.3s ease;
	line-height: 1;
	text-align: center;
}

.hamburger .menu-icon,
.hamburger .close-icon {
	color: transparent;
	-webkit-text-stroke: 1px var(--col-text);
	text-shadow: none;
}
.hamburger .close-icon { transform: translate(-50%, -40%); }
.hamburger .menu-icon {
	opacity: 1;
}

.hamburger .close-icon {
	opacity: 0;
}

.menu-toggle:checked+.hamburger .menu-icon {
	opacity: 0;
}

.menu-toggle:checked+.hamburger .close-icon {
	opacity: 1;
}

@media (max-width: 599px) {
	/* for small mobile devices */
	#menu {
		flex-direction: column;
		padding: var(--padding-main) 0;
		z-index: 999;
		overflow-y: auto;
	}

	#menu-main-menu {
		flex-direction: column;
	}

	#site-title {
		hyphens: none;
		padding-block-end: var(--padding-textblock);
	}
}

/* for-desktop */
@media (min-width: 600px) {
	:root {
		--font-size-base: 1rem;
		--font-size-sm: 0.875rem;
		--font-size-md: 1.5rem;
		--font-size-lg: 2rem;
		--font-size-xl: 2.5rem;
		--font-size-xxl: 3rem;
	}
}

@media (max-width: 749px) {
	/* for mobile devices */
	:root {
		--padding-main: 1rem;
		--padding-textblock: 4rem;
	}

	#menu {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		transform: translateY(-0.5rem);
		transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
		width: 100vw;
		height: 100vh;
		background: transparent;
	}

	#menu-toggle:checked ~ #menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	#content {
 		display: grid;
  		grid-template-columns: 1fr;
	}
	#header {
		position: fixed;
		height: 8rem;
		overflow: hidden;
		isolation: isolate;
		transition: height 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		mask: none;
	}

	#header::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 0;
		opacity: 0.2;
		background-image: var(--grain-texture);
		background-size: 160px 160px;
		background-repeat: repeat;
		mix-blend-mode: soft-light;
	}

	#header:not(:has(#menu-toggle:checked)) {
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		mask: linear-gradient(to top, transparent, black 25%);
	}

	#header:has(#menu-toggle:checked) {
		height: 100vh;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		mask: none;
	}
	#menu li {
		writing-mode: horizontal-tb;
	}
	.menu-main-menu-container {
		align-self: end;
		visibility: hidden;
		opacity: 0;
	}
	#menu-toggle:checked ~ #menu .menu-main-menu-container {
		visibility: visible;
		opacity: 1;
	}
	#menu-main-menu {
		padding: var(--padding-main);
	}
	#menu li {
		font-size: 3rem;
	}
	#menu-footer-menu {
		flex-direction: column;
	}
	.hamburger {
		display: grid;
		place-items: center;
		opacity: 1;
		pointer-events: auto;
	}
	body:not(.wp-singular) #content :where(article):is(.member) {
		grid-column: span 1;
	}
}

/* for-desktop */
@media (min-width: 750px) {
	:root {
		--font-size-base: 1.25rem;
		--font-size-sm: 0.875rem;
		--font-size-md: 1.5rem;
		--font-size-lg: 2rem;
		--font-size-xl: 2.5rem;
		--font-size-xxl: 4rem;
	}
	.menu-main-menu-container {
		visibility: visible;
		opacity: 1;
	}
	.menu .menu-item::after {
		content: "\2026";
		margin: 0.5rem 0;
	}

	.footer-menu .menu-item::after {
		content: "\2044";
		margin: 0 0.5rem;
	}

	.menu .menu-item:last-of-type::after, .footer-menu .menu-item:last-of-type::after {
		content: "";
		margin: 0;
	}
	#branding {
		position: fixed;
		top: calc(var(--padding-main) / 2);
		right: calc(var(--padding-main) / 2);
	}
	#site-title {
		hyphens: none;
	}
	#content {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: var(--gutter);
	}
	#content :where(article) {
		grid-column: 2 / span 3;
	}
	#content :where(header) {
		grid-column: 1 / -1;
	}
	body:not(.wp-singular) #content :where(article):is(.member) {
		grid-column: span 2;
	}
}

/* for-desktop */
@media (min-width: 1200px) {
	:root {
		--font-size-base: 1.5rem;
		--font-size-sm: 0.875rem;
		--font-size-md: 1rem;
		--font-size-lg: 2rem;
		--font-size-xl: 2.5rem;
		--font-size-xxl: 6rem;
	}
}

/* for-big-desktop-up */
@media (min-width: 1680px) {
	:root {
		--font-size-base: 1.5rem;
		--font-size-sm: 0.875rem;
		--font-size-md: 1.25rem;
		--font-size-lg: 2.25rem;
		--font-size-xl: 4rem;
		--font-size-xxl: 8rem;
	}
	body:not(.wp-singular) #content :where(article):is(.member) {
		grid-column: span 1;
	}
}