/* Project overrides on top of the vendored "Landed" stylesheet.
 *
 * Kept in a separate file, loaded after assets/css/main.css, so that
 * static/landing/assets/ stays a clean copy of the template and can be
 * re-pulled without untangling our changes from theirs.
 */

/* Landed's banner is a full viewport tall, which is most of the reason the
 * page scrolled forever. It only carries a headline, two lines and a button,
 * so it does not need the whole screen. Both rules matter: min-height sizes
 * the section, and the :before pseudo-element is what vertically centres the
 * content against a 100vh strut.
 */
#banner {
	min-height: 34em;
}

#banner:before {
	height: 34em;
}

@media screen and (max-width: 736px) {
	#banner,
	#banner:before {
		min-height: 30em;
		height: 30em;
	}
}

/* Label for the one input on the page. The design has no room for a visible
 * label, but "placeholder as label" leaves nothing for a screen reader once
 * the field has content in it.
 */
.landing-visually-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* The template sets outline: 0 globally and marks focus by moving a 1px border
 * from 30% to 50% white. On the pink panel that is invisible, and it is the
 * only interactive field on the page.
 */
#signup input[type="email"]:focus-visible,
#signup input[type="submit"]:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Landed's pink is #e44c65. White body text on it is 3.8:1, under the 4.5:1
 * AA floor, and the validation error inherits that. Darkening this one panel
 * to #c9304a takes white text to 5.2:1 and, because the primary button is
 * white with the panel colour as its label, fixes the button label too.
 */
#signup {
	background: #c9304a;
}

#signup p {
	color: #ffffff;
}

#signup input[type="submit"].primary {
	color: #c9304a !important;
}

.landing-error {
	font-weight: 700;
}

/* Signup confirmation. This has to be impossible to miss: the whole point of
 * the page is the one action a visitor can take, and "did that work?" is the
 * worst thing for them to be left wondering.
 */
.landing-confirmation {
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid #ffffff;
	border-radius: 0.35em;
	color: #ffffff;
	font-size: 1.1em;
	margin: 0 auto 2.5em auto;
	max-width: 34em;
	padding: 1.1em 1.4em;
}

.landing-confirmation .icon {
	margin-right: 0.5em;
}

/* Example photographs. A fixed aspect keeps the four tidy on one row however
 * the source images were framed.
 */
.landing-examples .image.fit img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.35em;
}

.landing-examples h3 {
	margin: 0.8em 0 0.4em 0;
}

.landing-examples p {
	font-size: 0.95em;
}

/* The "why a phone call" band is one paragraph and does not need the 6em of
 * padding a full Landed section carries.
 */
.landing-tight {
	padding: 4em 0 3em 0;
	text-align: center;
}

.landing-tight p {
	margin: 0 auto;
	max-width: 42em;
}