/* ====================================
   SWEET DREAMS BAKERY - CSS STYLESHEET
   Line-by-line comments for learning
   ====================================*/

/* CSS RESET AND BASE STYLES */
/* ========================== */

* {
    /* Universal selector targets ALL elements on the page */
    margin: 0;
    /* Removes default browser margins from all elements */
    
    padding: 0;
    /* Removes default browser padding from all elements */
    
    box-sizing: border-box;
    /* Makes width/height include padding and border, not add to them */
    /* This makes responsive design much easier and more predictable */
}

html {
    /* Targets the root HTML element */
    scroll-behavior: smooth;
    /* Makes anchor link navigation smooth and animated */
    /* When clicking nav links, it smoothly scrolls instead of jumping */
    
    scroll-padding-top: 80px;
    /* Adds padding when scrolling to anchor links */
    /* Prevents fixed navbar from covering section headings */
    /* 80px accounts for navbar height + some breathing room */
}

body {
    /* Main body element that contains all visible content */
    font-family: 'Open Sans', sans-serif;
    /* Sets default font for entire website - fallback to sans-serif if Google Font fails */
    
    line-height: 1.6;
    /* Sets line spacing to 1.6 times the font size - improves readability */
    
    color: #333;
    /* Default text color - dark gray instead of pure black for easier reading */
    
    overflow-x: hidden;
    /* Prevents horizontal scrollbar if content extends beyond screen width */
    
    /* NO margin on body - this would break full-width elements like nav/footer */
    /* Use .container class for content margins instead */
}

/* UTILITY CLASSES */
/* =============== */

.container {
    /* Reusable container class for consistent page width across sections */
    /* THIS is the proper way to add margins to page content - not body margin */
    max-width: 1200px;
    /* Maximum width of 1200px prevents content from stretching too wide on large screens */
    /* Fixed inconsistency - was 1000px in comment but 1200px is better */
    
    margin: 0 auto;
    /* Centers the container horizontally on the page */
    /* 0 = no top/bottom margin, auto = automatic left/right margins */
    
    padding: 0 20px;
    /* Adds 20px padding on left and right sides */
    /* Prevents content from touching screen edges on mobile */
    /* This provides the "healthy margin" you want for content */
}

.btn {
    /* Base button class that other button styles extend */
    display: inline-block;
    /* Allows width/height properties but stays in text flow */
    
    padding: 12px 24px;
    /* Internal spacing - 12px top/bottom, 24px left/right */
    
    text-decoration: none;
    /* Removes underline from button links */
    
    border-radius: 25px;
    /* Rounds button corners by 25px for modern look */
    
    font-weight: 600;
    /* Makes button text semi-bold for emphasis */
    
    text-align: center;
    /* Centers text inside button */
    
    transition: all 0.3s ease;
    /* Smooth animation for any property changes over 0.3 seconds */
    /* 'ease' creates natural acceleration/deceleration */
    
    border: none;
    /* Removes default button border */
    
    cursor: pointer;
    /* Changes mouse cursor to pointer on hover */
    
    font-size: 16px;
    /* Sets button text size */
}

.btn-primary {
    /* Primary button style - main call-to-action */
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    /* Creates diagonal gradient background from coral to orange */
    /* 135deg = diagonal from top-left to bottom-right */
    
    color: white;
    /* White text color for contrast against colored background */
}

.btn-primary:hover {
    /* Hover state for primary button */
    /* :hover pseudo-class applies when user hovers mouse over element */
    transform: translateY(-2px);
    /* Moves button up 2px creating "lift" effect */
    
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
    /* Adds shadow below button */
    /* 0 = no horizontal offset, 5px = 5px down, 15px = blur radius */
    /* rgba = red, green, blue, alpha(transparency) - 30% opacity coral shadow */
}

.btn-secondary {
    /* Secondary button style - less prominent actions */
    background: transparent;
    /* No background color - see-through */
    
    color: #ff6b6b;
    /* Text color matches primary button background */
    
    border: 2px solid #ff6b6b;
    /* 2px border around button using same coral color */
}

.btn-secondary:hover {
    /* Secondary button hover state */
    background: #ff6b6b;
    /* Fills background with coral color on hover */
    
    color: white;
    /* Changes text to white for contrast */
}

/* BACK TO TOP BUTTON - CUSTOM INDEPENDENT STYLE */
/* ============================================== */

.btn-back-to-top {
    /* Custom class for the back to top button - enhanced styling */
    /* This overrides the default .btn and .btn-secondary styles */
    
    padding: 10px 20px !important;
    /* Slightly increased padding for better touch targets and visual balance */
    /* !important ensures this overrides the base .btn padding */
    
    min-height: auto !important;
    /* Allows height to shrink to content size */
    /* Removes any minimum height constraints */
    
    height: auto !important;
    /* Height automatically adjusts to content */
    /* Overrides any fixed height from parent classes */
    
    line-height: 1.3;
    /* Improved line height for better text readability */
    /* Balances compactness with legibility */
    
    font-size: 13px;
    /* Optimized font size - not too small, not too large */
    /* Perfect for secondary action button */
    
    font-weight: 500 !important;
    /* Medium weight for better readability */
    /* Less bold than main buttons but still readable */
    
    border-radius: 20px;
    /* More rounded for modern, friendly appearance */
    /* Creates pill-like shape that's visually appealing */
    
    border: 2px solid #ff6b6b !important;
    /* Consistent border with brand color */
    /* Maintains secondary button visual identity */
    
    background: rgba(255, 255, 255, 0.9) !important;
    /* Semi-transparent white background */
    /* Creates elegant glassmorphism effect */
    
    color: #ff6b6b !important;
    /* Brand color text for consistency */
    /* Ensures good contrast against white background */
    
    backdrop-filter: blur(5px);
    /* Subtle blur effect for modern glassmorphism */
    /* Creates depth and visual interest */
    
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.15);
    /* Soft shadow with brand color tint */
    /* Adds depth without being overwhelming */
    
    display: inline-flex;
    /* Flexbox for perfect centering of content */
    /* Better than inline-block for text alignment */
    
    align-items: center;
    /* Vertically centers text perfectly */
    /* Ensures consistent button appearance */
    
    justify-content: center;
    /* Horizontally centers text */
    /* Creates balanced button appearance */
    
    white-space: nowrap;
    /* Prevents text from wrapping to multiple lines */
    /* Keeps button compact and predictable */
    
    text-transform: uppercase;
    /* Uppercase text for modern, clean look */
    /* Makes button feel more like a UI element */
    
    letter-spacing: 0.5px;
    /* Slight letter spacing for elegant typography */
    /* Improves readability of uppercase text */
}

