/* colors */
:root{
	--header-content-space:1.5em;
	--content-max-width:1200px;
	--content-margin-horizontal:30px;
	--content-margin-vertical:20px;
	--header-height-default:40px;
	--header-height-scrolled:30px;
	--header-vertical-padding-default:var(--content-margin-vertical);
	--header-vertical-padding-scrolled:calc(var(--content-margin-vertical) * 0.5);
	--gallery-gap:30px;

	--color-light-bg:##fff;
    --color-light-header-bg:rgba(255,255,255,1);
	--color-light-text:#111;
	--color-light-link:#000;
	--color-light-link-hover:#777;
	--color-light-perex:#777;
	--color-light-nav-bg:rgba(0,0,0,0.95);
	--color-light-nav-text:#fff;
	--color-light-nav-link:#fff;
	--color-light-nav-link-hover:#888;
	--color-light-img-placeholder:#ddd;
	
	--color-dark-bg: #000;
    --color-dark-header-bg:rgba(0,0,0,1);
	--color-dark-text: #eee;
	--color-dark-link: #fff;
	--color-dark-link-hover: #888;
	--color-dark-perex: #888;
	--color-dark-nav-bg: rgba(0,0,0,0.85);
	--color-dark-nav-text: #fff;
	--color-dark-nav-link: #fff;
	--color-dark-nav-link-hover: #888;
	--color-dark-img-placeholder: #222;
}

@media (prefers-color-scheme: dark) {
	/* default */
	:root:not([data-theme]) {
		--color-bg:					var(--color-light-bg);
		--color-header-bg:			var(--color-light-header-bg);
		--color-text:				var(--color-light-text);
		--color-link:				var(--color-light-link);
		--color-link-hover:			var(--color-light-link-hover);
		--color-perex:				var(--color-light-perex);
		--color-nav-bg:				var(--color-light-nav-bg);
		--color-nav-text:			var(--color-light-nav-text);
		--color-nav-link:			var(--color-light-nav-link);
		--color-nav-link-hover:		var(--color-light-nav-link-hover);
		--color-img-placeholder:	var(--color-light-img-placeholder);
	}
}
/* manual override */
:root[data-theme="dark"]{
	--color-bg:					var(--color-dark-bg);
	--color-header-bg:			var(--color-dark-header-bg);
	--color-text:				var(--color-dark-text);
	--color-link:				var(--color-dark-link);
	--color-link-hover:			var(--color-dark-link-hover);
	--color-perex:				var(--color-dark-perex);
	--color-nav-bg:				var(--color-dark-nav-bg);
	--color-nav-text:			var(--color-dark-nav-text);
	--color-nav-link:			var(--color-dark-nav-link);
	--color-nav-link-hover:		var(--color-dark-nav-link-hover);
	--color-img-placeholder:	var(--color-dark-img-placeholder);
}
:root[data-theme="light"]{
	--color-bg:					var(--color-light-bg);
	--color-header-bg:			var(--color-light-header-bg);
	--color-text:				var(--color-light-text);
	--color-link:				var(--color-light-link);
	--color-link-hover:			var(--color-light-link-hover);
	--color-perex:				var(--color-light-perex);
	--color-nav-bg:				var(--color-light-nav-bg);
	--color-nav-text:			var(--color-light-nav-text);
	--color-nav-link:			var(--color-light-nav-link);
	--color-nav-link-hover:		var(--color-light-nav-link-hover);
	--color-img-placeholder:	var(--color-light-img-placeholder);
}



/* text elms settings */
html,body{
	margin:0;
	padding:0;
	font-family:'satoshi_light',Arial,Helvetica;
	font-size:16px;
	color:var(--color-text);
	background:var(--color-bg);
	height:100%;
	min-height:100%;
	transition:all 400ms ease;
}

h1{
	font-family:'satoshi_medium';
	font-weight:normal;
}
h2,h3,h4,h5,h6,
b,strong,th{
	font-family:'satoshi_regular';
	font-weight:normal;
}
i,em{
	font-family:'satoshi_light_italic';
	font-style:normal;
}
h1 i{
	font-family:'satoshi_medium_italic';
	font-weight:normal;
	font-weight:normal;
}
h2 i,h3 i,h4 i,h5 i,h6 i,
b i,strong i,th i{
	font-family:'satoshi_italic';
	font-weight:normal;
	font-weight:normal;
}


