/* ============================================
   DUFFY'S RESTAURANT - COMPLETE CSS STYLESHEET
   ============================================
   
   This stylesheet provides all styling for the restaurant website.
   It uses Flexbox for layout, includes responsive design for mobile devices,
   and provides detailed annotations for each section.
*/

/* ============================================
   1. GLOBAL STYLES & RESET
   ============================================
   
   These styles apply to the entire page and reset default browser styling
   for consistent appearance across all browsers.
*/

/* Universal selector removes default margins and padding from all elements */
/* box-sizing: border-box ensures padding is included in element width */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Root HTML element - sets base font size and default font family */
/* All other font sizes use relative units (em, rem) for responsive scaling */
html {
    font-size: 16px; /* Base font size - 1rem = 16px by default */
}

/* Body element styling */
/* background-color: cream/beige for subtle neutral background */
/* font-family: Segoe UI, Tahoma, Geneva, sans-serif - modern sans-serif fonts */
/* line-height: 1.6 provides good spacing between text lines for readability */
/* color: #333 is dark gray, easier on eyes than pure black */
body {
    background-color: #F5F1E8;
    font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* ============================================
   2. PAGE CONTAINER & FLEXBOX LAYOUT
   ============================================
   
   The page-container uses Flexbox to create a layout where:
   - Content flows vertically (column direction)
   - Footer stays at bottom even with little content
   - Header and main content expand as needed
*/

/* Main container wrapping entire page */
/* display: flex creates a flex container */
/* flex-direction: column stacks child elements vertically */
/* min-height: 100vh ensures container is at least full viewport height */
/* This makes footer stick to bottom when content is short */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content area grows to fill available space */
/* flex: 1 means this element takes all remaining space */
/* This pushes footer to bottom of viewport if content is short */
.main-content {
    flex: 1;
    background-color: white;
}

/* ============================================
   3. NAVIGATION BAR STYLING
   ============================================
   
   Navigation bar at top of page with logo and menu items.
   Uses flexbox for horizontal layout.
*/

/* Navigation bar container */
/* position: sticky makes navbar stay visible when scrolling */
/* top: 0 positions it at top of viewport */
/* z-index: 100 ensures navbar stays above other content */
/* background-color: #6B5344 is warm brown-beige color */
/* padding: 1rem creates internal spacing */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #213a15;
    padding: 1rem 2rem;
    color: white;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border-bottom: 4px solid #D4AF37;
}

/* Logo section on left side of navbar */
/* flex-shrink: 0 prevents logo from shrinking */
.logo {
    flex-shrink: 0;
}
.restaurant-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-left: 0.5rem;
    color: white;
}
/* Navigation menu list */
/* display: flex creates horizontal layout */
/* gap: 2rem adds spacing between menu items */
/* list-style: none removes default bullet points */
.nav-menu {
    display: flex;
    gap: 1rem;
    list-style: none;
}

/* Navigation menu links */
/* color: white displays text in white */
/* text-decoration: none removes underlines from links */
/* padding: 0.5rem 1rem creates internal spacing around each link */
/* transition: 0.3s enables smooth color change animation */
.nav-menu a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

/* Navigation link hover effect */
/* When user hovers mouse over link, underline appears in green */
.nav-menu a:hover {
    border-bottom: 3px solid #D4AF37;
}

/* Active navigation link styling */
/* Indicates which page user is currently viewing */
/* border-bottom: 2px solid #6B8E23 highlights current page with green underline */
.nav-menu a.active {
    border-bottom: 3px solid #D4AF37;
    font-weight: bold;
}
/* Navigation menu list */
/* display: flex creates horizontal layout */
/* gap: 2rem adds spacing between menu items */
/* list-style: none removes default bullet points */
.menu-nav {
    display: flex;
    position: sticky;
    top: calc(60px + 2.25rem);
    justify-content: center;
    align-items: flex-start;
    background-color: #F5F1E8;
    list-style: none;
    padding: 1rem 2rem;
    flex-wrap: nowrap;
    overflow-y: hidden;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 1rem;
    border-bottom: 2px solid #D4AF37;
    z-index: 50;
}

