@charset "UTF-8";
@import url(/fonts/roboto.css);

body {
	--col-accent: #22dcce;
	--col-gray: #888;
	margin: 0;
	font-family: "roboto", sans-serif;
	background-color: #004e6d;
	color: white;
}

h1, h2, h3, h4 { margin: 0; }

body>header {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	width: 100%;
	font-size: min(2vw, 1em);
	background-color: #003A4C;
	overflow: hidden;
	
	> div {
		display: flex;
		align-items: center;
		padding: 1em 0;
		box-sizing: border-box;
		z-index: 1;
		filter: drop-shadow(2px 4px 36px #003A4C);
	}

	> div:nth-child(1) {
		flex: 1 0 14em;
		justify-content: flex-end;
		padding-left: min(1vw, 4em);
		padding-right: 7em;
		background-image: radial-gradient(circle farthest-corner at 0% -10%, var(--col-accent) calc(100% - 5em), transparent calc(100% - 5em + 2px));
		
		img { height: 3.6em; }	
	}

	> div:nth-child(2) {
		flex: 0 1 85em;
		flex-basis: 78em;
		
		h1 { margin: 0.5em 0; padding: 0; font-size: 2.2em; font-weight: 700; }
	}

	> div:last-child {
		flex: 1 0 14em;
		padding-left: 1em;
		padding-right: min(1vw, 2em);

		img {
			height: 2.4em;
		}

	}

}

body>nav {
	max-width: 113em;
	margin: 1em auto;

	fieldset {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.3rem;
		width: 11rem;
		max-width: 28vw;
		margin: 0;
		padding: 0;
		border: none;
		font-size: 1.5em;
		box-sizing: border-box;
	}
	
	label {
		text-transform: uppercase;
		cursor: pointer;
	}
	
	input {
		display: none;
	}

}

body>main {
	position: relative;
	display: grid;
	gap: 0 2em;
	grid-auto-flow: column;
	grid-template-columns: auto auto;
	justify-content: start;
	box-sizing: border-box;
	width: 100%;
	max-width: 94em;
	margin: 1em auto;
	padding: 0 4.5em;
	
	p { margin: 0 0 1em; font-weight: 300; }
	a { font-size: 1em; font-weight: inherit; color: inherit; text-decoration: inherit; }
	button { display: inline-flex; align-items: center; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; }
	
	> *, section > * { grid-column: 1/-2; }
	> section { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; }
}

section#heading {
	align-items: end;

	img { grid-column: 2; grid-row: span 10; height: 14em; }
	h2 { margin: 0 0 0.5em; font-size: 2em; font-weight: 900; line-height: 1.2em; color: var(--col-accent); text-transform: uppercase; }
	p:last-child { margin-bottom: 4em; }
}

section#projects {
	& > ul:not(:has(+ form[action=""])) { height: 0; visibility: hidden; overflow: hidden; }
	& > form[action=""] { display: none; }
}

