/* Emberstone Pizza Co. — Base Styles
	 Palette inspired by logo (warm desert tones):
	 Sand (#F6EFE4), Brown (#3A2A1A), Rust (#B44A2B), Sunset (#D96B33), Gold (#F2B134)
*/

:root {
	--sand: #F6EFE4;
	--brown: #3A2A1A;
	--rust: #B44A2B;
	--sunset: #D96B33;
	--gold: #F2B134;
	--text: var(--brown);
	--bg: var(--sand);
	--link: var(--rust);
	--link-hover: #8F3A22;
	--card: #FFFFFF;
	--border: rgba(0,0,0,0.08);
}

/* Toppings list shown in cart for build-your-own items */
.toppings-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.95em;
  color: #444;
  line-height: 1.3;
}
.toppings-list li {
  margin: 2px 0;
}

/* Note: unit price removed from DOM; keep responsive Price column hiding if desired */
/* On small screens hide the separate Price column (third column) to avoid duplicate-looking values */
@media (max-width: 480px) {
	#cart thead th:nth-child(3), #cart tbody tr td:nth-child(3) { display: none; }
}

/* Improve visual separation of stacked cart rows on small screens */
@media (max-width: 480px) {
	#cart tbody tr {
		margin-bottom: 18px; /* more breathing room between items */
		padding: 16px; /* slightly larger touch area */
		box-shadow: 0 8px 20px rgba(58,42,26,0.06);
		border: 1px solid rgba(0,0,0,0.08);
		border-radius: 12px;
		background: var(--card);
		position: relative;
		overflow: visible;
	}

	/* Thin accent bar on the left of each cart card to guide the eye */
	#cart tbody tr::before {
		content: "";
		position: absolute;
		left: 12px;
		top: 12px;
		bottom: 12px;
		width: 4px;
		background: var(--rust);
		opacity: 0.06;
		border-radius: 3px;
		pointer-events: none;
	}

	/* Ensure cell content has comfortable spacing inside the stacked card */
	#cart tbody tr td { padding: 8px 10px; }

	/* Slightly indent toppings list so it reads as related content */
	#cart .toppings-list { margin-left: 14px; margin-top: 6px; }
}

/* Mobile: reduce typography inside the hero section for tighter mobile layout */
@media (max-width: 767px) {
	section[aria-labelledby="hero-title"] { font-size: 0.95rem; }
	section[aria-labelledby="hero-title"] h1 { font-size: 1.6rem; line-height: 1.12; }
	section[aria-labelledby="hero-title"] .lead { font-size: 0.95rem; }
	section[aria-labelledby="hero-title"] .muted { font-size: 0.95rem; }
	section[aria-labelledby="hero-title"] .btn { font-size: 0.95rem; padding: 8px 12px; }
	section[aria-labelledby="hero-title"] .lead-image { max-width: 100%; height: auto; }
}

/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.6;
}

a { color: var(--link); text-decoration-color: currentColor; }
a:hover { color: var(--link-hover); }

