/* MAIN and SPECIAL MENUS 2026 */
:root {
--bistro-cream: #fffdf5;
--bistro-dark: #1a1a1a;
--bistro-gold: #a68966;
}

/* main menu index page grid */

.main_gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
width: 100%;
padding: 0 20px;
margin: 4em auto;
box-sizing: border-box;
}

@media (width >= 992px) {
.main_gallery-grid {
max-width: 80%;
}
}

.main_gallery-item {
position: relative;
overflow: hidden;

aspect-ratio: 4 / 6;
}

.main_gallery-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}

/* The Image Scale Effect */
.main_gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Smooth movement */
}

.main_gallery-link:hover .main_gallery-img {
transform: scale(1.1);
}

/* Overlay & Text */
.main_gallery-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}

.main_gallery-link:hover .main_gallery-overlay {
background: rgba(0, 0, 0, 0.2);
}

.main_gallery-title {
color: #ffffff;
font-family: sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}

/* MENU PAGE ITEMS */

/* Hero Section */
.bistro-hero {
position: relative;
width: 100%;
height: 550px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}

@media (min-width: 993px) {
.bistro-hero { height: 650px; }
}

.bistro-hero-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}

.bistro-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.5));
z-index: 2;
}

.bistro-hero-content {
position: relative;
z-index: 3;
}

.bistro-hero-title {
font-size: 3.5rem;
text-transform: uppercase;
letter-spacing: 4px;
margin: 0;
font-weight: 400;
}

/* Layout */
.bistro-wrapper {
width: 100%;
margin: 3em auto;
padding: 40px 20px;
}

@media (min-width: 992px) {
.bistro-wrapper {
max-width: 80%;
}
}

.bistro-section {
scroll-margin-top: 100px;
width: 100%;
padding: 0 20px;
margin: 5em auto;
max-width: 95%;
}
@media (min-width: 992px) {
.bistro-section {
max-width: 80%;
}
}
.bistro-category-title {
text-align: center;
text-transform: uppercase;
letter-spacing: 3px;
border-bottom: 2px solid var(--bistro-gold);
padding-bottom: 15px;
margin-bottom: 45px;
font-size: 2rem;
color: #444;
}

/* Menu Items */
.bistro-menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(720px, 1fr));
gap: 35px 60px;
}

.bistro-dish {
display: flex;
flex-direction: column;
}

.bistro-dish-top {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
}

.bistro-dish-name {
font-weight: 600;
text-transform: uppercase;
font-size: 1.05rem;
margin: 0;
flex-shrink: 0;
max-width: 80%;
font-size: 21px;
letter-spacing:1px;
}

.bistro-leader {
flex-grow: 1;
border-bottom: 1px dotted #bbb;
height: 14px;
}

.bistro-dish-price {
font-weight: 600;
color: #d06944;
font-size: 21px;
letter-spacing: 1px
font-variant-numeric: tabular-nums;
}

.bistro-dish-desc {

color: #111;
margin: 5px 0 0 0;
font-size: 20px;
line-height: 1.4;
}

/* Sides Styling */
.bistro-sides-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
text-align: center;
}

/* Footer */
.bistro-footer {
background-color: #f2efe4;
text-align: center;
padding: 60px 20px;
border-top: 1px solid #e0ddd3;
}

.bistro-footer a {
color: var(--bistro-dark);
text-decoration: none;
}

@media (max-width: 600px) {
.bistro-menu-grid { grid-template-columns: 1fr; }
.bistro-hero-title { font-size: 2.5rem; }
.bistro-dish-name { font-size: 1rem; }
}

h2.main-title {
margin: 0 auto 2em;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: #385d7f;
position: relative;
padding-bottom: 17px;
color: #385d7f;
font-size: 2em;
line-height: 67px;
font-family: "Josefin Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
border-bottom: 1px solid;
}

/* --- Navigation Dropdown Styling --- */
.menu-nav {
position: sticky;
top: 0;
background: #fff;
z-index: 1000;
padding: 20px 0;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.menu-nav__selector {
appearance: none; /* Removes default browser styling */
-webkit-appearance: none;
background-color: #fff;
border: 1px solid var(--bistro-gold);
color: var(--bistro-dark);
padding: 12px 40px 12px 20px;
font-family: var(--bistro-font);
font-size: 16px;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
width: 90%;
max-width: 400px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a68966' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
transition: all 0.3s ease;
}

.menu-nav__selector:focus {
outline: none;
border-color: var(--bistro-dark);
box-shadow: 0 0 5px rgba(166, 137, 102, 0.3);
}

/* --- Back to Top Button Styling --- */
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
background: var(--bistro-gold);
color: white;
width: 45px;
height: 45px;
border-radius: 50%;
border: none;
font-size: 20px;
cursor: pointer;
z-index: 1001;
display: none; /* Hidden by default, shown via JS */
transition: transform 0.3s ease;
}

#back-to-top:hover {
transform: translateY(-5px);
background: var(--bistro-dark);
}