body{
	height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	background:#fff7f0;
}
	
main {
    flex-grow: 1;
    padding-bottom: 20px; 
}

@font-face{
	font-family: "text1";
	src: url("fonts/MinionPro-Regular.otf") format("opentype");
		
}

@font-face{
	font-family: "header";
	src: url("fonts/Poppins-Regular.ttf") format("truetype");
		
}

@font-face{
	font-family: "body";
	src: url("fonts/OpenSans-Regular.ttf") format("truetype");
		
}

header{
    position: relative;
    padding: 0;
    margin: 0;
    height: auto; 
}


nav {
    background-color:transparent;
    padding: 10px;
	text-align: center;
	position: relative;
}

nav::after{
	content: "";
	display: block;
	width: 80%;
	height: 2px;
	background-color: #f8e5d6;
	margin: 20px auto 0;
	
}
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}
nav ul li {
    margin: 0 3%;
	color: black;
	text-align: center
}

nav ul li a {
    font-family: "text1", Arial;
    font-size: clamp(0.9rem, 2vw, 1.9rem);
    color: black;
    text-decoration: none;
    position: relative;
}



nav ul li a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1.5px;
	background-color: #b6101c;
  	transform: scaleX(0);
  	transform-origin: left;
  	transition: transform 0.3s ease;
	

}


nav ul li a:hover::after {
  transform: scaleX(1);
}

.logo img{
	width: 12%;
	height: auto;
	margin: 0;
	padding: 0;
	padding-top: 3%;
	padding-left: 10%;
}
		
.footerlogo{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1%;
	
}

.footerlogo img{
	width: clamp(3rem, 1.5vw, 7rem);
	height: auto;
		
}

.footerlogo p{
	text-align: center;
	margin: 0;
	font-family: "body", "Arial";
	font-size: clamp(0.75rem, 1.5vw, 0.9rem);
	
}

footer{
	display: flex;
	flex-direction: column;
	align-items: center;	
	padding: 20px 0;
	background-color: transparent;
	text-align: center;
	margin-left: clamp(1rem, 10vw, 12rem);
	margin-right: clamp(1rem, 10vw, 12rem);

}

.footer-line{
	width: 80%;
	border: none;
	border-top: 2px solid #f8e5d6;
	margin-bottom: 15px;
	
}


#greeting {
    font-family: "header",Arial;
    font-size: clamp(1.6rem, 4vw, 2rem);
    margin: 10px 0;
    text-align: left;
	margin-left: clamp(1rem, 10vw, 12rem);
	margin-bottom: -1.5%;
	padding: 0;
	font-weight: 400;

}

.recipes-title{
	font-family: "body", Arial;
	font-size:  clamp(0.6rem, 4vw, 1rem);
	font-weight: 400;
	margin-bottom: 2%;
	text-align: left;
	margin-left: clamp(1rem, 10vw, 12rem);
	padding: 0;
}

/* Container for the row */
.image-row {
  	display: flex;
 	justify-content: space-around; /* space the items evenly */
  	gap: 20px; /* spacing between cards */
  	margin: 20px;
	margin-left: clamp(1rem, 10vw, 12rem);
	margin-right: clamp(1rem, 10vw, 12rem);
}

/* Each image+text block */
.image-card {
	text-align: center; /* centers text under image */
	border: 2px solid #f8e5d6; /* border around image+text */
	padding: 10px;
	border-radius: 7px; /* optional rounded corners */
	width: 200px; /* fixed width */
}

/* Images inside the card */
.image-card img {
	width: 100%; /* makes image fit the card */
	height: auto;
	border-radius: 5px; /* optional */
}

/* Text under the image */
.image-card p {
	margin-top: 10px;
	font-size: clamp(0.7rem, 2vw, 1rem);
	font-family: "body", Arial;
}






h2{
	font-family: "header",Arial;
    font-size: clamp(1.6rem, 4vw, 2rem);
    margin: 10px 0;
    text-align: left;
	margin-left: clamp(1rem, 10vw, 12rem);
	margin-bottom: -1.5%;
	padding-bottom: 0;
	font-weight: 400;
	
}

h3{
	font-family: "header",Arial;
    font-size: clamp(1.6rem, 4vw, 2rem);
    margin: 10px auto 0;
    text-align: center;
	margin-bottom: 0%;
	padding-top: 10px;
	font-weight: 400;
	
}

.layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1rem, 4vw, 4rem);
  margin-top: clamp(1.5rem, 4vw, 3rem);
  margin-left: clamp(1rem, 10vw, 12rem);
  margin-right: clamp(1rem, 10vw, 12rem);
}

