/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&family=Lora:wght@400;700&display=swap');

@font-face {
  font-family: 'Recoleta';
  src:
    url('./fonts/recoleta-bold-webfont.woff2') format('woff2'),
    url('./fonts/recoleta-bold-webfont.ttf') format('truetype'),
    url('./fonts/recoleta-bold-webfont.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Variables */

:root {
  /* Recoleta is the brand's display/heading font, self-hosted above (only
     the bold weight exists, hence font-weight: 700 there), with Lora as the
     fallback for characters Recoleta doesn't cover. PT Sans is the body/UI
     font, read by main.scss's `body { font-family }` rule. */
  --dtb-font-family: 'PT Sans';
  --dtb-font-heading: 'Recoleta', 'Lora', serif;

  --dtb-primary: #1a531b;
  --dtb-secondary: #ffbb16;
  --dtb-hover: #2c8d2e;
  --dtb-color: #1a1a1a;

  /* All buttons (primary and secondary variants alike) render in the
     primary color — --dtb-btn-secondary is pointed at --dtb-primary rather
     than --dtb-secondary, so .btn-secondary/.btn-outline-secondary end up
     looking identical to .btn-primary/.btn-outline-primary. Hover (below)
     is where secondary actually shows up. */
  --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-primary);
  --dtb-btn-secondary-color: var(--dtb-btn-color);

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

  /* Real gap beyond the canonical schema: brand's fuchsia, used on the +/-
     icons, checked checkboxes/radios, and section titles. */
  --dtb-fuchsia: #e6007e;
}

/* Titles */

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: var(--dtb-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dtb-primary);
}

/* --dtb-secondary (#ffbb16) is too light to use as text (1.70:1 on white,
   fails AA) — --dtb-primary carries the general heading color instead. */

/* Category / section titles: the "{{ section.title }}" headers rendered
   above each menu section, in both single- and two-level nav modes. Fuchsia
   per brand request — 4.50:1 on white, passes AA for normal text. */
.dtb-item-list h2 {
  color: var(--dtb-fuchsia);
}

/* Buttons */

.btn {
  font-family: var(--dtb-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
}

/* Exceptions to the pill radius above, same as boiboi: promotion buttons
   (.btn-outline-primary.text-start, in CheckoutPromotionsInput) and the
   payment method selector (#dtb-payment-selector) — a full pill turns
   the card-shaped buttons there into distorted circles/ovals. */
.btn-outline-primary.text-start,
#dtb-payment-selector .btn {
  border-radius: var(--bs-border-radius);
}

/* Hover: secondary color. White text (the default hover text color) only
   gives 1.70:1 on the amber background, so hover text is switched to black
   to keep AA (12.37:1). */
.btn-primary,
.btn-outline-primary,
.btn-secondary,
.btn-outline-secondary {
  --bs-btn-hover-bg: var(--dtb-secondary);
  --bs-btn-hover-border-color: var(--dtb-secondary);
  --bs-btn-hover-color: #000000;
}

/* .btn-link doesn't go through --bs-btn-hover-bg — main.scss hardcodes its
   hover to `background: var(--dtb-hover)` directly, so it needs its own
   override to land on secondary instead. */
.btn-link:hover {
  background: var(--dtb-secondary) !important;
  border-color: var(--dtb-secondary) !important;
  color: #000000 !important;
}

/* Category tab buttons (single-level nav) aren't `.btn`, so the rules above
   don't reach them — set explicitly. The level-1 section list in two-level
   nav mode already uses `.btn`, so it's covered above. Resting state:
   outline — white bg, green border + text (9.14:1) — so it reads as
   distinct from the filled-green .active state below (main.scss's default
   .nav-item a.active already fills it green with white text). */
#dtb-custom-nav-tabs .nav-link {
  font-family: var(--dtb-font-heading);
  background-color: #ffffff !important;
  border-color: var(--dtb-primary) !important;
  color: var(--dtb-primary) !important;
}

/* .active also carries the .nav-link class above, and our ID-scoped rule
   there outranks main.scss's plain-class `.nav-item a.active` (an ID beats
   any number of classes even under !important) — so without this explicit
   override, the active tab was inheriting the white/outline resting style
   instead of filling green. */
#dtb-custom-nav-tabs .nav-item a.active {
  background-color: var(--dtb-primary) !important;
  border-color: var(--dtb-primary) !important;
  color: #ffffff !important;
}

/* Selected/.active stays primary green — main.scss already does that
   (.nav-item a.active { background: var(--dtb-primary) ... }). Only hover
   goes secondary. */
#dtb-custom-nav-tabs .nav-item a:hover {
  background: var(--dtb-secondary) !important;
  border-color: var(--dtb-secondary) !important;
  color: #000000 !important;
}

/* Store/location picker cards (ModalCollectionSelector's .map-card) default
   to --dtb-hover (the lighter green) on hover — same secondary-not-green
   correction as everywhere else. Selected state (.store-active) already
   uses --dtb-btn-active-bg (primary), untouched. */
.map-card:hover {
  background: var(--dtb-secondary) !important;
  color: #000000 !important;
}

/* Button-like elements that aren't `.btn`: dropdown toggles (incl. the
   location selector) and the "change address" link. Primary at rest,
   secondary on hover — same pattern as real buttons above. */
.dropdown-toggle,
.dtb-input-address a {
  color: var(--dtb-primary) !important;
}

.dropdown-toggle:hover,
.dtb-input-address a:hover {
  color: var(--dtb-secondary) !important;
}

/* Icons */

/* Fuchsia accent, scoped to just two places per brand request: the +/-
   quantity icons (cart, tips, item count) and the checked state of
   checkboxes/radios. Everywhere else icons keep their default color. */
.bi-plus,
.bi-plus-circle,
.bi-plus-circle-fill,
.bi-dash,
.bi-dash-circle,
.bi-dash-circle-fill,
.bi-minus,
.bi-minus-circle,
.bi-minus-circle-fill {
  color: var(--dtb-fuchsia) !important;
}

/* ...except inside buttons: there the icon keeps the button's own text
   color (white on the primary-colored buttons) instead of fuchsia. */
.btn .bi-plus,
.btn .bi-plus-circle,
.btn .bi-plus-circle-fill,
.btn .bi-dash,
.btn .bi-dash-circle,
.btn .bi-dash-circle-fill,
.btn .bi-minus,
.btn .bi-minus-circle,
.btn .bi-minus-circle-fill {
  color: inherit !important;
}

/* Product descriptions: explicitly PT Sans (--dtb-font-family). Also undoes
   text-transform: uppercase — these markup as <h4> in MenuItemCell/
   MenuItemHeader, so they otherwise inherit the Titles rule above. */
.item-description,
.dtb-item-description-grid,
.dtb-item-description-modal {
  font-family: var(--dtb-font-family);
  text-transform: none;
}

/* Inputs */

.form-check-input:checked {
  background-color: var(--dtb-fuchsia);
  border-color: var(--dtb-fuchsia);
}