/*** app.css - for Foundation Version 6.6.3 - 8/2/21 ***/

/** Define general page layout **/

body {
	color: var(--body-text-color);
	background: var(--body-background-color);
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 16px;
	line-height:1.35em;
}

main {
	background: var(--main-background-color);
}

/** Define responsive page transitions for header, menu, and main   **/
/** Foundation 6 breakpoints: small 0px, mediam 640px, large 1024px **/

@media screen and (max-width: 849px) {
	#large-header #contact-info {font-size: 0.8em;}
}

@media screen and (min-width: 768px) {
	#large-header {background: var(--header-background-color);}
	#headerlogo {content: var(--headerlogo-file);}
	#small-header {display: none;}

	main {margin: 0;}
	main {border: none;}

	.themes-enabled #main-menu-center {margin-left: 0px;}
	.themes-enabled #main-menu-center .menu {align-items: center;}
	.themes-enabled #main-menu-center .menu {justify-content: center;}

	#content {padding: 0 10% 0;}
}

@media screen and (max-width: 767px) {
	#large-header   {display: none;}
	#small-header {background: var(--header-background-color);}
	#headerlogo {content: var(--headerlogo-file);}

	main {margin: 0;}
	main {border: none;}
		
	.themes-enabled #main-menu-left {display: none;}
	.themes-enabled #main-menu-center {margin-left: calc(0% + 0.9375rem);}
	.themes-enabled #main-menu-center .menu {justify-content: left;}			
}

@media screen and (min-width: 640px) {
	#hamburger-button {display: none;}
	#hamburger-dropdown-menu {display: none;}
}

@media screen and (max-width: 639px) {
	#main-menu {display: none;}
}


/** Define menu colors and layout **/

#sticky-menu.is-stuck {opacity: 0.8;}
#sticky-menu.is-stuck:hover {opacity: 1.0;}

#main-menu {
	justify-content: center;
	align-items: center;
	background: var(--main-menu-background-color);
	padding: 0;
}

#main-menu-center {margin-left: 0px;}
#main-menu-center .menu {align-items: center;}
#main-menu-center .menu {justify-content: center;}

#main-menu li:hover {background: var(--main-menu-background-color);}

#main-menu li > a {
	padding: 0.4rem 1.2rem;
	font-weight: bold;
	color: var(--main-menu-text-color);
}

#main-menu li > a:hover {color: var(--main-menu-page-hover-text-color);}

#main-menu li.currentpage > a {
	color: var(--main-menu-current-page-text-color);
	background: var(--main-menu-current-page-background-color);
}

#main-menu li.currentpage > a:hover {
	/** Need to update the names of these colors **/
	color: var(--main-menu-current-page-hover-text-color);
	background: var(--main-menu-current-page-hover-background-color);
}

#hamburger-button {
	background: var(--hamburger-button-bar-backround-color);
	padding-bottom: 3px;
}

#hamburger-button-cell {
	padding: 0 0.5rem;
}

#hamburger-button-cell .title-bar {
	padding: 0.2rem 0.2rem;
	background: transparent;
	justify-content: flex-start;
}

#hamburger-button-cell .menu-icon::after {
	background: var(--hamburger-button-color);
	-webkit-box-shadow: 0 7px 0 var(--hamburger-button-color), 0 14px 0 var(--hamburger-button-color);
	box-shadow: 0 7px 0 var(--hamburger-button-color), 0 14px 0 var(--hamburger-button-color);
	height: 3px;  /* Increase height of hamburger lines */ 
}

#hamburger-button-cell .menu-icon:hover::after {
	background: var(--hamburger-button-hover-color);
	-webkit-box-shadow: 0 7px 0 var(--hamburger-button-hover-color), 0 14px 0 var(--hamburger-button-hover-color);
	box-shadow: 0 7px 0 var(--hamburger-button-hover-color), 0 14px 0 var(--hamburger-button-hover-color);
}

#hamburger-button-cell .title-bar-label {
	color: var(--hamburger-button-bar-text-color);
	font-weight: bold;
	padding-left:0.5em;
}

#hamburger-dropdown-menu {
	background: var(--hamburger-dropdown-menu-background-color);
}

#hamburger-dropdown-menu-ul {
	margin-top: 0;
	background: var(--hamburger-dropdown-menu-background-color);
}

