/* ============================================
   MAIN STREET BAGEL CAFE - STYLES
   ============================================ */

/* CSS Variables (Design System) */
:root {
  /* Colors */
  --cream: #FAF3E7;
  --cream-dark: #F0E6D6;
  --brown: #6B4F3F;
  --brown-light: #8B7355;
  --tan: #C8A97E;
  --coral: #E85C3A;
  --coral-hover: #D44A28;
  --white: #FFFFFF;
  --muted: #9B8B7A;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing */
  --section-padding: 4rem;
  --container-max: 1200px;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--brown);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: 1.2;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* Container */
.container {
  max-width: 1200px; /* or whatever max width you want */
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem; /* optional padding */
}


.container-narrow {
  max-width: 800px;
}
/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.header {
  position: relative;        /* no longer fixed */
  z-index: 100;
  background-color: rgba(250, 243, 231, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cream-dark);
}

.nav {
  display: flex;                    
  justify-content: center;           /* center links horizontally */
  align-items: center;               /* center links vertically */
  gap: 3rem;                         
  padding: 1rem 2rem;                
}

.nav-link {
  font-family: var(--font-body);     
  font-weight: 500;                  
  font-size: 1rem;                   
  color: var(--brown);               
  padding: 0.5rem 1rem;              
  border-radius: 9999px;             
  transition: color 0.3s ease;       
}

.nav-link:hover,
.nav-link.active {
  color: var(--coral);               
}

/* Mobile / iPhone */
@media (max-width: 480px) {
  .nav {
    padding: 0.8rem 1rem;    
    gap: 1.5rem;             
  }

  .nav-link {
    font-size: 1rem;       
    padding: 0.3rem 0.6rem;  
  }
}

/* ============================================
   MENU SUB NAVIGATION
   ============================================ */

.menu-subnav {
  position: sticky;                  /* sticks when scrolling */
  top: 0;                             /* sticks to top of viewport */
  z-index: 99;                        /* above content but below header */
  display: flex;
  justify-content: center;            /* center nav items on desktop */
  gap: 1rem;
  padding: 1.5rem 1rem;
  background-color: var(--cream-dark);
  border-bottom: 1px solid var(--tan);

  /* Desktop defaults */
  overflow-x: visible;
  white-space: normal;
  
  box-shadow: 0 4px 8px rgba(0, 0, 0, .60); /* subtle shadow below */

}

.menu-subnav-link {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--brown);
  padding: 0.4rem 0.8rem;
  border-radius: 9999px;
  transition: color 0.2s ease, background-color 0.2s ease;

  flex: 0 0 auto; /* prevent shrinking on mobile scroll */
}

/* ============================================
   MOBILE / SMALL SCREENS HORIZONTAL SCROLL
   ============================================ */
@media (max-width: 768px) {
  .menu-subnav {
    justify-content: flex-start;      /* align left for scrolling */
    overflow-x: auto;                 /* enable horizontal scroll */
    white-space: nowrap;              /* keep items in single line */
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    scrollbar-width: none;            /* hides scrollbar on Firefox */
  }

  .menu-subnav::-webkit-scrollbar {
    display: none;                    /* hides scrollbar on Chrome/Safari */
  }

  .menu-subnav-link {
    margin-right: 1rem;               /* spacing for scrollable links */
  }
}

/* ============================================
   PAGE CONTENT SPACING
   ============================================ */

/* Add some top margin so content doesn’t overlap menu subnav */
main {
  margin-top: 1rem; /* adjust if needed */
}





/* ============================================
   MENU PAGE
   ============================================ */
.menu-page {
  padding: var(--section-padding) 1rem; /* space around the whole menu page */
}

.page-title {
  font-size: clamp(5rem, 5vw, 3rem); /* responsive title size based on screen width */
  font-weight: 700;                 /* bold title text */
  text-align: center;               /* center the title */
  margin-bottom: 0.5rem;            /* space below the title */
  animation: fadeIn 0.8s ease-out;  /* fade-in animation */
}