.btn-back-to-top:hover {
    /* Enhanced hover state for back to top button */
    transform: translateY(-2px) scale(1.02);
    /* Subtle lift and scale effect for interactive feedback */
    /* Less dramatic than main buttons but still engaging */
    
    background: #ff6b6b !important;
    /* Fills with brand color on hover */
    /* Creates satisfying visual feedback */
    
    color: white !important;
    /* White text for contrast against colored background */
    /* Ensures readability during hover state */
    
    border-color: #ff6b6b !important;
    /* Maintains border color consistency */
    /* Seamless transition between states */
    
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    /* Enhanced shadow with more prominence */
    /* Creates floating effect that's elegant but not overwhelming */
    
    backdrop-filter: blur(8px);
    /* Increased blur for more depth on hover */
    /* Enhances the glassmorphism effect */
}

.section-header {
    /* Reusable header style for each section */
    text-align: center;
    /* Centers all text in header */
    
    margin-bottom: 60px;
    /* Adds 60px space below header before section content */
}

.section-title {
    /* Main heading for each section */
    font-family: 'Dancing Script', cursive;
    /* Uses elegant script font for bakery feel */
    
    font-size: 3rem;
    /* Large text size - rem units scale with root font size */
    
    color: #2c3e50;
    /* Dark blue-gray color for sophistication */
    
    margin-bottom: 10px;
    /* 10px space below title */
    
    font-weight: 700;
    /* Bold weight for Dancing Script font */
}

.section-subtitle {
    /* Supporting text under section titles */
    font-size: 1.2rem;
    /* Slightly larger than normal text */
    
    color: #7f8c8d;
    /* Light gray color - less prominent than main text */
    
    max-width: 600px;
    /* Limits line length for better readability */
    
    margin: 0 auto;
    /* Centers subtitle within its container */
}

/* NAVIGATION STYLES */
/* ================= */

.navbar {
    /* Main navigation bar */
    background: rgba(255, 255, 255, 0.95);
    /* White background with 95% opacity - slight transparency */
    
    backdrop-filter: blur(10px);
    /* Blurs content behind navbar - modern glassmorphism effect */
    
    position: fixed;
    /* Fixed positioning keeps navbar at top when scrolling */
    
    top: 0;
    /* Positions navbar at very top of page */
    
    width: 100%;
    /* Full width across screen */
    
    z-index: 1000;
    /* High z-index ensures navbar stays above other content */
    
    padding: 15px 0;
    /* 15px padding top and bottom, no left/right padding */
    
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* Subtle shadow below navbar */
    /* 0 = no horizontal offset, 2px down, 10px blur, 10% black opacity */
}

.nav-container {
    /* Container for navbar content - centers content while navbar spans full width */
    max-width: 1200px;
    /* Same max-width as main container for consistency */
    /* This ensures nav content aligns with page content even though nav spans full width */
    
    margin: 0 auto;
    /* Centers navbar content within the full-width navbar */
    
    padding: 0 20px;
    /* Matches main container padding for consistent alignment */
    
    display: flex;
    /* Flexbox layout for navbar items */
    
    justify-content: space-between;
    /* Spreads items apart - logo left, menu right */
    
    align-items: center;
    /* Vertically centers items */
}

.nav-logo h1 {
    /* Bakery name in navigation */
    font-family: 'Dancing Script', cursive;
    /* Matches section titles for brand consistency */
    
    font-size: 2rem;
    /* Large but not overwhelming size */
    
    color: #ff6b6b;
    /* Brand color - coral */
    
    font-weight: 700;
    /* Bold weight */
}

.nav-list {
    /* Container for navigation links */
    display: flex;
    /* Horizontal layout for nav items */
    
    list-style: none;
    /* Removes bullet points from list */
    
    gap: 30px;
    /* 30px space between each nav item */
}

.nav-link {
    /* Individual navigation links */
    text-decoration: none;
    /* Removes underline */
    
    color: #333;
    /* Dark text color */
    
    font-weight: 500;
    /* Medium font weight */
    
    font-size: 16px;
    /* Standard readable size */
    
    transition: color 0.3s ease;
    /* Smooth color change on hover */
    
    position: relative;
    /* Allows positioning of pseudo-elements */
}

.nav-link:hover {
    /* Hover state for navigation links */
    color: #ff6b6b;
    /* Changes to brand color on hover */
}

.nav-link::after {
    /* Creates underline effect using pseudo-element */
    content: '';
    /* Required for pseudo-element to appear */
    
    position: absolute;
    /* Positions relative to parent nav-link */
    
    width: 0;
    /* Starts with no width - invisible */
    
    height: 2px;
    /* 2px thick underline */
    
    bottom: -5px;
    /* 5px below the text */
    
    left: 50%;
    /* Starts from center */
    
    background: #ff6b6b;
    /* Brand color underline */
    
    transition: all 0.3s ease;
    /* Animates width and position changes */
    
    transform: translateX(-50%);
    /* Centers the underline */
}

