/* La Demo site (WordPress + Elementor kit): Big Shoulders Display for
   headlines and numbers, Figtree for text and buttons, Instrument Serif
   italic as the editorial accent */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;900&family=Figtree:wght@400;500;700&family=Instrument+Serif:ital@1&display=swap');

:root {
  /* Kit colors: toasted black buttons with paper text that turn red on
     hover; red as the second action color */
  --dtb-primary: #16120f;
  --dtb-secondary: #c4321b;
  --dtb-hover: #c4321b;
  --dtb-font-family: 'Figtree', sans-serif;
  --dtb-font-family-heading: 'Big Shoulders Display', sans-serif;
  --dtb-font-family-accent: 'Instrument Serif', Georgia, serif;
  --dtb-color: #2a231d;

  --dtb-btn-color: #f2ebdf;
  --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: #f2ebdf;

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

  --dtb-primary-rgb: 22, 18, 15;
  --dtb-soft: #6b6158;
  --dtb-paper-deep: #e8dfcf;
  --bs-border-color: var(--dtb-paper-deep);
}

/* Inputs keep a neutral border, not the paper-tinted one above */
.form-control,
.form-select,
.form-check-input {
  border-color: #dee2e6;
}

/* Page background: the kit's paper color. Same pattern as 1018-pizza /
   commons: repaint the page-level containers only, then pin the components
   that read "white" back to real white so they still stand out. */
:root {
  --dtb-surface: #f2ebdf;
  --dtb-on-surface: #2a231d;
}

body,
.dtb-navbar,
.bg-light,
.bg-white,
.bg-body,
.dtb-container, .dtb-container .bg-white,
.dtb-modal.modal-content, .dtb-modal .modal-content,
#dtb-custom-nav-tabs {
  background-color: var(--dtb-surface) !important;
}

/* Modal outline, matching the page card border */
.dtb-modal.modal-content,
.dtb-modal .modal-content {
  border-color: var(--dtb-primary) !important;
}

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

/* Address / pickup bar */
.dtb-input-address,
.dtb-location-dropdown {
  background-color: #ffffff !important;
}

.dtb-input-address .bg-light,
.dtb-location-dropdown .bg-light {
  background-color: var(--dtb-primary) !important;
  border-color: var(--dtb-primary) !important;
}

.dtb-input-address .bg-light .text-dark,
.dtb-location-dropdown .bg-light .text-dark {
  color: var(--dtb-btn-color) !important;
}

/* Product grid cards */
.dtb-card,
.dtb-card .bg-white {
  background-color: #ffffff !important;
}

.dtb-card {
  border-color: var(--dtb-paper-deep) !important;
  transition: border-color 0.15s ease;
}

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

/* Checkout cart items & order summary */
.dtb-item-summary,
.dtb-order-summary {
  background-color: #ffffff !important;
}

/* Page card outline & header divider */
.dtb-container {
  border-color: var(--dtb-primary) !important;
}

.dtb-container .sticky-top.border-bottom {
  border-bottom-color: var(--dtb-primary) !important;
}

/* Category pills: square, in the kit's small uppercase "accent" style */
.nav-link.bg-white {
  background-color: #ffffff !important;
}

#dtb-custom-nav-tabs .nav-link {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2px solid var(--dtb-primary) !important;
  border-radius: 0 !important;
}

/* Outline buttons */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger {
  --bs-btn-bg: #ffffff;
}

/* Red secondary button: on the site it turns black on hover (main.scss
   would hover it to the same red) */
.btn-secondary {
  --bs-btn-hover-bg: var(--dtb-primary);
  --bs-btn-hover-border-color: var(--dtb-primary);
}

/* 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;
}

/* Text color */
body,
.dtb-modal,
.item-variables {
  color: var(--dtb-on-surface) !important;
}

/* Muted text in the kit's soft brown (5.10:1 on paper, 6.04:1 on white);
   Bootstrap's #6c757d is only 3.96:1 on the paper */
.text-secondary,
.text-body-secondary,
.text-muted {
  color: var(--dtb-soft) !important;
}

/* Bootstrap's success/danger are under AA on the paper; these darker
   shades pass on paper (5.44 / 5.48:1) and white */
.text-success {
  color: #146c43 !important;
}

.text-danger {
  color: #b02a37 !important;
}

/* Headlines: Big Shoulders Display 900 uppercase, tight, as on the site */
h1,
h2,
.h1,
.h2 {
  font-family: var(--dtb-font-family-heading);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  color: var(--dtb-primary);
}

h3,
h4,
h5,
h6,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 700;
  color: var(--dtb-primary);
}

/* 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;
  font-weight: 400;
}

/* Navbar: restaurant name as a headline, subtitle in the serif accent */
.dtb-navbar h1 {
  font-size: 1.6rem;
}

.dtb-navbar h3 {
  font-family: var(--dtb-font-family-accent);
  font-style: italic;
  font-size: 1.05rem !important;
  color: var(--dtb-soft);
}

/* Menu section titles in red Big Shoulders, descriptions in serif italic */
[id^='section-'] h2.h5 {
  font-size: 2rem;
  color: var(--dtb-secondary);
}

[id^='section-'] .text-body-secondary {
  font-family: var(--dtb-font-family-accent);
  font-style: italic;
  font-size: 1.1rem;
}

/* Product cards */
.dtb-item-title-grid {
  font-weight: 700 !important;
}

/* Prices in the kit's number style (Big Shoulders 700) */
.item-price {
  font-family: var(--dtb-font-family-heading);
  font-weight: 700 !important;
  font-size: 1.4rem !important;
  color: var(--dtb-primary);
}

/* Buttons: square Figtree 700, like the site */
.btn {
  font-weight: 700;
  border-radius: 0;
}

.btn-outline-primary,
.btn-outline-secondary {
  border-width: 2px;
}

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

/* 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;
  text-transform: none;
}

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