/* Skip link for accessibility */
.skip-link { position: absolute; left: -999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { left: 16px; top: 16px; width: auto; height: auto; background: #000; color: #fff; padding: 8px 12px; border-radius: 4px; z-index: 1000; }

/* Header */
header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 60; }
/* Header bars */
header .brand-bar { max-width: 1100px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
header .nav-bar { background: var(--sand); border-top: 1px solid var(--border); }
header .nav-bar > nav { max-width: 1100px; margin: 0 auto; padding: 8px 20px; }
header a[aria-label="Emberstone Pizza Co. home"] { display: flex; align-items: center; gap: 12px; color: var(--brown); text-decoration: none; font-weight: 700; }
header a[aria-label="Emberstone Pizza Co. home"] img {
	height: 64px;
	width: 64px;
	display: block;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--rust);
	background: #fff;
	box-shadow: 0 2px 6px rgba(58, 42, 26, 0.15), 0 6px 14px rgba(58, 42, 26, 0.12);
}
header a[aria-label="Emberstone Pizza Co. home"] span {
	font-size: 1.125rem; /* ~18px base */
	line-height: 1.1;
	white-space: nowrap; /* prevent wrapping on brand */
	align-self: center; /* ensure vertical centering with logo */
}

/* Scale logo up on larger viewports */
@media (min-width: 768px) {
	header a[aria-label="Emberstone Pizza Co. home"] img {
		height: 80px;
		width: 80px;
	}
	header a[aria-label="Emberstone Pizza Co. home"] span {
		font-size: 1.5rem; /* ~24px on tablet/desktop */
	}
}

@media (min-width: 1024px) {
	header a[aria-label="Emberstone Pizza Co. home"] img {
		height: 96px;
		width: 96px;
	}
	header a[aria-label="Emberstone Pizza Co. home"] span {
		font-size: 1.75rem; /* ~28px on wide desktop */
	}
}

nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; justify-content: center; }
nav a { text-decoration: none; color: var(--brown); padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
nav a:hover { background: var(--sand); color: var(--rust); }

/* Active nav link (current page) */
nav a.active { background: var(--rust); color: #fff; box-shadow: 0 2px 6px rgba(180,74,43,0.12); }

/* Layout */
main { max-width: 1100px; margin: 0 auto; padding: 24px 20px; }
section { padding: 28px 0; }

/* Hero */
section[aria-labelledby="hero-title"] { background: linear-gradient(180deg, #FCE8D9 0%, rgba(0,0,0,0) 100%); border-radius: 12px; padding: 40px 24px; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; }
section[aria-labelledby="hero-title"] > div { max-width: 1100px; margin: 0 auto; }
section[aria-labelledby="hero-title"] h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); color: var(--brown); margin: 0 0 12px; }
section[aria-labelledby="hero-title"] p { max-width: 800px; }
section[aria-labelledby="hero-title"] p:nth-of-type(2) { margin: 16px 0; }
section[aria-labelledby="hero-title"] p:nth-of-type(2) a { margin-right: 12px; }

/* Hero layout: content + image */
.hero-inner { display: flex; gap: 24px; align-items: center; max-width: 1100px; margin: 0 auto; }
.hero-content { flex: 1; }
.hero-image { margin: 0; flex: 0 0 360px; }
.hero-image img { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 8px 20px rgba(58,42,26,0.12); object-fit: cover; }

@media (max-width: 760px) {
	.hero-inner { flex-direction: column-reverse; gap: 18px; }
	.hero-image { width: 100%; flex: 0 0 auto; }
	.hero-image img { max-width: 100%; }
}

/* Buttons */
.btn { display: inline-block; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.btn-primary { background: var(--sunset); color: #fff; }
.btn-primary:hover { background: #C45F2F; }
.btn-secondary { background: var(--brown); color: #fff; }
.btn-secondary:hover { background: #1F140D; }

/* Featured Pies */
#signature-pies ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
/* Make the card background match the site background (remove white card look) */
#signature-pies article { background: transparent; border: 1px solid rgba(0,0,0,0.04); border-radius: 12px; padding: 16px; }
#signature-pies article.pie-card { position: relative; overflow: visible; padding: 16px; }
/* Title above the image */
.pie-title { margin: 0 0 12px; padding: 0 4px; color: var(--brown); background: transparent; z-index: 3; position: relative; font-weight: 800; font-family: 'Patrick Hand', Georgia, serif; font-size: 1.125rem; }
/* Standardize image sizing: change --pie-media-height to match the smallest image if you want smaller/larger */
:root { --pie-media-height: 220px; }
.pie-media { position: relative; overflow: hidden; border-radius: 12px; height: var(--pie-media-height); }
.pie-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.48), rgba(0,0,0,0.44)); z-index: 1; }
.pie-image { display: block; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.95) saturate(1.02); }
.pie-content { position: absolute; inset: 0; z-index: 2; padding: 16px; display: flex; align-items: flex-end; }
.pie-content p { margin: 0; color: rgba(255,255,255,0.95); text-shadow: 0 1px 3px rgba(0,0,0,0.5); font-family: 'Patrick Hand', Georgia, serif; font-size: 0.95rem; line-height: 1.4; }

.pie-title { margin: 0 0 12px; padding: 0 4px; color: var(--brown); background: transparent; z-index: 3; position: relative; font-weight: 800; font-family: 'Patrick Hand', Georgia, serif; font-size: 1.25rem; }
.pie-content p { margin: 0; color: rgba(255,255,255,0.95); text-shadow: 0 1px 3px rgba(0,0,0,0.5); font-family: 'Patrick Hand', Georgia, serif; font-size: 1rem; line-height: 1.45; }

/* Larger text on wider screens for better legibility */
@media (min-width: 768px) {
	.pie-title { font-size: 1.375rem; }
	.pie-content p { font-size: 1.05rem; }
}

@media (min-width: 1024px) {
	.pie-title { font-size: 1.5rem; }
	.pie-content p { font-size: 1.125rem; }
}
/* Title that sits above the image */
.pie-title { margin: 0 0 6px; padding: 12px 16px; color: var(--brown); background: transparent; z-index: 3; position: relative; font-weight: 800; }
#signature-pies h3 { margin: 0 0 8px; color: var(--brown); }

/* Visit / Hours */
#visit-emberstone > div > div { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { #visit-emberstone > div > div { grid-template-columns: 1fr 1fr; } }
#visit-emberstone h3 { margin: 0 0 8px; }
#visit-emberstone address { font-style: normal; }
#visit-emberstone dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 12px; }

/* Newsletter */
form div { display: grid; gap: 8px; max-width: 520px; }
input[type="email"] { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text); }
button[type="submit"] { padding: 10px 16px; border-radius: 8px; border: none; background: var(--sunset); color: #fff; font-weight: 600; }
button[type="submit"]:hover { background: #C45F2F; cursor: pointer; }

/* Dietary badges (used on menu page) */
ul[aria-label="Dietary badges"] { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul[aria-label="Dietary badges"] li { background: var(--sand); border: 1px solid var(--border); color: var(--brown); padding: 4px 8px; border-radius: 999px; font-size: 0.875rem; }

/* Footer */
footer { background: #fff; border-top: 1px solid var(--border); }
footer > div { max-width: 1100px; margin: 0 auto; padding: 16px 20px; }

/* Order page: items and cart */
#items article { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
#items article { box-shadow: 0 6px 18px rgba(58,42,26,0.06); }

/* Order card — clearer hierarchy and spacing */
#items article h3 {
	margin: 0 0 8px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 1.125rem;
	color: var(--brown);
	font-weight: 800;
}

#items article p { margin: 0 0 10px; color: #5b4837; line-height: 1.5; }

/* Controls inside order cards */
#items label { display: block; margin-top: 8px; font-weight: 700; color: #4b3528; }
#items select, #items input[type="number"] {
	margin-top: 6px;
	padding: 8px 10px;
	border-radius: 8px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #fff;
	font-size: 0.98rem;
}

#items input[type="number"] { width: 80px; }

/* Make the add button stand out but keep high contrast */
#items .btn-secondary { background: var(--brown); color: #fff; border: none; box-shadow: 0 6px 14px rgba(58,42,26,0.08); }
#items .btn-secondary:focus, #items .btn-secondary:hover { filter: brightness(0.95); }

/* Group form controls neatly on small screens */
@media (max-width: 480px) {
	#items article { padding: 14px; }
	#items label { margin-top: 10px; }
	#items select, #items input[type="number"] { width: 100%; max-width: 320px; }
	#items .btn-secondary { width: auto; margin-top: 8px; }
}

/* Mobile-friendly cart: stack columns so the whole cart fits in viewport */
@media (max-width: 480px) {
	#cart table { display: block; width: 100%; }
	#cart thead { display: none; }
	#cart tbody { display: block; }
	#cart tbody tr { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); margin-bottom: 12px; }
	#cart tbody td { display: flex; justify-content: space-between; align-items: center; padding: 0; }
	#cart tbody td input[type="number"] { width: 72px; }
	#cart tbody td button.btn { margin: 0; }
	#cart tfoot, #cart tfoot tr, #cart tfoot td { display: block; width: 100%; }
	#cart tfoot tr { padding: 10px 12px; border-top: 1px solid rgba(0,0,0,0.04); margin-top: 6px; }
	#cart tfoot td#cart-total { text-align: right; font-weight: 800; }
}
#cart table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
#cart th, #cart td { padding: 10px 12px; text-align: left; }
#cart thead { background: var(--sand); }
#cart tfoot td { font-weight: 700; }
#cart button.btn { padding: 6px 10px; font-weight: 600; }

/* Cart badge shown next to the cart title */
.cart-badge {
	display: inline-block;
	min-width: 22px;
	padding: 2px 8px;
	margin-left: 10px;
	background: var(--rust);
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1;
	text-align: center;
	vertical-align: middle;
}

/* Visual flash when cart is updated */
@keyframes cartPulse {
	0% { box-shadow: 0 0 0 rgba(180,74,43,0); transform: translateY(0); }
	20% { box-shadow: 0 10px 24px rgba(180,74,43,0.18); transform: translateY(-2px); }
	100% { box-shadow: 0 0 0 rgba(180,74,43,0); transform: translateY(0); }
}
.cart-flash {
	animation: cartPulse 800ms ease;
}

/* Button & item feedback when adding to cart */
.btn-added { background: #2f7a40 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(47,122,64,0.18); }
.item-added { border-color: #2f7a40; box-shadow: 0 8px 20px rgba(47,122,64,0.12); transform: translateY(-3px); transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }

/* Typography enhancements — keep the same palette, add emphasis */
h1, h2, h3 { font-family: Georgia, 'Times New Roman', serif; color: var(--brown); margin-top: 0; }
h1 { font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.5px; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }

/* Lead paragraph style for intro text */
.lead { font-size: 1.05rem; font-style: italic; color: #5b3f2f; margin-bottom: 12px; }

/* Lead media below hero paragraph */
.lead-media { margin-top: 12px; display: block; }
.lead-image { width: 100%; max-width: 720px; height: auto; display: block; border-radius: 10px; box-shadow: 0 6px 18px rgba(58,42,26,0.08); object-fit: cover; }
@media (min-width: 1024px) { 
	/* reduce desktop lead image size by 40% (keep 60% of previous 960px => 576px) */
	.lead-image { max-width: 576px; }
}

/* Demo note under the hero for visible demo-only warning */
.demo-note { background: rgba(198,44,44,0.06); border-left: 4px solid var(--rust); padding: 12px 16px; margin: 18px 0 8px; border-radius: 8px; color: #4b2b22; }
.demo-note p { margin: 0; font-weight: 700; }
.demo-note strong { color: var(--rust); }

/* Menu: remove bullets and style only the h2 with a background image + overlay */
#menu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
#menu-list li { margin: 0; }
.title-media { position: relative; background-size: cover; background-position: center; border-radius: 8px; padding: 14px 18px; margin-bottom: 8px; overflow: hidden; /* responsive height, slightly shorter on small viewports */ min-height: clamp(160px, 10vw, 420px); }
.title-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.38), rgba(0,0,0,0.44)); z-index: 1; pointer-events: none; }
.title-media h2 { position: absolute; left: 18px; right: 18px; top: 66%; transform: translateY(-50%); z-index: 2; margin: 0; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.65); font-size: clamp(1.47rem, 3.5vw, 2.8rem); font-family: 'Patrick Hand', Georgia, serif; }
.title-media + p { margin-top: 8px; }
@media (max-width: 480px) {
	.title-media { min-height: clamp(120px, 22vw, 200px); padding: 10px 12px; }
	.title-media h2 { font-size: clamp(1.37rem, 4.5vw, 1.75rem); left: 12px; right: 12px; top: 66%; transform: translateY(-50%); }
}

@media (min-width: 1024px) {
	.title-media { min-height: clamp(260px, 12vw, 520px); }
	.title-media h2 { font-size: clamp(1.96rem, 2.5vw, 3.36rem); }
}

/* Menu description styling — on-theme treatment for better hierarchy */
#menu-list article p:first-of-type {
	margin: 12px 0 8px;
	color: #5b3f2f; /* warm brown */
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: clamp(1rem, 2.2vw, 1.1rem);
	line-height: 1.6;
	padding: 10px 12px;
	border-left: 4px solid rgba(242,177,52,0.18); /* subtle gold accent */
	background: linear-gradient(90deg, rgba(242,177,52,0.03), rgba(246,239,228,0));
	border-radius: 6px;
}

#menu-list article p:nth-of-type(2) {
	margin: 6px 0 0;
	color: var(--brown);
	font-weight: 700;
	font-size: 0.98rem;
	text-align: center; /* center prices */
}

@media (max-width: 480px) {
	#menu-list article p:first-of-type { padding: 8px 10px; font-size: 1.06rem; }
}

/* Demo banner styles removed (site-wide banner is handled at root) */

/* Accent + emphasis utilities */
.accent { color: var(--rust); font-weight: 700; }
.muted { color: #6b5344; }
.kicker { display: inline-block; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; color: #8b6b57; margin-bottom: 6px; }
.underline { text-decoration: underline; text-decoration-color: rgba(180,74,43,0.12); text-underline-offset: 3px; }

/* stronger defaults for semantic tags */
strong { font-weight: 800; }
em { font-style: italic; color: var(--sunset); }

/* Slightly spruce descriptive small text inside item cards */
#items article p { color: #5b4837; }
#items article h3 { color: var(--brown); }



/* Small screens: shrink nav text and spacing to avoid wrapping */
@media (max-width: 480px) {
	header .nav-bar > nav a { font-size: 0.9rem; padding: 6px 8px; }
	header .nav-bar > nav ul { gap: 10px; }
}

@media (max-width: 360px) {
	header .nav-bar > nav a { font-size: 0.8rem; padding: 5px 6px; }
	header .nav-bar > nav ul { gap: 8px; }
}

@media (max-width: 480px) {
    /* Slightly larger pie description copy on narrow screens for readability */
    .pie-content p { font-size: 1.1rem; }
}

/* Demo banner styles removed (site-wide banner is handled at root) */

.back-to-projects {
	position: fixed;
	top: 0.5rem;
	left: 0.75rem;
	display: inline-block;
	padding: 0.35rem 0.6rem;
	font-size: 0.9rem;
	line-height: 1;
	color: #0b1020;
	background: #5dd6ff; /* match homepage accent */
	border: 1px solid rgba(93, 214, 255, 0.5);
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(93, 214, 255, 0.25);
	z-index: 1190; /* below demo banner (1200) but above header */
}

.back-to-projects:hover { filter: brightness(1.06); }
.back-to-projects:active { filter: brightness(0.98); }
.back-to-projects:focus-visible {
	outline: 3px solid #090c0a;
	outline-offset: 2px;
}
@media (max-width: 480px) {
	.back-to-projects { left: 0.5rem; padding: 6px 10px; font-size: 0.9rem; }
}