.page-subtitle {
  font-size: 1.5rem;                           /* subtitle text size */
  color: var(--muted);                         /* muted text color */
  text-align: center;                          /* center subtitle */
  margin-bottom: 3rem;                         /* space below subtitle */
  animation: fadeIn 0.8s ease-out 0.3s both;   /* delayed fade-in */
}

.menu-category {
  margin-bottom: 3rem; /* space between menu categories */
}

.category-title {
  font-size: 1.5rem;              /* category heading size */
  font-weight: 600;               /* semi-bold text */
  color: var(--brown);            /* category title color */
  padding-bottom: 0.75rem;        /* space under the text */
  border-bottom: 2px solid var(--tan); /* underline separator */
  margin-bottom: 1.5rem;          /* space below category title */
}

.menu-grid {
  display: grid;                                         /* use CSS Grid layout */
  gap: 1rem;                                             /* space between boxes */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* responsive column width */
  justify-content: start;                                /* align grid items to the left */
}

@media (max-width: 480px) {
  .menu-grid {
    grid-template-columns: 1fr; /* stack boxes in one column on small screens */
  }
}

@media (min-width: 640px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
  }
}

@media (min-width: 1024px) {
  .menu-grid {
    grid-template-columns: repeat(2, 1fr); /* keep 2 columns on large screens */
  }
}

/* Rectangular menu item box */
.menu-item {
  background: white;              /* white background for each item */
  border-radius: 8px;             /* rounded corners */
  padding: .5rem;                 /* inner spacing inside the box */
  display: flex;                  /* horizontal layout for text and image */
  justify-content: space-between; /* space between text and image */
  align-items: center;            /* vertically center content */
  gap: 1rem;                      /* space between text and image */

  min-height: 100px;              /* minimum height of the box */
  transition: background-color 0.2s ease; /* smooth hover effect */
}

.menu-item:hover {
  background-color: var(--cream-dark); /* background color on hover */
}

.item-text {
  flex: 1;                         /* text takes up remaining horizontal space */
  display: flex;                  /* flex layout for text */
  flex-direction: column;         /* stack text vertically */
  gap: 0.25rem;                   /* space between text lines */
}

.item-name {
  font-weight: 1000; /* bold item name */
}

.item-desc {
  font-size: 0.9rem; /* smaller description text */
  color: var(--muted); /* muted color for description */
}

.item-price {
  margin-top: auto;   /* pushes price to the bottom of the text column */
  font-weight: 600;   /* semi-bold price */
  color: var(--coral);/* price color */
}

.item-image {
  width: 150px;       /* fixed image width */
  height: 120px;      /* fixed image height (affects box height) */
  flex-shrink: 0;     /* prevents image from shrinking in flex layout */
}

.item-image img {
  width: 100%;        /* image fills container width */
  height: 100%;       /* image fills container height */
  object-fit: cover;  /* crop image without stretching */
  border-radius: 6px; /* rounded image corners */
}

/* ===========================
   MODAL CSS
=========================== */
.modal {
  display: none; /* hidden by default */
  position: fixed; 
  z-index: 1000; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.5); /* semi-transparent background */
}

.modal-content {
  background-color: #fff;
  margin: 10% auto; /* center vertically */
  padding: 2rem;
  border-radius: 12px;
  width: 90%;
  
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  position: relative;
}

.modal-content h2 {
  margin-top: 0;
}

.modal-content p {
  margin: 0.5rem 0;
}

/* Make each option label a flex container */
#modal-options label.option-label {
  display: flex;
  justify-content: space-between; /* pushes price to the far right */
  align-items: center;
  margin-bottom: 0.5rem;
  cursor: pointer;
}

/* Group input and text together */
#modal-options .option-left {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* space between checkbox and text */
}

/* Price on far right */
#modal-options .option-price {
  white-space: nowrap; /* prevents price from wrapping to next line */
}


