/* Basic reset for consistent styling */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ======================================= */
/* === GLOBAL VARIABLES & BASE STYLES === */
/* ======================================= */

:root {
    /* --- Color Palette --- */
    --primary-color: #a52a2a;      /* Main brand color (Deep Red/Brown) */
    --primary-dark: #7b1d1d;       /* Darker version for hover states */
    --text-color: #333;            /* Main text color */
    --text-light: #666;             /* Lighter text for descriptions */
    --bg-light: #fcf3c6;            /* Light off-white background */
    --border-color: #704214;       /* Border color (Dark Brown) */
    --accent-color: #c47a39;       /* Mid-tone accent (Leather/Saddle) */ 

    /* Typography */
    --font-family-primary: 'Segoe UI', 'Helvetica Neue', sans-serif;
    --font-size-body: 1rem;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-light); 
}

/* Global Heading Style for Content Sections */
h2 {
    text-align: center;
    /* Responsive font size: minimum 2rem, scales up to 5vw, max 3.5rem */
    font-size: clamp(2rem, 5vw, 3.5rem); 
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-dark);
    margin-bottom: 2rem;
    border-bottom: 3px dashed var(--accent-color);
    display: inline-block; /* Allows underline to shrink to text width */
    padding-bottom: 0.5rem;
}

/* =============================================== */
/* === HEADER (Desktop is correct with 3 siblings) === */
/* =============================================== */
.main-header {
    background: linear-gradient(to bottom, #d9b77c, #b68a54);
    border-bottom: 4px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    /* DISTRIBUTES logo, nav, and button evenly across the header */
    justify-content: space-between; 
}

.logo img {
    height: 75px;
    filter: sepia(40%);
}

/* Navigation */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.main-nav a {
    text-decoration: none;
    color: #3a2d1f;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    position: relative;
    transition: color 0.3s ease;
}

.main-nav a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 2px;
    background: var(--border-color);
    bottom: -4px;
    left: 0;
    transition: width 0.3s ease;
}

.main-nav a:hover {
    color: #b66a32;
}

.main-nav a:hover::after {
    width: 100%;
}

/* Header Button */
.order-button {
    background: linear-gradient(45deg, var(--primary-dark), var(--primary-color));
    color: #fffaf0;
    text-transform: uppercase;
    padding: 0.75rem 1.5rem;
    font-weight: 800;
    border-radius: 30px;
    letter-spacing: 1px;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(107, 63, 17, 0.4);
    transition: all 0.3s ease;
}

