nav {user-select: none; position: fixed; top: 0; left: 0; z-index: 10; width: 100%; height: var(--nav-height); transition: all .2s; box-shadow: inset 0 0 0 0 transparent;}
nav.floating, #menu-toggle:checked + nav {background: var(--c-bg); box-shadow: inset 0 -6px 0 0 #050505;}

#menu-toggle {display: none;}

nav .inner {position: relative; display: grid; grid-template-columns: max-content 1fr max-content; grid-template-areas: "logo litems ritems"; gap: 20px; align-items: center; padding: 15px var(--site-padding) 19px !important;}

nav .logo {grid-area: logo; display: flex;}
nav .logo img {width: 46px; height: 46px; border-radius: 50%;}
nav .logo div {display: none;}

nav .items {grid-area: litems; display: flex; gap: 20px; font-size: 111%; font-weight: 700;}

nav .items :is(svg, a) {color: var(--c-text); text-decoration: none; transition: all .1s;}
nav .items :is(.active, :hover) {color: var(--c-title); text-decoration: none;}

nav .menu {cursor: pointer; display: none; grid-area: menu; align-items: center;}
nav .menu svg {height: 24px; width: 24px;}

nav .items.ritems {grid-area: ritems;}
nav .social::before {content: ""; display: block; width: 1px; background-color: var(--c-text); height: 25px; opacity: .5;}

@media screen and (max-width: 950px) {
	nav .inner {grid-template-columns: 1fr max-content; grid-template-rows: min-content min-content min-content; grid-template-areas: "logo menu" "litems litems" "ritems ritems";}
	nav .menu {display: flex;}

	nav {overflow: hidden;}
	#menu-toggle:checked + nav {height: 100%;}
	#menu-toggle:checked + nav .inner {overflow-y: auto;}

	nav .items {flex-direction: column; gap: 5px; height: auto; line-height: 35px;}

	nav .social {margin-top: 15px; font-size: 24px;}
	nav .social::before {display: none;}
}


/*.form-layout {background-color: #0008; width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: center; overflow-y: auto;}
.form-layout > .inner {padding: 50px 20px; max-width: 700px; width: 100%;}

.form-layout img {width: 74.3px; height: 70px; margin-bottom: 10px;}

.form-layout .response {display: grid; grid-template-columns: 1fr max-content; justify-items: flex-start;}
.form-layout .response button {align-self: flex-start; padding: 5px; padding-right: 0; cursor: pointer; font-size: 26px; display: flex;}

.form-layout .prev {text-transform: uppercase; font-size: 14px; margin-top: 20px; color: var(--c-text); font-weight: 900; opacity: .3; cursor: pointer; display: none;}

.form-layout :is(input, textarea) {width: 100%; outline: none; border: 0; background-color: transparent; font: inherit; font-size: 120%; padding: 0; color: var(--c-title);}
.form-layout textarea {resize: vertical; min-height: 120px;}

.form-layout h4 {margin: 17px 0;}
.form-layout p {margin: 5px 0;}
.form-layout .btn {margin-top: 15px;}

#application > div {display: none;}*/

.form-layout {

	& {background: linear-gradient(#0005), url(https://data.enchant.cz/img/bg.webp); width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; display: grid; justify-content: center; align-items: center; overflow-y: auto;}

	.card {padding: 30px; max-width: 700px; width: 100%; background: var(--c-bg); border-radius: var(--radius); box-shadow: 0 5px 10px #0007; border: 1px solid var(--c-bg-lighter); margin: 30px 15px;}

	img {width: 74.3px; height: 70px;}

	h4 {margin: 17px 0;}
	p {margin: 7px 0;}
	.btn {margin-top: 10px;}

	:is(input:not(.btn), textarea) {width: 100%; outline: none; font: inherit; font-size: inherit; padding: 10px 15px; color: var(--c-title); border-radius: var(--radius); border: 1px solid var(--c-bg-lighter); background-color: var(--c-bg);}
	textarea {resize: vertical; min-height: 120px;}

	form > div {margin: 15px 0;}

}