/* common classes */
.hidden{
	display:none !important;
}
body > a.skip-link{
	display:none;
}


/* main layout elms */
body > .center-cont{
	max-width:var(--content-max-width);
	margin:0 auto 2em auto;
	padding:0 var(--content-margin-horizontal);
	/*background:#eee;*/
	min-height:100%;
	height:100%;
}
body > .center-cont > .content{
	display:grid;
	grid-template-columns:100%;
	grid-template-rows: 1fr min-content;
	max-width:var(--content-max-width);
	padding:var(--content-margin-vertical) auto 0 auto;
	min-height:100%;
	--header-height:var(--header-height-default);
	--header-vertical-padding:var(--header-vertical-padding-default);
}
body > .center-cont > .content.scrolled{
	--header-height:var(--header-height-scrolled);
	--header-vertical-padding:var(--header-vertical-padding-scrolled);
}
.center-cont > .content > main{
	position:relative;
	z-index:1;
	display:flex;
	flex-direction:column;
	margin-top:calc(var(--header-height) + (2 * var(--header-vertical-padding)) + var(--header-content-space));
	will-change:margin-top;
	transition:margin-top 400ms ease;
}
.center-cont > .content.scrolled > main{
	margin-top:calc(var(--header-height) + (2 * var(--header-vertical-padding)) + (var(--header-content-space) * 2));
}
.content > main > .page-content{
	flex:1;
}


/* transition between pages */
@view-transition {
  	navigation:auto;
}
::view-transition-old(root) {
  	animation:250ms ease out-page;
}
::view-transition-new(root){
  	animation:250ms ease in-page;
}
@keyframes out-page {
	to{
		opacity:0;
		transform:translateY(-8px);
	}
}
@keyframes in-page{
	from{
		opacity:0;
		transform:translateY(8px);
	}
}