.order-button:hover {
    background: linear-gradient(45deg, #a05922, #b66a32);
    transform: scale(1.05);
}

/* =============================================== */
/* === HERO SECTION ============================== */
/* =============================================== */
.hero {
    position: relative;
    height: 85vh;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    /* NOTE: Add your background image here or inline in HTML */
    background-size: cover;
    background-position: center;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(73, 45, 17, 0.45);
    z-index: 1;
}

.hero h1 {
    font-size: 3.5rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fffaf0;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 2;
}

.hero .cta {
    position: relative;
    z-index: 2;
    background: var(--accent-color);
    color: #fffaf0;
    padding: 1rem 2rem;
    border-radius: 40px;
    margin-top: 1.5rem;
    display: inline-block;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
}

.hero .cta:hover {
    background: #a05922;
    transform: scale(1.05);
}

/* =============================================== */
/* === MENU SECTIONS (Selections) ============================== */
/* =============================================== */
.selections-container {
    padding: 60px 20px; 
    background-color: var(--bg-light);
    text-align: center;
}

.menu-grid {
    display: grid;
    /* Responsive grid: allows columns of at least 300px width */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.menu-item {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
}

.menu-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.menu-item img {
    width: 100%;
    height: 250px; 
    object-fit: cover;
    border-bottom: 3px solid var(--primary-color); 
    display: block;
}

.item-details {
    padding: 25px; 
    text-align: left;
    flex-grow: 1;
}

.item-name {
    font-size: 1.6rem;
    color: var(--text-color);
    margin: 0 0 8px;
}

.item-description {
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.5;
}


/* =============================================== */
/* === CONTENT SECTIONS (Flex Containers) ======== */
/* =============================================== */
section {
    position: relative;
    overflow: hidden;
}

.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

.content-wrapper::after {
    content: '★'; 
    display: block;
    font-size: 1.8rem;
    color: #b66a32;
    text-align: center;
    margin: 2rem auto 0;
}

.content-wrapper:nth-of-type(odd) {
    background: rgba(246, 226, 193, 0.5);
}
.content-wrapper:nth-of-type(even) {
    background: rgba(255, 255, 255, 0.4);
}

p {
    font-size: 1.1rem;
    color: #3a2d1f;
    margin-bottom: 1.25rem;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.text-block {
    flex: 1 1 50%;
}

.image-block {
    flex: 1 1 40%;
    position: relative;
}

.image-block img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    border: 4px solid var(--accent-color);
    transition: transform 0.4s ease, filter 0.4s ease;
    display: block;
}

.image-block img:hover {
    transform: scale(1.03);
    filter: brightness(1.05);
}

/* =============================================== */
/* === FOOTER ==================================== */
/* =============================================== */
.footer {
    background: linear-gradient(to bottom, #c69c6d, #a87c4f);
    border-top: 3px solid var(--border-color);
    text-align: center;
    padding: 3rem 1.5rem;
    color: #2d1b0a;
    font-size: 1rem;
    letter-spacing: 0.3px;
    position: relative;
    line-height: 1.8;
}

.footer h3 {
    font-size: 1.9rem;
    color: #3a1e0b;
    margin-bottom: 1.2rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px rgba(255, 240, 220, 0.4);
}

.footer p {
    color: #2d1b0a;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.footer a {
    color: #5a3211;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.footer a:hover {
    color: #2d1b0a;
    border-bottom: 1px solid #2d1b0a;
}

/* Optional subtle texture or highlight */
.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top center, rgba(255,255,255,0.08), transparent 70%);
    pointer-events: none;
}

I can certainly adjust the CSS to ensure the logo maintains its aspect ratio on mobile and to center the "Order Online" button below the navigation links when the screen size is 768px or less.

You only need to update your CSS file with the revised mobile media query block below. The HTML structure is already correct for desktop and mobile stacking based on the previous response.

🛠️ Revised CSS Mobile Styles
Replace your existing @media (max-width: 768px) block and the one immediately following it (@media (max-width: 480px)) with this updated code.

CSS Changes Explained:
Logo Ratio: The height property is removed from .logo img in mobile queries, and max-width: 100%; height: auto; is used to allow the logo's width to scale while maintaining its original ratio.

Order Button Centering: The .header-actions container is given flex-basis: 100%; and text-align: center; to force it to wrap below the navigation and center its contents.

CSS

/* ====================================================================================== */
/* === RESPONSIVE DESIGN (FINAL) - Updated for Centered Logo on Mobile === */
/* ====================================================================================== */

/* Tablet/Small Desktop (1024px and below) */
@media (max-width: 1024px) {
    .header-container {
        padding: 1rem;
    }
}

/* Tablet/Mobile (768px and below) - Forces Logo to Center, then stacks Nav and Button */
@media (max-width: 768px) {
    /* --- HEADER --- */
    .main-header {
        position: sticky; 
    }
    
    .header-container {
        /* Allow elements to wrap onto the next line */
        flex-wrap: wrap; 
        width: 100%;
        padding: 1rem 1.5rem 1.5rem 1.5rem; 
        
        /* New: Center all flex items horizontally within the container */
        justify-content: center; 
    }

    /* Logo Styling */
    .logo {
        /* Allow logo to take up full width to participate in centering */
        flex-basis: 100%; 
        text-align: center; /* Center the inline logo/link itself */
        order: 1; /* Keep at the top */
    }
    .logo img {
        height: auto; 
        max-width: 100%;
        width: 120px; /* Use a slightly larger size for a centered logo */
    }
    
    /* Navigation adjustments */
    .main-nav {
        /* Force navigation to the next line (100% width) */
        flex-basis: 100%; 
        width: 100%;
        margin-top: 15px;
        text-align: center;
        order: 2; 
    }
    .main-nav ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem; 
        padding: 0;
    }
    .main-nav a {
        font-size: 1rem;
    }

    /* Header Actions (Order Button) */
    .header-actions {
        /* Force button to the next line and center it */
        flex-basis: 100%;
        text-align: center;
        margin-top: 15px;
        order: 3; 
    }
    .order-button {
        padding: 0.6rem 1.2rem;
        font-size: 0.95rem;
        transition: background 0.3s ease; 
        transform: none; 
    }

    /* --- CONTENT --- */
    .hero h1 {
        font-size: 2.5rem;
    }
    .flex-container {
        flex-direction: column;
        text-align: center;
    }
    .text-block, .image-block {
        flex: 1 1 100%;
    }
    .menu-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Mobile (480px and below) - Further shrinking */
@media (max-width: 480px) {
    /* --- HEADER --- */
    .logo img {
        width: 100px; /* Adjusted centered logo size for small screens */
    }
    .order-button {
        padding: 0.5rem 1rem; 
        font-size: 0.85rem;
    }
    .main-nav ul {
        gap: 0.8rem;
    }
    .main-nav a {
        font-size: 0.9rem;
    }
    
    /* --- CONTENT --- */
    .hero h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .content-wrapper, .selections-container {
        padding: 2rem 1rem;
    }

    .menu-grid {
        grid-template-columns: 1fr;
    }
}