/* Responsive utility overrides for all pages */
:root{
  --accent: #8b2d1f;
  --cream: #fffdf5;
}

/* Make images and svgs fluid */
img, svg { max-width:100%; height:auto; display:block; }

/* Containers - full width for main content */
.container{ width:100%; max-width:100%; margin: 0; padding: 0 20px; box-sizing:border-box }

/* Responsive typography */
h1{ font-size: clamp(26px, 6vw, 44px); }
h2{ font-size: clamp(20px, 4.5vw, 34px); }
.section-title{ font-size: clamp(20px,4.5vw,36px);} 

/* Fluid grids - fixed columns for even distribution */
.grid-layout{ grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; }
.menu-grid{ grid-template-columns: repeat(4, 1fr); gap: 18px; width: 100%; }

/* Centralized menu thumbnail sizing: prefer aspect-ratio for consistent visible sizes while remaining responsive. */
.menu-item img{
  width: 100%;
  aspect-ratio: 16/9; /* default desktop ratio */
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  display: block;
}

@media (max-width: 768px){
  /* slightly taller thumbnails on narrow screens */
  .menu-item img{ aspect-ratio: 4/3; }
}

/* Fallback for older browsers without aspect-ratio support */
@supports not (aspect-ratio: 1/1){
  .menu-item img{ height: 250px; }
  @media (max-width: 768px){ .menu-item img{ height: 200px; } }
}

/* Header and nav responsiveness */
nav { align-items:center }
.nav-column-left, .nav-column-center, .nav-column-right { min-width:0 }

/* Cart page header styling - matches other pages at tablet breakpoint */
@media (max-width: 900px) and (min-width: 601px) {
  header .logo {
    font-size: clamp(14px, 3vw, 20px);
  }
  
  header .home-btn {
    font-size: clamp(14px, 3vw, 20px) !important;
    padding: 10px 20px !important;
  }
}

/* Tablet breakpoint (768px) - Home button sizing */
@media (min-width: 601px) and (max-width: 900px) {
  .nav-logo-text {
    font-size: clamp(14px, 3vw, 20px);
  }
  
  /* Make home button font size match the title */
  header .home-btn {
    font-size: clamp(14px, 3vw, 20px) !important;
    padding: 10px 20px !important;
  }
}

/* Make the nav more compact on small screens */
@media (max-width: 900px){
  .nav-logo-text{
    font-size: clamp(12px, 3vw, 20px);
    white-space: nowrap;
    max-width: 100%;
    text-align: center;
  }
  .site-logo{ height: 50px }
  header nav { height: auto }
}

/* Navigation collision fix for mobile */
@media (max-width: 600px){
  .nav-logo-text,
  header .logo {
    font-size: clamp(12px, 4vw, 22px) !important;
    white-space: nowrap !important;
    max-width: none;
    text-align: center;
  }

  /* Simple header (sub-pages): keep logo and home button on same line */
  header .wrap {
    flex-wrap: nowrap !important;
    gap: 8px;
    justify-content: center;
  }

  header .logo {
    flex: 0 0 auto !important;
    text-align: left;
    margin-bottom: 0;
  }

  header .home-btn {
    font-size: clamp(11px, 3.5vw, 18px) !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
  }

  .nav-column-center {
    flex: 1;
    min-width: 0;
  }

  .hamburger {
    padding: 5px;
    gap: 4px;
  }

  .hamburger span {
    width: 20px;
    height: 2.5px;
  }

  nav {
    padding: 8px 10px;
    gap: 8px;
  }

  .site-logo {
    height: 40px;
  }
}

@media (max-width: 1024px){
  .grid-layout{ grid-template-columns: repeat(3, 1fr); }
  .menu-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px){
  .grid-layout{ grid-template-columns: repeat(2, 1fr); }
  .menu-grid{ grid-template-columns: repeat(2, 1fr); }
  .container{ padding: 20px }
  .site-logo{ height: 50px }
  .nav-logo-text{ text-align:center }
  .nav-column-left, .nav-column-right { display:flex; align-items:center }
  .nav-column-center { order:0 }
  .nav-menu{ width:60%; right:-60%; }
  .nav-menu.active{ right:0; }

  /* Cart & WhatsApp floats move slightly left on small screens to avoid the system UI */
  .cart-float{ right:16px; bottom:100px }
  .whatsapp-float{ right:16px; bottom:20px }

  /* Cart modal becomes full-width-ish */
  .cart-modal{ right:16px; left:16px; width: auto; max-width: calc(100% - 32px); bottom: 120px }
  .checkout-dialog{ width: min(92vw, 420px) }
}

