/* ============================================================
   RUBBISH R US — LAYOUT CSS (Global / Base Styles)
   Shared across all pages. Edit once, updates everywhere.

   Header styles  → css/header.css  (loaded by include.js)
   Footer styles  → css/footer.css  (loaded by include.js)
   ============================================================ */

:root {
  --primary:       #2E7D32;
  --primary-dark:  #1B5E20;
  --primary-light: #4CAF50;
  --accent:        #FF6F00;
  --accent-light:  #FF8F00;
  --gold:          #F4B400;
  --light:         #e1efe1;
  --gray:          #EEF2F0;
  --text:          #1F2937;
  --text-muted:    #6B7280;
  --white:         #fff;
  --mint:          #A8D5BA;
  --dark:          #111827;
  --r:             24px;
  --r-sm:          14px;
  --shadow:        0 4px 24px rgba(0,0,0,.07);
  --shadow-lg:     0 16px 48px rgba(0,0,0,.13);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: "Inter", sans-serif; color: var(--text); background: #fff; overflow-x: hidden; line-height: 1.6; }
img   { max-width: 100%; display: block; }
a     { text-decoration: none; color: inherit; }
button{ cursor: pointer; font-family: inherit; border: none; background: none; }
ul    { list-style: none; }

/* ── BODY PADDING (accounts for fixed header: top-info-row + nav bar) ── */
body { padding-top: 92px; } /* 36px info row + 56px nav */
@media (max-width: 768px) {
  body { padding-top: 80px; padding-bottom: 70px; } /* 34px info row + 46px nav */
}