/*
Theme Name: LP Theme Forms
Theme URI: https://literacyplanet.com
Author: Literacy Planet
*/

/* GENERAL
################################################################################### */
*:focus {
	outline: none;
}

input, select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.form-panel {
	background-color: var(--light-blue-lighter-x2);
	border-radius: 1rem;
}

@media (max-width: 499px) {
	.form-panel {
		padding: calc(var(--layout-unit)*1.5);
	}
}

@media (min-width: 500px) {
	.form-panel {
		padding: calc(var(--layout-unit)*2);
	}
}

/* BUTTONS
################################################################################### */
.btn,
input[type="button"],
input[type="submit"],
button,
.posts-navigation .nav-links a {
	position: relative;
	display: inline-block;
	padding: 0.6em 1.5em;
	font-size: 1.1rem;
	line-height: 1.1em;
	text-align: center;
	font-family: inherit;
	font-weight: 900;
	text-transform: uppercase;
	text-decoration: none;
	overflow: hidden;
	vertical-align: bottom;
	border-radius: 10rem;
	transition: filter 200ms;
	cursor: pointer;
	color: var(--white);
	background-color: var(--royal-blue);
	box-shadow: 0.2rem 0.3rem 0 rgba(0,0,0,0.15);
	border-width: 2px;
	border-style: solid;
	border-color: var(--royal-blue);
}

.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover,
.posts-navigation .nav-links a:hover {
	filter: brightness(120%);
}

.btn svg,
.posts-navigation .nav-links a svg {
	opacity: 0.7;
}

.btn svg:first-child,
.posts-navigation .nav-links a svg:first-child {
	margin-right: 0.3em;
}

.btn svg:last-child,
.posts-navigation .nav-links a svg:last-child {
	margin-left: 0.3em;
}

.btn.btn-md {
	font-size: 1.2rem;
	line-height: 1.2em;
	padding: 0.8em 1.6em;
}

.btn.btn-block {
	display: block;
}

.btn.btn-white {
	background-color: var(--white);
	color: var(--royal-blue);
	box-shadow: 0.2rem 0.3rem 0 rgba(0,0,0,0.1);
}

.btn.btn-white:hover {
	filter: brightness(140%);
}

.btn.btn-white-2 {
	background-color: var(--white);
	color: var(--dark-blue);
	border-color: var(--grey);
	box-shadow: 0.2rem 0.3rem 0 rgba(0,0,0,0.07);
	transition: color 200ms, border-color 200ms;
}

.btn.btn-white-2:hover {
	filter: unset;
	color: var(--blue);
	border-color: var(--light-blue);
}

.btn.btn-green {
	background-color: var(--green-darker-x1);
	border-color: var(--green-darker-x1);
}

.btn.btn-green:hover {
	filter: brightness(107%);
}

.btn.btn-orange {
	background-color: var(--orange);
	border-color: var(--orange);
	box-shadow: 0.2rem 0.3rem 0 rgba(0,0,0,0.1);
}

.btn.btn-orange:hover {

	filter: brightness(110%);
}

.btn.btn-blue {
	background-color: var(--blue);
	border-color: var(--blue);
	box-shadow: 0.2rem 0.3rem 0 rgba(0,0,0,0.1);
}

.btn.btn-blue:hover {
	filter: brightness(110%);
}

.btn.btn-purple {
	background-color: var(--purple);
	border-color: var(--purple);
	box-shadow: 0.2rem 0.3rem 0 rgba(0,0,0,0.1);
}

.btn.btn-purple:hover {
	filter: brightness(110%);
}

/* TEXT FIELDS
################################################################################### */
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea {
	display: block;
	background-color: white;
	border: none;
	width: 100%;
	padding: 1rem;
	vertical-align: bottom;
	font-size: 1.2rem;
	line-height: 1.1em;
	color: var(--dark-blue);
	font-family: inherit;
	font-weight: 500;
	opacity: 1;
	box-shadow: 0.3rem 0.3rem 0 rgba(0,0,50,0.15);
	transition: box-shadow 200ms;
}

