@view-transition {
	navigation: auto;
}

:root {
	--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--contentWidth: min(1200px, 96vw);
	interpolate-size: allow-keywords;
	
	--colorDefault: #313131;
	--colorAccent: #fe0000;
	--colorAccentLight: #fe000022;
	--colorBG: #fff;
}

* {
	padding: 0;
	box-sizing: border-box;
	font-family: var(--system-ui);
	transition-behavior: allow-discrete;
}

html {
	font-size: 1rem;
}

html,
body {
	min-height: 100dvh;
	max-height: 100dvh;
	margin: 0px;
	background: var(--colorBG);
	color: var(--colorDefault);
}

img {
	display: block;
	max-height: 100%;
	max-width: 100%;
}

.wrapper {
	display: grid;
    grid-template-rows: auto auto 1fr auto;
	min-height: 100dvh;
}

.topbar {
	background: var(--colorDefault);
	color: var(--colorBG);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 2rem;
    justify-content: center;
    padding: 0.5rem;
	position: sticky;
    top: 0px;
    z-index: 10;
}

.topbar a {
	text-decoration: none;
	color: var(--colorBG);
}

.topbar a i {
	padding-inline: 0.5rem;
}

.topbar a:hover {
	text-decoration: underline;
}


header {
	width: 100%;
	/* border-bottom: 1px solid #0004; */
	box-shadow: 0px 0px 2px #0008;
	background: var(--colorBG);
	position: relative;
	z-index: 9;
}

main::after {
	transition: 250ms backdrop-filter;
}

header:has(input#navhamburger:checked) + main::after {
    inset: 0px;
    position: absolute;
    content: '';
    backdrop-filter: blur(3px) brightness(0.75);
	@media (width > 750px) {
		content: unset;
	}
}

.headercontent {
    display: grid;
    grid-template-columns: auto 1fr;
	justify-items: end;
	align-items: center;
	width: var(--contentWidth);
	margin-inline: auto;
	position: relative;
	@media (width > 750px) {
		justify-items: unset;
		/* padding-bottom: 1rem; */
		/* border-bottom: none; */
	}
}

header .logo {
	/* padding-block: 0.5rem; */
}

header .logo img {
    /* height: 5rem; */
    max-height: 5rem;
    padding: 0.25rem;
}

header input.hidden {
	appearance: none;
	width: 0px;
	height: 0px;
	opacity: 0;
	position: absolute;
}

header label {
    padding: 1rem;
    display: block;
    font-size: 1.5rem;
	cursor: pointer;
	@media (width > 750px) {
		display: none;
	}
}

header input.hidden:checked + label i::before {
    content: "\e59b";
}

header nav {
	/* grid-column: 1 / 3; */
	/* position: relative; */
	position: absolute;
    width: 100%;
    top: 100%;
    left: 0px;
	@media (width > 750px) {
		position: static;
	}
}

header ul {
    list-style: none;
	height: 0px;
	overflow: clip;
	transition: 250ms height;
    position: absolute;
    top: 1px;
	/* width: 100%; */
	/* top: calc(4rem + 3px); */
    width: 100%;
    left: 0px;
    margin-block: 0px;
	@media (width > 750px) {
		display: flex;
		flex-wrap: wrap;
		/* gap: 0.5rem 2rem; */
		/* justify-content: space-between; */
		height: auto;
		position: static;
        justify-content: flex-end;
	}
}

header input.hidden:checked + label + nav ul {
	height: auto;
}

header li a {
    display: block;
    text-align: right;
    text-decoration: none;
    padding-block: 1rem;
    padding-inline: 0.5rem;
    border-bottom: 1px solid var(--colorAccent);
    border-left: 1px solid var(--colorAccent);
    border-right: 1px solid var(--colorAccent);
	background: var(--colorBG);
	color: var(--colorAccent);
	@media (width > 750px) {
		padding-block: 2rem;
        padding-inline: 0.25rem;
        border-bottom: none;
        border-left: 1px solid var(--colorAccentLight);
		border-right: none;
	}
	@media (width > 800px) {
        padding-inline: 0.5rem;
	}
	@media (width > 900px) {
        padding-inline: 1rem;
	}
	@media (width > 1200px) {
		padding-block: 2rem;
        padding-inline: 2rem;
	}
}

header li:last-child a {
	@media (width > 600px) {
		border-right: 1px solid var(--colorAccentLight);
	}
}

header li a:hover {
	background: var(--colorAccent);
	color: var(--colorBG);
	@media (width > 600px) {
		/* background: unset; */
		/* color: #000; */
	}
}

header li a.active {
	background: var(--colorAccent);
	color: var(--colorBG);
	/* font-weight: 700; */
}


main {
    /* overflow: auto; */
    width: 100%;
}

section.banner {
    width: 100%;
    margin-block: 0px;
	height: 25vh;
    min-height: 16rem;
}

section.banner:has(> div) {
	height: auto;
    position: relative;
    isolation: isolate;
}

section.banner:has(> div) img {
	position: absolute;
    height: 100%;
    z-index: -2;
}

section.banner div {
	width: var(--contentWidth);
	padding-block: 4rem;
	margin-inline: auto;
	color: #fff;
}

section.banner:has(> div)::before {
    content: '';
    background: url(../images/grid.png);
    inset: 0px;
    position: absolute;
    z-index: -1;
}

section.banner h1,
section.banner h2,
section.banner h3 {
	margin-block: 0;
	color: #fff;
    text-shadow: 0px 2px 3px #000;
}

section.banner img {
    height: 25vh;
	min-height: 16rem;
    width: 100dvw;
    object-fit: cover;
}
section.banner img:hover {
	scale: 1;
}

