style.src.css

:root {
	--color1: hsl(25, 100%, 50%);
	--color1-light: hsl(25, 100%, 90%);
	--color2: hsl(190, 67%, 42%);
	--gray: hsl(190, 10%, 50%);
	--light-gray: hsl(220, 10%, 95%);
	--serif: Baskerville, Adobe Caslon Pro, serif;
	--sans-serif: Helvetica Neue, sans-serif;
	--section-width: 60em;
}

body {
	margin: 0;
	font: 120%/1.5 var(--serif);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sans-serif);
	line-height: 1.2;
	font-weight: 300;
}

h3 {
	font-size: 200%;
	margin: .5em 0;
}

a {
	color: inherit;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

select, input:where([type="text"], [type="number"]) {
	border: 1px solid hsla(0 0% 0% / .1);
	font: inherit;
	background: hsla(0,0%,100%,.6);
}

p:first-of-type {
	margin-top: 0;
}

p:last-of-type {
	margin-bottom: 0;
}

body > header {
	padding: 0;
	padding-top: 1.5em;
	background: hsl(25, 100%, 50%);
	color: white;
	overflow: hidden;

	& h1 {
		margin: 0;
		padding: 0 .5em;
		line-height: 1;
		font-weight: 600;
		font-style: italic;

		& img {
			display: block;
			margin: auto;

			&[src*=logo] {
				width: 3em;
			}

			&[src*=wordmark] {
				height: 2.8em;
			}
		}
	}

	& p {
		margin: 0;
		text-align: center;
		font-family: var(--sans-serif);
		font-weight: 900;
		color: black;
	}

	& nav {
		margin: auto;
		margin-top: .5em;
		display: flex;
		justify-content: center;
		font-family: var(--sans-serif);
		font-weight: bold;
		background: #40060e;
		--secondary-color: var(--color1);

		& a {
			padding: .5em;
			padding-bottom: .1em;
			text-decoration: none;
			border-bottom: .4em solid transparent;

			&:hover {
				border-bottom-color: var(--secondary-color);
				text-decoration: none;
			}

			& sup {
				display: inline-block;
				vertical-align: .5em;
				font-size: 60%;
				color: var(--secondary-color);
			}
		}
	}

	@media (max-width: 600px) {
		position: relative;
		font-size: 90%;

		& h1,
		& p,
		& nav {
			padding-left: 7rem;
		}

		& p {
			text-align: left;
		}

		& h1 {
			& img {
				margin: 0;

				&[src*=logo] {
					position: absolute;
					top: .5em;
					bottom: 0;
					left: .5em;
					width: auto;
					height: calc(100% - .8em);
				}
			}
		}

		& nav {
			justify-content: flex-start;
		}
	}
}

h3 {
	color: var(--color1);
}

[id="filters"] {
	display: grid;
	grid-template-rows: auto auto;
	padding: 1em 0;
	margin-top: -1em;
	background: var(--color1-light);
	box-shadow: 50vw 0 var(--color1-light), -50vw 0 var(--color1-light);

	& select[property="countryFilter"] {
		background: var(--flag) no-repeat .3em 50% hsla(0,0%,100%,.6);
		text-indent: 1em;
	}

	& input[type=search] {
		grid-row: 1;
		grid-column-end: span 4;
		width: 100%;
		padding: .1em .5em .1em 1.4em;
		border: none;
		border-radius: 1em;
		margin: 0 0 .5em -.2em;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">\
			<text y="1em" font-size="90">🔍</text>\
			</svg>') no-repeat .25em 50% / auto calc(100% - .3em), hsl(25, 100%, 96%);
		background-blend-mode: luminosity, normal;
		font-size: 200%;

		&:focus {
			outline: none;
			background-color: white;
		}

		&::placeholder {
			color: var(--color1);
			font-weight: 300;
		}
	}

	& > label {
		grid-row: 2;
	}
}

#award-filter {
	& select {
		display: block;

	}

	& option {
		background: var(--icon) right / auto .8em no-repeat;
		padding-right: 1.4em;
	}
}

button.clear[mv-action] {
	background: hsl(0 0% 100% / .2);
	border: none;
	color: black;
	filter: invert() contrast(2) brightness(1.5);
	border-radius: 50%;
	cursor: pointer;
	width: 1.7em;
	height: 1.7em;
	line-height: 1.45;
	padding: .2em 0 0;
	font-size: .6em;

	&:hover {
		background: hsl(0 0% 100% / .3);
	}
}

body > main {
	margin: 1em 2em;
	padding: 0 calc(50% - var(--section-width)/2 - 1em);

	& h2 {
		margin: 0;
		font-size: 250%;
		color: var(--color1);
	}

	& p[property=description] {
		margin-top: 0;
	}

	& .mv-login {
		position: absolute;
		top: .5em;
		right: .5em;
		padding: .3em .5em;
		border-radius: .3em;
		background: rgba(0,0,0,.4);
		color: white;
		font: bold 70% var(--sans-serif);

		&:hover {
			background: rgba(0,0,0,.6);
		}
	}
}

