/* MOBILE FIRST LAYOUT */
/* Copyright A.Buckley 2024 */
/* CSS Version: 2.00 */

/* RESET */
html, body, header, nav, section, footer, p, h1,h2 {
	margin:0;
	padding:0;
}
header, nav, main, footer, aside, #share {
	padding:1rem 2rem 0 2rem;
}
main {
	padding:0;
}
* {
   box-sizing: border-box;
 }

/* CORE */
:root {
	--font-primary-highlight:#F00;
	--font-secondary-highlight:#FF4C00;
	--font-tertiary-highlight:#F68300;
	--font-alt-highlight:#FFF;
	--bg-primary-color:#808080;
	--bg-alt-color:#F00;
}


html {
	font-family: century-gothic, sans-serif;
	color:#000;
	font-size:1em;
}

select, input, form, #recipe-ingredients h2 {
	font-family: century-gothic, sans-serif;
}

body {
	min-height:100vh;
	background: url("https://static.recipemate.acbuckley.net/static/bg.jpg") repeat-x top center;
	background-color:#fff;
}

main {
	background-color: #fff;
}

	main p {
		margin-bottom:1rem;
	}

a {
	color:#fff;
}
a:hover {
	color:#e7e7e7;
	text-decoration:underline;
}
h1, h2, h3, h4 {
	color: var(--font-primary-highlight);
}
h2 {
	margin-bottom:.3em;
}
h1, h2, h3 {
	font-family: garamond, serif;
}


/* Content */
#content {
	padding:2rem;
}

#content h1 {
	margin:2rem 0 1rem 0;
	font-size:2rem;
}

#content h2,  #content h3, #content h4, #content h5{
	margin:1.5rem 0 .5rem 0;	
}

#content p {
	margin:.5rem 0;
	line-height: 1.5rem;
}

#content a {
	color: var(--font-tertiary-highlight);
}



/* HEADER */
header {
	padding:0;
}
header img {
	width:60px;
	height:auto;
	margin:15px;
}

/* NAVIGATION */
#nav-primary {
	padding-right:0;
	text-align:right;
}
	#nav-primary a:first-child img {
		width:65px;
		height:auto;
		float:right;
		position: relative;
		z-index: 99;
	}

	#nav-primary ul {
		display:none;
		clear:right;
		list-style: none;
		background:#000;
		padding:70px 0 0 0;
		position: absolute;
		top:0;
		right:0;
		z-index:98;
		width:100vw;
		height: 90vh;
		margin:0;
	}

	#nav-primary > a:last-child {
	    position: absolute;
	    right: 0;
	    top: 0;
	    z-index: 99;
	    display: none;
	    text-decoration:none;
	    font-size:.5rem;
	    text-transform: uppercase;
	    width:90px;
	    text-align: left;
	}

	#nav-primary > a:last-child img {
		width:30px;
		margin-top:30px;
	}

	#nav-primary picture:active + ul, #nav-primary ul:hover, #nav-primary a:focus + ul,
	#nav-primary picture:active ~ a, #nav-primary a:focus ~ a {
		display: block;
	}

	#nav-primary ul li {
		color:#c6c6c6;
		padding:.5em 1em;
		border-bottom: 1px solid #f1f1f2;
		text-align: center;
	}

	#nav-primary ul a {
		text-decoration: none;
		color:#888;
		display: inline-block;
		padding:.2em;
	}

	#nav-primary ul span:active {
		display: none;
	}




/* MAIN - RECIPE */
#recipe {
	background-color: #FFF;
	position: relative;
}

	#recipe img {
		width:100%;
		object-fit: cover;
		object-position: center;
		left:0;
		top:0;
		max-height: 30vh;
		display: block;
	}

		#recipe .inset img {
			display: none;
		}

	#recipe h2 {
		color: #fff;
		background-color:var(--bg-primary-color);
		padding: 1rem;
		font-size: 2rem;
		margin:0;		
	}

	#recipe h3 {
		background-color: #000;
  		text-align: left;
  		padding: .5rem 1rem;
  		margin: 0;
	}


/* RECIPE SELECTIONS */
#nav-recipe-selector {
	margin:0;
	padding: 0;
	background-color: var(--bg-primary-color);
}

