/*
 * Brand bridge for the mounted ordering app.
 *
 * /order is the legacy kaneats.ca application, served verbatim. Arriving from
 * the marketing site it read as a different company: Bootstrap defaults and the
 * #667eea -> #764ba2 template gradient the brand guide calls out by name.
 *
 * This file only repaints. It sets colours, type and radii — no layout, no
 * positioning, no display changes — so it cannot move the ordering flow around.
 * Deleting the <link> in index.html restores the original appearance exactly.
 *
 * Loaded last, so plain-specificity overrides win without !important except
 * where the legacy CSS uses inline styles or gradients, which are called out.
 */

:root {
  --ke-ink: #0a0a0a;
  --ke-red: #e4000d;
  --ke-red-deep: #b00009;
  --ke-paper: #fbf8f4;
  --ke-surface: #ffffff;
  --ke-graphite: #4a4a4a;
  --ke-hairline: #e3dcd2;
}

body {
  background: var(--ke-paper);
  color: var(--ke-ink);
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
}

h1, h2, h3, h4,
.section-title {
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  /* No colour here on purpose. The hero heading sits on a dark photograph and
     inherits white from the legacy sheet; forcing ink made it unreadable. */
}

/* The template gradient, the single most recognisable thing about the old
   look. Declared as a background-image, so the override needs the same
   property rather than background-color alone. */
.hero-foodie-btn,
.btn-primary,
.foodie-button,
.talk-to-foodie,
button.primary {
  background-image: none !important;
  background-color: var(--ke-red) !important;
  border-color: var(--ke-red) !important;
  color: #fff !important;
}

.hero-foodie-btn:hover,
.btn-primary:hover,
.foodie-button:hover,
.talk-to-foodie:hover,
button.primary:hover {
  background-color: var(--ke-red-deep) !important;
}

/* Bootstrap's blues, used for links and secondary actions. */
a { color: var(--ke-red-deep); }
a:hover { color: var(--ke-red); }

.btn-secondary,
.btn-outline-primary {
  border-color: var(--ke-red) !important;
  color: var(--ke-red-deep) !important;
  background-color: transparent !important;
}

/* Cards and panels: the legacy sheet uses hard shadows and mid-grey borders. */
.card,
.restaurant-card,
.modal-content {
  background: var(--ke-surface);
  border-color: var(--ke-hairline);
  border-radius: 10px;
}

/* Pill controls, matching the marketing site's buttons. */
.btn,
button {
  border-radius: 999px;
  font-family: Archivo, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
}

/* A way back. The marketing site is the parent of this page now, and without
   this the only route out is the browser's back button. */
.ke-back-bar {
  background: var(--ke-ink);
  color: #fff;
  font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  padding: 8px 16px;
  text-align: center;
}
.ke-back-bar a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}