.nav-link:hover::after {
    /* Underline on hover */
    width: 100%;
    /* Expands to full width of text */
}

/* MOBILE MENU TOGGLE */
/* ================== */

.nav-toggle {
    /* Hamburger menu button for mobile */
    display: none;
    /* Hidden by default - only shown on mobile via media queries */
    
    flex-direction: column;
    /* Stacks hamburger bars vertically */
    
    cursor: pointer;
    /* Pointer cursor on hover */
    
    gap: 4px;
    /* 4px space between hamburger bars */
    
    padding: 10px;
    /* Larger touch target for mobile - 44x44px minimum recommended */
    
    border-radius: 5px;
    /* Rounded button for modern touch interface */
    
    transition: background-color 0.3s ease;
    /* Smooth background transition on interaction */
}

.nav-toggle:hover {
    /* Hover state for hamburger button */
    background-color: rgba(255, 107, 107, 0.1);
    /* Light brand color background on hover */
}

.bar {
    /* Individual hamburger menu bars */
    width: 25px;
    /* 25px wide */
    
    height: 3px;
    /* 3px thick */
    
    background: #333;
    /* Dark color */
    
    transition: all 0.3s ease;
    /* Smooth animation for transform effects - enhanced for rotation */
    
    border-radius: 2px;
    /* Slightly rounded ends */
    
    transform-origin: center;
    /* Sets rotation point to center of bar */
}

/* Animated hamburger to X transformation */
.nav-toggle.active .bar:nth-child(1) {
    /* First bar rotates and moves down */
    transform: translateY(7px) rotate(45deg);
    /* Moves down 7px (4px gap + 3px bar height) and rotates 45 degrees */
}

.nav-toggle.active .bar:nth-child(2) {
    /* Middle bar fades out */
    opacity: 0;
    /* Makes middle bar invisible */
    
    transform: translateX(-20px);
    /* Slides left for smooth transition */
}

.nav-toggle.active .bar:nth-child(3) {
    /* Third bar rotates and moves up */
    transform: translateY(-7px) rotate(-45deg);
    /* Moves up 7px and rotates -45 degrees to form X shape */
}

/* HERO SECTION */
/* ============ */

.hero {
    /* Main hero/landing section - now using CSS Grid for better responsiveness */
    min-height: 70vh;
    /* Slightly increased for better visual impact */
    
    display: grid;
    /* CSS Grid provides better responsive control than flexbox for this layout */
    
    grid-template-columns: 1fr 1fr;
    /* Two equal columns - text content and image */
    /* 1fr = one fraction of available space */
    
    gap: 50px;
    /* Space between grid columns */
    
    align-items: center;
    /* Vertically centers content in grid cells */
    
    padding-top: 125px;
    padding-bottom: 75px;
    /* Grid layout handles spacing better than fixed padding */
    
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    /* Subtle diagonal gradient background */
}

.hero-content {
    /* Text content side of hero - now works with CSS Grid */
    /* No flex properties needed - grid handles layout */
    
    max-width: 500px;
    /* Limits width for readability */
    /* Still important for very wide screens */
    
    justify-self: end;
    /* Aligns content to right side of grid cell */
    /* Creates better visual balance with image */
    
    /* No margin needed - grid gap handles spacing */
}

.hero-title {
    /* Main hero headline */
    font-family: 'Dancing Script', cursive;
    /* Script font for elegance */
    
    font-size: 4rem;
    /* Very large size for impact */
    
    color: #2c3e50;
    /* Dark blue-gray */
    
    margin-bottom: 20px;
    /* Space below title */
    
    line-height: 1.2;
    /* Tighter line spacing for large text */
}

.hero-subtitle {
    /* Supporting text under hero title */
    font-size: 1.3rem;
    /* Larger than normal paragraph text */
    
    color: #7f8c8d;
    /* Light gray */
    
    margin-bottom: 30px;
    /* Space before buttons */
    
    line-height: 1.6;
    /* Good readability spacing */
}

.hero-buttons {
    /* Container for hero call-to-action buttons */
    display: flex;
    /* Side-by-side button layout */
    
    gap: 20px;
    /* 20px space between buttons */
    
    flex-wrap: wrap;
    /* Allows buttons to wrap on small screens */
    
    justify-content: center;
    /* Centers buttons horizontally */
}

.hero-image {
    /* Image side of hero section - now works with CSS Grid */
    /* No flex properties needed - grid handles layout automatically */
    
    justify-self: center;
    /* Centers image horizontally in its grid cell */
    /* This will center the image on narrow screens when grid stacks to single column */
}

.hero-img {
    /* Hero image styling - now fully responsive */
    width: 100%;
    /* Takes full width of its container (.hero-image) */
    /* This makes it respect the flexbox layout */
    
    max-width: 100%;
    /* Prevents image from overflowing container */
    /* Especially important for large source images */
    
    height: auto;
    /* Maintains aspect ratio while scaling */
    /* Auto height keeps proportions correct */
    
    object-fit: cover;
    /* Ensures image fills container while maintaining aspect ratio */
    /* Crops image if necessary to fill space perfectly */
    
    max-height: 400px;
    /* Limits maximum height so image doesn't get too tall */
    /* Provides consistent layout across different screen sizes */
    
    border-radius: 15px;
    /* Rounded corners for modern aesthetic */
    
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    /* Large soft shadow for depth and visual separation */
    /* 0 horizontal, 20px down, 40px blur, 10% black opacity */
}