section#projects>ul {
	display: grid;
	grid-template-columns: auto max-content auto;
	justify-content: start;
	gap: 0.2em 2em;
	margin: 0;
	padding: 0;
	font-weight: 400;
	list-style: none;

	li { grid-column: 1/-1; display: grid; grid-template-columns: subgrid; align-items: center; 
		padding: 0.3em; border-radius: 0.5em; border-width: 1px; border-style: dashed; }
	li.mark { border-color: #fff2; }
	li > div:nth-child(1) { margin-left: 0.7em; }
	li > div:nth-child(2) { font-weight: 700; }
	button.btn { 
		display: flex; align-items: center; gap: 0.5em; 
		padding: 0.3em 1em; border-radius: 0.5em; 
		color: black; background: var(--col-accent); 

		&.received { background: var(--col-gray); }
		svg { width: 1.4em; height: 1.4em; fill: #fff; transform: none; transition: transform 0.1s ease-out; }
		&:where(:focus-visible, :hover) svg path + path { transform: translate(50%, 50%) scale(1.4) translate(-50%, -50%); }
		&:not(.received) .received,
		&.received .requested { display: none; }
	}
}

section#projects>form {
	grid-column: 1/-1;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 1em;
	padding-bottom: 1em;
	color: black;
	background: white;

	& > * { grid-column: 1/-1; }
	nav { display: flex; align-items: center; margin-top: -1em; color: var(--col-accent); }
	nav > * { font-size: 0.8em; }
	p { font-weight: 400; }
	div.row { margin: 0.5em 3em; }
	div.row.hide { height: 0; visibility: hidden; overflow: hidden; margin-top: 0; margin-bottom: 0; }
	header + div.row { display: grid; grid-template-columns: subgrid; justify-items: start; }
	div.row[data-input] { grid-column: 2; max-width: 30em; margin-left: 0; }
	div.row[data-input="Non-PO"] { display: grid; grid-template-columns: auto 1fr; gap: 0.5em 1em; }
	fieldset, label { display: contents; }
	legend { grid-column: 1/-1; font-weight: 700; }
	
	nav a.back {
		display: flex; align-items: center; gap: 0.5em;

		&::before {
			content: "";
			display: inline-block;
			width: 0.3em;
			height: 0.3em;
			border-width: 0.2em;
			border-color: currentColor;
			border-style: solid none none solid;
			transform: translateX(0.3em) rotate(-45deg);
		}
	}

	header h3 {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 0.2em 1em;
		padding: 1em 3em;
		font-size: 1em;
		background-color: var(--col-accent);

		span { font-size: 1.2em; }
		span:nth-child(1), 
		span:nth-child(2) {
			grid-column: 1/-1;
			font-size: 0.7em;
			color: #147c72;
		}
	}	
	
	button.btn { 
		justify-self: flex-start;
		display: flex; align-items: center; gap: 0.5em;
		padding: 0.3em 1em; border-radius: 0.5em; 
		color: black; background: var(--col-accent); 

		&:disabled { background: var(--col-gray); }
	}

	div.box {
		display: grid; 
		grid-template-columns: 1fr auto;
		gap: 0 0.5em;
		padding: 2em;
		border: 0.2em solid var(--col-accent);
		border-radius: 0.5em;
		
		p { grid-column: 1/-1; gap: 1em; }
		input { padding: 0.2em 0.4em; border: 1px solid #ddd; background-color: #eee; }
	}

}

section#ending { margin: 2em 0; }

section#faq {
	align-items: center;
	margin: 2em 0;

	h2 { font-size: 1.5em; font-weight: 300; color: var(--col-accent); }

	ul {
		display: flex;
		flex-direction: column;
		gap: 0.2em;
		margin: 0.5em 0;
		padding: 0;
		list-style: none;

		li { display: contents; }
		details { width: 45em; max-width: 100%; background: rgba(255, 255, 255, 0.11); }
		details > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-in-out 0.1s; }
		details > div > div { overflow: hidden; }
		details[open] > div { grid-template-rows: 1fr; }
		details[open].closing > div { grid-template-rows: 0fr; }
		details :is(summary, article) { padding: 1em 1.5em; }
		details summary { position: relative; list-style-type: none; cursor: pointer; }
		details summary::after { 
			content: "";
			position: absolute; top: 50%; right: 1em; width: 0.5em; height: 0.5em;
			border-width: 0.2em; border-color: white; border-style: solid solid none none;
			transform: translateY(-50%) scaleY(1) rotate(135deg);
			transition: transform 0.1s ease-in-out;
		}
		details[open] summary::after { transform: translateY(-50%) scaleY(-1) rotate(135deg); }
		
	}
	
	aside#contact {
		grid-column: 2;
		grid-row: span 20;
		padding: 4em 2em 2em;
		border-radius: 2em;
		font-size: 0.9em;
		color: black;
		font-weight: 900;
		background: var(--col-accent);
		transform: translateY(-1.5em) rotate(10deg);

		p { font-weight: inherit; }
		a img { margin: 1em 0 0; height: 2em; }
	}
	
}