textarea {
	padding: 1rem;
	line-height: 1.4em;
	font-size: 1rem;
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="tel"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
textarea:hover { 
	box-shadow: 0.3rem 0.3rem 0 rgba(0,0,50,0.25);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus { 
	box-shadow: 0.3rem 0.3rem 0 rgba(0,0,50,0.25);
}

input[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}


input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	background-color: white!important;
  transition: background-color 5s ease-in-out 9000s;
}

.text-field-lg {
	height: 3.5rem;
	font-size: 1.4rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

/* SELECT
################################################################################### */
/* class applies to select element itself, not a wrapper element */
select {
  display: block;
  font-family: inherit;
	padding: 1rem;
	vertical-align: bottom;
	font-size: 1.2rem;
	line-height: 1.1em;
	width: 100%;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  margin: 0;
  border: none;
	box-shadow: 0.3rem 0.3rem 0 rgba(0,0,50,0.15);
  border-radius: 0;
  background-color: #fff;
  cursor: pointer;
  background-image: url(../svg/sort-solid.svg);
  background-position: right 0.66rem center;
  background-repeat: no-repeat;
  background-size: 0.8rem auto;
  
}
/* Hide arrow icon in IE browsers */
select::-ms-expand {
  display: none;
}

/* Hover style */
select:hover {
	box-shadow: 0.3rem 0.3rem 0 rgba(0,0,50,0.25);
}

/* CHECKBOXES
################################################################################### */

input[type="checkbox"] {
	position: absolute;
	opacity: 0;
}

input[type="checkbox"] + label {
	position: relative;
	display: inline-block;
	margin-left:0!important;
	padding-left:1.8rem;
	cursor: pointer;
	color: var(--dark-blue);
}

input[type="checkbox"] + label:before {
	display: block;
	position: absolute;
	background-color: white;
	left:0;
	top:0;
	width:1.2rem;
	height:1.2rem;
	content: " ";
	border: none;
	overflow: hidden;
	box-shadow: 0.2rem 0.2rem 0 rgba(0,0,50,0.15);
	border-radius: 3px;
}

input[type="checkbox"] + label:hover:before {
	box-shadow: 0.2rem 0.2rem 0 rgba(0,0,50,0.25);
}

input[type="checkbox"] + label:after {
	display: block;
	position: absolute;
	left: 0.1rem;
	top: -0.1rem;
	width: 1.4rem;
	height: 1.4rem;
	content: url(../svg/check-royal-blue.svg);
	opacity: 0;
}

input[type="checkbox"]:checked + label:after {
	opacity: 1;
}

/* RADIO BUTTONS
################################################################################### */
input[type="radio"] {
	position: absolute;
	opacity: 0;
}

input[type="radio"] + label {
	position: relative;
	display: inline-block;
	margin-left:0!important;
	padding-left:1.8rem;
	cursor: pointer;
	color: var(--dark-blue);
}

input[type="radio"] + label:before {
	display: block;
	position: absolute;
	background-color: white;
	left: 0;
	top: 0;
	width: 1.2rem;
	height: 1.2rem;
	content: " ";
	border: none;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0,0,50,0.15);
	border-radius: 4rem;
}

input[type="radio"] + label:hover:before {
	box-shadow: 0 0 0 1px rgba(0,0,50,0.3);
}

input[type="radio"] + label:after {
	display: block;
	position: absolute;
	left: 0.2rem;
	top: 0.2rem;
	width: 0.8rem;
	height: 0.8rem;
	content: " ";
	opacity: 0;
	background-color: var(--royal-blue);
	border-radius: 4rem;
}

input[type="radio"]:checked + label:before {
	box-shadow: 0 0 0 1px var(--royal-blue);
}

input[type="radio"]:checked + label:after {
	opacity: 1;
}

/* Search Form
################################################################################### */

.search-form {
	display: flex;
	margin-left: -0.2rem;
	margin-right: -0.2rem;
}

.search-form .search-submit {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
	flex-grow: 0;
	box-shadow: none;
	padding: 0 1.1rem 0 1rem;
}

.search-form > label { 
	flex-grow: 1;
}

.search-form .search-field {
	border-radius: 10rem;
	border-bottom-right-radius: 0;
	border-top-right-radius: 0;
	border: 2px solid rgba(0,0,0,0.2);
	border-right: none;
	box-shadow: inset 0 0.3rem 0.3rem rgba(0,0,0,0.1);
}

.search-form .search-field:hover,
.search-form .search-field:focus {
	box-shadow: inset 0 0.3rem 0.3rem rgba(0,0,0,0.1);
}

.search-form .screen-reader-text {
	display: none;
}

/* NINJA FORMS
################################################################################### */

/* Layout */
.lp-form .nf-form-title {
	padding-bottom: 2rem;
	display: block;
}

.lp-form .nf-field-container {
	position: relative;
	margin-bottom: 1rem;
}

.lp-form .nf-field-container .nf-after-field {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
}

.lp-form .nf-input-limit {
	margin-top: 0;
}

.lp-form .nf-after-form-content {
	margin-top: 1rem;
}

/* Checkbox List */

.lp-form .list-checkbox-wrap {
	margin: 1rem 0;
}

.lp-form .list-checkbox-wrap .nf-field-element {
	margin-top: 0.5rem;
}

.lp-form .list-checkbox-wrap .nf-field-element li:last-child {
	margin-bottom: 0!important;
}

.lp-form .list-checkbox-wrap .nf-field-element li label {
	display: inline-block;
}

/* Text, labels, etc */

.lp-form .nf-form-fields-required {
	display: none;
}

.lp-form .ninja-forms-req-symbol {
	position: relative;
	display: inline-block;
	transform: translateY(-0.2rem);
	font-weight: 400;
}
.lp-form label {
	font-size: 1.1rem;
	line-height: 1.1em;
	color: var(--dark-blue);
	font-weight: 700;
}

.lp-form .label-above .nf-field-label {
	margin: 0;
}

.lp-form .label-above .nf-field-label label {
	display: block;
	padding-bottom:0.4rem;
}

.lp-form .nf-field-description {
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	line-height: 1.4em;
}

/* Submit */

.lp-form .submit-container {
	margin: 2.5rem 0 0;
}

.lp-form .submit-container input {
	font-size: 1.2rem;
	line-height: 1.2em;
	padding: 0.8em 1.6em;
}

/* Errors */
.lp-form .nf-error .ninja-forms-field {
	border:none;
}

.lp-form .nf-error-msg { /* Error general styles */
	background-color: var(--red);
	border-radius: 0.5em;
}

.lp-form .nf-after-field .nf-error-msg { /* Inline error tooltip */
	display: block;
	position: absolute;
	top: 0rem;
	right: -0.3rem;
	margin: 0;
	color:#fff;
	font-size: 1rem;
	line-height: 1.4em;
	pointer-events: none;
	padding: 7px 12px;
	box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.2);
}