#nav-recipe-selector select {
	background-color: var(--bg-alt-color);
	width: 100vw;
	color: var(--font-alt-highlight);
	margin-bottom: 1px;
	border: none;
	padding:.5rem 1rem;
}

#recipe-selector {
	background-color: var(--bg-primary-color);
	padding:1rem;
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	grid-template-areas: "recipe";
	column-gap: 1rem;
	row-gap: 1rem;
}

#recipe-selector article {
	display:block;
	margin:0;
}

	#recipe-selector article .recipe-attributes {
		background-color: #000;
	}

	#recipe-selector article .hero {
		position: relative;
	}

	#recipe-selector article .hero img {
		width:100%;
		object-fit: cover;
		object-position: center;
		left:0;
		top:0;
		height: 30vh;
		display: block;
	}

	#recipe-selector article .hero h2 {
			position: absolute;
			bottom:0;
			left:0;
			color: #fff;
			background: rgb(0,0,0,.75);
			font-size: 1.5rem;
			line-height: 1.75rem;
			margin: 0;
			padding: .5rem 2rem .5rem 1rem;
		  	clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%); /* obtain a slanted edge on right*/		
	}

		/* attributes */
		#recipe-selector .recipe-attributes {
			color: var(--font-secondary-highlight);
			display: flex;
		}

		#recipe-selector .recipe-attributes ul {
			list-style: none;
			margin: 0;
			padding:.9rem;
			width: 100%;
			font-size: .8rem;
			font-weight: bold;
		}

		#recipe-selector .recipe-attributes li {
			float:left;
		}

			#recipe-selector .recipe-attributes .attr-cooking {
				float: right;
			}
		
		#recipe-selector .recipe-attributes li:nth-child(-n+3){
			text-transform: uppercase;
		}

		#recipe-selector .recipe-attributes .attr-main-ingredient {
			color: var(--font-tertiary-highlight);
			margin-left:.5rem;
		} 	

	/* remove from view */
	#recipe-selector article h3,
	#recipe-selector .recipe-attributes h4,
	#recipe-selector .recipe-attributes .attr-course,
	#recipe-selector .recipe-attributes .attr-cost,
	#recipe-selector .recipe-attributes .attr-level,
	#recipe-selector .recipe-attributes .attr-prep ,
	#recipe-selector .recipe-attributes .attr-serves,
	#recipe-selector .recipe-attributes li em  {
		display: none;
	}


/* Ingredients Page */

#recipe-ingredients h1 {
	color:#fff;
	background-color: var(--font-primary-highlight);
	padding:1rem;
	font-size:1.5rem;
	margin:0rem -1rem 2rem -1rem;
}

#recipe-ingredients {
	background-color: #E6E6E6;
}

#recipe-ingredients h1 {
	grid-column:1/-1;
}

#recipe-ingredients {
	display:grid;
	grid-template-columns: repeat(auto-fill, 330px);
	padding-bottom:0rem;
	justify-content:center;
}

	#recipe-ingredients article {
		display:inline-grid;
		grid-template-rows: fit-content(1rem);
	}

	#recipe-ingredients article::after {
		content: '';
		border-bottom: 2px solid #fff;
		display: block;
		margin:2rem 0;
	}


		#recipe-ingredients article h2 {
			font-size:1.2rem;
		}

		#recipe-ingredients article h4 {
			display: none;
		}

		#recipe-ingredients article ul {
			padding-left:1rem;
			margin-bottom: 0;
		}

		#recipe-ingredients article ul li {
			margin-bottom:.5rem;
		}



/* FOOTER */
footer {
	text-align:center;
	font-size:.75rem;
}


/* LAYOUT */

body {
	width:100vw;
}

header {
	grid-area:header;
}

#nav-primary {
	grid-area:nav;
}

main {
	grid-area:main;
	width:100vw;
}

aside {
	grid-area:aside;
}

footer {
	grid-area:footer;
	width:100vw;
}


