/*
Theme Name: Liaison CAS
Theme URI: https://liaisonedu.com
Author: Liaison International / Tom Bartling
Author URI: https://liaisonedu.com
Description: Liaison CAS landing pages.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License:
License URI:
Text Domain: dtc
Tags:
*/

/* -------------- DEFAULTS & GENERAL 	-------------- */
:root {
	--font-primary: Raleway, Open Sans, sans-serif;
	--font-headings: Roboto, Open Sans, sans-serif;

	--color-default_text: #666666;
	--color-blue: #002f87;
	--color-green: #b9c600;
	--color-gold: #eba900;
	--color-orange: #d74323;
	--color-light_blue: #7ca7ad;
	--color-required: #990000;
	--color-gray: #dedede;

	--color-blue_transparent: #002f8799;


    /*      UPDATE THIS  */
    --btn-color-background: var(--color-green);
    --btn-color-text: #ffffff;

}

/* HTML element classes */

BODY, HTML {
	width: 100%;
	font-size: 16px;
	font-family: var(--font-primary);
	color: #000000;
	padding: 0;
	margin: 0;
	min-width: 390px;
}

IMG, IFRAME {
	max-width: 100%;
}

FORM, INPUT, TEXTAREA, SELECT, OPTION {
	width: 100%; 
	max-width: 100%;
	line-height: 200%;
}


INPUT[type='submit'] {
	width: auto;
}

/* width: 80%; causes admin form to not display */
.wp-admin FORM {  
	width: initial;
}

/* used with js function goToForm() to scroll to 1st input... selector needs to match js */
INPUT[type='text'] {
	scroll-margin-top: 60px;
}

INPUT[type="radio"],
INPUT[type="checkbox"],
INPUT[type="submit"] {
	width: auto;
}

/* overwriting bootstrap */
	B, STRONG {
		font-weight: 700;;
	}



A,
A:link,
A:active,
A:visited,
A:hover {
	font-weight: 700;
	/* color: var(--color-primary); */
}

A.cta-btn, 
A.cta-btn:link, 
A.cta-btn:active, 
A.cta-btn:visited, 
A.cta-btn:hover, 
.cta-btn, 
INPUT[type="submit"],
BUTTON {
    background-color: var(--btn-color-background);
    color: var(--btn-color-text); 
    cursor: pointer;
	display: inline-block;
	padding: 0.25rem 3.0rem;
	font-size: 1.0rem;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	border: solid var(--btn-color-background) 1px;
	border-radius: 20px;

	max-width: 100%;
	width: 200px;

	transition: color, 0.25s ease-out, border-color 0.2s ease-out;
}



INPUT[type="submit"]:hover,
A.cta-btn:hover, 
.cta-btn:hover, 
BUTTON:hover {
    color: var(--btn-color-background);
    background-color: var(--btn-color-text); 
}

INPUT[type="submit"] {
    color: var(--btn-color-text);
    background-color: var(--color-blue); 
	border: solid var(--color-blue) 1px;
}

INPUT[type="submit"]:hover {
    color: var(--color-blue);
    background-color: var(--btn-color-text); 
}


.h1, .h2, .h3, .h4, .h5, .h6, H1, H2, H3, H4, H5, H6 {
	font-weight: 400;
	text-rendering: optimizeLegibility;
	display: block;
	margin: 0 0 0.5rem 0;
	font-family: var(--font-headings);
	font-size: 2.75rem;
	/* 
    text-transform: uppercase;
	letter-spacing: .8px;
	line-height: 1.1rem; 
	*/
}

.h1, H1 {    font-size: 2.75rem;  }
.h2, H2 {    font-size: 2.0rem;  }
.h3, H3 {    font-size: 1.75rem;  }
.h4, H4 {    font-size: 1.50rem;  }


/* generic classes */
.bg-default_text { 
	background-color: var(--color-default_text); 
	color: #000000; 
}

.bg-blue { 
	background-color: var(--color-blue); 
	color: #ffffff; 
}

.bg-green { 
	background-color: var(--color-green); 
	color: #000000; 
}

.bg-gold { 
	background-color: var(--color-gold); 
	color: #000000; 
}

.bg-orange { 
	background-color: var(--color-orange); 
	color: #000000; 
}

.bg-light_blue { 
	background-color: var(--color-light_blue); 
	color: #000000; 
}

.bg-required { 
	background-color: var(--color-required); 
	color: #000000; 
}

.bg-gray { 
	background-color: var(--color-gray); 
	color: #000000; 
}