ol {
	padding: 0;
}

[mv-app]:not([mv-mode=edit]) .hide-on-read {
	display: none;
}

[property="recipe"] {
	margin-bottom: 1em;

	& > .content {
		counter-reset: step;
	}

	@media (min-width: 800px) {
		& > .content {
			display: flex;
		}

		& .directions {
			margin-left: 3em;
		}
	}

	& > footer { /* Forked */
		padding: .4em .8em .6em;
		margin-top: 1em;
		color: white;
		font-style: italic;
		font-size: 120%;
		--fork: url(logo.svg) right / contain no-repeat content-box;
		background: var(--fork) var(--color2);

		@supports (background-blend-mode: inherit) {
			background:  var(--fork), var(--image) center / cover var(--color2);
			background-blend-mode: normal, multiply;
		}

		& > span {
			font: bold 60%/1 var(--sans-serif);
		}
	}
}

.recipe-card {
	position: relative;
	overflow: hidden;
	text-align: center;
	color: white;
	padding: 2em;

	&::before {
		content: "";
		position: absolute;
		top: -1em;
		right: -1em;
		bottom: -1em;
		left: -1em;
		z-index: -1;
		background: var(--image) center / cover var(--color2);
		filter: blur(1em);
	}

	& h2 {
		letter-spacing: -.02em;
		font-weight: bold;
		margin-bottom: .2em;
		color: white;
	}

	& img {
		width: 10em;
		height: 10em;
		object-fit: cover;
		border-radius: 50%;
		border: .5em solid hsla(0,0%,100%,.3);
		margin: 0 0 1em;

		&[mv-mode=edit] {
			background: var(--color1);
			background-clip: padding-box;

			&[src=""] {
				content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100">\
		<rect width="100%" height="100%" fill="hsl(25, 100%, 50%)" />\
		<text x="19" y="1.25em" font-size="60">🍽</text>\
	</svg>');
				content: url("logo.svg");
				object-fit: scale-down;
			}
		}
	}

	& span[property=tag] {
		padding: .3em .5em;
		border-radius: .3em;
		margin: 0 .2em;
		background: white;
		color: black;
		mix-blend-mode: screen;
		font: bold 80%/1 var(--sans-serif);
		text-transform: uppercase;
	}

	& .mv-empty[mv-mode="edit"] {
		opacity: 1;
	}
}

.ingredients {
	min-width: 15em;

	& ol {
		list-style: none;

		& > li {
			margin-bottom: .5em;
		}

		& input[type=checkbox] {
			position: absolute;
			margin-left: -1.8em;
			margin-top: .5em;

			&:checked ~ span {
				text-decoration: line-through;
			}
		}
	}

	& h4 {
		font-weight: bold;
	}
}

	[property="ingredient"] {
		& [property="preparation"] {
			opacity: .5;
			font-style: italic;
		}
	}

.directions {
	flex: 1;
}

	[property="step"][mv-list-item] {
		display: flex;
		position: relative;
		margin-bottom: .5em;
		counter-increment: step;

		&::before {
			content: counter(step);
			position: absolute;
			right: 100%;
			margin-right: .5em;
			color: var(--color2);
			font: bold 100% var(--sans-serif);
		}

		& > div {
			flex: 1;
		}

		& p {
			margin: 0;
		}

		& img {
			max-width: 100%;
		}
	}

.index {
	@media (min-width: 700px) {
		& [mv-app="recipes"] {
			display: flex;
			flex-flow: row wrap;
			justify-content: space-between;

			& article[property="recipe"],
			& .mv-add-recipe {
				width: calc(50% - .5em);
			}

			& .mv-bar {
				width: 100%;
			}
		}
	}

	& [property=recipe] {
		box-sizing: border-box;

		font-size: 80%;

		& h2 {
			font-size: 180%;
		}
	}
}

.mv-add-recipe {
	border: 2px dashed;
	background: transparent;
	font: bold 150% var(--sans-serif);
	margin-bottom: .66em;
	color: var(--color2);
}

[property="restaurant"][mv-list-item] {
	position: relative;
	border: 1px solid rgba(0,0,0,.2);
	margin: 1em 0;

	& > header {
		padding: 1em;
		background: var(--light-gray);

		& > * {
			margin: 0;
		}

		& h2 {
			font: bold 300%/1 var(--sans-serif);
			letter-spacing: -.05em;
			color: var(--color1);

		}

		& [property=rating] {
			position: absolute;
			top: .5em;
			right: .5em;
			font-size: 150%;
			min-width: 2em;
			line-height: 2;
		}

		& .avatar {
			width: 8em;
			height: 8em;
			object-fit: cover;
			margin-right: 1em;
			border-radius: 50%;
			box-shadow: 0 0 0 .3em rgba(0,0,0,.15);
		}

		@media (min-width: 650px) {
			padding-right: 4em;
			padding-left: 10em;

			& .avatar {
				position: absolute;
				top: 1em;
				left: 1em;
			}
		}

		& .stats {
			margin: 0;
			font-style: italic;
			opacity: .6;
		}
	}

	& .location {
		&::before {
			content: var(--flag);
		}
	}

	& .awards {
		display: inline-block;

		& img {
			height: 1.1ex;
		}
	}
}

