/* Standard CSS - No External Dependencies */
:root {
    --olive: #556b2f;       /* Pierson Fern Green */
    --rustic-brown: #8b4513; /* Comfort Meat Brown */
    --paper: #f4f1ea;       /* Warm Vintage Background */
    --charcoal: #2c3e50;    /* Easy-to-read Text */
}

body { 
    font-family: 'Georgia', 'Times New Roman', serif; 
    line-height: 1.6; 
    color: var(--charcoal);
    background-color: var(--paper); /* Restored the vintage background color */
    padding: 0;
    margin: 0;
}

/* --- NAVIGATION --- */
nav { 
    background: white;
    padding: 20px;
    border-bottom: 3px double var(--olive);
    text-align: center;
    margin-bottom: 40px;
}

.nav-btn { 
    padding: 10px 20px; 
    margin: 0 10px; 
    text-decoration: none; 
    color: var(--olive); 
    /* Cleaner, wider font for buttons */
    font-family: 'Verdana', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid var(--olive);
    transition: 0.2s;
}

.nav-btn:hover { 
    background: var(--olive); 
    color: white; 
}

/* --- MAIN CONTENT & CENTERING --- */
.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 20px;
    text-align: center; /* This ensures headers stay in the middle */
}

h1 {
    /* Using Trebuchet MS for a bold look that isn't "scrunged" */
    font-family: 'Trebuchet MS', 'Lucida Grande', 'Arial', sans-serif;
    color: var(--rustic-brown);
    font-size: 3.2em;
    text-transform: uppercase;
    letter-spacing: 3px; 
    border-bottom: 2px solid var(--rustic-brown);
    display: inline-block; /* Border wraps the text */
    width: auto; 
    margin: 0 auto 50px auto; 
}

.hero-image {
    display: block; 
    margin: 20px auto; /* Centers the image perfectly */
    width: 100%;
    max-width: 400px; 
    height: auto;
    border: 4px solid var(--olive);
}

/* --- MENU STYLING --- */
h2 {
    font-family: 'Trebuchet MS', sans-serif;
    color: var(--olive);
    letter-spacing: 1.5px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-top: 40px;
}

.price {
    font-weight: bold;
    font-family: 'Verdana', sans-serif;
    color: var(--rustic-brown);
}

/* --- PHOTO GRID STYLING --- */
/* --- TRIPLE COLUMN LAYOUT (Updated for larger photos) --- */
.photo-item {
    width: 100%;         
    border: 3px solid var(--olive);
    border-radius: 8px;
    background: white;
    overflow: hidden;
    line-height: 0;      
    display: block;      
    margin-bottom: 10px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.15); 
}

.photo-item img {
    width: 100%;         
    height: auto;        
    display: block;
}

/* --- ZOOM EFFECTS (Text Only) --- */
.menu-item {
    transition: transform 0.2s ease;
    cursor: default;
    padding: 10px;
}

.menu-item:hover {
    transform: scale(1.08); /* Slightly smaller zoom for better readability */
    background-color: rgba(85, 107, 47, 0.05); 
    border-radius: 5px;
}

/* Make section headers (Starters, Dogs, etc.) pop more */
.menu-category h2 {
    font-size: 1.8em;
    margin-bottom: 30px;
    margin-top: 60px; /* More space between categories to fill height */
}

.menu-item {
    transition: transform 0.2s ease;
    cursor: default;
    padding: 15px 10px; /* More vertical padding between items */
    margin-bottom: 20px;
}

/* Item Name and Price */
.menu-item h3 {
    font-size: 1.4em; /* Larger item names */
    margin-bottom: 8px;
    line-height: 1.2;
}

/* The Description Text - This is where the magic happens */
.menu-item p {
    font-size: 1.2em;      /* Larger, easier to read */
    line-height: 1.6;     /* Extra vertical space between lines */
    padding: 0 15px;      /* Internal "squeeze" to force more line breaks */
    margin: 0;
    color: #444;          /* Slightly softer charcoal for long descriptions */
}