/* Navigation menu links */
/* color: white displays text in white */
/* text-decoration: none removes underlines from links */
/* padding: 0.5rem 1rem creates internal spacing around each link */
/* transition: 0.3s enables smooth color change animation */
.menu-nav a {
    color: black;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
}

/* Navigation link hover effect */
/* When user hovers mouse over link, underline appears in green */
.menu-nav a:hover {
    border-bottom: 3px solid #D4AF37;
}

/* Active navigation link styling */
/* Indicates which page user is currently viewing */
/* border-bottom: 2px solid #6B8E23 highlights current page with green underline */
.menu-nav a.active {
    border-bottom: 3px solid #D4AF37;
    font-weight: bold;
}


/* ============================================
   3.5 HAMBURGER MENU STYLING
   ============================================
   
   Mobile hamburger menu for toggling navigation on smaller screens.
   Uses checkbox hack for CSS-only toggle functionality.
*/

/* Hidden checkbox input for toggle functionality */
/* Display none hides the checkbox, but :checked state is still usable */
.nav-toggle {
    display: none;
}

/* Hamburger menu button */
/* Only visible on smaller screens via media query */
/* display: flex allows centering of span lines */
/* flex-direction: column stacks the three lines vertically */
/* cursor: pointer indicates clickable button */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
}

/* Individual lines of hamburger icon */
/* Each line is a span element styled as a bar */
/* width: 25px creates appropriate width */
/* height: 3px makes the bars visible */
/* background-color: white for contrast */
/* border-radius: 3px rounds the edges */
/* transition: 0.3s enables smooth animation */
.hamburger span {
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 3px;
    transition: 0.3s;
}

/* Animation for hamburger when checked */
/* First line rotates and moves up when menu is open */
.nav-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(7px, 6px);
}

/* Middle line fades out when menu is open */
.nav-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
}

/* Third line rotates and moves down when menu is open */
.nav-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Mobile menu display when checkbox is checked */
/* Shows nav-menu in full-screen overlay when hamburger is clicked */
.nav-toggle:checked ~ .nav-menu {
    display: flex;
    margin-left: auto;
    width: min(8rem, 100%);
}

/* Hero section container */
/* background-color: #FBF8F3 is light beige */
/* padding: 4rem 2rem creates generous vertical spacing */
/* display: flex creates vertical layout */
/* flex-direction: column stacks title above content/image */
/* gap: 2rem adds spacing between title and body */
.hero {
    background-color: #F5F1E8;
    padding: 1rem 1rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    color: #5D4E3B;
    margin: 0rem auto;
}

/* Hero title - spans full width at top */
/* font-size: 2.5rem makes text very large and prominent */
/* margin: 0 removes default margins */
/* text-align: center centers the title */
.hero-title {
    font-size: 2.5rem;
    margin: 0;
    flex:0 0 100%;
    text-align: center;
    color: #5D4E3B;
}

/* Hero h2 heading (for menu and history pages) */
/* Used when hero has centered heading without side image */
/* font-size: 2.5rem makes text very large and prominent */
.hero h2 {
    font-size: 2.5rem;
    margin: 0;
    color: #5D4E3B;
}

/* Hero paragraph/subtitle (for menu and history pages) */
/* font-size: 1.1rem slightly larger than body text */
/* Appears below h2 in centered hero sections */
.hero > p {
    font-size: 1.1rem;
    margin: 0.5rem 0 0 0;
    color: #5D4E3B;
}