/* header and main navigation */
@layer nav-main-closed, nav-main-opened;
@layer nav-main-closed {
	header{
		position:fixed;
		z-index:100;
		background:var(--color-header-bg);
		backdrop-filter:blur(8px);
		-webkit-backdrop-filter:blur(8px);
		width:calc(100% - (var(--content-margin-horizontal) * 2));
		left:0;
		padding:var(--header-vertical-padding) var(--content-margin-horizontal);
		will-change:box-shadow;
	}
	.scrolled > header{
		transition:box-shadow 400ms ease;
		box-shadow:0 2px 5px rgba(0,0,0,0.5);
	}
	
	[data-theme="dark"] .scrolled > header{
		box-shadow:	0 1px 0 rgba(255,255,255,0.25),
					0 2px 5px rgba(0,0,0,1),
					0 2px 10px rgba(0,0,0,1),
					0 2px 15px rgba(0,0,0,1);
	}
	header .header-content{
		max-width:var(--content-max-width);
		margin:0 auto;
		padding-top:4px;
		display:flex;
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
		flex:1;

		height:var(--header-height);
		transition:height 400ms ease;
		will-change:height;
	}
	header .site-title{
		color:var(--color-text);
	}
	header .site-title h1.site-title-name,
	header .site-title div.site-title-name,
	header .site-title .site-title-name a{
		white-space:nowrap;
		font-family:'satoshi_black';
		text-decoration:none;
		display:flex;
		margin:0;
		align-items:baseline;
		line-height:1.5em;
	}
	header .site-title .site-title-name{
		font-size:100%;
	}
	header .site-title .site-title-name a{
		font-size:120%;
		color:var(--color-link);
		overflow:hidden;
	}
	header .site-title .site-title-name a:hover,
	header .site-title .site-title-name a:focus,
	header .site-title .site-title-name a:active{
		text-decoration:none;
		color:var(--color-link-hover);
	}
	header .site-title a.site-title-logo{
		display:none;
	}
	header .site-title span.site-title-desc{
		display:none;
	}
	header nav.main{
		display:flex;
		flex-direction:row;
		align-items:center;
		margin-left:auto;
		/*padding-left:var(--content-margin-horizontal);*/
		gap:calc(var(--content-margin-horizontal));
	}
	nav.main ul.menu{
		display:flex;
		flex-direction:row;
		gap:calc(var(--content-margin-horizontal));
		padding:0;
		margin:0;
	}
	nav.main ul li{
		list-style:none;
	}
	nav.main ul.menu li a{
		font-size:110%;
		text-decoration:none;
		color:var(--color-link);
		white-space:nowrap;
		text-shadow:-2px -2px 10px var(--color-header-bg),
					-2px 2px 10px var(--color-header-bg),
					2px 2px 10px var(--color-header-bg),
					2px -2px 10px var(--color-header-bg);
	}
	nav.main ul.menu li.current-menu-item a,
	nav.main ul.menu li a:hover,
	nav.main ul.menu li a:focus,
	nav.main ul.menu li a:active{
		text-decoration:none;
		color:var(--color-link-hover);
	}

	nav.main ul.social{
		display:flex;
		flex-direction:row;
		gap:calc(var(--content-margin-horizontal) * 0.75);
		padding:0;
		margin:0;
	}
	nav.main ul.social li a{
		font-size:125%;
		text-decoration:none;
		color:var(--color-link);
	}
	nav.main ul.social li a span{
		display:none;
	}
	nav.main ul.social li a:hover,
	nav.main ul.social li a:focus,
	nav.main ul.social li a:active{
		text-decoration:none;
		color:var(--color-link-hover);
	}
	header a.icon-hamburger,
	header a.icon-close{
		display:none;
		color:var(--color-link);
		text-decoration:none;
		font-size:230%;
		align-items:center;
	}
	header a.icon-hamburger::before{
		position:relative;
		top:2px;
	}
	header a.icon-hamburger:hover,
	header a.icon-hamburger:focus,
	header a.icon-hamburger:active{
		color:var(--color-link-hover);
		text-decoration:none;
	}
	html:not(.nav-main-opened) header nav.main a.icon-close{
		display:none;
	}
}
@media (max-width: 1200px) {
	header nav.main{
		gap:calc(var(--content-margin-horizontal) * 0.75);
	}
	nav.main ul.menu{
		gap:calc(var(--content-margin-horizontal) * 0.75);
	}
	nav.main ul.social{
		gap:calc(var(--content-margin-horizontal) * 0.4);
	}
}
@media (max-width: 1130px) {
	header nav.main{
		gap:calc(var(--content-margin-horizontal) * 0.7);
	}
	nav.main ul.menu{
		gap:calc(var(--content-margin-horizontal) * 0.7);
	}
	nav.main ul.social{
		gap:calc(var(--content-margin-horizontal) * 0.35);
	}
}
@media (max-width: 1110px) {
	body .content{
		font-size:95%;
	}
	header nav.main{
		padding-left:var(--content-margin-horizontal) * 0.65;
		gap:calc(var(--content-margin-horizontal) * 0.65);
	}
	nav.main ul.menu{
		gap:calc(var(--content-margin-horizontal) * 0.65);
	}
	nav.main ul.social{
		gap:calc(var(--content-margin-horizontal) * 0.3);
	}
}
@media (max-width: 1055px) {
	body .content{
		font-size:90%;
	}
}
@media (max-width: 1010px) {
	body .content{
		font-size:85%;
	}
	header nav.main{
		padding-left:var(--content-margin-horizontal) * 0.65;
		gap:calc(var(--content-margin-horizontal) * 0.5);
	}
	nav.main ul.menu{
		gap:calc(var(--content-margin-horizontal) * 0.5);
	}
	nav.main ul.social{
		gap:calc(var(--content-margin-horizontal) * 0.2);
	}
}
@media (max-width: 930px) {
	header .header-content{
		padding-top:6px;
	}
	header .site-title .site-title-name a{
		font-size:120%;
	}
	body .content{
		font-size:100%;
	}
	@layer nav-main-closed {
		html:not(.nav-main-opened) header{
			display:flex;
			flex-direction:row;
			justify-content:space-between;
		}
		html:not(.nav-main-opened) header nav.main ul.menu,
		html:not(.nav-main-opened) header nav.main ul.social{
			display:none;
		}
		html:not(.nav-main-opened) header a.icon-hamburger{
			display:flex;
		}
	}
	@layer nav-main-opened {
		html.nav-main-opened body{
			overflow:hidden;
		}
		html.nav-main-opened header{
			position:fixed;
			display:flex;
			flex-direction:column;
			align-items:center;
			justify-content:center;
			top:0;
			left:0;
			width:100%;
			height:100%;
			background:var(--color-nav-bg);
			backdrop-filter:blur(8px);
			-webkit-backdrop-filter:blur(8px);
			color:var(--color-nav-text);
			padding:0;
			z-index:10000;
		}
		html.nav-main-opened header .header-content{
			flex-direction:column;
			justify-content:center;
			align-items:flex-start;
		}
		html.nav-main-opened header .site-title{
			margin:0;
		}
		html.nav-main-opened header .site-title .site-title-name{
			display:none;
		}
		html.nav-main-opened header .site-title a.site-title-logo{
			display:inline-block;
			text-decoration:none;
			overflow:hidden;
			line-height:0;
		}
		html.nav-main-opened header .site-title a.site-title-logo img{
			width:auto;
		}
		:root[data-theme="dark"] html.nav-main-opened header .site-title a.site-title-logo img{
			filter:invert(1);
		}
		html.nav-main-opened header .site-title a.site-title-logo:hover,
		html.nav-main-opened header .site-title a.site-title-logo:focus,
		html.nav-main-opened header .site-title a.site-title-logo:active{
			text-decoration:none;
			opacity:0.54;
		}
		html.nav-main-opened header .site-title img{
			filter:invert(1);
			transition:none;
		}
		html.nav-main-opened header nav.main{
			margin:0;
			flex-direction:column;
			align-items:flex-start;
			padding-left:0;
			padding-top:calc(var(--content-margin-vertical) * 2) !important;
		}
		html.nav-main-opened header nav.main ul.menu{
			flex-direction:column;
		}
		html.nav-main-opened header a.icon-close{
			position:fixed;
			display:block;
			top:40px;
			right:40px;
		}
		
		html.nav-main-opened nav.main ul.menu li a{
			text-shadow:-2px -2px 10px var(--color-nav-bg),
						-2px 2px 10px var(--color-nav-bg),
						2px 2px 10px var(--color-nav-bg),
						2px -2px 10px var(--color-nav-bg);
		}
		html.nav-main-opened header a{
			color:var(--color-nav-link);
		}
		html.nav-main-opened header a:hover,
		html.nav-main-opened header a:focus,
		html.nav-main-opened header a:active{
			text-decoration:none;
			color:var(--color-nav-link-hover);
		}
		html.nav-main-opened header nav.main ul.social{
			gap:calc(var(--content-margin-vertical) * 1.5) !important;
			margin:var(--content-margin-vertical) 0 0 0;
		}
		html.nav-main-opened header nav.main ul.social li a{
			font-size:180%;
		}
		html.nav-main-opened header nav.main ul.social li a i:before{
			text-align:left !important;
			margin:0 !important;
		}
	}
}
@media (max-width: 890px) and (max-height: 700px) {
	@layer nav-main-opened {
		html.nav-main-opened header nav.main{
			padding-top:calc(var(--content-margin-vertical) * 1);
		}
	}
}