.modal-content button {
  margin-top: 1rem;
  padding: 0.6rem 1rem;
  background-color: var(--coral);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.modal-content button:hover {
  background-color: #d95c4f;
}

.modal .close {
  position: absolute;
  top: 0px;
  right: 10px;
  color: #333;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}

.modal-item-image {
  width: 100%;
  max-width: 500px;
  display: block;
  margin: 0 auto 1rem auto;
  border-radius: 9px;
}


.bakers-dozen-item {
  display: flex;
  justify-content: space-between; /* Bagel name left, buttons right */
  align-items: center;
  margin-bottom: 8px;
}

/* Container around the buttons */
.bagel-qty-controls {
  display: flex;
  align-items: center;
  gap: 8px; /* space between buttons and number */
  margin-top: 5px;
}

/* The + and - buttons */
.qty-btn {
  background-color: var(--muted) !important; /* Button background */
  color: #fff;               /* Text color */
  border: 2px solid #4e4343 !important; /* Border color */
  border-radius: 10px !important;
  padding: 5px 10px !important;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.2s, transform 0.1s;
}



.qty-btn:hover {
  background-color: #ffffff; /* Darker on hover */
  transform: scale(1.05);
}

/* The number display */
.qty-value {
  min-width: 20px;
  text-align: center;
  font-weight: bold;
  display: inline-block;
}

#add-to-cart-btn {
  font-size: 1.2rem;        /* Bigger text */
  font-weight: 700;
  padding: 10px 18px;      /* Taller + wider */
  width: 100%;             /* Full width (mobile-friendly) */
  border-radius: 10px;
}


/* ============================================
   CART CSS
   ============================================ */
/* Cart modal overall */
#cartModal {
  display: none;           /* hidden by default */
  position: fixed;         /* stay in place when scrolling */
  top: 0;
  left: 0;
  width: 100vw;            /* full viewport width */
  height: 100vh;           /* full viewport height */
  background-color: rgba(0,0,0,0.5); /* semi-transparent overlay */
  display: flex;           /* center modal inside overlay */
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
/* Cart modal content box */
#cartModal .modal-content {
  background-color: #fff;
  border-radius: 10px;
  width: 90%;              /* default width */
  max-width: 400px;        /* desktop max width */
  padding: 20px;
  box-sizing: border-box;  /* ensures padding included in width */
  overflow-y: auto;        /* scroll if content too tall */
  max-height: 90vh;        /* never taller than viewport */
}

/* Cart item container */
.cart-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

.cart-item-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cart-item-top img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 5px;
}

.cart-item-name {
  font-weight: bold;
}

.cart-item-options {
  font-size: 0.9em;
  color: #555;
  margin-left: 60px; /* aligns under the name, not the image */
}

.cart-item-price {
  font-weight: bold;
  margin-left: 60px; /* aligns under the name */
  margin-top: 3px;
}

.cart-item button.remove-item {
  margin-left: 60px;
  margin-top: 5px;
  background-color: #f44336;
  color: white;
  border: none;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
}

.cart-item button.remove-item:hover {
  background-color: #e60000;
}

/* Cart total */
#cart-total {
  font-weight: bold;
  font-size: 18px;
  margin-top: 10px;
}

/* Checkout button */
#checkout-btn {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  margin-top: 10px;
  width: 100%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

#checkout-btn:hover {
  background-color: #45a049;
}
/* Container for quantity */
.cart-item-quantity {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Quantity buttons */
.qty-btn {
  display: flex;
  justify-content: center; /* centers horizontally */
  align-items: center;     /* centers vertically */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  color: #333;
  font-weight: bold;
  width: 30px;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px; /* controls + / - size */
  transition: background-color 0.2s;
}

.qty-btn:hover {
  background-color: #ddd;
}


.qty-value {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  font-weight: bold;
}




/* For small screens like iPhone */
@media (max-width: 480px) {
  #cartModal .modal-content {
    width: 85%;          /* a bit smaller on phones */
    padding: 15px;
  }

  .cart-item img {
    width: 50px;
    height: 50px;
  }
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background-color: var(--brown);
  color: var(--cream);
  padding: 3rem 1rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.footer-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-icon {
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--tan);
}

.footer-bottom {
  border-top: 1px solid rgba(250, 243, 231, 0.2);
  margin-top: 2rem;
  padding-top: 2rem;
  text-align: center;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--muted);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility Classes */
.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}