@charset "utf-8";
/* CSS Document */
*{margin:0;}
body {overflow-x:hidden;}

.tk-ingra { font-family: "ingra",sans-serif; }
.tk-deseo-medium { font-family: "deseo-medium",sans-serif; }

#home {display: flex; flex-direction: column; min-height: 100vh; position:relative;}

/* Header */
header img {width:800px; margin: 216px; align-content: flex-start; animation: breathe 12s ease-in-out infinite;}
@keyframes breathe {0%   { transform: scale(1); }50%  { transform: scale(1.04); }100% { transform: scale(1); }}
.layout {display: flex; flex: 1; margin-left:200px;}

/* Sticky Header*/
.sticky-header {
	position: fixed;
	top: 0;
	left: 200px;
	width: calc(100% - 200px);
	height: 90px;
	background: rgba(244,230,211,0.95);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	transform: translateY(-100%);
	transition: transform 1.5s ease, opacity 1.5s ease;
	opacity: 0;
	z-index: 1000;
	box-shadow: 0 8px 20px rgba(0,0,0,0.15);
	box-sizing: border-box; /* ✅ IMPORTANT */
	padding: 0 40px; /* ✅ reduce + include in width */
}
.sticky-header img {width: 200px;}
.sticky-header.show {transform: translateY(0);opacity: 1;}

/* Navigation */
#navigation {width: 200px; background-image:url("../images/EO-Web-Nav.gif"); background-size:cover; background-repeat:no-repeat; background-position:center; position:fixed; top:0; height:100vh; left:0; z-index:10; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);}
#navigation li {margin-top:50px; font-family: "ingra",sans-serif; color:#5b0505; font-size:20px; list-style: none; margin-left:0px; font-weight:500;}
#navigation a {text-decoration: none; color:#5b0505;}
#navigation a:visited {color:#5b0505;}
#navigation a:hover {color:#440303;}