/* footer */
footer{
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:2em 0 var(--content-margin-vertical) 0;
}
footer .copy-site-title-and-desc{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:0.5em;
}
.copy-site-title-and-desc .copy-and-site-title{
	display:block;
}

.copy-site-title-and-desc .site-title-desc{
	display:block;
	font-size:80%;
}
footer nav.social{
	margin-top:1em;
}
footer nav.social ul{
	display:flex;
	flex-direction:row;
	gap:calc(var(--content-margin-horizontal) * 0.75);
	padding:0;
	align-items:center;
	margin:0;
}
footer nav.social ul li{
	list-style:none;
}
footer nav.social ul li a{
	font-size:100%;
	text-decoration:none;
	color:var(--color-link);
}
footer nav.social ul li a:before{
	font-size:110%;
	color:var(--color-link);
	margin-right:0.33em;
}
footer nav.social ul li a{
	color:var(--color-link);
	text-decoration:none;
}
footer nav.social ul li a i{
	display:none;
}
footer nav.social ul li a span{
	display:inline-block;
	border-bottom:1px solid var(--color-link);
	position:relative;
    top:-2px;
	padding-bottom:2px;
}
footer nav.social ul li a:hover:before,
footer nav.social ul li a:focus:before,
footer nav.social ul li a:active:before{
	color:var(--color-link-hover);
}
footer nav.social ul li a:hover span,
footer nav.social ul li a:focus span,
footer nav.social ul li a:active span{
	color:var(--color-link-hover);
	border-bottom:1px solid transparent;
}
@media (max-width: 600px) {
	footer nav.social ul li a{
		font-size:80%;
	}
}