body {
	display:grid;
	grid-template-columns: 50px auto;
	grid-template-areas: "header nav"
								 "main main"
								 "footer footer";
	grid-template-rows: 75px auto 3rem;
}


	/* Layout for the Recipe Page */
	#recipe .hero {
		grid-area: hero;
		padding:0 !important;
		position: relative;
	}

	#recipe .recipe-ingredients {
		grid-area: ingredients;	
	}

	#recipe .recipe-steps {
		grid-area: steps;	
	}

	#recipe .recipe-attributes {
		grid-area: attributes;	
		color:var(--font-secondary-highlight);
	}

	#recipe article {
		display:grid;
		grid-template-columns: 1fr;
		grid-template-areas: "hero"
		                     "attributes"
		                     "ingredients"
		                     "steps" 
	}


		/* Steps */
		#recipe h4 {
			text-align:centre;
			color:#fff;
			background-color:var(--font-primary-highlight);
			text-align: center;
  			line-height: 2.5rem;			
		}

		#recipe .recipe-steps ol, #recipe .recipe-attributes ul  {
			list-style: none;
			padding: 0;		
		}

			#recipe .recipe-steps ol li {
				margin-bottom: .6rem;
				text-indent: -1.2rem;
				padding-left: .5rem;
				text-wrap:balance;
			}

			#recipe .recipe-steps ol li strong {
				color:var(--font-primary-highlight);
			}

			#recipe .recipe-steps ol {
				padding:0 2rem;
			}

			#recipe .recipe-steps strong::after {
				content: ".";
			}

			#recipe .recipe-steps h5 {
				display: inline;
				color:var(--font-primary-highlight);
				font-size:1rem;
				white-space:pre;
			}
				
				#recipe .recipe-steps h5::after {
  					content: '\A'; /* place a new line after the content*/
  				}


  		/* Ingredients */
  		#recipe .recipe-ingredients li {
  			margin-bottom:.6rem;
  		}
			
			#recipe .recipe-ingredients li em {
	  			color:var(--bg-primary-color);
	  		}


		/* Attributes */
		#recipe .recipe-attributes ul {
			margin:0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			place-items:center;
			grid-row-gap: .5rem;
		}

		#recipe .recipe-attributes ul li {
			list-style: none;
			margin-bottom:.5rem;
		}

		#recipe .recipe-attributes ul li em {
			display: none;
		}

		#recipe .recipe-attributes h4 {
			display: none;
		}

		#recipe .recipe-attributes .attr-cuisine,
		#recipe .recipe-attributes .attr-course,
		#recipe .recipe-attributes .attr-main-ingredient {
			font-weight: bold;
  			padding:.6rem .2rem;
  			background-color:var(--font-primary-highlight);
  			text-align:center;
  			color:#fff;
  			width:100%;
		}

		#recipe .recipe-attributes .attr-cost {
			clear:both;
		}

			/* Atribute icons */
			.attr-serves, .attr-prep, .attr-cooking,
			.attr-level {
				background-repeat: no-repeat;
				background-position: left center;
				background-size:1rem;
				padding-left: 1.5rem;
			}
				.attr-serves {
					background-image:url("https://static.recipemate.acbuckley.net/static/icon-person.svg");
				}
				.attr-prep, .attr-cooking {
					background-image:url("https://static.recipemate.acbuckley.net/static/icon-time.svg");
				}
				.attr-level {
					background-image:url("https://static.recipemate.acbuckley.net/static/icon-hat.svg");
				}


	/* Layout for the menu picker */

	#menu-picker  {
		position: absolute;
		top:0;
		left:0;
		display:grid;
		display: none; /* toggle to grid like a modal */
		grid-template-columns: repeat(7, 1fr);
		grid-template-rows:125px;
		grid-template-areas:"day-recipe";
		grid-column-gap:15px;
		padding:0 50px;
		margin-top:15px;
	}
		#menu-picker nav {
			padding:0;
			margin:0;
		}

		#menu-picker .nav-prev,
		#menu-picker .nav-next {
			position: absolute;
  			top: 50%;
			width: 1rem;
			transform: translate(0%, -50%);
		}

			#menu-picker .nav-prev {
				left:0;
			}

			#menu-picker .nav-next {
				right:0;		
			}

		#menu-picker article {
			grid-area: day-recipe;
			grid-column: auto;
			background: rgba(0,0,0,.7) url("https://static.recipemate.acbuckley.net/static/icon-plus.svg") no-repeat center;
  			background-size: 2rem;		
			position: relative;
			cursor:pointer;
		}

			#menu-picker article time {
				position: absolute;
				top: 0;
				width: 100%;
				text-align: center;
				background-color: rgba(0, 0, 0, .7);
				color: var(--font-secondary-highlight);
				text-transform: uppercase;
				font-size: .7rem;
				padding: .2rem;
				font-weight: bold;
				cursor: inherit;
			}

			#menu-picker article h2 {
				position: absolute;
				bottom: 0;
				color: #fff;
				font-size: .8rem;
				background: rgba(0,0,0,.7);
				margin: 0;
				padding: .2rem .4rem;
				text-align: center;
				width:100%;
			}

			#menu-picker article img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}



