/* Contact */
.form, section {
	background: var(--lwhite);
	margin: 1rem 0 2rem;
	padding: 1em 1ex;
	box-shadow: 1ex 1em var(--dblack);
}

/* Contact form should look like a business enquiry form sticking out of an open envelope.
 * gguh, this is getting confusing... Make it look like so.
 *  ________________
 *  | CONTACT FORM |
 *  | name:  _____ |
 *  | email: _____ |
 *  | msg:________ |
 *  | |          | |
 *  | |__________| |
 *  ________________
 * /________________\
 * |XX              |
 * |XX  [SUBMIT]    |
 * |                |
 * |________________|
 */
#contactform {
	text-align: center;
	overflow: clip;
	padding: 1em 1ex;
	transition: .25s;
	.mandatory.notice {
		color: red;
	}
}


/* gahusgasdg finding it hard to friggin' THINK... */
#contactform .fields {
	/* negative margin so that it's "behind" the flap */
	position: relative;
	margin: 1em 1em -5em;
	padding-bottom: 5em;
	textarea {
		width: 95%;
		max-width: 95%;
		height: 24em;
	}
	transition: .25s;
}


/* Makes a div look like a stamped envelope, like this:
 * ________________________
 * | ====                 |
 * |#....#                |
 * |#....#                |
 * | ====                 |
 * |  text might go here  |
 * |                      |
 * |                      |
 * |______________________|
 * a
 */
.envelope {
	background: var(--lwhite);
	text-align: center;
	border: outset .5rem;
	box-shadow: 1ex 1em var(--dblack);
	/* PERFECTION */
	outline: double var(--lblue) .5rem;
	outline-offset: -1rem;
	/* stamp? */
	&::before {
		position: absolute;
		display: block;
		content: "";
		border: ridge var(--dwhite) .2em;
		background: var(--dred);
		width: 1em;
		height: 1em;
		margin: 1ex;
	}
}

.main.heading.envelope {
	padding: 0;
	border-width: .25rem;
	outline-offset: -.75rem;

	&::before {
		font-size: 1.25em;
	}

	h1 {
		position: relative;
		z-index: 1;
		margin: 1em;
	}
}

/* okay sCREW IT we'll make a bunch of EMPTY DIVS AND LIVE WITH IT.
Just what we have to do. Sit tight. */
#submitenvelopeflap {
	background: var(--dwhite);
	position: relative;
	display: block;
	/* this is ALL magic numbers */
	height: 4em;
	clip-path: polygon(0% 100%, 100% 100%, 90% 0%, 10% 0%);
	transition: .25s;
}

#submitenvelope {
	height: 10em;
	font-size: 2em;
	box-shadow: 0.5ex 0.5em var(--dblack);
	position: relative;
	z-index: 1;
	transition: 0.25s;
	&::before {
		content: "POST PAID";
		padding: .5ex;
		background: var(--lwhite);
		color: var(--dred);
		width: min-content;
		height: initial;
		font-weight: bold;
		border: solid var(--dred) .25ex;
	}
}

/* test??? */
/* not really right at all but it happens fast so whatever */
/*
#submitenvelopeflap:hover {
	height: 0;
}
*/

.submit.button {
	position: relative;
	/* centering a div without flex is absolutely goofy */
	top: 50%;
	transform: translateY(-50%);
	margin: auto;
	font-variant: small-caps;
	border: outset 0.5em var(--lred);
}

/* BASICALLY keyframes... need to trigger these (or something similar...) JS when the "submit" button is hit. */

#testanimation4:checked ~ #contactfeedback {
	visibility: visible;
	bottom: 50%;
	transform: translateY(50%);
}

#testanimation4:checked ~ #contactform {
	display: none;
}

/* (should be) only revealed by JS */
#contactfeedback {
	position: fixed;
	/*display: flex;*/
	display: block;
	flex-direction: column;
	visibility: hidden;
	transition: .25s;
	bottom: -100%;
	padding: 1em;

	p {
		margin: 0 0 1ex;
	}

	/* Let the text move around the stamp. */
	&::before {
		font-size: 2em;
		margin: .1em;
		position: static;
		float: left;
	}

	/* i'm just guessing */
	/*max-width: fit-content;*/
	max-width: 32em;
	/*min-height: 20em;*/
}

/* TODO (wip)*/
#submitmsg {
	display: block;
	width: 50ex;
	margin: auto;
	padding: 1em;
	color: var(--dgreen);

	&::before {
		font-size: 2em;
		margin: .1em;
		position: static;
		float: left;
	}

	animation: .5s slideUp;
}

.dismiss {
	display: block;
	margin: 1em;
}

@keyframes slideUp {
	0% {
		transform: translateY(100vh);
	}
	100% {
		transform: translateY(0);
	}
}