/*
 Theme Name:   Twenty Twenty - CSG 2021
 Description:  Custom Theme for CSG (2021 update) based on Twenty Twenty
 Author:       CSG
 Template:     twentytwenty
 Version:      1.0.5
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentycsg2021
*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap');

:root {
--CSG-BLUE: #0055B8;
--CSG-WHITE: #FFFFFF;
--CSG-BLACK: #000000;
--REGIONAL-GRAY: #A7A9AC;
--EGGPLANT: #2D296B;
--PURPLE: #7D2C8D;
--PLUM: #9D2174;
--RED: #D81D53;
--ORANGE: #F26825;
--YELLOW: #F7B01B;
--GREEN: #9CB83B;
--TEAL: #009B93;
--SKY: #2CABE2;
--CHARCOAL: #4F4E4D;
--G50: #939598;
--G30: #BCBEC0;
--G15: #DCDDDE;
}

/* 
 * Tags 
 */

* {
	font-family: 'Open Sans', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', sans-serif;
	color: var(--REGIONAL-GRAY);
	font-weight: normal;
	text-transform: uppercase;
}

a {
	color: var(--CSG-BLUE);
}

/* Get rid of the blue border on focus */
input:focus {outline:none !important}
button:focus {
  outline:0;
}

/* 
 * Parent overrides 
 */

/* Changes default page size */
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 720px;
}

#site-header {
	background: var(--CSG-BLUE);
}

.menu-item {
	text-transform: uppercase;
}

button, .button, .faux-button, .wp-block-button__link, .wp-block-file .wp-block-file__button, input[type="button"], input[type="reset"], input[type="submit"] {
	background-color: var(--CSG-BLUE);
}

blockquote {
	border-color: var(--CSG-BLUE);
}

.primary-menu > li + li {
	padding-left: 22px;
	border-left: 1px solid var(--CSG-WHITE);
}

.primary-menu li a:link, 
.primary-menu li a:visited, 
.primary-menu li a:active, 
.primary-menu li a:hover {
	font-family: 'Open Sans', sans-serif;
	color: var(--CSG-WHITE);
}

button.mobile-nav-toggle {
	color: var(--CSG-WHITE);
}

.toggle-inner .toggle-text {
	color: var(--CSG-WHITE);
}

.entry-title {
	font-family: 'Open Sans', sans-serif;
}

.entry-title a:link, 
.entry-title a:visited, 
.entry-title a:active, 
.entry-title a:hover {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
}

.page_item a:link, 
.page_item a:visited, 
.page_item a:active, 
.page_item a:hover {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
}

.site-title a:link, 
.site-title a:visited, 
.site-title a:active, 
.site-title a:hover {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
}

.textwidget p {
	font-family: 'Open Sans', sans-serif;
}

/* 
 * New classes for child theme 
 */

/* https://stackoverflow.com/questions/3463796/how-to-only-show-certain-parts-with-css-for-print*/
@media print {
  .csg-no-print {
      display:none;
  }
}
@media screen {
   .csg-only-print {
       display: none;
   }
}

@media print {
	display: 
}

.quote {
	background: var(--G30);
	padding: 20px;
}

.quote-text {
	font-style: italic;
	font-family: 'Lora', serif;
}

.quote-author {
	padding-top: 6px;
	font-weight: bold;
	font-family: 'Lora', serif;
	text-align: right;
}

.committees {
	
}

.committee-members {
	
}

.committee-member-leader {
	
}

.committee-member {
	
}

/* 
 * Gravity forms styling
 */

.eael-gravity-form-heading {
	text-align: center;
}

.eael-contact-form-title {
	color: var(--CHARCOAL);
}

.csg-base-form {
	
}

.csg-tabbed-form .gf_page_steps {
	border-bottom: 0;
	/*background: var(--CSG-BLACK);*/
}

@media screen and (min-width: 900px) {

	.csg-tabbed-form {
		display: grid;
		grid-template-columns: 33% 67%;
	}	

	.csg-tabbed-form .gf_page_steps {
		padding-top: 38px;
		grid-column: 1 / 2;
		grid-row: 1 / 3;
	}

	.validation_error {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}

	.csg-tabbed-form .gform_body {
		grid-column: 2 / 3;
		grid-row: 2 / 3;
	}

	.csg-tabbed-form .gf_step {
		display: block;
		opacity: .8;
	}

	.gform-body h4 {
		margin-top: 0;
	}

	.gform_confirmation_message {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

}

@media screen and (max-width: 899px) {
	.csg-tabbed-form .gf_page_steps {
		display: none;
	}
}

.csg-tabbed-form .gform_page_footer {
	border-top: 0;
	margin-top: 40px;
	margin-left: -12px;
}

/* !important because these are being overridden by Elementor! */
.csg-tabbed-form .gform_page_footer input[type="button"] {
	width: auto !important;
	margin-left: 12px !important;
	margin-right: 12px !important;
}

.csg-tabbed-form .gform_page_footer input[type="submit"] {
	padding: 1.1em 1.44em;
	width: auto !important;
	margin-left: 12px !important;
	margin-right: 12px !important;
	background-color: var(--GREEN);
}

.csg-tabbed-form-checkbox input[type="checkbox"] {
	margin-top: 0 !important;
	height: 18px;
	width: 18px;
}

.csg-tabbed-form-checkbox .gfield_checkbox label {
	padding-left: 10px !important;
}

.csg-tabbed-form-review {
}

.gform_confirmation_message {
	text-align: center;
}

.gform_save_link {
	margin: 20px 12px !important;
    padding: 20px !important;
    cursor: pointer;
    webkit-appearance: none;
    -moz-appearance: none;
    background: var(--G50);
    border: none;
    border-radius: 0;
    color: var(--CSG-WHITE);
    cursor: pointer;
    display: inline-block !important;
    letter-spacing: 0.0333em;
    line-height: 1.25;
    opacity: 1;
    padding: 1.1em 1.44em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.15s linear;
}