/* Oregon Schools Together. Look and feel based on Solid State by HTML5 UP. */

:root {
	--bg: #2e3141;
	--section: #4c5c96;
	--text: rgba(255, 255, 255, 0.75);
	--heading: #ffffff;
	--line: rgba(255, 255, 255, 0.15);
	--field: rgba(255, 255, 255, 0.05);
	--success: #b8f2d2;
	--error: #ffc3c3;
	--angle: 6vw;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 300 1.125rem/1.75 "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
}

h1, h2, label, legend, button {
	font-family: Raleway, system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--heading);
}

a { color: inherit; border-bottom: dotted 1px rgba(255, 255, 255, 0.5); text-decoration: none; }
a:hover { border-bottom-color: transparent; }

:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.inner { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }

/* Photo banner with an angled bottom edge, like Solid State's */
#banner {
	position: relative;
	padding: 9rem 0 calc(6rem + var(--angle));
	background: linear-gradient(rgba(46, 49, 65, 0.55), rgba(46, 49, 65, 0.55)), url("../../images/hero.jpg") center / cover no-repeat;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--angle)), 0 100%);
	margin-bottom: calc(-1 * var(--angle));
	z-index: 1;
}
	#banner h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.2; margin: 0 0 1rem; }
	#banner p { font-size: 1.25rem; margin: 0; max-width: 34rem; }

/* Signup section (replaces Solid State's blue feature section) */
#signup {
	background: var(--section);
	padding: calc(4rem + var(--angle)) 0 5rem;
}
	#signup h2 {
		font-size: 1.25rem; line-height: 1.4;
		margin: 0 0 1.25rem; padding-bottom: 1.25rem;
		border-bottom: solid 2px var(--line);
	}
	#signup .intro { margin: 0 0 2.5rem; }

/* Form, styled like Solid State's "Get in touch" form */
#signup-form { max-width: 28rem; }
	.field { margin: 0 0 1.75rem; border: 0; padding: 0; }
	label, legend { display: block; font-size: 0.8rem; font-weight: 700; margin: 0 0 0.75rem; padding: 0; }
	legend span { color: var(--text); font-weight: 600; text-transform: none; letter-spacing: 0; }

	input[type="email"] {
		width: 100%; height: 3rem; padding: 0 1rem;
		font: inherit; font-weight: 400; color: #fff;
		background: var(--field);
		border: solid 2px var(--line);
		border-radius: 5px;
	}
	input[type="email"]:focus { border-color: rgba(255, 255, 255, 0.6); outline: none; }

	/* Radio buttons as Solid State-style boxes */
	.choices { display: grid; gap: 0.75rem; }
	.choices input { position: absolute; opacity: 0; }
	.choices label {
		position: relative; display: inline-block; margin: 0; padding-left: 2.25rem;
		font: 400 1.05rem/1.6 "Source Sans 3", "Source Sans Pro", sans-serif;
		text-transform: none; letter-spacing: 0; color: var(--text); cursor: pointer;
	}
	.choices label:before {
		content: ""; position: absolute; left: 0; top: 0.15rem;
		width: 1.35rem; height: 1.35rem;
		background: var(--field); border: solid 2px var(--line); border-radius: 50%;
	}
	.choices input:checked + label { color: #fff; }
	.choices input:checked + label:before { background: #fff; box-shadow: inset 0 0 0 4px var(--section); border-color: #fff; }
	.choices input:focus-visible + label:before { outline: 2px solid #fff; outline-offset: 2px; }

	button {
		height: 3.25rem; padding: 0 2.25rem;
		font-size: 0.8rem; font-weight: 700;
		background: transparent;
		border: solid 2px var(--line);
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.2s;
	}
	button:hover { background: rgba(255, 255, 255, 0.075); }
	button:disabled { opacity: 0.5; cursor: progress; }

	#status { margin: 1.25rem 0 0; font-weight: 400; }
	#status:empty { display: none; }
	#status.success { color: var(--success); font-size: 1.15rem; margin: 0; }
	#status.failure { color: var(--error); }

.hp { position: absolute; left: -9999px; }

/* Footer */
#footer { padding: 3rem 0 4rem; font-size: 0.95rem; }
	#footer p { margin: 0 0 0.75rem; }
	#footer .disclaimer { font-size: 0.85rem; padding-top: 0.75rem; border-top: solid 1px var(--line); }
	#footer .credit { font-size: 0.85rem; opacity: 0.7; }

@media (max-width: 480px) {
	#banner { padding-top: 6rem; }
	#banner p { font-size: 1.1rem; }
	button { width: 100%; }
}