/**
 * Responsive CSS for Northern Greenhouse
 */


/* hide mobile-only elements on desktop */
header:not(.is-mobile) .mobile-only,
main:not(.is-mobile) .mobile-only,
footer:not(.is-mobile) .mobile-only {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	z-index: -999999 !important;
}

/* hide desktop-only elements on mobile */
header.is-mobile .desktop-only,
main.is-mobile .desktop-only,
footer.is-mobile .desktop-only { 
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	z-index: -999999 !important;
}

/* close-menu buttons for nav flyouts - when menu opened */
header.is-mobile .centering > nav#main > ul > li > nav > .close-menu {
	display: block;	
	
	text-align: center;
	font-size: 25px;
	color: rgb(0,150,150);
}

/* nav flyout links */
header.is-mobile .centering > nav#main > ul > li > nav li > a {
	display: inline-block;
	padding: 3px 0px 3px 0px;
}


@media screen AND (max-width: 1500px) {
	
	/* force-right ideas menu flyout */
	header .centering > nav#main > ul > li#ideas > nav {
		position: fixed;
		right: 0px;
	}
}



@media screen AND (max-width: 1075px) {
	
	
	/** HEADER & NAV **/
	
	/* header */
	header {
		height: 50px;
		border-bottom: 5px solid rgb(84,187,194);
	}
	
	/* header collapsed */
	header.collapsed {
		border-bottom: 5px solid white;
	}
		
		/* main title */
		header .centering > a#title,
		header.collapsed .centering > a#title {
			margin-top: 12px !important;
			width: 250px;
			font-size: 25px !important;
		}
		
		/* nav container */
		header.collapsed .centering > nav#main,
		header .centering > nav#main {
			vertical-align: initial;
			/* total - title width - title & nav padding */
		 	width: calc( 100% - 250px );
		}
		
			/* nav list item links */
			header .centering > nav#main > ul > li > a,
			header.collapsed > .centering > nav#main > ul > li > a {
	 			display: inline-block;
	 			padding: 0px 10px 0px 10px;
			}
			
		/* nav menu list item */
		header .centering > nav#main > ul > li,
		header.collapsed .centering > nav#main > ul > li {
			padding: 2px 0px 10px 0px;
		}
		
			/* nav flyouts */
			header:not(.is-mobile) .centering > nav#main > ul > li:hover > nav,
			header.is-mobile .centering > nav#main > ul > li.mobile-tapped > nav {
				margin-top: 10px;
				border-bottom: 5px solid rgb(84,187,194);
			}
			
			header.collapsed:not(.is-mobile) .centering > nav#main > ul > li:hover > nav,
			header.collapsed.is-mobile .centering > nav#main > ul > li.mobile-tapped > nav {
				margin-top: 15px;
			}
			
		
		
		
	/** MAIN **/
	main, main.collapsed {
		margin-top: 55px;
	}
	
	
	
	/** HOME **/
	
	/* intro 01 article */
	main#home > section#intro-01 .centering > article {
		width: 60%;
	}
	
	/* nav icons */
	main#home > section#intro-01 .centering > nav#icons {
		width: 35%;
	}
	
	
	/** FOOTER **/
	
	/* footer nav vertical positioning container */
	footer .centering > #v-positioning {
		padding: 0px 20px 0px 20px;
	}
	
		/* footer nav links */
		footer .centering > #v-positioning > nav > a {
			/* font-size: 14px; */
			padding: 8px;
		}
	
}