.copy-highlight {
	font-weight: 700;
}



/* --------------------------------------------------------- */
/* --------- Header row    */
.header-row {
	color: #ffffff;
}

.header-row IMG {
	max-width: 200px;
}

/*
.header-left,
.header-center,
.header-right {
	padding: 6px 0;
}

.header-left {
	text-align: center;
}

.header-center {
	text-align: center;
}

.header-right {
	text-align: right;
}

.header-br {
	display: inline;
}
*/

/* --------------------------------------------------------- */
/* --------- Hero row     */

.hero-row, 
.hero-grad-row {
	/* background-image: linear-gradient(to right, var(--color-blue_transparent) 30%, transparent 50%), url(images/hero-grad-2000x864.jpg); */
	background-image: url(images/hero-grad-2000x864.jpg);
	background-size: cover;
	background-position: top right;	
	color: #ffffff;
}

.hero-grad-row {
	/* background-position: -500px 0; */
}

.hero-business-row {
	background-image: url(images/hero-business-2000x864.jpg);
	/* background-position: -600px 0; */
}

.hero-engineering-row {
	background-image: url(images/hero-engineering-2000x864.jpg);
	/* background-position: -600px 0; */
}


.hero-title-section-svg {
	min-height: 300px;
	height: 100%;
	width: 100%;
	max-width: 65%; 
	position: relative;
}

.hero-grad-row .hero-title-section-svg {
	max-width: 55%; 
}

.hero-title-svg IMG {
	width: 100%;
	position: absolute;
	bottom: 1vh;
	right: 0;
}



/* --- Hero row - Thank You page     */
.hero-thank-you-row LI {
	margin-bottom: 1.4rem;
}

.hero-thank-you-row A, 
.hero-thank-you-row A:link, 
.hero-thank-you-row A:active, 
.hero-thank-you-row A:visited, 
.hero-thank-you-row A:hover {
	color: #ffffff;
	text-decoration: underline;
}



/* --------------------------------------------------------- */
/* --------- Program Benefits row     */
.program-benefits-blockquote-container {
	
}

.program-benefits-blockquote {
	font-weight: 700;
	margin: 20px;
	width: 300px;
	display: inline-block;
	margin: 0 50% 1.0rem 50%;
}


/* --------------------------------------------------------- */
/* --------- Fast Facts row     */

.fast-facts-row {
	font-size: 18px;
}

.fast-facts-row H2 {
	font-weight: 400;
	color: var(--color-blue);
}

.flex-row {
	display: flex;
	flex-wrap: wrap;
}

.flex-item {
	flex-basis: 100%;
	margin: 0 0 20px 0;
}

.flex-item-arrow {
	flex-basis: 100%;
	text-align: center;
	align-self: center;
}

.flex-item-arrow SVG {
	transform: rotate(90deg);
}

.fact-container-with-arrow,
.fact-container {
	color: var(--color-blue);
	background-color: #ffffff;
	border: solid var(--color-green) 2px;
	line-height: 100%;

	border-radius: 175px;
	width: 250px;
	height: 250px;
	font-size: 26px;

	display: flex;
	flex-wrap: wrap;
	align-content: center;
	margin: 0 auto;

}

.fact-container-with-arrow {
	background-color: var(--color-green);
	color: #ffffff;
	border: solid var(--color-blue) 2px;
	margin: 0 auto;
}

.fact-number {
	font-size: 3.0em;
	font-weight: 700;
	flex-basis: 100%;
	margin: 4px 0 12px 0;
}

.fact-container-with-arrow .fact-number {
	margin: 23px 0 15px 0;
}

.fact-text {
	font-size: 1.0em;
	flex-basis: 100%;
}

.fact-container DIV {
	flex-basis: 100%;
}
/* */



/* --------------------------------------------------------- */
/* --------- Footer row     */
.footer-row {
	padding: 10px 0;
	border-top: solid var(--color-green) 10px;
	/* min-height: 200px; */
}

.footer-address {
	font-size: 0.8rem;
	line-height: 150%;
}

.footer-logo {
	max-width: 200px;
	display: inline-block;
}

.footer-tagline {
	font-weight: 700;
}

.footer-row A:not(.cta-btn),
.footer-row A:not(.cta-btn):link,
.footer-row A:not(.cta-btn):active,
.footer-row A:not(.cta-btn):visited,
.footer-row A:not(.cta-btn):hover {
	color: #FFFFFF;
	text-decoration: none;
}