/* Very small phones - keep title on single line */
@media (max-width: 420px){
  .nav-logo-text,
  header .logo {
    font-size: clamp(10px, 3.5vw, 16px) !important;
    white-space: nowrap !important;
    max-width: none;
    text-align: center;
  }

  /* Simple header (sub-pages): keep logo and home button on same line */
  header .wrap {
    flex-wrap: nowrap !important;
    gap: 5px;
    justify-content: center;
  }

  header .logo {
    flex: 0 0 auto !important;
    text-align: left;
    margin-bottom: 0;
  }

  header .home-btn {
    font-size: clamp(9px, 3vw, 14px) !important;
    padding: 4px 8px !important;
    white-space: nowrap !important;
    flex: 0 0 auto;
  }

  .site-logo{ height: 35px }

  .hamburger span {
    width: 18px;
    height: 2px;
  }

  .cart-float{ width:52px; height:52px }
  .whatsapp-float{ width:52px; height:52px }
  #toast{ right:12px; bottom:130px }
}

/* Accessibility helpers */
.checkout-dialog input, .checkout-dialog textarea { font-size: 14px }

/* Ensure modals and overlays stay usable on all sizes */
.modal-overlay, .checkout-overlay { padding: 12px }

/* small utility */
.hide-on-mobile{ display: inline }
@media (max-width:768px){ .hide-on-mobile{ display:none } }

/* Back link (used on pages like Our Story, Menu) */
.back{ display:inline-block; margin-top:20px; color:var(--accent); text-decoration:none; font-weight:600 }
.back:hover{ text-decoration:underline }

/* ===== Theme / Visual polish (site-wide) ===== */
:root{
  --muted: #efe7dd;
  --card-grad: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(248,243,232,0.95));
  --shadow-soft: 0 8px 24px rgba(0,0,0,0.06);
  --transition-fast: 220ms cubic-bezier(.2,.9,.2,1);
}

/* Gentle body typography override to improve legibility across pages.
   Headings preserve the decorative fonts already loaded in HTML. */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #3f2b24; /* slightly darker than accent for body text */
  line-height: 1.55;
}

/* Section titles with tasteful underline accent */
.section-title{
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.section-title::after{
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 0; height: 4px; width: 60%;
  background: linear-gradient(90deg,var(--accent), #c2572b);
  border-radius: 4px;
  opacity: 0.95;
}

/* Card styling: subtle glassy background, softer radius, gentle lift on hover */
.info-card{
  background: var(--card-grad);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none; /* anchors styled as cards */
  color: inherit;
}
.info-card:hover{ transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,0.09); }

.info-card img{ border-radius: 12px; transition: transform var(--transition-fast); }
.info-card:hover img{ transform: scale(1.03); }

.info-card h3{ margin-top: 12px; font-size: 18px; letter-spacing: 0.6px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; cursor:pointer; border: none; font-weight:700; transition: transform var(--transition-fast); }
.btn-primary{ background: var(--accent); color: #fff; }
.btn-outline{ background: transparent; border: 2px solid var(--accent); color: var(--accent); }
.btn:hover{ transform: translateY(-3px); }

/* Header subtle backdrop for depth */
header{ backdrop-filter: blur(4px); }

/* Footer/float tweaks */
.whatsapp-float, .cart-float{ box-shadow: 0 10px 30px rgba(0,0,0,0.12); }

/* Make links inside cards fully clickable (sensible on mobile) */
.info-card{ display:flex; flex-direction:column; align-items:center; }

/* Small utility for tighter card content */
.card-desc{ font-size: 13px; color: #5b4236; }

/* Keep the site accessible - ensure focus outlines */
a:focus, button:focus{ outline: 3px solid rgba(139,45,31,0.12); outline-offset: 2px; }