/* Ingredients list special queries */



/* MEDIA QUERIES */
@media screen and (min-width: 768px) {
	html {
		font-size:1.1em;
	}

	#nav-primary {
		position: absolute;
		right:0;
	}

	footer {
		font-size:.75rem;
	}

		/* Switch to the horizontal spread headers, with the angled sides*/
		#recipe h2, #recipe h3 {
			position: absolute;
			z-index: 2;
		}

		#recipe h2 {
			top:0;
			left:0;
			background: var(--font-primary-highlight);
			font-size: 1.5rem;
			padding: .5rem 3rem .5rem 1rem;
		  	clip-path: polygon(0 0, 92% 0, 100% 100%, 0% 100%); /* obtain a slanted edge on right*/
		}

		#recipe h3 {
			bottom:0;
			right:0;
			background: #000;
			color: var(--font-primary-highlight);
			font-size: 1.3rem;
			padding: .4rem 1rem .4rem 3rem;
			clip-path: polygon(5% 0, 100% 0%, 100% 100%, 0% 100%); /* obtain a slanted edge on left*/	
		  	margin:0;
		  	display: inline-block;
		}

		#recipe .recipe-steps h4 {
			text-transform: uppercase;
		}

		#recipe article {
			grid-template-columns: 1fr 1fr;
			grid-template-areas:
			"hero hero"
			"attributes attributes"
			"ingredients steps";
		}

			#recipe h4 {
				background-color: transparent;
				color: var(--font-primary-highlight);
				text-align: left;
				line-height:auto;
				margin:0;
			}

			#recipe article div {
				padding:0 1rem;
			}

				#recipe article ul, #recipe .recipe-steps ol {
					margin-top: 0;
  					padding-left: 1rem;
  					margin-bottom: .3rem;
				}

				#recipe .recipe-steps ol li {
				  text-indent: -1.2rem;
				  padding-left: 0rem;
				}		

				/* Attributes */
				#recipe .recipe-attributes {
					margin:2rem 0 1rem 0;
				}

				#recipe .recipe-attributes ul {
					text-align:left;
					display: contents;
				}

				#recipe .recipe-attributes ul li {
					display: block;
					float: left;
					padding-right: 2rem;
				}

				#recipe .recipe-attributes .attr-cuisine,
				#recipe .recipe-attributes .attr-course,
				#recipe .recipe-attributes .attr-main-ingredient {
		  			padding:0 .2rem .5rem 0;
		  			background-color:transparent;
		  			text-align:left;
		  			color:var(--font-primary-highlight);
		  			width:auto;
		  			font-size:1.2rem;
		  			margin-right:.5rem;
				}				

				#recipe .recipe-attributes ul li em {
					display: inline;
				}

		/* Recipe Selector */
		#recipe-selector {
			display:grid;
			grid-template-columns: repeat(2 , 1fr);
			grid-template-rows: 1fr;
			grid-template-areas: "recipe";
		}


		/* Recipe ingredients */
		#recipe-ingredients {
			grid-template-columns: repeat(auto-fill, 430px);
		}

			#recipe-ingredients h1 {
				margin-bottom:2rem;
			}

}