/* Hero body wrapper - contains content and image side-by-side */
/* display: flex creates horizontal layout */
/* gap: 2rem adds spacing between content and image */
/* align-items: center vertically centers items */
.hero-body {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Hero content wrapper */
/* flex: 1 allows content to take available space */
/* text-align: left aligns text to left side for main page */
.hero-content {
    flex: 1;
    text-align: left;
}

/* Hero content when directly in hero (menu/history pages) */
/* Centers content for pages without side-by-side image */
.hero > .hero-content {
    text-align: center;
}

/* Hero image styling */
/* max-width: 100% ensures image doesn't exceed container */
/* height: auto maintains aspect ratio */
/* border-radius: 8px adds rounded corners */
/* box-shadow adds subtle depth effect */
/* flex-shrink: 0 prevents image from shrinking */
.hero-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Hero paragraph/subtitle */
/* font-size: 1rem body text size */
/* line-height: 1.8 improves readability */
.hero p {
    font-size: 1rem;
    line-height: 1.8;
    color: #5D4E3B;
    margin: 0;
}

/* ============================================
   5. HOME PAGE LAYOUT - CONTENT GRID
   ============================================
   
   Three-column flexbox layout for history, Facebook feed, and hours sections.
   Uses flex-wrap for responsive design on smaller screens.
*/

/* Content grid container */
/* display: flex creates flexible layout */
/* gap: 2rem adds spacing between columns */
/* padding: 2rem adds internal margin around all sections */
/* flex-wrap: wrap allows items to wrap to next line on small screens */
.content-grid {
    display: flex;
    gap: 1rem;
    padding: 1%;
    flex-wrap: wrap;
}

/* Individual section styling within grid */
/* flex: 1 makes each section take equal width */
/* min-width: 300px ensures sections don't get too narrow */
/* background-color: #FBF8F3 is very light cream-beige */
/* padding: 1.5rem creates internal spacing */
/* border-radius: 8px rounds corners for modern look */
/* box-shadow: 0 2px 4px... creates subtle depth effect */
.history-section,
.mainmenu-section,
.facebook-section,
.hours-section {
    flex: 1;
    min-width: 300px;
    background-color: #FBF8F3;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.break {
    flex-basis: 100%;
    height: 0;
}
/* Section headings within content grid */
/* font-size: 1.5rem makes headings stand out */
/* color: #5D4E3B matches brown-beige color for visual consistency */
/* margin-bottom: 1rem adds space below heading */
/* border-bottom: 2px solid #6B8E23 adds decorative green line */
/* padding-bottom: 0.5rem adds space above border */
.history-section h3,
.mainmenu-section h3,
.facebook-section h3,
.hours-section h3 {
    font-size: 1.5rem;
    color: #5D4E3B;
    margin-bottom: 1rem;
    border-bottom: 2px solid #6B8E23;
    padding-bottom: 0.5rem;
}
.history-section content,
.mainmenu-section content {
    display: flex;
    gap: 2rem;
}
.history-section p,
.mainmenu-section p {
   text-align: justify;
}
img.side-image {
    width: 300px;
    max-width: 20vw;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}
/* ============================================
   6. HOURS TABLE STYLING
   ============================================
   
   Styled table for displaying hours of operation.
   Clear, organized layout for easy reading.
*/

/* Hours table */
/* width: 100% makes table fill available width */
/* border-collapse: collapse removes spacing between cells */
.hours-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

/* Table row styling */
/* border-bottom: 1px solid #ddd adds separator lines */
/* padding: 0.75rem adds internal spacing in cells */
.hours-table tr {
    border-bottom: 1px solid #ddd;
}

/* Table cell styling (both td and th) */
/* padding: 0.75rem adds internal spacing */
/* text-align: left aligns text to left side */
.hours-table td {
    padding: 0.75rem;
    text-align: left;
}

/* First cell in row (day name) */
/* font-weight: bold makes day names stand out */
.hours-table td:first-child {
    font-weight: bold;
    color: #5D4E3B;
}


/* Contact information paragraph */
/* margin-top: 1rem adds space above contact info */
/* font-size: 0.95rem slightly smaller text */
/* color: #555 is slightly lighter than main text */
.contact-info {
    margin-top: 1rem;
    font-size: 0.95rem;
    color: #555;
}

/* ============================================
   7. FACEBOOK FEED STYLING
   ============================================
   
   Styling for embedded Facebook feed widget.
*/



/* ============================================
   8. BUTTONS AND CALL-TO-ACTION
   ============================================
   
   Button styling for consistent appearance and interaction.
   Used for "Read More", "Call", etc.
*/

/* Button styling */
/* display: inline-block makes button clickable */
/* background-color: #6B8E23 is olive green color */
/* color: white provides contrast */
/* padding: 0.75rem 1.5rem creates button size */
/* border-radius: 4px rounds corners */
/* text-decoration: none removes underline */
/* transition: 0.3s enables smooth animation on hover */
/* cursor: pointer changes mouse to hand icon */
.btn {
    display: inline-block;
    background-color: #6B8E23;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    transition: 0.3s;
    cursor: pointer;
    border: none;
    font-size: 1rem;
    font-weight: bold;
    margin-top: 1rem;
}

/* Button hover effect */
/* background-color: #556B2F is darker shade of green */
/* transform: translateY(-2px) moves button up slightly */
/* box-shadow: 0 4px 8px... adds shadow for depth effect */
.btn:hover {
    background-color: #556B2F;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


/* ============================================
   9. MENU PAGE STYLING
   ============================================
   
   Specialized styling for menu items with names, prices, and descriptions.
*/

/* Menu container */
/* padding: 2rem adds internal spacing */
/* max-width: 900px limits width for readability */
/* margin: 0 auto centers content */
.menu-container {
    padding: 2rem;
    max-width: 900px;
    margin: 0;
}

/* Menu section - each category */
/* margin-bottom: 2rem adds space between menu categories */
/* padding-bottom: 2rem adds space and bottom border for separation */
/* border-bottom: 1px solid #D3C5B0 adds separator line in light beige */
.menu-image-container {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 1rem;
}



/* ============================================
   10. HISTORY PAGE STYLING
   ============================================
   
   Styling for article content and text-heavy pages.
*/

/* History/Article content container */
/* max-width: 800px limits line length for readability */
/* margin: 2rem auto centers content with margins */
/* padding: 0 2rem adds horizontal padding */
/* line-height: 1.8 increases spacing for easier reading */
.history-content {
    max-width: 800px;
    margin: 1rem auto;
    padding: 2.5rem;
    padding-top: 1rem;
    line-height: 1.8;
    background-color: #F5F1E8;
    border: 2px solid #D4AF37;
}

/* Article headings */
/* font-size: 1.5rem makes headings prominent */
/* color: #5D4E3B matches page color scheme */
/* margin-top: 2rem adds space before heading */
/* margin-bottom: 1rem adds space after heading */
/* border-bottom: 2px solid #6B8E23 adds decorative green line */
/* padding-bottom: 0.5rem adds space above border */
.history-content h3 {
    font-size: 1.5rem;
    color: #5D4E3B;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #6B8E23;
    padding-bottom: 1rem;
}

/* Article paragraphs */
/* margin-bottom: 1.5rem adds space between paragraphs */
.history-content p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

/* ============================================
   11. FOOTER STYLING
   ============================================
   
   Footer appears at bottom of all pages.
   Flexbox ensures it stays at bottom even with short content.
*/

/* Footer container */
/* background-color: #6B5344 matches navbar color */
/* color: white provides text contrast */
/* text-align: center centers all footer content */
/* padding: 2rem 1rem creates vertical spacing */
/* margin-top: auto uses flexbox to stay at bottom */
/* border-top: 2px solid #6B8E23 adds decorative green separator */
.footer {
    background-color: #6B5344;
    color: white;
    text-align: center;
    padding: 2rem 1rem;
    margin-top: auto;
    border-top: 2px solid #6B8E23;
}

/* Footer paragraphs */
/* margin: 0.5rem 0 controls spacing between footer elements */
.footer p {
    margin: 0.5rem 0;
}

/* Footer links */
/* color: #DAA520 is goldenrod to match accent color */
/* text-decoration: none removes underlines */
/* transition: 0.3s enables smooth animation on hover */
.footer a {
    color: #DAA520;
    text-decoration: none;
    transition: 0.3s;
}

/* Footer link hover effect */
/* color: white changes text to white on hover */
.footer a:hover {
    color: white;
}

/* ============================================
   12. RESPONSIVE DESIGN - TABLET & MOBILE
   ============================================
   
   Media queries adjust layout for smaller screen sizes.
   Ensures website works well on all devices.
*/

/* Tablet screens (max width 768px) */
/* Adjusts layout for tablets and smaller laptops */
@media (max-width: 768px) {
    
    /* Navbar adjustments for smaller screens */
    .navbar {
        flex-direction: row;
        gap: 0;
        padding: 1rem;
        position: relative;
    }
    
    /* Show hamburger menu on mobile */
    .hamburger {
        display: flex;
    }
    
    /* Logo text smaller on mobile */
    .logo img {
        width: 80px !important;
    }
    
    /* Hide nav menu by default, show as dropdown when toggled */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: #6B5344;
        padding: 1rem 2rem;
        gap: 0;
        display: none;
        z-index: 999;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    /* Navigation menu items stack vertically on mobile */
    .nav-menu li {
        width: 100%;
    }
    
    /* Navigation links take full width and adjust padding */
    .nav-menu a {
        display: block;
        padding: 0.75rem 0;
        border-bottom: 2px solid transparent;
        border-left: none;
        text-align: left;
    }
    
    /* Hover and active states for mobile menu */
    .nav-menu a:hover,
    .nav-menu a.active {
        border-bottom: 2px solid #D4AF37;
        border-left: none;
    }
    
    /* Hero section stacks vertically on tablet */
    .hero {
        flex-direction: column;
        padding: 2rem 1rem;
    }
    
    /* Hero title reduces for tablet */
    .hero-title {
        font-size: 1.8rem;
    }
    
    /* Hero body stacks content over image on tablet */
    .hero-body {
        flex-direction: column;
    }
    
    /* Hero image takes full width on tablet */
    .hero-image {
        width: 100%;
        max-width: 400px;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    /* Content grid sections stack vertically on mobile */
    .content-grid {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    /* Remove minimum width on sections so they stack properly */
    .history-section,
    .facebook-section,
    .hours-section {
        min-width: auto;
    }
  
    /* Menu items adjust for smaller screens */
    .menu-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    /* Price moves below item name on mobile */
    .item-price {
        margin-left: 0;
        margin-top: 0.25rem;
        display: block;
    }
}

/* Mobile phones (max width 480px) */
/* Further adjustments for very small screens */
@media (max-width: 480px) {
    
    /* Reduce all padding on mobile for more content space */
    body {
        font-size: 14px;
    }
    
    /* Navbar reduces padding further */
    .navbar {
        padding: 0.5rem 1rem;
    }
    
    /* Logo image even smaller on very small screens */
    .logo img {
        width: 60px !important;
    }
    
    /* Hamburger menu remains visible on very small screens */
    .hamburger {
        display: flex;
    }
    
    /* Mobile menu positioning and styling */
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 1rem;
    }
    
    /* Hero section padding reduces */
    .hero {
        padding: 1rem 0.5rem;
        flex-direction: column;
    }
    
    /* Hero title much smaller on mobile */
    .hero-title {
        font-size: 1.5rem;
    }
    
    /* Hero body stacks vertically */
    .hero-body {
        flex-direction: column;
    }
    
    /* Hero image smaller on very small screens */
    .hero-image {
        max-width: 280px;
    }
    
    /* Content sections reduce padding */
    .history-section,
    .facebook-section,
    .hours-section {
        padding: 1rem;
    }
    
    /* Content grid reduces gap between sections */
    .content-grid {
        gap: 1rem;
        padding: 1rem;
    }
    
    /* Menu container reduces padding */
    .menu-container {
        padding: 1rem;
    }
    
    /* History content reduces padding */
    .history-content {
        padding: 0 1rem;
    }
    
    /* CTA section reduces padding */
    .cta-section {
        padding: 1.5rem 1rem;
        margin: 1rem;
    }
}

/* ============================================
   13. UTILITY CLASSES & EFFECTS
   ============================================
   
   Small helper classes and subtle effects used throughout the design.
*/

/* Smooth transitions applied throughout */
/* All elements with transitions use 0.3s duration */
/* This creates smooth hover effects and interactions */

/* Remove default link styling consistently */
/* text-decoration: none applied to all custom links */

/* Rounded corners for modern appearance */
/* border-radius: 4px-8px used consistently */

/* Shadow effects for depth */
/* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) used on cards */
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) used on hover states */

/* Color scheme used throughout */
/* Primary Navbar: #6B5344 (warm brown-beige) - used for navbar and footer */
/* Primary Headings: #5D4E3B (darker brown-beige) - used for headings */
/* Hero Section: #8B7355 (medium beige) - used for hero banner */
/* Accent Green: #6B8E23 (olive green) - used for highlights, buttons, borders */
/* Accent Gold: #DAA520 (goldenrod) - used for secondary accents */
/* Background: #F5F1E8 (cream-beige) - used for page background */
/* Card background: #FBF8F3 (very light beige) - used for content sections */
/* Text: #333 (dark gray) - used for body text */