h1 {
	color: var(--colorAccent);
    font-size: 2rem;
    /* letter-spacing: 0.5em; */
    padding-block: 1em;
}

h2 {
	color: var(--colorAccent);
    font-size: 1.75rem;
    /* letter-spacing: 0.5em; */
    padding-block: 0.5em;
}

h3 {
	color: var(--colorAccent);
    font-size: 1.5rem;
    /* letter-spacing: 0.5em; */
    padding-block: 0.5em;
}

h4 {
	color: var(--colorAccent);
    font-size: 1.25rem;
    /* letter-spacing: 0.25em; */
    padding-block: 0.25em;
}

a.submit,
button[type="submit"] {
    display: inline-block;
    border: 2px solid var(--colorAccent);
    padding: 1rem 2rem;
    color: var(--colorDefault);
    background: var(--colorBG);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
	transition: 150ms color, 150ms background;
	cursor: pointer;
}

a.submit:hover,
button[type="submit"]:hover {
    color: var(--colorBG);
    background: var(--colorAccent);
}

section {
    width: var(--contentWidth);
	margin-block: 1rem;
	margin-inline: auto;
}

section.maps {
	margin: 0px;
	width: 100%;
	min-height: 35vh;
}

section.maps iframe {
	min-height: 35vh;
}

section h1,
section h2,
section h3,
section h4 {
	grid-column: 1 / -1;
	width: 100%;
}

section.imgs1,
section.imgs2,
section.imgs3,
section.imgs4 {
	width: 100%;
	background: var(--colorDefault);
    padding-block: 2rem;
}

section.imgs1 content,
section.imgs2 content,
section.imgs3 content,
section.imgs4 content {
    display: grid;
    justify-items: center;
    align-items: center;
	gap: 2rem;
	width: var(--contentWidth);
	margin-inline: auto;
}

section.imgs2 content {
    grid-template-columns: auto auto;
    justify-content: space-between;
}

section.imgs3 content {
    grid-template-columns: 1fr;
	padding-inline: 1rem;
	@media (width > 600px) {
		padding-inline: 0rem;
		grid-template-columns: 1fr 1fr 1fr;
	}
    justify-content: space-between;
}

section.imgs4 content {
    grid-template-columns: auto auto;
	@media (width > 800px) {
		grid-template-columns: auto auto auto auto;
	}
    justify-content: space-between;
}

section img {
	max-width: 100%;
    transition: scale 150ms;
	object-fit: contain;
}

section img.thumb + img.fullimage {
	display: none;
}

main section:last-child {
    margin-bottom: 0px;
}

.imgs1 a,
.imgs2 a,
.imgs3 a,
.imgs4 a {
    position: relative;
	overflow: hidden;
}

.imgs1 div,
.imgs2 div,
.imgs3 div,
.imgs4 div {
    position: relative;
	overflow: hidden;
}

.imgs1 img,
.imgs2 img,
.imgs3 img,
.imgs4 img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.imgs1 span,
.imgs2 span,
.imgs3 span,
.imgs4 span {
    position: absolute;
    display: block;
    bottom: 0px;
    text-align: center;
    color: var(--colorAccent);
    background: #fffa;
    font-weight: 600;
    font-size: 1.25rem;
    backdrop-filter: blur(4px);
    width: 100%;
    padding: 0.5rem;
}

@media (width > 600px) {
	.imgs1 a:hover img,
	.imgs2 a:hover img,
	.imgs3 a:hover img,
	.imgs4 a:hover img {
		scale: 1.1;
	}
}

.imagehtml.border {
    border: 1px solid var(--colorAccent);
}

.imagehtml {
    width: var(--contentWidth);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.htmlimagehtml {
    width: var(--contentWidth);
    margin-inline: auto;
	display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
	@media (width > 768px) {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

section.form table {
    min-width: 50%;
    margin-inline: auto;
	margin-bottom: 2rem;
}

section.form input[type="text"],
section.form input[type="email"],
section.form input[type="tel"],
section.form textarea {
    padding: 0.5rem 1rem;
    width: 100%;
	font-size: 1rem;
	border-radius: 0.25rem;
	border: 1px solid #8888;
	margin-bottom: 0.5rem;
}

section.form textarea {
	min-height: 5rem;
	overflow: clip;
	field-sizing: content;
}

/* section.form button[type="submit"]:hover { */
	/* cursor: pointer; */
	/* filter: brightness(0.75); */
}

section.form label {
	display: block;
	padding-block: 0.25rem;
}

lightbox-image:defined {
    display: block;
    cursor: zoom-in;
	/* z-index: -1; */
}

dialog {
	--_gutter: 1rem;
	@media (width > 600px) {
		--_gutter: 2rem;
	}
	outline: unset;
	border: unset;
	background: unset;
	max-height: 100vh;
	cursor: zoom-out;

	&::-webkit-backdrop {
		background: #000;
		opacity: 0.75;
	}

	&::backdrop {
		background: #000;
		opacity: 0.75;
	}

	form {
		position: absolute;
		opacity: 0;
	}

	img {
		max-height: calc(100vh - var(--_gutter) * 2);
		width: 100%;
        object-fit: contain;
	}
}

::view-transition-group(active-lightbox-image) {
  -webkit-animation-duration: 200ms;
          animation-duration: 200ms;
  -webkit-animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
          animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}





footer {
    display: flex;
    background: #eee;
    justify-content: center;
    padding: 0.25rem;
}

.footercontent,
.footercontent a {
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
	text-decoration: none;
}

.footercontent a:hover {
	text-decoration: underline;
}