/*** app.css - for Foundation Version 6.7.5 - 5/11/23 ***/

/** 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);
}

.hero-image {
	background-image: url("/images/pencil_3.jpg"); /* The image used */
	background-color: #cccccc; /* Used if the image is unavailable */
	/* height: 250px; /* You must set a specified height */
	height: calc(20vw);
	max-height: 350px;
	min-height: 125px;
	background-position: center; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}


/** 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) {
	#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;}

	#main-menu li > a {
	padding: 0.4rem 1.2rem;
	}

	#top-of-page-message {padding: 0 10% 0;}

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

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

	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;}

	#main-menu li > a {
		padding: 0.4rem 0.6rem;
	}
}

@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.0rem; */
	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);	*/
	background-image: linear-gradient(white, 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;
}

/* Put footer at bottom of the viewport or lower if the page content is taller than the viewport */
/* See https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/  */

body {
	position: relative;
	min-height: 100vh;  /* Force footer to bottom of viewport on page with little content   */
}

/* Add extra padding on each page so footer doesn't hide contents at page bottom */
@media screen and (min-width: 640px) {
	main { padding-bottom: 11em; }
}
@media screen and (max-width: 639px) {
	main { padding-bottom: 17em; }
}

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;
}

.quadruple-bottom-padding {
	padding-bottom: 2.5em !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;
}

/** Override various Foundation 6 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%;
}

/** Enlarge text when screen width is wider - breakpoinst at 1024px and 1400px **/
@media screen and (min-width: 1024px) {
	body {
		font-size: 18px;
	}
	.content-text {
		padding-bottom: 0.8em;
	}
}

@media screen and (min-width: 1400px) {
	body {
		font-size: 22px;
	}
	.content-text {
		padding-bottom: 0.85em;
	}
}

/** Chop Shop Barbers site specific CSS **/

/* Chop Shop Name class */

.chop-shop-bold {
	font-weight: bold;
	color: var(--chop-shop-red);
}

/* Specific CSS for Home page */

@media screen and (min-width: 1024px) {
	#home-image-orbit {
		 width: 50%;
		 padding: 10px 0 10px 30px;
	}
}
@media screen and (max-width: 1023px) {
	#home-image-orbit {
		 width: 67%;
		 padding: 10px 0 10px 30px;
	}
}
@media screen and (max-width: 767px) {
	#home-image-orbit {
		 width: 100%;
		 padding: 10px 15%;
	}
}

img.orbit-image {
	border:1px solid black;
}

/* Specific CSS for Services page */

@media screen and (min-width: 640px) {
	table.services-prices-table tbody tr {
		font-size: 1.25em;
	}
}
@media screen and (max-width: 639px) {
	table.services-prices-table tbody tr {
		font-size: 1.125em;
	}
}
@media screen and (max-width: 459px) {
	table.services-prices-table tbody tr {
		font-size: 1em;
	}
}
@media screen and (max-width: 359px) {
	table.services-prices-table tbody tr {
		font-size: 0.875em;
	}
}

/* Specific CSS for Directions page */

@media screen and (min-width: 460px) {
	table.direction-hours-table tbody tr {
		font-size: 1.25em;
	}
}
@media screen and (max-width: 459px) {
	table.direction-hours-table tbody tr {
		font-size: 1em;
	}
}
@media screen and (max-width: 359px) {
	table.direction-hours-table tbody tr {
		font-size: 0.875em;
	}
}

table.about-hours-table tbody, table.about-hours-table tbody tr {
	border:none;
}

table.about-hours-table tbody td, about-hours-table tbody th {
	padding: 0.25em 0em 0.25em;
}

table.about-hours-table tbody td:nth-child(2) {
	padding-left: 0.25em;
	text-align: left;
}

@media screen and (min-width: 1024px) {
	table.about-hours-table tbody tr {
		font-size: 0.875em;
	}
}

/* Specific CSS for Webcam page */

@media screen and (min-width: 1024px) {
	#webcam-overlay-message {
		margin-left:25%;
		width:50%;
	}
}
@media screen and (max-width: 1023px) {
	#webcam-overlay-message {
		margin-left:0;
		width:100%;
	}
}

/* Specific CSS for About page */

table.about-hours-table tbody, table.about-hours-table tbody tr {
	border:none;
}

table.about-hours-table tbody td, about-hours-table tbody th {
	padding: 0.25em 0em 0.25em;
}

table.about-hours-table tbody td:nth-child(2) {
	padding-left: 0.25em;
	text-align: left;
}

@media screen and (min-width: 1024px) {
	table.about-hours-table tbody tr {
		font-size: 0.875em;
	}
}

img.staff-photo {
	border: 1px solid black;
	margin-bottom: 10px;
	max-width: 300px;	
}
@media screen and (min-width: 640px) {
	img.staff-photo {
	width: 80%;
	}
}