#hamburger-dropdown-menu-ul li {
	padding-left: 0;
	color: var(--hamburger-dropdown-menu-text-color);
	background: var(--hamburger-dropdown-menu-background-color);
}

#hamburger-dropdown-menu-ul li > a {
	margin: 1px 3px 3px 3px;
	padding: 5px 5px 5px 10px;
	color: var(--hamburger-dropdown-menu-text-color);
	font-size: 0.9rem;
	font-weight: normal;
}

#hamburger-dropdown-menu-ul li > a:hover {
	padding: 4px 4px 4px 9px;
	background: var(--hamburger-dropdown-menu-page-hover-background-color);
	border-color: var(--hamburger-dropdown-menu-page-hover-border-color);
	border-style: solid;
	border-width: 1px;
	color: var(--hamburger-dropdown-menu-page-hover-text-color);
	font-weight: bold;
}

#hamburger-dropdown-menu-ul li.currentpage > a {
	background: var(--hamburger-dropdown-menu-current-page-background-color);
	color: var(--hamburger-dropdown-menu-current-page-text-color);
}

#hamburger-dropdown-menu-ul li.currentpage > a:hover {
	background: var(--hamburger-dropdown-menu-current-page-background-color);
	color: white;
	font-weight: bold;
}


/** Define footer colors and layout **/

footer {
	background: var(--footer-background-color);
}

#footer-box {
	font-size: 0.875em;
	font-weight: bold;
	color: var(--body-text-color);
	text-align: center;
	padding: 0.625em 0;
}

/* Special formatting to force footer to bottom of viewport on a page with little content   */
/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ */

body {
	position: relative;
	min-height: 100vh;
}

main {
	padding-bottom: 3em;    /* Padding to insure space between bottom of main and footer on short pages */
}

footer {
	position: absolute;
	bottom: 0;
	width: 100%;
}


/** Define basic page layout classes **/

.content-heading {
	font-size: 1.5em;
	font-weight: bold;
	color: var(--body-text-color);
	text-align: center;
	padding-top: 1.5em;
	padding-bottom: 1.0em;
}

.content-text {
	font-size: 1em;
	color: var(--body-text-color);
	text-align: left;
	padding-bottom: 0.625em;
}

.no-bottom-padding {
	padding-bottom: 0 !important;
}

.double-bottom-padding {
	padding-bottom: 1.25em !important;
}

.triple-bottom-padding {
	padding-bottom: 1.875em !important;
}

.content-hyperlink {
	font-weight: bold;
	color: var(--link-text-color);
	text-decoration: none;
}

.content-mailtolink {
	color: var(--link-text-color);
	text-decoration: none;
}

.content-telelink {
	font-size: 1.25em;
	font-weight: bold;
	color: var(--link-text-color);
	text-decoration: none;
}

/* Special formating for FAQ page */

#FAQ-dl dt {
	color: var(--body-text-color);
}

#FAQ-dl dd div.faq-content {
	margin-bottom: 0.5em;
}

/* Special formating for portfolio page */

.portfolio-title {
	font-size: 1em;
	color: var(--body-text-color);
	text-align: center;
	padding-bottom: 0.625em;
}

.portfolio-text {
	font-size: 0.875em;
	color: var(--body-text-color);
	text-align: left;
	/* line-height:130%; */
	padding-bottom: 0.5em;
}

/* Special formating for solutions page */

.solutions-text {
	font-size: 1.0em;
	color: var(--body-text-color);
	text-align: left;
	padding: 0 1.25em 0.5em 1.875em;
}

.solutions-first-text {
	 text-indent:-1.25em;
}


/** Override various Foundation defaults **/

/* Override layout and spacing of lists and bullets */

ul, ol, li, dl {
	font-size: 1em;
	line-height: 1.25em;
	list-style-position: outside;
}

/*  Override color of hyperlink when hovering or in focus */
a:hover, a:focus {
	color: 	var(--link-hover-focus-text-color);
}

/* Override max width for a row */
.row {
	max-width: 100%;
}


/** Finally, enlarge text when screen width is at least 1400px **/

@media screen and (min-width: 1400px) {
	body {
		font-size: 20px;
	}

	.content-text {
		padding-bottom: 0.8em;
	}
}