/* ============================================================
   A Squared Chefs — Aspen Private Chefs
   Clean static rebuild (no WordPress). Recreates the look of the
   original "Organic Lite" themed site.
   Brand greens: #71b673 (links/nav) and #69c082 (leaves)
   ============================================================ */

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	padding: 0;
	background-color: #ffffff;
	font: 15px/22px 'Roboto Slab', serif;
	color: #7c7b79;
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; border: 0; display: block; }

a { text-decoration: none; color: #71b673; transition: color .3s ease; }
a:hover { color: #666; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0 0 15px; line-height: normal; font-weight: 700; }
p { margin: 0; padding: 0; }

.clear { clear: both; }
/* offset so anchor links land flush below the shrunk fixed header (~162px tall) */
.anchor { display: block; position: relative; visibility: hidden; scroll-margin-top: 162px; }

/* ---------- Header ---------- */
#header {
	width: 100%;
	position: fixed;           /* lifted out of flow, so shrinking it never shoves the page = no bounce */
	top: 0;
	left: 0;
	background-color: #ffffff;
	z-index: 1000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}
.header-inner {
	width: 1170px;
	max-width: 92%;
	margin: 0 auto;
	position: relative;
}

.logo {
	text-align: center;
	padding: 10px 0 0 0;
	margin: 0 auto;
	transform-origin: center top;
	transition: transform .25s ease, margin-bottom .25s ease;
}
.logo a { display: inline-block; color: #444444; }
.logo img { width: 220px; margin: 0 auto; }
/* Scrolled: shrink the logo to 50% (transform = no reflow) and pull the nav up to tighten the bar */
#header.scrolled .logo { transform: scale(.5); margin-bottom: -100px; }

/* Clear the fixed header. --header-h is the header's resting height (JS measures the real value). */
:root { --header-h: 264px; }
.page-our-food main { padding-top: var(--header-h); }            /* inner pages: plain top spacing */
.home .hero {                                                    /* home: hero photo fills up behind the header */
	padding-top: var(--header-h);
	min-height: calc(430px + var(--header-h));
}
/* Brand text kept for screen-readers / SEO but hidden visually (logo is the image) */
.logo .brand-name, .logo p {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.header_right { padding: 0; }

/* Mobile toggle (hidden on desktop) */
.toggle { display: none; text-align: center; }
.toggleMenu {
	display: none;                       /* revealed as inline-flex on mobile */
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin: 2px 0 10px;
	padding: 9px 22px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: #2c472d;
	font: 600 14px/1 'Roboto Slab', serif;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	transition: color .2s ease;
}
/* hamburger icon (CSS mask so it follows the text color) → morphs to an X when open */
.toggleMenu::before {
	content: "";
	width: 21px; height: 15px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 3h20M2 9h20M2 15h20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath d='M2 3h20M2 9h20M2 15h20' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.toggleMenu.is-open::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.toggleMenu:hover { color: #71b673; }

/* ---------- Navigation ---------- */
.sitenav {
	margin: 0 20%;
	width: 60%;
	position: relative;
}
.menu-main-menu-container { text-align: center; }
.sitenav ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0; padding: 0;
	list-style: none;
	font: 400 15px 'Roboto Slab', serif;
}
.sitenav ul li {
	position: relative;
	display: block;
	flex: 0 0 auto;
	list-style: none;
}
.sitenav ul li a {
	display: block;
	padding: 10px 0 15px 0;
	margin: 0 12px;
	text-align: center;
	white-space: nowrap;
	color: #393939;
	position: relative;
	transition: color .6s ease;
}
.sitenav ul li a:hover,
.sitenav ul li.current_page_item a { color: #71b673; }

/* ===== Leaf hover animation (envira leaf) =====
   Two leaves sprout above each nav item and settle onto it on hover. */
.sitenav ul li a::before,
.sitenav ul li a::after {
	content: "";
	position: absolute;
	width: 20px; height: 20px;
	background: url(../images/leaf.svg) no-repeat center / contain;
	top: -32px;
	opacity: 0;
	transform: scale(0) rotate(130deg);
	transform-origin: bottom center;
	pointer-events: none;
}
.sitenav ul li a::before {
	left: 60%;
	margin-left: 15px;
	transform: scale(0) rotate(-130deg);
	transition: all .7s ease;
}
.sitenav ul li a::after {
	left: 40%;
	margin-left: -15px;
	transition: all .5s ease;
}
.sitenav ul li a:hover::before,
.sitenav ul li.current_page_item a::before {
	left: 50%;
	margin-left: -15px;
	top: -7px;            /* raised so the leaf rests just above the text */
	opacity: 1;
	transform: scale(1) rotate(350deg);
	transition: all .4s ease;
	z-index: 1;
}
.sitenav ul li a:hover::after,
.sitenav ul li.current_page_item a::after {
	left: calc(50% - 3px);
	margin-left: -5px;
	top: -12px;           /* raised to match */
	opacity: 1;
	transform: scale(1) rotate(23deg);
	transition: all .6s ease;
	z-index: 1;
}

/* ---------- Cover sections (full-width image with overlay) ---------- */
.cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 430px;
	padding: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: #ffffff;          /* default cover text is light */
}
.cover.is-light { color: #2c2c2c; }
.cover__overlay { position: absolute; inset: 0; z-index: 0; }
.cover__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 50px 0;
	text-align: left;       /* items/steps left-align within their padded column */
}

/* ---------- Shared content typography ---------- */
.main-text { padding: 0 25%; font: 18px/24px 'Roboto Slab', serif; }
.secondary-text-font { font: 500 18px/28px 'Open Sans', sans-serif !important; }
.center-text { text-align: center; }
.medium-font { font-size: 20px; }
.large-font { font-size: 36px; }
.white { color: #ffffff !important; }
.spacer-20 { height: 20px; }
.spacer-30 { height: 30px; }
.spacer-40 { height: 40px; }
.spacer-50 { height: 50px; }

/* cover headings keep their natural 15px bottom spacing, like the original theme */

/* ---------- Buttons ---------- */
.buttons { display: flex; justify-content: center; margin: 20px 0; }
.btn {
	display: inline-block;
	background-color: rgba(150, 0, 63, 0.75);
	color: #ffffff;
	border: 2px solid #ffffff;
	border-radius: 2px;
	padding: calc(.667em + 2px) calc(1.333em + 2px);
	font: 400 18px 'Roboto Slab', serif;
	cursor: pointer;
	transition: background-color .3s ease, color .3s ease;
	text-align: center;
}
.btn:hover { background-color: rgba(150, 0, 63, 0.92); color: #ffffff; }

/* ---------- About section (two columns) ---------- */
.about h2 { margin-bottom: 40px; }   /* + the heading's own 15px = 55px gap, matching the original spacer */
.two-column {
	margin: 0 20%;
	width: 60%;
	display: flex;
	gap: 2em;
	align-items: flex-start;
	text-align: left;
}
.two-column .column { flex: 1; min-width: 0; }
.two-column .column p { margin-bottom: 30px; }
.two-column .column p:last-child { margin-bottom: 0; }
.about-text { color: #000000; }
.two-column .column img { width: 100%; border-radius: 2px; }

/* ---------- How it works ---------- */
.howitworks h2 { margin-bottom: 20px; }   /* + 15px heading pad = 35px before Step 1, matching original */
.step-title { font-size: 24px; font-weight: 700; margin-top: 0; }
.step-text { margin-bottom: 20px; }

/* ---------- Menus ---------- */
.menu-course { margin: 0 0 10px; }
.menu-title { font-size: 24px; font-weight: 700; margin: 24px 0 18px; padding: 0 25%; }
.menu-text { color: rgb(44, 71, 45); }
.menu-item {
	font: 500 18px/26px 'Open Sans', sans-serif;
	padding: 0 25%;
	margin: 2px 0;
}
.menu-item::before { content: "\2022\00a0"; }
.menu-item .gf {
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .04em;
	vertical-align: middle;
	margin-left: 6px;
	padding: 1px 5px;
	border: 1px solid currentColor;
	border-radius: 3px;
	opacity: .75;
}

/* Expanding "view more" area — progressive enhancement.
   No-JS: all items visible, buttons hidden.
   JS: extra items collapse; button toggles them with a smooth slide. */
.menu-more > .menu-more-inner { overflow: hidden; }
.js .menu-more {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .45s ease;
}
.js .menu-course.open .menu-more { grid-template-rows: 1fr; }

.menu-toggle-wrap { display: none; }       /* shown by JS */
.js .menu-toggle-wrap { display: flex; }
.menu-toggle.btn { font-size: 15px; padding: 8px 18px; }

/* ---------- Testimonial ---------- */
.testimonial { min-height: 300px; }
.testimonial blockquote { margin: 0; }
.quotation {
	font-size: 30px;
	line-height: 1.4;
	text-align: center;
	color: rgb(113, 23, 51);
	padding: 10px 20px;
	quotes: "\201C" "\201D" "\2018" "\2019";
}
.quotation::before {
	content: open-quote;
	position: relative;
	top: 30px; left: -10px;
	font-size: 3em; line-height: 0;
	color: rgb(113, 23, 51);
}
.quotation::after {
	content: close-quote;
	position: relative;
	top: 35px; left: 10px;
	font-size: 3em; line-height: 0;
	color: rgb(113, 23, 51);
}
.qfooter {
	margin: 0;
	text-align: center;
	font-size: 1.5em;
	font-style: italic;
	color: rgb(113, 23, 51);
}

/* ---------- Contact ---------- */
.contact-link { display: inline-block; margin: 6px 0; }
.contact-link, .contact-section .menu-text { color: rgb(44, 71, 45); }
.social-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 8px 0;
	font: 500 18px 'Open Sans', sans-serif;
	color: rgb(44, 71, 45);
}
.social-row a {
	display: inline-flex;
	color: rgb(44, 71, 45);
}
.social-row svg { width: 24px; height: 24px; fill: currentColor; }
.social-row a:hover { color: #71b673; }

/* ---------- Our Food gallery ---------- */
.page-title-bar {
	text-align: center;
	padding: 50px 20px 10px;
}
.page-title-bar h1 {
	font: 700 36px 'Roboto Slab', serif;
	color: #2c472d;
	padding: 0;
}
.gallery {
	max-width: 1160px;
	margin: 0 auto;
	padding: 30px 20px 60px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.gallery img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 2px;
	transition: transform .35s ease, box-shadow .35s ease;
}
.gallery img:hover {
	transform: scale(1.02);
	box-shadow: 0 6px 20px rgba(0,0,0,.18);
}

/* ---------- Footer ---------- */
.copyright-wrapper {
	position: relative;
	padding: 20px 0;
	background-color: #282a2b;
	color: #ffffff;
}
.copyright {
	margin: auto;
	text-align: center;
	font: 400 14px 'Roboto Slab', serif;
}
.copyright a { color: #ffffff; }
.copyright .credit { color: #8d8f90; }
.copyright .credit a { color: #b9bbbc; }
.copyright .credit a:hover { color: #71b673; }
.copyright a:hover { color: #71b673; }

/* ============================================================
   Responsive
   ============================================================ */
@media only screen and (max-width: 1260px) {
	.two-column { margin: 0 5%; width: 90%; }
	.main-text { padding: 0 5%; }
	.menu-item, .menu-title { padding: 0 5%; }
	.sitenav { margin: 0 10%; width: 80%; }
}

@media only screen and (max-width: 980px) {
	/* Mobile nav: toggle reveals a clean white dropdown panel */
	.toggle { display: block; }
	.toggleMenu { display: inline-flex; }
	.sitenav {
		float: none; margin: 0; width: 100%;
		max-height: 0; overflow: hidden;
		transition: max-height .35s ease;
	}
	.sitenav.open { max-height: 320px; }
	.menu-main-menu-container { text-align: center; }
	.sitenav ul {
		display: block; width: 100%;
		background-color: #ffffff;
		padding: 0;
		border-top: 1px solid #ececec;
	}
	.sitenav ul li {
		display: block; text-align: center;
		border-bottom: 1px solid #ededed;
	}
	.sitenav ul li:last-child { border-bottom: 0; }
	.sitenav ul li a {
		display: block; text-align: center;
		padding: 15px 20px; margin: 0;
		color: #3a3a3a;
		font: 400 16px/1 'Roboto Slab', serif;
		letter-spacing: .4px;
		transition: color .2s ease, background-color .2s ease;
	}
	.sitenav ul li a:hover,
	.sitenav ul li.current_page_item a {
		color: #71b673;
		background-color: #f5faf5;
	}
	/* No leaves in the mobile dropdown */
	.sitenav ul li a::before,
	.sitenav ul li a::after { content: none; }
}

@media only screen and (max-width: 800px) {
	.sitenav { margin: 0; width: 100%; }
	.two-column { flex-direction: column; }
	.two-column .column img { max-width: 420px; margin: 0 auto; }
	.gallery { grid-template-columns: repeat(2, 1fr); }
	.large-font { font-size: 30px; }
}

@media only screen and (max-width: 520px) {
	.gallery { grid-template-columns: 1fr; }
	.quotation { font-size: 24px; }
}