@media screen AND (max-width: 900px) {
	
	/** HEADER & NAV **/
	
	/* nav list items */
	header .centering > nav#main > ul > li,
	header.collapsed .centering > nav#main > ul > li {
		font-size: 18px !important;
	}

		/* force-right flyouts */
		header .centering > nav#main > ul > li > nav,
		header.collapsed .centering > nav#main > ul > li > nav {
			position: fixed;
			right: 0px;
		}
	
	
	/** HOME **/
	
	/* centering */
	main#home > section#intro-01 .centering {
		padding: 50px 25px 35px 25px;
	}
	
	/* intro article */
	main#home > section .centering > article {
		display: block !important;
		width: auto !important;
	}
	
		/* article header */
		main#home > section .centering > article > h2 {
			line-height: 1.35;
			text-align: center;
		}
	
	/* nav icons */
	main#home > section#intro-01 .centering > nav#icons {
		display: block;
		width: auto;
		margin: 50px 0px 0px 0px;
	}
	
	/* bob picture container */
	main#home > section#intro-02 .centering > div#bob {
		display: block;
		width: auto;
		height: 350px;
	}
	
	
	/** MAIN **/
	
	
	
	/* no floating buttons */
	main .centering .button.side {
		float: none;
		display: block;
		position: relative;
		width: 75%;
		margin: auto;
	}
		
	/* main with blended product image as background */
	main.product-image-blend-bg {
		background-position: top center;
		background-size: 90vw;
	}
}



@media screen AND (max-width: 775px) {

	/* centering blocks */
	header > div.centering,
	footer > div.centering {
		width: 95vw;
		max-width: auto;
		padding: 0px;
	}
	
	/** HEADER & NAV **/
	header, header.collapsed {
		height: auto;
		border-bottom: 5px solid white;
		/* border-bottom: 5px solid rgb(84,187,194); */
	}
	
		/* main title */
		header .centering > a#title,
		header.collapsed .centering > a#title {
			display: block;
			width: auto;
			padding: 0px;
			margin: 10px auto 7px auto;
			
			text-align: center;
			font-size: 20px !important;
		}
		
		/* nav */
		header.collapsed .centering > nav#main,
		header .centering > nav#main {
			vertical-align: initial;
			display: block;
			width: auto;
			text-align: center;
			margin: 0px;
			padding: 0px;
		}
			
			/* nav list items */
			header .centering > nav#main > ul > li,
			header.collapsed .centering > nav#main > ul > li {
				font-size: 16px !important;
			}
			
				/* nav flyouts for products, ideas */
				header .centering > nav#main > ul > li > nav {
					position: absolute;
					right: initial !important;
					left: 50%;
					transform: translateX(-47%);
				}
				
				
	/** MAIN **/
	
	main, main.collapsed {
		margin-top: 70px;
	}
	
		/* side contaner */
		main .centering .picbox,
		main .centering .picbox.side {
			display: block;
			position: relative;
			max-width: 100%;
			width: auto;
			float: none;
			margin: 20px 0px 20px 0px;
			text-align: center;
		}
		
			/* never force excessive upscaling on images */
			main .centering .picbox img,
			main .centering .picbox.side img {
				display: block;
				margin: 0px auto 0px auto;
				width: auto;
				height: auto;
				
				position: relative;
				max-width: 100%;
				max-height: 35vh;
			}
			
				main .centering .picbox.captioned img {
					margin-bottom: 20px;
				}
			
			
	/** FOOTER **/
	
	
	/* greenhouse graphic */
	footer .centering > img#sunshine-greenhouse-logo {
		float: none;
		display: block;
		margin: 0px auto 0px auto;
		vertical-align: top;
	}
	
		/* reset vertical positioning */
		footer .centering > #v-positioning {
			display: block;
			vertical-align: top;
			height: auto;
		}
	
			/* bottom nav links */
			footer .centering > #v-positioning > nav > a {
				color: rgba(0,0,0,.85);
			}
	
		/* footnotes */
		footer .centering > div#footnotes {
			padding: 15px 0px 25px 0px;
			line-height: 1.35;
		}
}