/* House Favorites italicized text */
.menu-category > p em {
    display: block;
    font-size: 1.1em;
    line-height: 1.5;
    margin-bottom: 25px;
    padding: 0 20px;
}

/* Extra "Squeeze" for the items inside the grid */
.menu-column .menu-item p {
    font-size: 1.05em;
    padding: 0 10px;
    line-height: 1.3;
}

.menu-column .menu-item p {
    font-size: 1.05em;
    padding: 0 10px;
    line-height: 1.3;
}


.dressing-box {
    margin: 20px 0;
    padding: 15px;
    /* A double border gives it a vintage framed look */
    border-top: 3px double #4e342e; 
    border-bottom: 3px double #4e342e;
    text-align: center;
}

.dressing-header {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 1.2rem;
    font-weight: 900; /* Extra bold for the header */
    color: #2e1a16;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.dressing-list {
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 1rem;
    font-weight: 600; /* Medium bold - stands out but doesn't compete with header */
    color: #4e342e;
    font-style: italic; /* Italics add that "stylish" rural flair */
    line-height: 1.4;
}

.rural-dresser {
    margin-top: 25px;
    padding: 15px;
    /* A simple wood-like border */
    border: 4px double #5d2e0a; 
    background-color: #fdf5e6; /* Old paper color */
    text-align: center;
}

.rural-dresser h4 {
    margin-left: -5px; /* Adjusts the text slightly to the left */
    letter-spacing: 0px; /* Removes the extra space between letters that pushes it right */
}

.rural-dresser p {
    /* Georgia is elegant, easy to read, and built-in everywhere */
    font-family: "Georgia", serif;
    font-style: italic;
    font-weight: bold;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
}

/* --- ENHANCED MENU NOTICES --- */
.menu-notices {
    margin-bottom: 45px;
    padding: 15px;
    text-align: center;
    /* Optional: subtle top/bottom border to frame the notices */
    border-top: 1px solid rgba(85, 107, 47, 0.2);
    border-bottom: 1px solid rgba(85, 107, 47, 0.2);
}

.notice-priority {
    font-family: 'Georgia', serif;
    font-style: italic;
    font-weight: 800; /* Extra Bold */
    font-size: 1.4em;
    color: var(--olive); /* Deep Fern Green */
    margin-bottom: 12px;
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.1); /* Adds tiny depth */
}

.notice-secondary {
    font-family: 'Verdana', sans-serif;
    font-weight: bold; /* Makes the asterisk notes stand out */
    font-size: 0.9em;
    color: var(--rustic-brown); /* Switched to brown for better visibility */
    margin: 6px 0;
    letter-spacing: 0.3px;
}

/* Tiny "Copyright-style" Cash Only Flag */
.cash-only-sup {
    font-family: 'Verdana', sans-serif;
    /* Ultra-small "Copyright" size */
    font-size: 0.15em; 
    font-weight: bold;
    color: white;
    background-color: var(--rustic-brown);
    /* Tightened padding for the smaller text */
    padding: 1px 3px; 
    border-radius: 1px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;

    /* Nudging it to the top-right corner of the 'u' */
    position: relative;
    top: -5.2em;   /* Increased negative value to pull smaller text higher */
    left: -1.0em;  /* Adjusts the horizontal overlap */
}

.menu-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* Space between "Our Menu" and the badge */
}

.cash-badge {
    font-family: 'Verdana', sans-serif;
    font-size: 8px;           /* Tiny "Legal Print" size */
    font-weight: 800;         /* Extra bold so it stays legible */
    color: white;
    background-color: var(--rustic-brown);
    
    /* This adds that extra "pop" without changing the size */
    border: 1px solid white;
    box-shadow: 0 0 0 1px var(--rustic-brown); /* Creates a double-border effect */
    
    padding: 1px 4px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    opacity: 0.9;
}

/* --- FINAL LAYOUT ADJUSTMENTS --- */

/* Overrides previous duplicates to ensure a clean, centered look */

/* Ensures the header and Cash Badge stay centered together */
.menu-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 50px auto;
}

