/* ==========================================================================
   site.css — Domagai World Market
   Overrides base.css tokens only. Do not edit base.css.
   Palette taken from the client's finalized logo: green, gold, red.
   ========================================================================== */

:root {
  /* Brand tokens from the logo */
  --c-primary: #176B37;       /* green — logo ring, header, primary buttons */
  --c-primary-dark: #0F4A26;  /* darker green — hover states, footer bg */
  --c-secondary: #D2232A;     /* red — logo tagline band; used for accent TEXT (eyebrows, links) */
  --c-accent: #F2B705;        /* gold — logo wordmark; used for accent BACKGROUNDS (buttons, icon chips) */
  --c-accent-dark: #C79A00;   /* darker gold — button hover */
  --c-bg: #FFFFFF;
  --c-bg-alt: #FAF6EC;        /* warm cream, echoes the gold without competing with it */
  --c-text: #1B1F1C;
  --c-text-muted: #5B6560;
  --c-border: #E4E7E1;
  --c-on-dark: #FFFFFF;

  --font-display: "Poppins", system-ui, sans-serif;
  --font-text: "Lato", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Contrast overrides
   Gold (--c-accent) is bright and works well as a BACKGROUND with dark text,
   but fails WCAG AA as a text colour on light backgrounds. Red (--c-secondary)
   is used instead anywhere accent colour is needed as text on a light background.
   Base.css is not modified; these are targeted overrides only.
   -------------------------------------------------------------------------- */
.eyebrow { color: var(--c-secondary); }
.card__link { color: var(--c-secondary); }
.card__link:hover { color: var(--c-primary-dark); }

/* Gold buttons need dark text, not the base.css default of white */
.btn--accent { background: var(--c-accent); color: var(--c-primary-dark); }
.btn--accent:hover { background: var(--c-accent-dark); color: var(--c-primary-dark); }

/* Checklist tick mark on a gold circle needs dark ink, not white */
.checklist li::before { background: var(--c-accent); color: var(--c-primary-dark); }

/* --------------------------------------------------------------------------
   Small site-specific adjustments
   -------------------------------------------------------------------------- */

/* Product/category cards on the "What We Stock" page read better with a
   slightly shorter media area since produce/shelf photos vary in aspect. */
.card__media img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Topbar phone/WhatsApp CTA: make the accent icon readable on the dark topbar */
.topbar i { color: var(--c-accent); }

/* Footer list icons sit on the dark green footer — gold passes contrast there */
.footer__list i { color: var(--c-accent); }

/* Header CTA button uses gold background per brand; ensure visible border in
   light mode header for definition against white header background */
.header .btn--accent { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Stock page category list styling: plain, readable ingredient lists rather
   than card grids, since these are long named-item lists, not services. */
.stock-list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; margin: 0; padding: 0; }
.stock-list li { position: relative; padding-left: 22px; color: var(--c-text); }
.stock-list li::before {
  content: "•";
  position: absolute; left: 0; top: 0;
  color: var(--c-secondary);
  font-weight: 700;
}
@media (max-width: 640px) {
  .stock-list { grid-template-columns: 1fr; }
}

/* Category section image + list layout on the stock page */
.stock-category__media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.stock-category__note { color: var(--c-text-muted); font-size: 0.95rem; margin-top: 14px; }