/* content text elements */
main.content > * > *:first-child,
main.content > *:first-child{
	margin-top:0;
}
main.content h1{font-size:175%;line-height:1.5em;margin:0 0 1em 0;}
main.content h2{font-size:160%;line-height:1.5em;margin:1.5em 0 0.8em 0;}
main.content h3{font-size:145%;line-height:1.5em;margin:1.5em 0 0.8em 0;}
main.content h4{font-size:130%;line-height:1.5em;margin:1.5em 0 0.8em 0;}
main.content h5{font-size:115%;line-height:1.5em;margin:1.5em 0 0.8em 0;}
main.content h6{font-size:100%;line-height:1.5em;margin:1.5em 0 0.8em 0;}
	

main.content a{
	text-decoration:none;
	padding-bottom:2px;
	border-bottom:1px solid var(--color-link);
	color:var(--color-link);
	line-height:1.5em;
}
main.content a[target=_blank]::after{
	margin-left:0.25em;
	margin-right:0.25em;
	content:'\e803';
	font-family:"icons";
	font-size:65%;
	font-style:normal;
	font-weight:normal;
	
}
main.content a:hover,
main.content a:focus,
main.content a:active{
	border-bottom:1px solid transparent;
	color:var(--color-link-hover);
}
main.content ul,
main.content ol{
	margin:0.5em 0;
	padding-left:1.5em;
}
main.content ul.nobullets{
	list-style-type:none;
	margin:1em 0;
	padding:0;
}
main.content ul li,
main.content ol li{
	line-height:1.5em;
}
main.content ul{
	list-style-type:disclosure-closed;
}
main.content ul.nobullets{
	list-style-type:none;
	margin:1em 0;
	padding:0;
}
main.content p{
	margin:0.5em 0;
	line-height:1.5em;
	text-align:justify;
}
main.content hr{
	margin:1em 0;
	border:0;
	border-bottom:1px solid var(--color-text);
}


/* content columns */
.columns{
	display:grid;
	grid-template-columns:calc(50% - (var(--content-margin-horizontal) * 0.5)) calc(50% - (var(--content-margin-horizontal) * 0.5));
	grid-template-rows:auto;
	gap:0 var(--content-margin-horizontal);
}
.columns > .column:last-child:nth-child(odd) {
    grid-column-start:1;
    grid-column-end:3;
}
@media (max-width:750px) {
	.columns{
		display:block;
		grid-template-columns:none;
		grid-template-rows:none;
		gap:unset;
	}	
}


/* pages specialities */
.page-content.kontakt,
.page-content.kontakty{
	position:relative;
}
.page-content.kontakt > *,
.page-content.kontakty > *{
	position:relative;
	z-index:1;
}
.page-content.kontakt::before,
.page-content.kontakty::before{
	content:'';
	position:absolute;
	inset:0;
	z-index:0;
	background:transparent url('/wp-content/themes/blankslate/images/portrait.svg') 70% 0% no-repeat;
	background-size:auto 100%;
}
[data-theme="dark"] .page-content.kontakt::before,
[data-theme="dark"] .page-content.kontakty::before{
	filter:invert(1);
}
@media (max-width: 850px) {
	.page-content.kontakt::before,
	.page-content.kontakty::before{
		background-position:80% 100%;
		background-size:auto 80%;
	}
}
@media (max-width: 790px) {
	.page-content.kontakt::before,
	.page-content.kontakty::before{
		background-position:100% 100%;
		background-size:auto 70%;
	}
}
@media (max-width: 700px) {
	.page-content.kontakt::before,
	.page-content.kontakty::before{
		background-position:80% 100%;
		background-size:auto 60%;
	}
}
@media (max-width: 560px) {
	.page-content.kontakt,
	.page-content.kontakty{
		padding-bottom:100vw;
	}
	.page-content.kontakt::before,
	.page-content.kontakty::before{
		background-position:100% 100%;
		background-size:100% auto;
	}
}