/* ============================================================
   CUSTOM — Per-store micro-overrides for Village Pot (Winnipeg)
   This file is generated per restaurant. Override tokens or add
   store-specific rules here. Do NOT edit global.css, theme.css,
   or style.css directly for per-store changes.

   BLACK & GOLD SKIN PATCHES
   style.css was authored for a light (parchment) page and hardcodes
   a few light-theme colours that tokens cannot reach. Each rule
   below re-points one of those to the black/gold palette. Loaded
   after style.css, so equal-specificity selectors win on order.
   ============================================================ */

:root {
  --vp-on-gold: #0d0d0d;   /* Text/icons sitting on a gold fill */
}

/* --- Solid gold button: keep the label black on hover ---------
   style.css flips it to cream (#fffdf8), which is unreadable on gold. */
.btn:hover,
.gs-btn-primary:hover,
.cs-button-solid:hover,
.location-card-btn-primary:hover {
  color: var(--vp-on-gold);
}

.gs-floating-btn a,
.gs-floating-btn a:hover {
  color: var(--vp-on-gold);
}

/* --- Outline button: gold hairline on black -------------------
   style.css hardcodes a navy border and uses --gs-primary-dark
   for the label, which is now black-on-black. */
.gs-btn-outline,
.location-card-btn,
.btn-directions {
  border-color: var(--gs-border-gold);
  color: var(--gs-accent);
}

.gs-btn-outline:hover,
.location-card-btn:hover,
.btn-directions:hover {
  color: var(--vp-on-gold);
}

/* --- Dish detail chips: label was --gs-primary-dark (invisible) --- */
.gs-dish-detail {
  color: var(--gs-dark);
}

/* --- Mobile menu category headers (injected by menu.js) --------- */
.category-header {
  color: var(--gs-accent);
}

/* --- Menu page CTA: hover filled white, now fills gold ---------- */
.menu-btn-wrapper a {
  color: var(--gs-accent);
  border-color: var(--gs-border-gold);
}

.menu-btn-wrapper a:hover {
  color: var(--vp-on-gold);
  background-color: var(--gs-accent);
  border: 2px solid var(--gs-accent);
}

/* --- Mobile category dropdown: pressed state fills gold --------- */
.dropbtn:active {
  color: var(--vp-on-gold);
}

/* --- Menu list: the one block style.css keeps on white ---------
   .menu-item and the desktop .menu-buttons sidebar hardcode
   #ffffff, so their token-coloured text (now light) vanished.
   Drop them onto the same dark card surface as the rest of the
   site. No media query needed to win — these land later in the
   cascade than style.css's @media rules at equal specificity. */
.menu-item {
  background: var(--gs-cream);
  border: 1px solid var(--gs-border-light);
}

.menu-buttons {
  background: var(--gs-cream);
}

.item-price {
  color: var(--gs-accent);
  opacity: 1;
}

/* --- Scrollbar: a full-gold thumb is too loud on black ---------- */
::-webkit-scrollbar-thumb {
  background: #2e2e2e;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gs-accent-dark);
}