/* --- GRAVITY FORMS OVERRIDES ARE IN footer-scripts-row.php BECAUSE style.css CAN LOAD BEFORE GRAVITY FORMS ON SOME SITES --- */


.gfield {
	margin: 0 0 15px 0;
}

.gfield_required_text {
	margin: 0 0 0 10px;
	color: #ffffff;
	font-size: 0.8rem;
}

.ginput_container_checkbox LABEL {
	display: inline;
	margin: 0 0 0 6px;
	font-size: 0.9rem;
}

.gfield--type-honeypot,
.gfield_visibility_hidden {
	display: none;
} 

.gfield--type-hidden, 
.gfield--input-type-hidden, 
.gform_hidden, 
.gfield--type-honeypot {
	display: none;
}

.gform-body INPUT:not([type="checkbox"]), .gform-body SELECT {
	width: 100%;
	height: 2.0rem;
	padding: 0.2rem 0.2rem 0 0.2rem;
}

.gfield_visibility_hidden {
	display: none;
}

.ginput_container_checkbox LABEL {
	display: inline;
	margin: 0 0 0 6px;
	font-size: 0.8rem;
}

.gfield_label_before_complex {
	display: none;
}


/*--  Fix styles for WARNINGS for pages with a dark background */
.gform-theme--framework .gform_validation_errors, 
.gform-theme--framework .gform_validation_errors .gform-icon, 
.gform-theme--framework .gfield_validation_message,
.gform-theme--framework .gfield_description,
.gform-theme--framework .gform_validation_errors .gform_submission_error {
	background-color: #ffffff;
	color: var(--color-required);
	padding: 4px 0;
	border: 0;
	display: inline-block;
	margin-top: 0;
	outline: 0;
}

.gform-theme--framework .gform_validation_errors .gform-icon {
  padding: 0;
}


.gform-theme--framework .gform_validation_errors .gform_submission_error {
	display: flex;
}


.gform_fields {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
}

.gform_fields .gfield {
	width: 100%;
	padding: 0;
}



:modal,
.text-optin-policy-modal {
	width: 600px;
	max-width: 90%;
	display: inline-block;
}

.modal-header {
	border-bottom: solid #cccccc 1px;
	padding-bottom: 4px;
	margin-bottom: 10px;
}

dialog:-internal-dialog-in-top-layer::backdrop,
dialog::backdrop {
  background-color: #00000066;
}

.modal-close-x {
	padding: 3px 6px;
	border: solid #bbbbbb 1px;
	text-transform: lowercase;
}

/*

DIALOG {
    max-width: 90%;
    width: 600px;
    padding: 20px;
    border: 0;
}

::backdrop {
    background-color: #00000099;
}

.modal-header {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.modal-close-x {
    cursor: pointer;
    font-family: Courier, "Courier New", sans-serif;
    padding: 2px 5px;
    background-color: #00000099;
    color: #ffffff;
    font-weight: 700;
}

#text-optin-policy-btn {
    cursor: pointer;
    color: var(--color-manchester_gold);
    font-weight: 700;
}

*/


/* --------------------------------------------------------- */
/* --------- RESPONSIVE 				 */
@media screen and (min-width: 576px) {
	.header-left {
		text-align: left;
	}

	.header-right {
		text-align: right;
	}

	.hero-title-section-svg {
		height: 400px;
	}



	.footer-left {
		text-align: center;
	}
	
	.footer-right {
		text-align: right;
	}

}


@media screen and (min-width: 768px) {
	.header-center {
		font-size: 1.25rem;
	}
	.header-right {
		font-size: 1.0rem;
	}


	.flex-item {
		flex-basis: 23%;
		margin: 0;
	}

	.flex-item-arrow {
		flex-basis: 8%;
		text-align: right;
	}

	.flex-item-arrow SVG {
		transform: rotate(0);
	}

	.fact-container-with-arrow,
	.fact-container {
		border-radius: 125px;
		width: 125px;
		height: 125px;

		font-size: 13px;
	}

	.fact-container-with-arrow {
		margin: 0;
	}

}


@media screen and (min-width: 993px) {
	.hero-title-section-svg {
		height: 500px;
	}

}

@media screen and (min-width: 1200px) {
	.header-br {
		display: none;
	}

	.fact-container-with-arrow,
	.fact-container {
		border-radius: 150px;
		width: 150px;
		height: 150px;

		font-size: 16px;
	}

	.fact-container-with-arrow .fact-number {
		margin: 20px 0 15px 0;
	}

}


@media screen and (min-width: 1400px) {
	.hero-title-section-svg {
		height: 600px;
	}
}