.visits {
}

[property="visit"] {
	padding: 1em;

	& > header {
		display: flex;
		align-items: center;

		& h3 {
			flex: 1;
		}

		& [property=rating] {

		}
	}


}

.button {
	padding: .5em .5em;
	background: black;
	color: white;
	border-radius: .2em;
	font: bold 1.2rem/1 var(--sans-serif);
	text-transform: uppercase;

	&:hover {
		text-decoration: none;
		background: var(--color2);
	}
}

.close {
	position: fixed;
	bottom: 1em;
	right: 1em;
	z-index: 2;

	&::after {
		content: ' Close';
	}

	&:hover {
		background: #c00;
		text-decoration: none;
	}
}

.previous,
.next {
	position: absolute;
	bottom: 1em;
}

.next {
	right: 7em;

	&::after {
		content: " ▸";
	}
}

.previous {
	right: 12em;

	&::before {
		content: "◂ ";
	}
}

[mv-app]:not(.mv-target-within) .close {
	display: none;
}

.dishes {
	display: flex;
	flex-wrap: wrap;
}

[property="dish"] {
	position: relative;
	margin: 1px;
	display: flex;

	& img {
		display: block;
		--size: 11em;
		width: var(--size);
		height: var(--size);
		object-fit: cover;
		background: var(--light-gray);

		@nest .index & {
			--size: 140px;
		}

		@media (max-width: 550px) {
			--size: 140px;
		}
	}

	& [property=rating] {
		position: absolute;
		right: .5em;
		bottom: .5em;

		& + [property=rating] {
			right: 2.8em;
		}
	}

	[property=comment] {
		font-style: italic;
	}

	&:not(:target):not(.mv-target-within) {
		& .content,
		& .next,
		& .previous {
			display: none;
		}
	}

	&:target,
	&.mv-target-within {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		display: flex;
		box-sizing: border-box;
		padding: 1em;
		overflow: auto;
		background: rgba(0,0,0,.85);
		backdrop-filter: blur(10px);
		color: white;
		font-size: 150%;

		@media (max-aspect-ratio: 1/1) {
			flex-flow: column;
		}

		& .content {
			overflow: auto;

			& h4 {
				margin: 0;
			}

			@media (min-aspect-ratio: 1/1) {
				max-width: 30vw;
			}

			@media (max-aspect-ratio: 1/1) {
				margin-top: .5em;
			}
		}

		& [property=rating] {
			top: 1em;
			left: 1em;
			font-size: 150%;
			right: auto;
			bottom: auto;

			& + [property=rating] {
				top: 3.5em;
			}
		}

		& img {
			--size: calc(100vmin - 2em);
			width: auto;
			min-width: var(--size);
			margin-right: 1em;
		}
	}
}

[property=rating] {
	display: inline-block;
	background: var(--color2);
	color: white;
	padding: .25em;
	min-width: 1.5em;
	border-radius: .3em;
	text-align: center;
	font: bold 100%/1.5 var(--sans-serif);

	&[data-class="10"] {
		--stripe: .2em;
		background: repeating-radial-gradient(hsl(330, 100%, 50%) 0, transparent var(--stripe),
		 hsl(330, 100%, 50%) calc(2 * var(--stripe))) hsl(330, 100%, 70%);
	}

	&[data-class="9"] {
		background: hsl(150, 100%, 35%);
	}

	&[data-class="8"] {
		background: hsl(100, 60%, 50%);
	}

	&[data-class="7"] {
		background: hsl(70, 70%, 50%);
	}

	&[data-class="6"] {
		background: hsl(50, 100%, 50%);
	}

	&[data-class="5"] {
		background: hsl(30, 100%, 50%);
	}

	&[data-class="4"],
	&[data-class="3"],
	&[data-class="2"],
	&[data-class="1"] {
		background: hsl(10, 100%, 45%);
	}

	&[data-class="0"] {
		display: none;
	}
}

p.result-count {
	margin: 1em 0;
	font-style: italic;
	text-align: right;
}

.permanently-closed {
	display: inline-block;
	vertical-align: middle;
	font-size: 1rem;
	background: hsl(10, 100%, 45%);
	color: white;
	padding: .4em .5em .5em;
	border-radius: .2em;
	text-transform: uppercase;
	letter-spacing: normal;
	white-space: nowrap;
}