:root {
  --card-height: 280px;
  --line-clamp: 5;
}

/* Typography */
body {
  margin: auto;
  font-family: "Hubballi", sans-serif;
  font-size: 1.35rem;
  line-height: 1.25rem;
  overflow: auto;
  background: linear-gradient(315deg, #ebf2f3 0%, #f8f4f3 50%, #fcfafa 100%);
  background-size: 400% 400%;
  background-attachment: fixed;
}

h1 {
  font-family: 'Squartiqa4FLight', sans-serif;
  color: #c7242a;
}
h2 { color: #fcfafa; }
h3 {
  font-family: 'Squartiqa4FUltraLight', sans-serif;
  color: #c7242a;
  font-size: 1.85rem;
}
h4 {
  color: #333333;
  font-weight: 600;
}

.nav-link { color: #0e2f44; }
.nav-item {
  font-family: "NTR", sans-serif;
  font-weight: 500;
  font-size: 1.5rem;
}

/* Branding and Layout */
.main-bg {
  background-image: url('../bg/bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#brand-logo { max-width: 200px; }

.fa-thumbs-up { color: #d79a65; }
.red { color: #c7242a !important; }
.fa-leaf { color: #37765d; }
.fa-pepper-hot { color: #FF0000; }

/* Card and Menu */
.card-fixed {
  height: var(--card-height);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: auto;
}
.menu-list img {
  height: var(--card-height);
  object-fit: cover !important;
}
.card-fixed .row { height: 100%; }
.card-fixed > div {
  display: flex;
  flex-direction: column;
}
.card-title {
  font-size: 1.6rem;
  font-weight: 600;
  text-transform: uppercase;
}
.card-text {
  display: -webkit-box;
  -webkit-line-clamp: var(--line-clamp);
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  box-orient: vertical;
  line-clamp: var(--line-clamp);
}
.price {
  margin: auto 0 0 0;
  padding: 0;
}
.anchor {
  display: block;
  position: relative;
  top: -80px;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}

/* Footer & Map */
footer {
  --footer-color: #3e5869;
  background: linear-gradient(to top, var(--footer-color) 99%, rgba(62, 88, 105, 0) 100%);
  background-color: var(--footer-color);
}
.bg-blue { background-color: #516878; }
.map-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}
.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.matangi-300 {
  font-family: "Matangi", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.1rem;
}
.quicksand-300 {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

.gallery-square {
  aspect-ratio: 1 / 1;         /* Makes the div a perfect square */
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #eee;
  cursor: pointer;
}
.gallery-square img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.2s;
}
.gallery-square img:hover {
  transform: scale(1.04);
}
.gallery-square-lg {
  aspect-ratio: 2 / 1;         /* Double width, 1 unit tall */
}

.menu-btn {
  font-size: 1.5rem;
  background-color: #c7242a;
  color: #fff;
  border: none;
  border-radius: 0.8rem;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(199, 36, 42, 0.07);
}
.menu-btn:hover, .menu-btn:focus {
  background-color: #a31b21;
  color: #fff;
}

.order-btn {
  font-size: 1.5rem;
  background-color: #e5e500;
  color: #191900;
  border: none;
  border-radius: 0.8rem;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(199, 36, 42, 0.07);
}
.order-btn:hover, .order-btn:focus {
  background-color: #fff3d6;
  color: #a31b21;
}

#imageModal .modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 30vh;
  max-height: 90vh; /* Ensures modal doesn't get taller than the viewport */
  overflow: auto;
}

#modal-img {
  max-width: 90vw;
  max-height: 80vh; /* Keep a bit smaller than modal-body for padding/buttons */
  width: auto;
  height: auto;
  object-fit: contain; /* Keeps aspect ratio, fits inside the box */
  display: block;
  margin: 0 auto;
}



/* Responsive */
@media (max-width: 576px) {
  :root {
    --card-height: 240px;
    --line-clamp: 4;
    --bs-btn-line-height: 1rem;
  }
  #brand-logo { max-height: 80px; }
  .fs-5 { font-size: 1rem !important; }
  .card-title { font-size: 1.4rem; }
  .nav-link { padding: 0 0.75rem 0 0 !important; font-size: 1.3rem; }
  .text-center-mobile { text-align: center !important; }
  .menu-btn{line-height: 1.2rem !important;font-size: 1.2rem;}
  .order-btn{line-height: 1.2rem !important;font-size: 1.2rem;}
}