/* fornbaixauli.com (Shopify Horizon theme): Red Hat Display for body and
   accents, Red Hat Text 600 for headings */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;700;900&family=Red+Hat+Text:wght@500;600&display=swap');

:root {
  /* Theme color scheme 1: brown buttons that turn black on hover,
     black text on white */
  --dtb-primary: #8b624b;
  --dtb-secondary: #ffffff;
  --dtb-hover: #000000;
  --dtb-font-family: 'Red Hat Display', sans-serif;
  --dtb-font-family-heading: 'Red Hat Text', sans-serif;
  --dtb-color: #000000;

  --dtb-btn-color: #ffffff;
  --dtb-btn-bg: var(--dtb-primary);
  --dtb-btn-active-bg: var(--dtb-primary);
  --dtb-btn-active-color: var(--dtb-btn-color);
  --dtb-btn-hover-color: var(--dtb-btn-active-color);
  --dtb-btn-secondary: var(--dtb-secondary);
  --dtb-btn-secondary-color: #000000;

  --dtb-input-border-focus: var(--dtb-primary);
  --bs-link-color: var(--dtb-primary);
  --bs-link-hover-color: var(--dtb-hover);

  --dtb-primary-rgb: 139, 98, 75;
}

/* Headings: Red Hat Text 600 in black, as on the site */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--dtb-font-family-heading);
  font-weight: 600;
  color: #000000;
}

/* Descriptions ride on headings in a few places but are body copy */
.item-description,
.dtb-item-description-modal {
  font-family: var(--dtb-font-family) !important;
}

/* Restaurant name in the navbar in the brand brown, like the logo */
.dtb-navbar h1 {
  color: var(--dtb-primary);
}

/* Menu section titles in the theme's 900-weight accent face */
[id^='section-'] h2.h5 {
  font-family: var(--dtb-font-family);
  font-weight: 900;
  font-size: 1.5rem;
}

/* Product cards */
.dtb-card {
  border-color: rgba(0, 0, 0, 0.12) !important;
  transition: border-color 0.15s ease;
}

.dtb-card:hover {
  border-color: var(--dtb-primary) !important;
}

.dtb-item-title-grid {
  font-weight: 500 !important;
}

.item-price {
  color: var(--dtb-primary);
}

/* Buttons: square like the theme's buttons and inputs */
.btn {
  font-weight: 500;
  border-radius: 0;
}

.form-control,
.form-select {
  border-radius: 0;
}

/* Secondary button is the theme's white/black outline button */
.btn-secondary {
  border-color: #000000;
}

/* main.scss feeds outline-secondary from --dtb-btn-secondary, which is
   white here (invisible on white). Use black like the theme's secondary
   button instead. */
.btn-outline-secondary {
  --bs-btn-color: #000000;
  --bs-btn-border-color: #000000;
  --bs-btn-active-color: #ffffff;
  --bs-btn-active-bg: #000000;
  --bs-btn-active-border-color: #000000;
  --bs-btn-disabled-color: #000000;
  --bs-btn-disabled-border-color: #000000;
}

/* Category pills */
#dtb-custom-nav-tabs .nav-link {
  font-family: var(--dtb-font-family);
  font-weight: 500;
}

/* User dropdown menu */
.dtb-dropdown {
  --bs-dropdown-link-hover-bg: var(--dtb-primary);
  --bs-dropdown-link-hover-color: #ffffff;
}

/* Bootstrap's own blue (#0d6efd) otherwise shows up on promotion chips */
.text-bg-primary {
  background-color: var(--dtb-primary) !important;
  color: var(--dtb-btn-color) !important;
}

/* Alerts always stay in Inter (loaded by main.scss), headings inside them
   included. Icons are untouched: bootstrap-icons sets its font on .bi::before. */
.alert,
.alert * {
  font-family: 'Inter', sans-serif !important;
}

.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
.alert .h1, .alert .h2, .alert .h3, .alert .h4, .alert .h5, .alert .h6 {
  color: inherit;
}

/* Inside a button, icons follow the button's text color */
.btn .bi {
  color: inherit !important;
}