html {
	font-size: clamp(14px, 2vw, 18px);
}
body {
	background-color: #353535;
	color: #FAFFD1;
	font-family: Arial, sans-serif;
	margin: 0;
	line-height: 1.6;
}

/* NAVIGATION BAR */

.navbar {
	background-color: #1f1f1f;
	overflow: hidden;
	padding: 0.75rem 0;
	text-align: center;
}
.navbar a {
	color: #FAFFD1;
	text-decoration: none;
	padding: 0.875rem 1.25rem;
	display: inline-block;
	font-weight: bold;
	font-size: 1rem;
}
.navbar a:hover {
	background-color: #575757;
}

/* GENERAL TEXT ELEMENTS */

h1 {
	font-size: clamp(2rem, 5vw, 3rem);
	text-align: center;
	margin-bottom: 0.2rem;
	color: #FFD700;
}
p {
	font-size: 1rem;
	text-align: center;
	margin: 0.5rem 0;
}
.title {
	margin-top: 0;
}
.company-link {
	color: #FFD700;
	text-decoration: none;
	font-weight: bold;
}
.company-link:hover {
	color: #FFEA70;
	text-decoration: underline;
}
.company-link-wrapper {
	margin-bottom: 1.5rem;
}
address {
	font-style: normal;
	text-align: center;
	margin-top: 1rem;
}
a[href^="tel"],
a[href^="mailto"] {
	color: #FAFFD1;
	text-decoration: none;
}
a[href^="tel"]:hover,
a[href^="mailto"]:hover {
	text-decoration: underline;
}
a:visited {
	color: #FFD700;
}

/* MAIN WRAPPER */

main {
	max-width: 900px;
	margin: 2rem auto;
	padding: 2rem;
	background-color: #1f1f1f;
	border-radius: 12px;
	box-shadow: 0 0 15px rgba(255,255,255,0.1);
}
.intro {
	text-align: center;
	margin-bottom: 2rem;
	font-style: italic;
	color: #FFEA70;
}

/* CONTACT FORM */

.contact-form {
	max-width: 500px;
	margin: 2rem auto;
	background-color: #1f1f1f;
	padding: 1.5rem;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(255,255,255,0.1);
}
.contact-form h2 {
	text-align: center;
	margin-bottom: 1rem;
	color: #FFD700;
}
.contact-form label {
	display: block;
	margin-bottom: 1rem;
	font-weight: bold;
}
.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 0.75rem;
	margin-top: 0.25rem;
	border: none;
	border-radius: 5px;
	background-color: #2b2b2b;
	color: #FAFFD1;
	font-size: 1rem;
	box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: 2px solid #FFD700;
}
.contact-form button {
	display: block;
	width: 100%;
	padding: 0.75rem;
	background-color: #FFD700;
	color: #1f1f1f;
	border: none;
	border-radius: 5px;
	font-size: 1rem;
	font-weight: bold;
	cursor: pointer;
	transition: background-color 0.2s ease-in-out;
}
.contact-form button:hover {
	background-color: #FFEA70;
}

/* COOKBOOK FILTER SYSTEM */

.filters {
	text-align: center;
	margin-bottom: 2rem;
}
.filter-row {
	margin: 1rem 0;
}
.filter-tag {
	display: inline-block;
	margin: 0.25rem;
	padding: 0.4rem 0.75rem;
	border-radius: 8px;
	background-color: #2b2b2b;
	color: #FFD700;
	cursor: pointer;
	font-size: 0.9rem;
	transition: background-color 0.2s ease-in-out;
	user-select: none;
}
.filter-tag:hover {
	background-color: #FFD700;
	color: #1f1f1f;
}
.filter-tag.active {
	background-color: #FFD700;
	color: #1f1f1f;
}
#filterBar {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
#level1 .filter-tag {
	margin-right: 0.5rem;
}
#level2 .filter-tag,
#level3 .filter-tag {
	margin-left: 0.25rem;
}
.hidden {
	display: none !important;
}

/* RECIPE LISTS */

.recipe-list {
	list-style: none;
	padding-left: 0;
}
.recipe-list li {
	margin: 1rem 0;
	padding: 1rem;
	background-color: #2b2b2b;
	border-radius: 8px;
	box-shadow: 0 0 10px rgba(255,255,255,0.05);
}
.recipe-list a {
	color: #FAFFD1;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.1rem;
}
.recipe-list a:hover {
	color: #FFD700;
	text-decoration: underline;
}
.tags {
	margin-top: 0.5rem;
}
.tag {
	display: inline-block;
	background-color: #1f1f1f;
	color: #FFD700;
	border-radius: 6px;
	padding: 0.2rem 0.6rem;
	font-size: 0.8rem;
	margin-right: 0.4rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* RECIPE PAGE LAYOUT */

.ingredients, .preparation, .steps {
	margin-top: 1.5rem;
}
ul, ol {
	padding-left: 1.5rem;
}
li {
	margin-bottom: 0.5rem;
}

/* RECIPE LINKS IN INGREDIENTS */

.ingredients a {
	color: #FFD700;
	font-weight: bold;
}
.ingredients a:hover {
	color: #FFEA70;
}

/* RECIPE NOTES */

.note {
	background-color: #2b2b2b;
	border-left: 4px solid #FFD700;
	padding: 1rem;
	margin: 1.5rem 0;
	border-radius: 8px;
	font-style: italic;
}

/* BACK LINK */

.back-link {
	display: inline-block;
	margin-top: 2rem;
	text-align: center;
	font-weight: bold;
}
a.back-link {
	color: #FFD700;
	text-decoration: none;
	font-weight: bold;
}
a.back-link:hover {
	color: #FFEA70;
	text-decoration: underline;
}

/* TEXT JUSTIFICATION IN RECIPES */

.preparation p,
.steps li {
	text-align: justify;
	text-justify: inter-word;
}

/* META BOX */

.meta-box {
	margin-top: 2rem;
	padding: 0.75rem 1rem;
	background-color: #2b2b2b;
	border-left: 3px solid #575757;
	color: #CFCFCF;
	font-size: 0.85rem;
	border-radius: 6px;
	opacity: 0.85;
}
.meta-box p {
	margin: 0.25rem 0;
}


/* FOOTER */

footer {
  text-align: center;
	margin-top: 3rem;
	font-size: 0.9rem;
	color: #BEBEBE;
}
footer a {
	color: #FFD700;
	text-decoration: none;
}
footer a:hover {
	text-decoration: underline;
	color: #FFEA70;
}