/* --- NEW NARROW PHOTO LAYOUT --- */

.main-menu-layout {
    display: grid;
    /* Shaved from 450px down to 435px (just a tiny bit narrower) */
    grid-template-columns: 435px 1fr 435px; 
    /* Increased gap from 20px to 45px to create a "safety zone" for the zoom */
    gap: 45px;                             
    align-items: start;
    max-width: 1600px;                     
    margin: 40px auto;                     
    padding: 0 20px;                       
}

.side-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* This forces photos to stay "on top" of the zooming text */
    position: relative; 
    z-index: 5; 
}

.center-content {
    text-align: center;
    max-width: 800px; 
    margin: 0 auto;
    /* This keeps the text "behind" the photos if it zooms too far */
    position: relative;
    z-index: 1; 
}

/* This ensures the photos fit the new narrow 220px width perfectly */
.photo-item {
    width: 100%;
    border: 3px solid var(--olive);
    border-radius: 8px;
    background: white;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.photo-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- FINAL MENU GRID (DOGS & FAVORITES) --- */
.menu-grid {
    display: grid;
    /* 1. Shrink the columns to 30% each to leave 40% empty space */
    grid-template-columns: 30% 30%; 
    
    /* 2. Push that empty 40% space into the middle */
    justify-content: space-between; 
    
    /* 3. Keep the overall width wide enough to allow the move */
    width: 100%;
    max-width: 1100px; 
    
    margin: 40px auto 0 auto;
    align-items: start;
}

/* ENHANCED CATEGORY HEADERS */
.menu-category h2 {
    color: #4e342e;            /* Darker, "espresso" brown for high contrast */
    font-size: 2.2em;          /* Larger presence */
    font-weight: 900;          /* Maximum boldness */
    text-transform: uppercase;
    letter-spacing: 4px;       /* Spaced out for a premium "Steakhouse" look */
    
    /* Double border adds a vintage menu flair */
    border-bottom: 4px double var(--olive); 
    
    padding-bottom: 10px;
    margin-bottom: 40px;
    text-align: center;
    
    /* Adds a subtle "pressed" shadow effect */
    text-shadow: 1px 1px 0px rgba(255,255,255,0.8);
}

/* --- CONTACT & MISSION SIDE-BY-SIDE --- */
.contact-mission-container {
    display: flex;
    justify-content: space-between; /* Pushes one left, one right */
    align-items: flex-start;      /* Aligns them at the top */
    max-width: 1200px;            /* Keeps content from hitting screen edges */
    margin: 40px auto;            /* Centers the whole block on the page */
    gap: 50px;                    /* Space between the two sections */
    padding: 0 20px;
}

.contact-section {
    flex: 1;
    text-align: left;
    /* This provides the "tiny bit to the right" shift (approx 5cm/60px) */
    padding-left: 60px; 
}

.mission-section {
    flex: 1;
    text-align: left;
    padding-right: 40px;
}

/* Ensure the headers in these sections don't have the huge centered margins */
.contact-section h1, 
.mission-section h1 {
    margin: 0 0 20px 0; 
    font-size: 2.2em; /* Slightly smaller to fit side-by-side better */
    display: block;   /* Allows border to span the width of the column */
}

.mission-section p {
    font-size: 1.2em;
    line-height: 1.8;
    font-style: italic; /* Makes the mission statement stand out */
}

/* Responsive: Stack them on top of each other on mobile phones */
@media (max-width: 768px) {
    .contact-mission-container {
        flex-direction: column;
    }
    .contact-section {
        padding-left: 20px; /* Remove the 5cm shift on small screens */
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--olive); /* Uses your green */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    font-family: 'Verdana', sans-serif;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 5px;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    z-index: 1000; /* Keeps it above the photos and menu */
    transition: 0.3s;
}

.back-to-top:hover {
    background-color: var(--rustic-brown); /* Changes to your brown on hover */
    transform: scale(1.1);
}

/* Optional: Adds a smooth gliding effect when you click it */
html {
    scroll-behavior: smooth;
}