@media screen AND (max-width: 650px), (max-height: 650px) {
	
	/** HEADER & NAV **/
	
	/* nav flyouts */
	header .centering > nav#main > ul > li > nav {
		position: fixed !important;
		width: 100vw;
		height: 100vh;
		padding: 0px 0px 0px 0px !important;
		transform: none !important;
		overflow-y: scroll;
		overflow-x: hidden;
	}
	
		/* nav flyouts hovered/tapped */
		header:not(.is-mobile) .centering > nav#main > ul > li:hover > nav,
		header.is-mobile .centering > nav#main > ul > li.mobile-tapped > nav {	
			margin: 0px !important;
			left: 0px !important;
			bottom: 0px;
		}
	
		/* nav columns are stacked vertically */
		header .centering > nav#main > ul > li > nav > section {
			display: block;
			width: 90vw;
			margin: 0px 0px 0px 25px;
		}
			/* extra bottom margin on last one for "close menu" button offset */
			header .centering > nav#main > ul > li > nav > section:last-of-type {
				margin-bottom: 35px;
			}

		/* close-menu buttons for nav flyouts - when menu opened */
		header.is-mobile .centering > nav#main > ul > li > nav > .close-menu {
			position: fixed;
			width: 100vw;
			bottom: 0px;
			left: 0px;
			padding: 5px 0px 5px 0px;
			
			font-size: 25px;
			color: white;
			background-color: rgb(0,150,150);
		}
}


@media screen AND (max-width: 650px) {	
	
	/** MAIN **/
		
	/* main with blended product image as background */
	main.product-image-blend-bg {
		background-size: 100vw;
	}
	
	/* main content headers */
	main > h1,
	main .centering h2 {
		text-align: center;
	}
	
	/* form info text */
	main .centering form p.info {
		text-align: center;
	}
	
	/* payment method icon images container */
	main .centering form .payment-methods {
		float: none;
		text-align: center;
		margin: 25px;
	}
	
		/* payment method icon images */
		main .centering form .payment-methods > img {
			margin: 5px;
		}
	
	/** CONTACT **/
	main#contact .centering > section,
	main#contact .centering > section:nth-of-type(odd) {
		width: 100%;
		min-width: 0px;
	}
	
	/* address block */
	main .centering address.indent {
		display: block;
		position: relative;
		width: auto;
		padding: 10px;
		margin: 25px 0px 25px 0px;
		
		font-size: 17px;
		font-weight: bold;
	}
}


@media screen AND (max-height: 650px) AND (orientation: landscape) {
	
	/* nav fills screen minus header */
	header .centering > nav#main > ul > li > nav {
		width: 100vw;
		height: calc( 100vh - 60px );
		text-align: center;
	}
	
		/* sections are still side-by-side */
		header .centering > nav#main > ul > li > nav > section {
			display: inline-block;
			width: auto;
			margin: 15px 15px 35px 15px;
		}
	
}



@media screen AND (min-width: 451px) {

	/* show screen-wide nav text, hide screen-narrow nav text */
	header .centering > nav#main > ul > li > a > span.screen-wide {
		display: inline-block;
	}
	header .centering > nav#main > ul > li > a > span.screen-narrow {
		display: none;
	}
}


@media screen AND (max-width: 450px) {
	/* hide screen-wide nav text, show screen-narrow nav text */
	header .centering > nav#main > ul > li > a > span.screen-wide {
		display: none;
	}
	header .centering > nav#main > ul > li > a > span.screen-narrow {
		display: inline-block;
	}
	
	/** HOMEPAGE **/
	
	/* nav icon container <a> */
	main#home > section#intro-01 .centering > nav#icons > a {
		width: 15%;
		padding: 0px;
		margin-bottom: 25px;
	}
		/* nav icon image */
		main#home > section#intro-01 .centering > nav#icons > a > img {
			width: 35%;
		}
		
	/* bob picture container */
	main#home > section#intro-02 .centering > div#bob {
		background-position: center;
	}
	
	
	/** MAIN **/

	/* smaller headers */
	main .centering h2 { font-size: 30px; }
	main .centering h4 { font-size: 20px; }
	
	/* main product image as floated image */
	main > img.product-image-blend {
		float: none;
		display: block;
		max-width: 100vw;
		max-height: auto;
		margin: 0px 0px 0px 20px;
	}
	
		/* main product image as floated image */
		main > img.product-image-blend.tall {
			float: right;
			height: 35vh;
		}
	
	/* address block */
	main .centering address.indent {
		padding: 5px;
				
		font-size: 14px;
		font-weight: normal;
	}
}