@media screen and (min-width: 1368px) {
	body {
		grid-template-rows: 165px auto 3rem;
	}

	footer {
		margin:0;
		padding:.8rem;
	}

	header img {
		width:190px;
	}

	/* Recipe */
	#recipe img {
		max-height:35vh;
	}

	#recipe article div {
		padding: 0 5rem;
	}

	#recipe h4 {
		font-size: 1.25rem;
		margin-bottom: .5rem;
	}

	/* Menu Picker */
	#menu-picker  {
		display:grid;
		margin:20px 80px 0 210px;
	}

	/* Recipe Selector */
	#recipe-selector {
		display:grid;
		grid-template-columns: repeat(auto-fill, 330px);
		grid-template-rows: 1fr;
		grid-template-areas: "recipe";
		justify-content:center;
		column-gap:2rem;
		row-gap:2rem;
		padding:2rem;		
	}


		#recipe-selector article .hero img {
			height:275px;
		}	

		#recipe-selector article .hero h2 {
			font-size:1.2rem;
			line-height: unset;
			padding: .75rem 2rem .75rem 1rem;		
		}

		#recipe-selector .recipe-attributes ul {
			font-size:.7rem;
			line-height: 1rem;
			padding:.75rem 1rem;
		}

		#nav-recipe-selector select {
			width: unset;
		}

			#nav-recipe-selector {
				display:grid;
				grid-template-columns: repeat(auto-fill, 330px);
				grid-template-rows: 1fr;
				grid-template-areas: "menu-category";
				column-gap:2rem;
				row-gap:2rem;
				padding:2rem;
				padding-bottom:0rem;
				justify-content:center;
			}

	/* ingredients page */

	#recipe-ingredients h1 {
		padding-right: 3rem;
		clip-path: polygon(0 0, 97% 0, 100% 100%, 0% 100%);
	}

}


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

	/* Recipe */
	#recipe img {
		max-width: 75%;
	}

		/* Create an inset to make larger pages look better */
		#recipe .inset {
		  position: absolute;
		  top: 0;
		  right: 0;
		  z-index: 0;
		  height: 40vh;
		  width: 30%;
		  max-width:30%;
		}


		#recipe .inset img {
		  height: 40vh;
		  width: 100%;
		  max-width: 100%;
		  border-radius: 75px 0 0 0;
		  display: block;		  
		}	

}


@media screen and (min-width: 1920px) {
	body {
		grid-template-rows: 190px auto 3rem;
	}

	html {
		font-size:1.25em;
	}

	footer {
		font-size:.6rem;
	}


	/* Recipe */
	#recipe img {
		max-height:40vh;
	}

	#recipe .hero {
		margin-bottom:2.5rem;
	}

	#recipe article {
		grid-template-columns: 2fr 3fr 2fr;
		grid-template-areas:
			"hero hero hero"
			"ingredients steps attributes";
	}

	#recipe article div {
		padding: 0 3rem;
	}

	#recipe h4 {
		line-height: normal;
		font-size:1.1rem;
	}

		/* Attributes */
		#recipe .recipe-attributes {
			margin:0;
		}

		#recipe .recipe-attributes ul li {
			float:none;
		}

		#recipe .recipe-attributes .attr-cuisine,
		#recipe .recipe-attributes .attr-course,
		#recipe .recipe-attributes .attr-main-ingredient {
			font-size:1.1rem;
			float: left;
		}

		#recipe-selector article .hero h2 {
			font-size:1rem;
			line-height: 1rem;
			padding: .5rem 2rem .5rem .75rem;		
		}

		#recipe-selector .recipe-attributes ul {
			font-size:.6rem;
			line-height: 1rem;
			padding:.5rem .75rem;
		}		

	/* Menu Picker article */
	#menu-picker {
		grid-template-rows: 150px;
		margin:20px 80px 0 250px;
		grid-column-gap: 15px;
	}

	#menu-picker article {
		background-size: 1.5rem;
	}

	#menu-picker article time {
		font-size:.5rem;
	}

	#menu-picker article h2 {
		font-size:.7rem;
	}

		/* Recipe ingredients */
		#recipe-ingredients {
			grid-template-columns: repeat(auto-fill, 530px);
		}	
	
}


/* smart phones in landscape need bigger images to fill the screen */
@media only screen and (max-height: 575.98px) and (orientation: landscape) {

	#recipe-selector article .hero img {
		height:70vh;
	}

	#recipe img {
		max-height:70vh;
	}

}


/* Calculator Tables */
#calculator table {
	width: 100%;
	border-collapse: collapse;
	text-align: center;
	background-image: linear-gradient(to bottom, #FFB950, #FF5C50);
}

#calculator thead {
  background-color: #FF505B;
  color: #fff;
  position: sticky;
  inset-block-start: 0; /* "top" */
}

#calculator td, #calculator th {
	padding: .5rem;
	border-inline: 1px solid #FF505B;
	border-top: 1px solid white;
}

#calculator thead th {
	background-color: #FF505B;
	position: sticky;
   top: 0;
}

#calculator tbody tr:hover {
	background-color: #FF505B;
}