/* Recipe Container
 ******************/
main {
	margin: 1rem 0;
}

.recipe-title {
	grid-area: title;
}
.recipe-description {
	grid-area: description;
}
.recipe-image {
	grid-area: image;
}
.recipe-tips {
	grid-area: tips;
}
.recipe-ingredients {
	grid-area: ingredients;
}
.recipe-directions {
	grid-area: steps;
}
.recipe-badges {
    grid-area: badges;
}

.recipe-detail-container {
	margin: auto;
	display: grid;
	grid-auto-rows: minmax(30px, auto);
	grid-gap: 1rem;
	grid-template-areas:
		"...  image        ..."
		"...  title        ..."
        "...  badges       ..."
		"...  description  ..."
		"...  ingredients  ..."
		"...  steps        ..."
		"...  tips         ..."
}

@media screen and (min-width: 600px) {
	.recipe-detail-container {
		margin: 0 12px;
		grid-template-columns: 40% auto;
		grid-template-areas:
			"image        title"
			"image        badges"
			"description  description"
			"ingredients  steps"
			"tips         tips"
	}
}

@media screen and (min-width: 900px) {
	.recipe-detail-container {
		grid-template-columns: 5% 40% auto 5%;
		grid-template-areas:
			"...  title         title        ..."
            "...  badges        badges       ..."
			"...  image         description  ..."
			"...  ingredients   steps        ..."
			"...  tips          tips         ..."
	}
}

@media screen and (min-width: 1200px) {
	.recipe-detail-container {
		grid-template-columns: 5% 40% auto 5%;
		grid-template-areas:
			"...  image         title        ..."
            "...  image         badges       ... "
			"...  image         description  ..."
			"...  ingredients   steps        ..."
			"...  tips          tips         ..."
	}
}


/* Recipe Sections
 *****************/
.recipe-title {
	margin: auto;
	font-size: 1.5em;
	text-align: center;
}

@media screen and (min-width: 800px) {
	.recipe-title {
		font-size: 1.5em;
	}
}

.recipe-detail-container h2 {
	text-align: center;
	border-bottom: 3px solid black;
	font-weight: bold;
	padding-bottom: 1rem;
}

.recipe-detail-container p {
	padding-top: 1rem;
	padding-bottom: 0.2rem;
}

.recipe-image img {
	width: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0.5rem;
}

.recipe-detail-container ul, .recipe-detail-container ol {
	list-style-position: inside;
	padding-bottom: 0.5rem;
}

.recipe-detail-container li {
	padding: 0.6rem 0;
}

.recipe-detail-container a, .recipe-detail-container a:visited {
	color: #9e9ed4;
}

.recipe-detail-container h4 {
	padding-top: 0.5em;
}

.recipe-description {
	padding: 1rem;
}

.recipe-description p {
  font-size: 1.4em;
  font-style: italic;
}

.recipe-ingredients {
	background: rgb(225, 222, 222);
	padding: 1rem;
}

.recipe-ingredients ul {
	list-style-position: outside;
  	padding-left: 1.3rem;
}

.recipe-ingredients h3 {
	padding-top: 0.5rem;
}

.recipe-directions {
	padding: 1rem;
}

.recipe-directions ol {
  list-style-position: outside;
  padding-left: 1.3rem;
}

.recipe-directions h3 {
	padding-top: 0.5rem;
}

.recipe-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

@media screen and (min-width: 900px) {
  .recipe-badges {
    flex-direction: row;
  }
}

.recipe-badges > div {
  padding: 4px 16px;
}

.recipe-badges p {
  padding: 0.5rem;
  font-size: 1.2rem;
}

@media screen and (min-width: 900px) {
  .recipe-badges-type, .recipe-badges-labels {
    padding-right: 12px;
    border-right: 3px solid #ccc;
  }
}

.recipe-badges-type a, .recipe-badges-type a:visited {
  text-decoration: none;
  color: white;
}

.breakfast-badge {
  background-color: blue;
}

.dinner-badge {
  background-color: blueviolet;
}

.dessert-badge {
  background-color: palevioletred;
}

.side-dish-badge {
  background-color: rgb(1, 43, 1);
}

.baked-good-badge {
  background-color: rgb(201, 163, 27);
}

.drink-badge {
  background-color: rgb(135, 21, 152);
}

.recipe-tips ul {
	list-style-position: outside;
  	padding-left: 1.3rem;
}

.recipe-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.print-button {
    padding: 0.5rem;
    font-size: 1.2rem;
    background-color: rgba(34, 211, 14, 0.714);
    color: black;
	cursor: pointer;
	border: none;
}


/* Printing Recipe
 *****************/
@media print {
	/* Hide UI elements */
	header,
    nav,
    footer,
	.recipe-badges-type,
    .recipe-badges-actions {
        display: none !important;
    }
	
	/* a[href]:after { content: " (" attr(href) ")"; font-size: 0.85em; } */

	.recipe-detail-container {
		margin: 0;
		grid-template-columns: 5% 30% auto 5%;
		grid-template-areas:
			"...  title         title        ..."
            "...  badges        badges       ..."
			"...  image         description  ..."
			"...  ingredients   ingredients  ..."
			"...  steps         steps        ..."
			"...  tips          tips         ..."
	}

	.recipe-title {
		font-size: 1.5em;
	}

	.recipe-description {
		padding: 0;
	}

	.recipe-description p {
	    font-size: 1.0em;
	}

	.recipe-detail-container p {
		padding-top: 0;
	}

	.recipe-badges {
	    flex-direction: row;
  	}

	.recipe-badges-labels p {
		color: black;
		font-weight: 500;
	}

	/* Prevent awkward page breaks */
    .recipe-ingredients,
    .recipe-directions {
        break-inside: avoid;
        page-break-inside: avoid;
    }
}