.lp-form .nf-after-field .nf-error-msg:before { /* Inline error tooptip tail */
	display: block;
	content: " ";
	background-color: inherit;
	height:10px;
	width: 10px;
	transform:rotate(45deg);
	position: absolute;
	bottom:-4px;
	left:15px;
}

.lp-form .nf-error-field-errors {
	color: white;
	padding: 0.5rem 0.5rem 0.5rem 2.5rem;
	margin-top: 0.5rem;
}

.lp-form .nf-error-field-errors:before {
	position: absolute;
	display: block;
	width: 1rem;
	height: 1rem;
	top: 0.6rem;
	left: 0.7rem;
	content: url(../svg/exclamation-triangle-solid.svg);
}	

/* MARKETO
################################################################################### */
.lp-form .mktoForm {
	padding: 0!important;
}

.lp-form .mktoForm hr {
	display: none;
}

.lp-form .mktoForm *:hover {
	filter: unset;
}

.lp-form .mktoForm input[type="text"],
.lp-form .mktoForm input[type="number"],
.lp-form .mktoForm input[type="tel"],
.lp-form .mktoForm input[type="email"],
.lp-form .mktoForm input[type="password"],
.lp-form .mktoForm input[type="search"],
.lp-form .mktoForm textarea,
.lp-form .mktoForm select.mktoField {
	background-color: white;
	border: none!important;
	box-shadow: 0.3rem 0.3rem 0 rgba(0,0,50,0.15)!important;
	border-radius: 0!important;
}