/* ============================================================================
   Theme: COUNTER — restaurant · modern deli & counter service
   ----------------------------------------------------------------------------
   Order-ticket logic applied to a menu. Anton signage caps run edge to edge,
   each category is a numbered run, and every dish is a row on a docket with
   the price torn off down the right-hand side against a dotted leader.

   Anton is caps-only in practice (one weight, very tall x-height), so it is
   used for headings ONLY and Public Sans does every other job. Trying to set
   body copy in it is the main way this theme goes wrong.
   ============================================================================ */
.theme-counter {
  --font-display: Anton, Impact, "Arial Narrow", sans-serif;
  --font-sans: "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "Public Sans", system-ui, sans-serif;
  --track-display: 0.005em;
  --track-label: 0.18em;

  /* Docket paper: cool white with a grey-green cast, plus true black ink. */
  --paper: #f2f2ef;
  --surface: #ffffff;
  --surface-2: #e8e8e3;
  --surface-3: #dcdcd5;
  --line: #d9d9d2;
  --line-strong: #14140f;   /* the rule IS the ink — hard black hairlines */
  --ink: #101010;
  --ink-2: #4a4a45;
  --ink-3: #63635c;

  /* Square. A ticket has no rounded corners. */
  --r-xs: 0px; --r-sm: 0px; --r: 0px; --r-lg: 0px; --r-xl: 0px; --r-pill: 0px;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: 0 12px 28px -18px rgba(0, 0, 0, .3);
  --shadow-lg: 0 40px 70px -30px rgba(0, 0, 0, .4);

  --scrollbar-size: 14px;
  --scrollbar-radius: 0;
  --scrollbar-track: var(--surface-2);
  --scrollbar-thumb: var(--ink);
  --scrollbar-thumb-hover: var(--primary);
}

body.theme-counter .navbar {
  background: var(--ink) !important;
  border-bottom: 3px solid var(--primary);
}
body.theme-counter .navbar .btn-link,
body.theme-counter .navbar-brand { color: #fff; }
body.theme-counter .navbar-brand {
  font-family: var(--font-display); font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}
body.theme-counter .navbar .btn-outline-secondary {
  --bs-btn-color: #fff; --bs-btn-bg: transparent; --bs-btn-border-color: #4a4a45;
  --bs-btn-hover-bg: var(--primary); --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-hover-border-color: var(--primary);
}

/* The board above the counter: black slab, huge caps, brand rule under it. */
body.theme-counter .hero {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-bottom: 6px solid var(--primary);
}
body.theme-counter .hero h1 {
  font-family: var(--font-display); color: #fff;
  text-transform: uppercase; font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 0.92;
}
body.theme-counter .hero__tagline { color: #c9c9c2; }
body.theme-counter .eyebrow { color: var(--primary); font-weight: 700; letter-spacing: var(--track-label); }
/* The mark is a giant initial filled by a clipped background (background-clip:
   text in site.css). A flat colour there fills Anton's very condensed glyph
   almost solid, so it stops reading as a letter — keep it striped, but run the
   stripes vertically and heavier to match the signage. */
body.theme-counter .hero__mark {
  background-image: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--primary) 55%, transparent) 0 4px,
    transparent 4px 11px);
}

/* Each category is a numbered run, the number set as big as the name. */
body.theme-counter .menu-category > h2 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 2.1rem; letter-spacing: 0.01em;
}
body.theme-counter .menu-category__rule { height: 3px; background: var(--ink); opacity: 1; }
body.theme-counter .menu-category__index {
  font-family: var(--font-display); font-size: 2.1rem; color: var(--primary);
  -webkit-text-fill-color: currentColor;
}

/* Dockets: a hard-ruled row, price pulled right against a dotted leader. */
body.theme-counter .menu-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink);
  box-shadow: none;
  transition: border-left-color var(--transition), background var(--transition);
}
body.theme-counter .menu-card:hover {
  border-left-color: var(--primary);
  background: var(--surface);
}
body.theme-counter .menu-card__title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.25rem; letter-spacing: 0.02em; font-weight: 400;
}
body.theme-counter .menu-card__foot {
  border-top: 1px dashed var(--line-strong);
  padding-top: 0.5rem; margin-top: 0.6rem;
}
body.theme-counter .price {
  font-family: var(--font-display); font-size: 1.3rem;
  letter-spacing: 0.01em;
}
body.theme-counter .menu-card__monogram { background: var(--ink); }
body.theme-counter .menu-card__monogram span {
  font-family: var(--font-display); color: #fff; text-transform: uppercase;
}
body.theme-counter .menu-card__add {
  background: var(--primary); color: var(--brand-contrast);
  border: 2px solid var(--ink);
}

body.theme-counter .diet-chip {
  border: 1px solid var(--line-strong); background: transparent;
  text-transform: uppercase; font-size: 0.65rem; letter-spacing: 0.1em;
}

body.theme-counter .btn {
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700;
}
body.theme-counter .btn-primary { border: 2px solid var(--ink); }
body.theme-counter .category-nav__link {
  border: 1px solid var(--line-strong); text-transform: uppercase;
  font-size: 0.78rem; letter-spacing: 0.08em;
}

body.theme-counter .site-footer { background: var(--ink) !important; color: #e8e8e3; border: 0; }
body.theme-counter .site-footer .text-secondary,
body.theme-counter .site-footer p { color: #a8a8a1 !important; }
body.theme-counter .footer-head {
  font-family: var(--font-display); color: #fff;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem;
}
body.theme-counter .footer-bar { background: var(--ink) !important; border-top-color: #33332d; }
body.theme-counter .footer-bar a, body.theme-counter .footer-copy { color: #a8a8a1; }