@import url("https://fonts.googleapis.com/css2?family=Ramabhadra&display=swap");

html {
  scroll-padding-top: 2rem;
  /* Fix the overlapping scroll of the menu navbar anchor */
}

:root {
  --bg-body: #ffffff;
  --bg-header: #ebe1d2;
  --text-header: #000000;
  --primary: #82583a;
  --secondary: #f4ede6;
  --text-primary: #000000;
  --text-secondary: #69625a;
}

body {
  background-color: var(--bg-body);
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
}

.font-primary {
  font-family: "Inter", sans-serif;
}
.text-accent {
  color: var(--primary);
}

.font-secondary {
  font-family: "Ramabhadra", sans-serif;
}

.bg-section-secondary {
  background-color: var(--bg-header);
}

#cover-image {
  width: 100%;
  height: 200px;
  max-height: 200px;
  object-fit: cover;
  background-color: #b5b5b5;
}
#logo {
  margin-top: -60px;
  background-color: #b5b5b5;
}
.food-title {
  color: var(--text-primary);
  font-weight: 700;
}
.food-details {
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-item-image {
  object-fit: cover;
}
.cursor-pointer {
  cursor: pointer;
}
svg {
  vertical-align: text-bottom !important;
}

/* =============================================================================
BUTTONS
============================================================================= */
.btn {
  border-radius: 0rem;
}
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.btn-primary.show {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #c33c3c;
  border-color: #c33c3c;
  color: #ffffff;
}
.btn-primary:active {
  background-color: #ad3535 !important;
  border-color: #ad3535 !important;
  color: #ffffff !important;
}

.btn-outline-primary {
  border-color: var(--primary);
  color: var(--primary);
}
.btn-outline-primary:hover {
  background-color: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}
.btn-outline-primary:active {
  background-color: #ad3535 !important;
  border-color: #ad3535 !important;
  color: #ffffff !important;
}
.btn-outline-primary:focus-visible {
  background-color: #ad3535 !important;
  border-color: #ad3535 !important;
  color: #ffffff !important;
}

/* =============================================================================
BADGEs
============================================================================= */
.badge-label {
  background-color: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
}

/* =============================================================================
NAV LINK
============================================================================= */
.nav-border {
  border-top: 1px solid var(--text-secondary);
}
.nav-link {
  color: var(--primary);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-underline .nav-link:focus,
.nav-underline .nav-link:hover {
  border-bottom-color: var(--primary);
}

/* =============================================================================
DROPDOWN MENU
============================================================================= */
.dropdown-menu {
  padding: 0.5rem;
  border-radius: 0rem !important;
}
.dropdown-item {
  padding: 0.25rem 0.5rem;
}
.dropdown-item:active {
  background-color: var(--primary);
  color: var(--bg-body);
}

/* =============================================================================
MODALS
============================================================================= */
.modal-dialog {
  transform: none !important;
}

.modal-content {
  background-color: var(--bg-body);
  border-radius: 0;
}

.modal-header {
  border-radius: 0;
  border: none;
  padding: 0;
}
.modal-header img {
  aspect-ratio: 1/1;
  object-fit: cover;
}

.modal-btn-close {
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
  margin: 1rem;
  padding: 0.5rem;
  border: 0;
}