/**
 * Theme Name: WebdesignGalaxy dev theme 2
 * Author: Mark Gardner
 * Version: 0.0.6
 */

/*Inria Sans Bold Italic*/
@font-face {
	font-family: "Inria Sans";
	src: url("fonts/InriaSans-BoldItalic.ttf");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

/*Inria Sans Bold*/
@font-face {
	font-family: "Inria Sans";
	src: url("fonts/InriaSans-Bold.ttf");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/*Inria Sans Italic*/
@font-face {
	font-family: "Inria Sans";
	src: url("fonts/InriaSans-Italic.ttf");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/*Inria Sans Light Italic*/
@font-face {
	font-family: "Inria Sans";
	src: url("fonts/InriaSans-LightItalic.ttf");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

/*Inria Sans Light*/
@font-face {
	font-family: "Inria Sans";
	src: url("fonts/InriaSans-Light.ttf");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

/*Inria Sans Regular*/
@font-face {
	font-family: "Inria Sans";
	src: url("fonts/InriaSans-Regular.ttf");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}


body {
	margin: 0;
	padding: 0;
	font-family: "Inria Sans", sans-serif;
	font-weight: 700;

	#menu-checkbox {
		display: none
	}

	label[for="menu-checkbox"] {
		position: fixed;
		top: 0;
		margin-top: var(--wp-admin--admin-bar--height, 0);
		right: 0;
		padding: 0.5em;
		font-size: 2rem;
		transform: scaleY(1);
		transition: 0.3s all;

		@media screen and (width>800px) {
			display: none;
		}
	}

	&:has(#menu-checkbox:checked) {
		>label[for="menu-checkbox"] {
			transform: scaleY(0);
		}
	}

	--color: oklch(from var(--c1) 40% calc(c * 0.3) h);

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		color: var(--color);

		a {
			color: inherit;
			text-decoration-color: transparent;

			&:hover {
				text-decoration-color: currentColor;
			}
		}
	}

	h1 {
		text-align: center;
		margin-block: 1lh;
	}

	container-type: inline-size;
	--article-width: max(1024px, 70vw);
	--half-width: calc(var(--article-width) * 0.5);
	--margin: min(calc(var(--half-width) - 50vw), 0px);
	--margin: min(calc(var(--half-width) - 50cqw), 0px);


	mobile-only a:has(img.site-icon){
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.7);
		padding: 20px;
		margin-top: 10px;
		max-height: 33vw;
		aspect-ratio: 1/1;
	}

	menu {
		z-index: 2;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--c1);
		--background-color: var(--white, oklch(from var(--c3) 90% c h / 0.9));
		color: var(--color);
		font-weight: 700;

		li:has(a) {
			transition: filter 0.5s;
			filter: brightness(100%);
			border-radius: 16px;
			padding: 0 0.25em;
			&::after{
			    content: '';
			    position: absolute;
			    width: 100%;
			    height: 2px;
			    background-color: CurrentColor;
			    bottom: 0.1lh;
			    left: 0;
			    transform: scaleX(0);
			    transform-origin: bottom right;
			    transition: transform 0.25s ease-out;
			}

			&:hover {
				&::after{
				    transform: scaleX(1);
				    transform-origin: bottom left;
				}
			}
		}

		a {
			position: relative;
			color: inherit;
			text-decoration: none;
		}

		&,
		nav,
		ul {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 0 auto;
			padding: 0;
			transform: scaleX(0);
		}

		ul {
			list-style: none;
			transition: all 0.75s;
			font-size: 2rem;
			line-height: 2;

			li:last-child {
				background-color: var(--color);
				color: var(--background-color);
				padding-inline: 0.5em;
				&::after{
				    display: none;
				}
				&:hover{
				    filter: brightness(180%);
				}
			}
		}

		transition: all 0.5s;
		visibility: hidden;

		img {
			max-height: 200px;
			max-width: 200px;
			&:hover{
			    filter: opacity(0.8);
			}
		}

		@media screen and (width>800px) {
			position: sticky;
			top: var(--wp-admin--admin-bar--height, 0);
			visibility: visible;
			padding-inline: calc(-1 * var(--margin));
			box-sizing: border-box;
			height: auto;

			&,
			nav,
			ul {
				flex-direction: row;
				transform: none;
				gap: 0.5em;
				font-size: 1.3rem;
			}

			img {
				max-width: calc(120px + 2vw);
			}
		}
	}

	@media screen and (width<=800px) {
		&:has(#menu-checkbox:checked) {
			menu {

				&,
				nav,
				ul {
					transform: scaleX(100%);
					visibility: visible;
				}
			}
		}
	}

	background-color: var(--c1);

	main {
		max-width: var(--article-width);
		margin: auto;
		margin-block: 0;

		@media (width<=1024px) {
			padding: 1em;
			--mb-margin: calc(var(--margin) - 1em);
		}

		&:has(article:not(:only-of-type)) {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;

			@media (width<=800px) {
				justify-content: center;
			}
		}

		article {
			font-weight: 400;
			line-height: 1.6;

			&:not(:only-of-type) {
				border: 1px solid oklch(from var(--c1) 0.7 c h);
				border-top-width: 5px;
				background-color: oklch(from var(--c1) calc(1.075 * l) c h);
				padding: 20px;
				margin-bottom: 20px;
				display: flex;
				flex-wrap: wrap;
				gap: 0.5em;
				flex-direction: row;
				flex: 256px 0 1;
				align-content: flex-start;
				line-height: 1.25;

				h2 {
					transform: translateY(0);
					transition: all 0.3s;
				}

				a:has(img) {
					flex: 100% 1 1;
					order: -1;
					aspect-ratio: 4/3;
					overflow: hidden;

					img {
						object-fit: cover;
						filter: sepia(0.4);
						height: revert-layer;
					}
				}

				&:hover {
					background-color: oklch(from var(--c1) calc(1.1 * l) c h);

					h2 {
						transform: translateY(-0.2lh);
					}

					a img {
						filter: sepia(0);
					}
				}
			}

			img {
				max-width: min(var(--half-width), 100%);
				height: auto;
				float: right;
				margin-left: 1em;
				margin-bottom: 1em;
			}

			a {
				color: inherit;
				font-weight: 700;
				text-decoration: none;

				&:not(:has(img)):hover {
					border-bottom: 2px solid oklch(from CurrentColor l c h / 0.3);
				}
			}

			form {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				text-align: center;

				p {
					&:not(:has(input[type=submit], button[type=submit]), :first-of-type) {
						flex: max(50%, 30em) 1 1;
					}

					&:first-of-type,
					&:has(input[type=submit], button[type=submit]) {
						flex: 100% 1 1;
					}

					&:has(input[type=submit], button[type=submit]) {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					input,
					textarea,
					div.xdsoft_datetimepicker {
						width: calc(100% - 20px);
						margin: 0 10px;
						border-radius: 0.5lh;
					}

					input {
						height: 2lh;
						text-align: inherit;

						&[type="submit"] {
							width: 50%;
							cursor: pointer;
						}
					}
				}
			}

			p:empty {
				display: none;
			}

			&:after {
				content: " ";
				visibility: hidden;
				clear: both;
				display: block;
			}

			.column-set {
				column-row {
					display: flex;
					align-items: stretch;
					flex-wrap: wrap;

					&>* {
						flex: calc(50%) 1 1;
					}

					column-text,
					img {
						max-width: 50vw;
						object-fit: cover;
						margin: 0;

						&:first-child {
							margin-left: var(--mb-margin,var(--margin));
						}

						&:last-child {
							margin-right: var(--mb-margin,var(--margin));
						}
						&:only-child{
							max-width: 100vw;
						}
					}

					column-text {
						background: #ffffff;
						padding: 2rem;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						justify-content: center;
						font-weight: 400;
						font-size: calc(13px + .5vw);

						&:first-child {
							padding-left: calc(-1 * var(--margin));
						}

						&:last-child {
							padding-right: calc(-1 * var(--margin));
						}
					}

					@media (width <=800px) {
						flex-direction: column;

						img {
							order: -1;
							margin: 0 var(--mb-margin,var(--margin));
							max-width: 100vw;
						}

						column-text {

							&,
							&:first-child,
							&:last-child {
								padding: 1rem;
								margin: 0 var(--mb-margin,var(--margin));
								max-width: 100vw;
							}
						}
					}
				}
			}

			.column-set~br:has(~.column-set) {
				display: none;
			}
		}
	}

	footer {
		a {
			text-align: center;
			flex: 1 1 30%;
		}

		img {
			max-width: 300px;
		}

		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 2em;
		max-width:100%;
		margin-top: 3lh;

		nav {
			display: flex;
			align-items: center;
			flex: 1 1 30%;

			ul {
				display: flex;
				flex: 1 1 50%;
				padding: 0;
				flex-direction: column;
				line-height: 2;

				@media (width>=800px) {
					height: 75%;
				}

				justify-content: space-around;
				flex-wrap: wrap;
				margin: 0;
				list-style: inside;
				color: var(--dark, var(--c1));

				a {
					position: relative;
					color: inherit;
					text-decoration: none;
					padding: 0.25lh 0;
				}
			}

			a[class^="icon"] {
				color: inherit;
				text-decoration: none;
				font-size: 3rem;

				&:hover {
					color: oklch(from var(--c1) 0.5 c h);
				}
			}
		}

		--b3: var(--white, oklch(from var(--c3) calc(l - 0.5) c h));
		background: linear-gradient(to right,
			var(--b3),
			var(--b3),
			var(--b3),
			transparent),
		var(--footer-image, linear-gradient(white));
		padding: 2lh;

		@media (width<=800px){
		    padding-bottom: 4lh;
		}
	}

	img {
		max-width: 100%;
	}

	a:has(.site-icon) {
		display: block;
		max-width: 33vw;
		margin: 0 auto;
	}

	mobile-only {
		display: none;

		@media (width<=800px) {
			display: block;
			max-width: 90vw;
			margin: 0 auto;
		}
	}
}