/* ABOUT SECTION */
/* ============= */

.about {
    /* About/story section */
    padding: 100px 0;
    /* Large padding top and bottom for breathing room */
    
    background: white;
    /* Clean white background */
}

.about-content {
    /* Container for about section layout */
    display: flex;
    /* Side-by-side layout */
    
    align-items: center;
    /* Vertically center content */
    
    gap: 50px;
    /* 50px space between text and image */
}

.about-text {
    /* Text content of about section */
    flex: 1;
    /* Takes available space */
}

.about-text p {
    /* Paragraphs in about section */
    font-size: 1.1rem;
    /* Slightly larger than default */
    
    margin-bottom: 20px;
    /* Space between paragraphs */
    
    color: #555;
    /* Medium gray for easy reading */
}

.about-image {
    /* Image container in about section */
    flex: 1;
    /* Equal space with text */
}

.about-img {
    /* About section image */
    width: 100%;
    /* Full container width */
    
    height: auto;
    /* Maintain aspect ratio */
    
    border-radius: 15px;
    /* Rounded corners */
    
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

/* MENU SECTION */
/* ============ */

.menu {
    /* Menu section */
    padding: 100px 0;
    /* Large padding for section spacing */
    
    background: #f8f9fa;
    /* Light gray background - different from white sections */
}

.menu-categories {
    /* Container for menu filter buttons */
    display: flex;
    /* Horizontal button layout */
    
    justify-content: center;
    /* Centers buttons */
    
    gap: 15px;
    /* Space between buttons */
    
    margin-bottom: 50px;
    /* Space before menu items */
    
    flex-wrap: wrap;
    /* Allows wrapping on small screens */
}

.menu-btn {
    /* Menu filter buttons */
    background: white;
    /* White background */
    
    color: #7f8c8d;
    /* Light gray text */
    
    border: 2px solid #e9ecef;
    /* Light border */
    
    padding: 12px 24px;
    /* Internal spacing */
    
    border-radius: 25px;
    /* Rounded buttons */
    
    cursor: pointer;
    /* Pointer cursor */
    
    transition: all 0.3s ease;
    /* Smooth hover transitions */
    
    font-weight: 500;
    /* Medium font weight */
}

.menu-btn.active,
.menu-btn:hover {
    /* Active and hover states for menu buttons */
    background: #ff6b6b;
    /* Brand color background */
    
    color: white;
    /* White text */
    
    border-color: #ff6b6b;
    /* Matching border color */
}

.menu-grid {
    /* Grid layout for menu items - enhanced mobile responsiveness */
    display: grid;
    /* CSS Grid layout */
    
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Responsive grid - reduced minimum to 280px for better mobile fit */
    /* auto-fit creates as many columns as will fit on screen */
    
    gap: 30px;
    /* 30px space between grid items on desktop */
    
    justify-items: center;
    /* Centers grid items horizontally - important for single column mobile layout */
}

.menu-item {
    /* Individual menu item cards */
    background: white;
    /* White background */
    
    border-radius: 15px;
    /* Rounded corners */
    
    overflow: hidden;
    /* Hides content that extends beyond rounded corners */
    
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    /* Soft shadow for card effect */
    
    transition: transform 0.3s ease;
    /* Smooth hover animation */
}

.menu-item:hover {
    /* Hover effect for menu items */
    transform: translateY(-5px);
    /* Lifts card up 5px on hover */
}

.menu-item-image {
    /* Container for menu item images */
    height: 250px;
    /* Fixed height for consistent layout */
    
    overflow: hidden;
    /* Crops image if it doesn't fit perfectly */
}

.menu-img {
    /* Menu item images */
    width: 100%;
    /* Full container width */
    
    height: 100%;
    /* Full container height */
    
    object-fit: cover;
    /* Crops image to fill container while maintaining aspect ratio */
    
    transition: transform 0.3s ease;
    /* Smooth zoom effect */
}

.menu-item:hover .menu-img {
    /* Image zoom on card hover */
    transform: scale(1.05);
    /* Slightly enlarges image (5% bigger) */
}

.menu-item-content {
    /* Text content area of menu cards */
    padding: 20px;
    /* Internal spacing */
}

.menu-item-title {
    /* Menu item names */
    font-size: 1.3rem;
    /* Larger than paragraph text */
    
    font-weight: 600;
    /* Semi-bold */
    
    color: #2c3e50;
    /* Dark blue-gray */
    
    margin-bottom: 10px;
    /* Space below title */
}

.menu-item-description {
    /* Menu item descriptions */
    color: #7f8c8d;
    /* Light gray */
    
    margin-bottom: 15px;
    /* Space before price */
    
    font-size: 0.95rem;
    /* Slightly smaller than normal text */
}

.menu-item-price {
    /* Menu item prices */
    font-size: 1.2rem;
    /* Larger text for emphasis */
    
    font-weight: 700;
    /* Bold */
    
    color: #ff6b6b;
    /* Brand color */
}

/* GALLERY SECTION */
/* =============== */

.gallery {
    /* Photo gallery section */
    padding: 100px 0;
    /* Large section padding */
    
    background: white;
    /* Clean white background */
}

.gallery-grid {
    /* Grid layout for photos - enhanced mobile responsiveness */
    display: grid;
    /* CSS Grid */
    
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Responsive columns - reduced minimum to 250px for better mobile fit */
    /* Allows 2 columns on larger mobile devices in landscape */
    
    gap: 20px;
    /* 20px space between images */
    
    justify-items: center;
    /* Centers gallery items - ensures single column mobile layout is centered */
}

.gallery-item {
    /* Individual photo containers */
    border-radius: 15px;
    /* Rounded corners */
    
    overflow: hidden;
    /* Clips images to rounded shape */
    
    height: 300px;
    /* Fixed height for grid consistency */
    
    position: relative;
    /* Allows positioning of overlay effects */
}

.gallery-img {
    /* Gallery images */
    width: 100%;
    /* Full container width */
    
    height: 100%;
    /* Full container height */
    
    object-fit: cover;
    /* Crops to fill container */
    
    transition: transform 0.3s ease;
    /* Smooth hover effects */
}

.gallery-item:hover .gallery-img {
    /* Image zoom on hover */
    transform: scale(1.1);
    /* Enlarges image 10% on hover */
}

/* CONTACT SECTION */
/* =============== */

.contact {
    /* Contact/Custom order section */
    padding: 100px 0 150px 0;
    /* Large section padding with extra bottom padding */
    /* 150px bottom creates more space before footer */
    
    background: #f8f9fa;
    /* Light gray background */
}

.contact-content {
    /* Layout container for contact section */
    display: flex;
    /* Side-by-side layout */
    
    gap: 50px;
    /* Space between info and form */
    
    align-items: flex-start;
    /* Align items to top */
}

.contact-info {
    /* Business information side */
    flex: 1;
    /* Takes available space */
}

.contact-item {
    /* Individual contact information blocks */
    margin-bottom: 40px;
    /* Space between info blocks */
}

.contact-item h3 {
    /* Headings in contact section */
    font-size: 1.3rem;
    /* Larger text */
    
    color: #2c3e50;
    /* Dark blue-gray */
    
    margin-bottom: 15px;
    /* Space below heading */
    
    font-weight: 600;
    /* Semi-bold */
}

.contact-item p {
    /* Paragraphs in contact info */
    color: #555;
    /* Medium gray */
    
    line-height: 1.8;
    /* Extra line spacing for readability */
    
    margin-bottom: 10px;
    /* Space between paragraphs */
}

.hours p {
    /* Operating hours text */
    font-size: 0.95rem;
    /* Slightly smaller text */
    
    margin-bottom: 5px;
    /* Tighter spacing for hours list */
}

.contact-form-container {
    /* Form container */
    flex: 1;
    /* Equal space with info section */
    
    background: white;
    /* White background for form */
    
    padding: 40px;
    /* Internal padding */
    
    border-radius: 15px;
    /* Rounded corners */
    
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Soft shadow for depth */
}

.contact-form h3 {
    /* Form heading */
    margin-bottom: 30px;
    /* Space before form fields */
    
    color: #2c3e50;
    /* Dark blue-gray */
    
    font-size: 1.4rem;
    /* Large heading size */
}

.form-group {
    /* Container for each form field */
    margin-bottom: 25px;
    /* Space between form fields */
}

.form-group label {
    /* Form field labels */
    display: block;
    /* Each label on its own line */
    
    margin-bottom: 8px;
    /* Space between label and input */
    
    font-weight: 500;
    /* Medium font weight */
    
    color: #333;
    /* Dark text */
}

.form-group input,
.form-group select,
.form-group textarea {
    /* All form inputs */
    width: 100%;
    /* Full container width */
    
    padding: 12px 15px;
    /* Internal spacing */
    
    border: 2px solid #e9ecef;
    /* Light gray border */
    
    border-radius: 8px;
    /* Slightly rounded corners */
    
    font-size: 16px;
    /* Readable text size */
    
    font-family: inherit;
    /* Uses same font as parent */
    
    transition: border-color 0.3s ease;
    /* Smooth border color change */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    /* Focus state for form inputs */
    outline: none;
    /* Removes default browser outline */
    
    border-color: #ff6b6b;
    /* Brand color border when focused */
}

.form-group textarea {
    /* Text area specific styling */
    resize: vertical;
    /* Only allows vertical resizing */
    
    min-height: 120px;
    /* Minimum height for text area */
}

/* FOOTER SECTION */
/* ============== */

.footer {
    /* Website footer */
    background: #2c3e50;
    /* Dark blue-gray background */
    
    color: white;
    /* White text */
    
    padding: 50px 0 20px;
    /* 50px top, 20px bottom padding */
}

.footer-content {
    /* Footer main content layout */
    display: flex;
    /* Horizontal layout */
    
    justify-content: space-between;
    /* Spreads sections apart */
    
    gap: 30px;
    /* Space between sections */
    
    margin-bottom: 30px;
    /* Space before copyright */
}

.footer-section {
    /* Individual footer sections */
    flex: 1;
    /* Equal space for each section */
}

.footer-section h3,
.footer-section h4 {
    /* Footer headings */
    margin-bottom: 15px;
    /* Space below headings */
    
    color: #ff6b6b;
    /* Brand color for headings */
}

.footer-section ul {
    /* Footer lists */
    list-style: none;
    /* Removes bullet points */
}

.footer-section ul li {
    /* Footer list items */
    margin-bottom: 8px;
    /* Space between items */
}

.footer-section ul li a {
    /* Footer links */
    color: #bdc3c7;
    /* Light gray */
    
    text-decoration: none;
    /* No underline */
    
    transition: color 0.3s ease;
    /* Smooth color change */
}

.footer-section ul li a:hover {
    /* Footer link hover */
    color: #ff6b6b;
    /* Brand color on hover */
}

.social-links {
    /* Social media links container */
    display: flex;
    /* Horizontal layout */
    
    gap: 15px;
    /* Space between social links */
}

.social-link {
    /* Individual social media links */
    color: #bdc3c7;
    /* Light gray */
    
    text-decoration: none;
    /* No underline */
    
    transition: color 0.3s ease;
    /* Smooth color change */
}

.social-link:hover {
    /* Social link hover */
    color: #ff6b6b;
    /* Brand color on hover */
}

.footer-bottom {
    /* Copyright section at bottom */
    text-align: center;
    /* Centered text */
    
    padding-top: 20px;
    /* Space above copyright */
    
    border-top: 1px solid #34495e;
    /* Thin border line above */
    
    color: #95a5a6;
    /* Light gray text */
    
    font-size: 0.9rem;
    /* Smaller text size */
}

/* RESPONSIVE DESIGN - MOBILE FIRST APPROACH */
/* ========================================== */

/* Extra small mobile devices - screens 360px and smaller */
@media screen and (max-width: 360px) {
    /* Very small mobile phones - Galaxy S5, iPhone SE, etc. */
    
    .container {
        /* Reduced padding on very small screens */
        padding: 0 15px;
        /* Less side padding to maximize content space */
    }
    
    .hero-title {
        /* Smaller hero title on tiny screens */
        font-size: 2rem;
        /* Further reduced for very small screens */
        
        line-height: 1.1;
        /* Tighter line spacing to fit better */
    }
    
    .section-title {
        /* Smaller section titles on tiny screens */
        font-size: 2rem;
        /* Reduced from 2.5rem for better fit */
    }
    
    .menu-grid {
        /* Menu grid on very small screens */
        grid-template-columns: 1fr;
        /* Force single column layout */
        
        gap: 20px;
        /* Reduced gap for tighter layout */
    }
    
    .menu-item {
        /* Menu items on very small screens */
        max-width: 100%;
        /* Ensure full width usage */
        
        margin: 0 auto;
        /* Center items */
    }
    
    .gallery-grid {
        /* Gallery on very small screens */
        grid-template-columns: 1fr;
        /* Single column only */
        
        gap: 15px;
        /* Smaller gap for compact layout */
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        /* Form elements on very small screens */
        font-size: 16px;
        /* Prevents zoom on iOS devices when focusing input fields */
    }
}

/* Small mobile devices - screens 480px and smaller */
@media screen and (max-width: 480px) {
    /* Standard mobile phones */
    
    .section-title {
        /* Section titles on small mobile */
        font-size: 2.5rem;
        /* Balanced size for mobile readability */
    }
    
    .hero-title {
        /* Hero title on small mobile */
        font-size: 2.5rem;
        /* Consistent with section titles */
    }
    
    .hero-buttons {
        /* Hero buttons on small mobile */
        flex-direction: column;
        /* Stack buttons vertically for better touch interaction */
        
        align-items: center;
        /* Center buttons horizontally */
        
        gap: 15px;
        /* Space between stacked buttons */
    }
    
    .btn {
        /* All buttons on small mobile */
        width: 100%;
        /* Full width for easier touch interaction */
        
        max-width: 300px;
        /* Reasonable maximum width */
        
        padding: 15px 24px;
        /* Larger padding for better touch targets (minimum 44px height) */
        
        font-size: 16px;
        /* Consistent font size to prevent iOS zoom */
    }
    
    .menu-categories {
        /* Menu filter buttons on small mobile */
        flex-direction: column;
        /* Stack filter buttons vertically */
        
        align-items: center;
        /* Center buttons */
        
        gap: 10px;
        /* Space between filter buttons */
    }
    
    .menu-btn {
        /* Menu filter buttons styling on small mobile */
        width: 200px;
        /* Fixed width for visual consistency */
        
        padding: 12px 20px;
        /* Touch-friendly padding */
    }
    
    .menu-grid {
        /* Menu grid on small mobile */
        grid-template-columns: 1fr;
        /* Single column layout for focus */
        
        gap: 25px;
        /* Adequate spacing between items */
    }
    
    .gallery-grid {
        /* Gallery grid on small mobile */
        grid-template-columns: 1fr;
        /* Single column layout */
        
        gap: 20px;
        /* Comfortable spacing */
    }
    
    .gallery-item {
        /* Gallery items on small mobile */
        height: 250px;
        /* Slightly smaller height for mobile screens */
        
        max-width: 100%;
        /* Ensure full width utilization */
    }
    
    .contact-form-container {
        /* Contact form on small mobile - enhanced width and centering */
        padding: 30px 20px;
        /* Reduced padding for more content space */
        
        margin: 0 auto;
        /* Center the form container horizontally */
        
        width: 100%;
        /* Use full available width */
        
        max-width: 100%;
        /* Prevent overflow on very small screens */
        
        box-sizing: border-box;
        /* Include padding in width calculation */
    }
    
    .hero-img {
        /* Hero image on small mobile */
        max-height: 300px;
        /* Smaller max height to preserve screen real estate */
        
        border-radius: 10px;
        /* Slightly smaller border radius for mobile */
    }
    
    .about-img {
        /* About section image on small mobile */
        max-height: 300px;
        /* Consistent with hero image */
        
        border-radius: 10px;
        /* Matching border radius */
    }
}

/* Medium mobile devices - screens 640px and smaller */
@media screen and (max-width: 640px) {
    /* Larger mobile phones and small tablets in portrait */
    
    .hero {
        /* Hero section on medium mobile */
        grid-template-columns: 1fr;
        /* Single column layout */
        
        gap: 30px;
        /* Comfortable spacing */
        
        text-align: center;
        /* Center all content */
        
        padding: 120px 20px 60px;
        /* Adjusted padding for better mobile experience */
    }
    
    .hero-content {
        /* Hero content on medium mobile */
        justify-self: center;
        /* Center in grid cell */
        
        max-width: 100%;
        /* Use available width */
    }
    
    .menu-grid {
        /* Menu grid on medium mobile */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* Allow 2 columns if screen width permits */
        
        gap: 25px;
        /* Balanced spacing */
    }
    
    .gallery-grid {
        /* Gallery on medium mobile */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /* Allow 2 columns on wider mobile screens */
        
        gap: 15px;
        /* Tighter spacing for 2-column layout */
    }
    
    .about-content,
    .contact-content {
        /* About and contact sections on medium mobile */
        flex-direction: column;
        /* Stack content vertically */
        
        gap: 30px;
        /* Space between stacked elements */
    }
}

/* Large mobile/small tablet - screens 768px and smaller */
@media screen and (max-width: 768px) {
    /* Media query targets tablet and small desktop screens */
    
    .nav-menu {
        /* Navigation menu on tablets and mobile - enhanced mobile experience */
        position: fixed;
        /* Fixed position for mobile menu overlay */
        
        left: -100%;
        /* Hidden off-screen to the left */
        
        top: 70px;
        /* Below the navbar */
        
        flex-direction: column;
        /* Vertical menu layout */
        
        background-color: rgba(255, 255, 255, 0.98);
        /* Semi-transparent white for modern glass effect */
        
        backdrop-filter: blur(10px);
        /* Blur effect for glassmorphism - modern mobile UI pattern */
        
        width: 100%;
        /* Full screen width */
        
        height: calc(100vh - 70px);
        /* Full remaining screen height for immersive mobile menu */
        
        text-align: center;
        /* Centered menu items */
        
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        /* Enhanced easing for smoother, more natural animation */
        
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
        /* More prominent shadow for better visual separation */
        
        z-index: 999;
        /* Ensures menu appears above other content */
        
        overflow-y: auto;
        /* Allow scrolling if menu content is too tall */
    }
    
    .nav-menu.active {
        /* When mobile menu is open */
        left: 0;
        /* Slides in from left */
    }
    
    .nav-list {
        /* Navigation list on mobile - enhanced touch experience */
        flex-direction: column;
        /* Vertical layout */
        
        padding: 40px 0;
        /* Increased padding for better visual balance */
        
        gap: 10px;
        /* Small gap between items for visual separation */
        
        justify-content: center;
        /* Center items vertically in available space */
        
        min-height: 50%;
        /* Take at least half of menu height */
    }
    
    .nav-item {
        /* Individual nav items on mobile - optimized for touch */
        padding: 0;
        /* Remove padding - let links handle touch area */
    }
    
    .nav-link {
        /* Navigation links on mobile - enhanced touch targets */
        display: block;
        /* Full width clickable area */
        
        padding: 18px 30px;
        /* Large touch-friendly padding (minimum 44px height) */
        
        font-size: 18px;
        /* Larger text for better mobile readability */
        
        font-weight: 500;
        /* Consistent weight */
        
        border-radius: 12px;
        /* Rounded touch targets for modern mobile UI */
        
        margin: 0 20px;
        /* Side margins for visual breathing room */
        
        transition: all 0.3s ease;
        /* Smooth transitions for all properties */
    }
    
    .nav-link:hover,
    .nav-link:focus {
        /* Enhanced mobile link interactions */
        background-color: rgba(255, 107, 107, 0.1);
        /* Light brand color background */
        
        color: #ff6b6b;
        /* Brand color text */
        
        transform: translateX(5px);
        /* Subtle slide effect for tactile feedback */
    }
    
    .nav-toggle {
        /* Show hamburger menu on tablets */
        display: flex;
        /* Make visible */
    }
    
    .hero {
        /* Hero section on tablets - CSS Grid responsive behavior */
        grid-template-columns: 1fr;
        /* Single column layout on smaller screens */
        /* Grid automatically stacks content vertically */
        
        gap: 30px;
        /* Reduced gap for mobile */
        
        text-align: center;
        /* Center all content */
        
        padding: 120px 20px 50px;
        /* More top padding for mobile navbar */
        /* Grid makes this much cleaner than flex-direction changes */
    }
    
    .hero-content {
        /* Hero text content on tablets - simplified with CSS Grid */
        justify-self: center;
        /* Center content in grid cell */
        
        max-width: 100%;
        /* Allow full width on smaller screens */
        
        /* No margins needed - grid gap handles spacing automatically */
    }
    
    .hero-title {
        /* Hero title on tablets */
        font-size: 3rem;
        /* Smaller than desktop */
    }
    
    .about-content {
        /* About section on tablets */
        flex-direction: column;
        /* Stack vertically */
    }
    
    .contact-content {
        /* Contact section on tablets */
        flex-direction: column;
        /* Stack vertically */
    }
    
    .footer-content {
        /* Footer on tablets */
        flex-direction: column;
        /* Stack sections vertically */
        
        text-align: center;
        /* Center all content */
    }
}

/* Mobile styles - screens 480px and smaller */
@media screen and (max-width: 480px) {
    /* Media query for mobile phones */
    
    .section-title {
        /* Section titles on mobile */
        font-size: 2.5rem;
        /* Smaller than tablet */
    }
    
    .hero-title {
        /* Hero title on mobile */
        font-size: 2.5rem;
        /* Even smaller for mobile */
    }
    
    .hero-buttons {
        /* Hero buttons on mobile */
        flex-direction: column;
        /* Stack buttons vertically */
        
        align-items: center;
        /* Center buttons */
    }
    
    .btn {
        /* Buttons on mobile */
        width: 100%;
        /* Full width buttons */
        
        max-width: 300px;
        /* But not too wide */
    }
    
    .menu-categories {
        /* Menu filter buttons on mobile */
        flex-direction: column;
        /* Stack vertically */
        
        align-items: center;
        /* Center buttons */
    }
    
    .menu-btn {
        /* Menu filter buttons on mobile */
        width: 200px;
        /* Fixed width for consistency */
    }
    
    .gallery-grid {
        /* Gallery grid on mobile */
        grid-template-columns: 1fr;
        /* Single column layout */
    }
    
    .contact-form-container {
        /* Contact form on mobile */
        padding: 30px 20px;
        /* Less padding on small screens */
    }
    
    .hero-img {
        /* Hero image on mobile - ensure it stays responsive */
        max-height: 300px;
        /* Smaller max height on mobile devices */
        /* Prevents image from overwhelming small screens */
    }
    
    /* Enhanced mobile form styling for better touch interaction */
    .form-group {
        /* Form groups on mobile - improved spacing and touch navigation */
        margin-bottom: 25px;
        /* Increased spacing between form fields for comfortable touch navigation */
    }
    
    .form-group label {
        /* Form labels on mobile - enhanced readability */
        font-size: 16px;
        /* Larger labels for better readability on small screens */
        
        margin-bottom: 8px;
        /* More space between label and input for visual clarity */
        
        font-weight: 600;
        /* Slightly bolder for better visibility on mobile screens */
        
        display: block;
        /* Ensure labels take full width */
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        /* Form inputs on mobile - optimized for touch interaction */
        padding: 16px 20px;
        /* Larger padding for comfortable touch interaction and better visual hierarchy */
        
        font-size: 16px;
        /* 16px prevents automatic zoom on iOS devices when focusing input fields */
        
        border: 2px solid #e9ecef;
        /* Slightly thicker border for better visibility and touch feedback */
        
        border-radius: 12px;
        /* More rounded corners consistent with modern mobile UI patterns */
        
        min-height: 50px;
        /* Minimum height ensures comfortable touch targets (44px+ recommended) */
        
        width: 100%;
        /* Full width for consistent layout */
        
        -webkit-appearance: none;
        /* Remove iOS default styling for better custom appearance */
        
        -moz-appearance: none;
        /* Remove Firefox default styling */
        
        appearance: none;
        /* Standard property - remove default browser styling for consistent cross-platform appearance */
    }
    
    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        /* Enhanced focus states for mobile accessibility */
        border-color: #ff6b6b;
        /* Brand color border on focus */
        
        outline: none;
        /* Remove default outline */
        
        box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
        /* Prominent focus ring for accessibility - meets WCAG guidelines */
        
        transform: translateY(-2px);
        /* Subtle lift effect for tactile feedback */
    }
    
    .form-group textarea {
        /* Textareas on mobile - optimized for text input */
        min-height: 120px;
        /* Adequate height for comfortable multi-line text entry */
        
        resize: vertical;
        /* Allow vertical resizing only to prevent layout issues */
        
        line-height: 1.5;
        /* Better line spacing for readability */
    }
    
    .form-group select {
        /* Select dropdowns on mobile */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
        /* Custom dropdown arrow for consistent cross-platform appearance */
        
        background-position: right 12px center;
        /* Position arrow on right side */
        
        background-repeat: no-repeat;
        /* Prevent arrow repetition */
        
        background-size: 16px;
        /* Size of dropdown arrow */
        
        padding-right: 48px;
        /* Space for custom arrow */
    }
    
    /* Mobile-specific button improvements for better touch interaction */
    .contact-form .btn {
        /* Submit button on mobile forms - enhanced touch experience */
        width: 100%;
        /* Full width for easy touching and consistent layout */
        
        padding: 18px 24px;
        /* Extra padding for better touch target (meets 44px minimum) */
        
        font-size: 18px;
        /* Larger text for better readability on mobile screens */
        
        margin-top: 20px;
        /* Space above submit button for visual separation */
        
        min-height: 54px;
        /* Ensure minimum touch target size for accessibility */
        
        font-weight: 600;
        /* Slightly bolder text for better visibility */
    }
    
    /* Mobile contact section improvements */
    .contact {
        /* Contact section on mobile - ensure proper layout */
        padding: 80px 0;
        /* Adequate padding for mobile */
    }
    
    .contact-content {
        /* Contact content on mobile - full width utilization */
        width: 100%;
        /* Use full container width */
        
        display: block;
        /* Block display for full width */
        
        margin: 0;
        /* Remove any margins that might cause centering issues */
    }
    
    .contact-form {
        /* Contact form on mobile - ensure full width */
        width: 100%;
        /* Use full available width */
        
        max-width: none;
        /* Remove any width restrictions */
        
        margin: 0;
        /* Remove margins that might affect centering */
    }

    /* Enhanced mobile footer styling */
    .footer-content {
        /* Footer content on mobile */
        flex-direction: column;
        /* Stack footer sections vertically */
        
        text-align: center;
        /* Center all footer content */
        
        gap: 30px;
        /* Space between footer sections */
        
        align-items: center;
        /* Center all items horizontally including the back to top button */
    }
    
    .footer-section {
        /* Individual footer sections on mobile */
        margin-bottom: 0;
        /* Remove bottom margin - gap handles spacing */
    }
    
    .footer-section p,
    .footer-section .hours p {
        /* Footer text on mobile */
        font-size: 16px;
        /* Slightly larger text for better mobile readability */
        
        line-height: 1.6;
        /* Better line spacing for reading on small screens */
    }
    
    .btn-back-to-top {
        /* Back to Top button on mobile - ensure proper centering */
        margin: 0 auto;
        /* Center the button horizontally */
        
        display: block;
        /* Block display ensures margin auto centering works */
        
        width: fit-content;
        /* Button only as wide as its content */
        
        text-align: center;
        /* Center text within button */
    }
}

/* Hide menu items by default for JavaScript filtering */
.menu-item.hidden {
    /* Class applied by JavaScript to hide menu items */
    display: none;
    /* Completely removes from layout */
}