/* Main content */
main {flex: 0 0 auto; display: flex; justify-content: center; flex-direction: column; align-items: center; width: 100%; min-height: 100vh; position: relative; background: linear-gradient( to bottom, rgba(244,230,211,0.85) 0%, rgba(244,230,211,0.75) 40%, rgba(0,0,0,0.6) 100%),url("../images/Landscape-FREE-DOMAIN-gradient.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center top; background-attachment: fixed;}

#mission {width:72%; max-width:1100px; display:flex; flex-direction: row-reverse; align-items:flex-start; gap:60px; margin-bottom:120px; margin-top:120px; opacity: 0; transform: translateX(100px); transition: all 0.8s ease-out; will-change: transform, opacity;}
#mission.show {opacity: 1; transform: translateX(0);}
#mission img {width:40%; display:flex; border-radius:0px 32px 0px 32px;}
#mission h3 {font-family: "deseo-medium",sans-serif; font-weight:200; font-size:35px;}
#mission h1 {font-family:"ingra"; font-weight:500; color:#000; font-size: 20px; margin:0 0 10px 0;}
#mission h2 {font-family:"ingra"; font-weight:500; color:#000; font-size: 16px; margin:0 0 10px 0;}
.mission-text {display: flex; flex-direction: column; align-items: flex-end; text-align: right;}
.reserve-button {width: 216px; height: 48px; background-color: #5b0505; margin-top: 45px; border-radius:0px 16px 0px 16px;}
.reserve-button h4 {font-family:"ingra"; font-weight:500; color:#fff9e3; font-size: 16px; padding:13px 35px 15px 25px;}
.reserve-button a {text-decoration:none; color:#fff9e3;}
.reserve-button a:visited {color:#fff9e3;}
.reserve-button a:hover {color:#D7D0B9;}

#menu-feature {width:72%; max-width:1100px; display:flex; align-items:flex-start; gap:60px; margin-bottom:300px; margin-top:120px; opacity: 0; transform: translateX(-100px); transition: all 0.8s ease-out; will-change: transform, opacity;}
#menu-feature.show {opacity: 1; transform: translateX(0);}
#menu-feature img {width:40%; display:flex; border-radius:0px 32px 0px 32px;}
#menu-feature h3 {font-family: "deseo-medium",sans-serif; font-weight:200; font-size:35px;}
#menu-feature h1 {font-family:"ingra"; font-weight:500; color:#000; font-size: 20px; margin:0 0 10px 0;}
#menu-feature h2 {font-family:"ingra"; font-weight:500; color:#000; font-size: 16px; margin:0 0 10px 0;}
#menu-feature p {font-family:"ingra"; font-weight:300; color:#000; font-size: 14px; margin:0 0 10px 0;}
.feature-text {flex:1; display: flex; flex-direction: column; align-items: flex-start}
.menu-button {width: 160px; height: 48px; background-color: #5b0505; margin-top: 5px; border-radius:0px 16px 0px 16px;}
.menu-button h4 {font-family:"ingra"; font-weight:500; color:#fff9e3; font-size: 16px; padding:13px 20px 15px 40px;}
.menu-button a {text-decoration:none; color:#fff9e3;}
.menu-button a:visited {color:#fff9e3;}
.menu-button a:hover {color:#D7D0B9;}

/* Footer */
footer {background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.2)), url("../images/Web-Footer.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center top; display: flex; justify-content: flex-end; align-items: center;}
.footer {margin:60px; width: 90%; max-width: 1100px; display: flex; align-items: center; gap: 80px;}
.map iframe {width: 400px; height: 200px; display:block; margin-left:160px; border: 0;}
.footer-text {text-align: left; color: #fff9e3;}
.footer-text h1 {font-family: "ingra"; font-weight: 400; font-size: 16px; margin-bottom: 8px;}
.footer-text p {font-family: "ingra"; font-weight: 300; font-size: 12px; margin-top: 20px;}

/*SECONDARY PAGES*/
#secondary-nav {background-image:url("../images/Secondary.header.gif"); width:100%; height:auto; background-repeat:no-repeat; background-size:cover; padding: 40px 80px; box-sizing:border-box;}
#secondary-nav nav {display:flex;justify-content:space-between;align-items:center;width:100%;}
#secondary-nav img {width:200px;}
#secondary-nav ul {display:flex; gap: 60px; margin: 0; padding: 0;}
#secondary-nav li {font-family: "ingra"; color:#fff9e3; font-size:20px; list-style: none; font-weight:500;}
#secondary-nav a {text-decoration: none; color:#fff9e3;}
#secondary-nav a:visited {color:#fff9e3;}
#secondary-nav a:hover {color:#D7D0B9; opacity:1;}

#reservations {background-color:#fff9e3; width:100%; padding:80px; display:flex; justify-content:center; align-items:flex-start; gap:100px; box-sizing:border-box;}
.res-text {max-width:600px;}
.res-text h1 {font-family: "deseo-medium",sans-serif; font-weight:200; font-size:45px; padding-bottom:30px;}
.res-text h2 {font-family:"ingra"; font-weight:500; color:#000; font-size: 20px; margin:0 0 10px 0;}
.res-text h3 {font-family:"ingra"; font-weight:500; color:#5b0505; font-size: 16px; margin:0 0 10px 0;}
.res-text h4 {font-family:"ingra"; font-weight:400; color:#a82f0d; font-size: 16px; margin:0 0 10px 0;}
.res-text h5 {font-family:"ingra"; font-weight:500; color:#a82f0d; font-size: 20px; margin:0 0 10px 0;}
.hours{display:grid; grid-template-columns: auto auto; column-gap:20px; row-gap:8px; max-width:300px;}
.hours h3{margin:0;}
.hours h4{margin:0;}
.res-form {display:flex; justify-content:center; align-items:flex-start;}
.res-box {background:#5b0505; padding:40px; width:350px; border-radius: 0px 64px 0px 64px;}
label {color:#fff9e3;}
.reservation-form {display:flex; flex-direction:column; width:320px; gap:12px;}
.reservation-form label {font-family:"ingra";font-size:14px;}
.reservation-form input, .reservation-form select, .reservation-form textarea {padding:10px; border:1px solid #772323; font-family:"ingra"; font-size:14px; background:#772323; border-radius:0px 16px 0px 16px; color:#fefbea;}
.reservation-form textarea {height:80px;resize:none; color:#fefbea;}
.reservation-form button {margin-top:10px; padding:12px; background:#c5e60e; color:#000; border:none; font-family:"ingra"; font-size:15px; cursor:pointer; border-radius:0px 16px 0px 16px;}
.reservation-form button:hover {background:#c5e60e;}
#confirmation-message{margin-top:20px; font-family:"ingra"; color:#fff9e3; font-size:16px;}
input[type="date"]::-webkit-calendar-picker-indicator {filter: invert(1) sepia(1) saturate(0) brightness(1.5); cursor: pointer;}

/*MENU*/
#menu {background-color:#fff9e3; width:100%; padding:140px 60px 60px 120px; box-sizing:border-box;}
#spring-menu {
	display:grid;
	grid-template-columns:1fr 1fr 1fr; /* ✅ all flexible */
	column-gap:60px;
}
#tasting {
	grid-column:1 / -1;
	background-color:#c5e60e;
	padding:60px;
	box-sizing:border-box; /* ✅ ensures padding stays inside */
	border-radius:0px 64px 0px 64px;
	box-shadow:0px 20px 40px rgba(0,0,0,0.08);
	margin-bottom:60px;
	width:100%; /* ✅ prevents overflow */
}
.left-col {grid-column:1; display:flex; flex-direction:column; padding-right:40px;}
.mid-col {grid-column:2; padding-right:40px;}
.right-col {grid-column:3; padding-right:40px;}
.left-col img,
.right-col img {
	width:100%;          /* ✅ responsive */
	max-width:328px;     /* ✅ keeps your design cap */
	height:auto;         /* ✅ prevents overflow */
	object-fit:cover;
	display:block;
	margin:40px 0;
	border-radius:0px 16px 0px 16px;
}
#menu h1 {font-family:"deseo-medium",sans-serif; font-size:44px; font-weight:200; margin-bottom:25px;}
#menu h2 {font-family:"ingra"; font-size:25px; font-weight:500; color:#5b0505; margin:40px 0 10px 0;}
#menu h3 {font-family:"ingra"; font-size:20px; font-weight:500; margin:0 0 4px 0; color:#a82f0d;}
#menu h4 {font-family:"ingra"; font-size:16px; font-weight:300; color:#5b0505; margin:0 0 16px 0;}
#menu h5 {font-family:"ingra"; font-size:18px; font-weight:400; color:#a82f0d; margin:0 0 6px 0;}
#menu h6 {font-family:"ingra"; font-size:16px; font-weight:300; margin:0 0 16px 0; color:#5b0505;}

/*CHEF*/
#chef {background-color:#fff9e3; width:100%; padding:60px 60px 60px 120px; box-sizing:border-box; display:flex; align-items:flex-start; gap:60px;}
#chef img {width:328px; height:328px; object-fit:cover; display:block;}
.chef-text {max-width:700px;}
#chef h1 {font-family:"deseo-medium",sans-serif; font-size:44px; font-weight:200; margin-bottom:25px;}
#chef h2 {font-family:"ingra"; font-size:20px; font-weight:500; margin:0 0 12px 0;}

#footer {background:linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.2)), url("../images/Web-Footer.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center top; display: flex; justify-content: center; align-items: center;}
.secondary-footer {margin:60px; width: 90%; max-width: 1100px; display: flex; align-items: center; gap: 80px;}
.map iframe {width: 400px; height: 100%; display:block; border: 0; border-radius: 0px;}
.footer-text-secondary {text-align: left; color: #fff9e3;}
.footer-text-secondary h1 {font-family: "ingra"; font-weight: 400; font-size: 16px; margin-bottom: 8px;}
.footer-text-secondary p {font-family: "ingra"; font-weight: 300; font-size: 12px; margin-top: 20px;}

/*TABLET*/
@media (max-width:1024px){
.layout {margin-left:0;}
#navigation {display:none;}
.sticky-header {left:0; width:100%;}
header img {width:500px; margin:120px auto;}
#mission, #menu-feature {width:90%; flex-direction:column; gap:40px; margin:80px auto;}
#mission img, #menu-feature img {width:100%;}
.mission-text {align-items:flex-start; text-align:left;}
#spring-menu {grid-template-columns:1fr 1fr;}
.left-col {grid-column:1;}
.mid-col {grid-column:2;}
.right-col {grid-column:1 / -1;}
#menu {padding:120px 40px 60px 40px;}
#tasting {padding:40px;}
#chef {flex-direction:column; padding:60px 40px;}
#chef img {width:100%; height:auto;} 
.footer, .secondary-footer {flex-direction:column; gap:40px;}
.map iframe {width:100%; margin-left:0;}
}

/*MOBILE*/
@media (max-width:768px){
header img {width:320px; margin:100px auto;}
#spring-menu {grid-template-columns:1fr;}
.left-col, .mid-col, .right-col {grid-column:1;padding-right:0;}
.left-col img, .right-col img {width:100%;height:auto;}
#menu {padding:100px 20px 40px 20px;}
#tasting {padding:30px 20px; border-radius:0px 32px 0px 32px;}
#menu h1 {font-size:32px;}
#menu h2 {font-size:20px;}
#menu h3 {font-size:18px;}
#menu h4, #menu h5, #menu h6 {font-size:14px;}
#secondary-nav nav {flex-direction:column; gap:20px; align-items:flex-start;}
#secondary-nav ul {gap:20px; flex-wrap:wrap;}
#reservations {flex-direction:column; padding:60px 20px; gap:60px;}
.res-box {width:100%;}
.reservation-form {width:100%;}
}

/*BIG*/
@media (min-width:1400px){
#spring-menu {max-width:1400px; margin:0 auto;}
#menu {padding-left:200px; padding-right:100px;}
}