/* OVERRIDE Bootstrap */
.btn-public {
    border-radius: 50rem !important;
    padding: 1rem 1.5rem !important;
    font-weight: bold;
}

/* OVERRIDE base.html */
#content {
	/*may not be needed*/
	overflow-x: hidden;
}
#footer {
	color: var(--color-light);
	justify-items: center;
	background: var(--color-background);
}
#footer-bottom-links {
	visibility: hidden;
	height: 0;
	line-height: 0;
}

/* PUBLIC FOOTER */
#public-footer {
	padding: var(--content-padding);

	display: grid;
	grid-template-areas:
			"gears-app about-us contact-us"
			"newsletter newsletter newsletter";
	grid-column-gap: 2em;
	grid-row-gap: 2em;
	justify-content: center;

	background: var(--color-background);
	color: var(--color-light);
}
#public-footer i {
	color: var(--light);
}
#footer-gears-app {
	grid-area: gears-app;
}
#footer-about-us {
	grid-area: about-us;
}
#footer-contact-us {
	grid-area: contact-us;
}
.footer-link {
	display: grid;
	grid-template-columns: 1.5em 1fr;
	grid-column-gap: .5em;
	align-items: center;

	padding: .2em 0;
	font-size: .8em;
	color: var(--light);
}
.footer-link:hover {
	color: lightskyblue;
	text-decoration: none;
}
.footer-link .fab, .footer-link .fas {
	font-size: 1.5em;
}
.footer-link img {
	height: 1.5em;  /* required for Safari */
}
#newsletter {
	grid-area: newsletter;

	/*centers flash messages*/
	/*display: grid;*/
	/*justify-content: center;*/
}
#newsletter-form {
	display: grid;
	grid-template-columns: 1fr auto;
	justify-content: center;
	grid-column-gap: .5em;
}
#newsletter .form-control:focus {
	border-color: lightskyblue;
	box-shadow: 0 0 2px 3px rgba(135,206,250, .8);
}

@media only screen and (min-width: 961px) {
	/* OVERRIDE base.html */
	#footer {
		justify-items: right;
		padding-right: 3em;
		padding-top: 0;
	}

	/* PUBLIC FOOTER */
	#public-footer {
		grid-template-areas: "gears-app about-us contact-us newsletter";
		grid-template-columns: auto auto auto 1fr;
		grid-gap: 4em;

		padding: 1.5em 3em;
	}
	#newsletter {
		justify-self: right;
	}
	#newsletter-form {
		display: grid;
		grid-auto-flow: column;
		grid-gap: .5em;
	}
}