.layout-text h4 {
	font-family: "header", Arial;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	
}

.layout-text p {
  font-family: "body", Arial;
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  line-height: 1.6;
  max-width: 100%;
}

.ingredients-list,
.method-list {
  font-family: "body", Arial;
  font-size: clamp(0.95rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  padding-left: 1.2rem;
  margin-top: 0.5rem;
}

.ingredients-list li,
.method-list li {
  margin-bottom: 0.6rem;
}

.media {
  display: flex;
  align-items: flex-start;
  position: sticky;
  top: 120px;
  align-self: start;
  flex-wrap: wrap; /* allows wrapping on smaller screens */
  gap: clamp(1rem, 2vw, 2rem);
}

.image {
	border: 2px solid #f8e5d6;
	padding: 12px;
	background-color: #fff7f0;
	border-radius: 6px;
	max-width: 420px;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;

	
}

.image img {
	height: auto;
	width: 100%;
	display: block;
	border-radius: 0px;
	
}

/* ===============================
   Media Queries for Tablets & Mobile
   =============================== */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr; /* single column on smaller screens */
    gap: 2rem;
  }

  .media {
	  order: 2; /* image goes below text */
	  position: static;
	  top: auto;
	  display: flex;
	  justify-content: center;
	  
  }
	.image{
		margin: 0 auto;
		width: 100%;
		max-width: 340px;
	}
  
	.image img {
		display: block;
		width: 100%;
		height: auto;
	
  }
}

@media (max-width: 600px) {
 

  .layout {
    gap: 1.5rem;
  }
}



.events-list {
  font-family: "body", Arial;
  font-size: clamp(0.95rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  padding-left: 1.2rem;
  margin-top: 0.5rem;
}

.events-list li {
  margin-bottom: 0.6rem;
}



contact-links a {
  color: black;
  text-decoration: none;
  border-bottom: 1.5px solid #b6101c;
  padding-bottom: 2px;

}

.contact-links a:hover {
  color: #b6101c;
}

/* Form layout */
.contact-form {
  margin-top: 0.8rem;
}

.form-row {
  margin-bottom: 0.8rem;
}

.contact-form label {
  display: block;
  font-family: "header", Arial;
  font-size: clamp(1rem, 2.2vw, 1.1rem);
  margin-bottom: 0.3rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  max-width: 520px;
  padding: 10px;
  border: 2px solid #f8e5d6;
  border-radius: 6px;
  background: #fff7f0;
  font-family: "body", Arial;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  box-sizing: border-box;
}

/* Primary button—aligned with your brand colour */
.btn-primary {
  padding: 10px 16px;
  border: 2px solid #b6101c;
  background: #b6101c;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-family: "header", Arial;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
}
.btn-primary:hover {
  background: #971019; /* slightly darker on hover */
  border-color: #971019;
}

/* Extra spacing helper for subsections */
.mt-section {
  margin-top: 1.6rem;
}

/* ---------- Active nav state (optional, but nice) ---------- */

nav ul li a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ---------- Responsive stacking (already in your fix) ----------
   Keeping here in case you want this consolidated.
   If you've already added these elsewhere, you can skip duplication. */

@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    gap: clamp(1rem, 4vw, 2rem);
  }
  .media {
    position: static;
    top: auto;
    order: 2;
    display: flex;
    justify-content: center;
  }
  .image {
    margin: 0 auto;
    width: 100%;
    max-width: 340px;
  }
  .image img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Nice little spacing under text so the image doesn't crowd it */
  .layout-text { margin-bottom: 1rem; }
}

@media (max-width: 600px) {
  .layout { gap: 1.5rem; }
}


.contact-links li,
.contact-links li strong,
.contact-links li a {
  color: #b6101c;                 /* brand red */
}


.contact-links a:hover,
.contact-links a:focus-visible {
  color: #971019;                 /* slightly darker red */
  border-bottom-color: #971019;
  outline: none;
}


.contact-links li,
.contact-links li strong {
  color: #000;                 /* labels stay black */
}

.contact-links li a {
  color: #b6101c;              /* clickable text red */
  text-decoration: none;
  border-bottom: none;
  font-weight: 500;
}

/* Hover state for links only */
.contact-links li a:hover,
.contact-links li a:focus-visible {
  color: #971019;              /* darker red on hover */
  border-bottom: none;
  outline: none;
}

/* Prevent visited links turning purple */
.contact-links li a:visited {
  color: #b6101c;
  border-bottom-color: #b6101c;
}