/* ============================================================
   LINKCADDIE — SHARED SITE STYLESHEET
   Used by: index.html, brands.html, creators.html
   Established July 8, 2026 — see linkcaddie-icon-system.md

   Contains: canonical design-token :root, the icon-badge system,
   and the small set of nav/footer/button rules that are genuinely
   identical (byte-for-byte) across these marketing pages.

   Anything that differs between pages even slightly (padding,
   font-size, hover alpha, etc.) is intentionally LEFT in each
   page's own embedded <style> block as a small local override —
   see comments in each file. This file should never change how
   an existing page looks; it only relocates true duplicates.
============================================================ */

:root {
  --green: #1a6b3c;
  --green-light: #2d9e5f;
  --green-pale: #e8f5ee;
  --green-mid: #c2e8d0;
  --cream: #faf8f3;
  --cream-dark: #f0ece0;
  --brown: #3d2f1e;
  --brown-light: #6b5744;
  --gold: #c9a84c;
  --gold-light: #f0d98a;
  --text: #1c1c1c;
  --text-mid: #4a4a4a;
  --text-light: #888;
  --white: #ffffff;
  --radius: 12px;
  --shadow: 0 4px 24px rgba(26,107,60,0.10);
}

/* ============================================================
   ICON BADGES — see linkcaddie-icon-system.md section 2
============================================================ */
.icon-badge {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(201,168,76,0.2); color: #c9a84c;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nav-item.active .icon-badge, .icon-badge.is-active {
  background: #c9a84c; color: #3d2f1e;
}
.icon-badge i { font-size: 13px; }

.icon-badge-light {
  width: 40px; height: 40px; border-radius: 50%;
  background: #faf3e0; color: #c9a84c;
  border: 1px solid rgba(201,168,76,0.3);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.icon-badge-light i { font-size: 19px; }

/* ============================================================
   FOOTER LOGO — identical text/markup treatment on all 3 pages
============================================================ */
.footer-logo { font-family: 'Playfair Display', serif; color: white; font-size: 18px; }

/* ============================================================
   NAV LINK LIST — identical across index.html, brands.html, creators.html
============================================================ */
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a { text-decoration: none; color: var(--text-mid); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.nav-links a:hover { color: var(--green); }

/* ============================================================
   NAV CTA — base rule shared by all 3 pages.
   Padding (and, on brands.html, an extra hover transition) differs
   slightly per page and is kept as a small local override in each
   file's own <style> block, layered on top of this.
============================================================ */
.nav-cta { background: var(--green) !important; color: white !important; border-radius: 8px; font-weight: 600 !important; }
.nav-cta:hover { background: var(--green-light) !important; }

/* ============================================================
   MARKETING NAV LOGO MARK — brands.html + creators.html only.
   (index.html uses its own .logo/.logo-icon markup, which differs
   in size and is left embedded there.)
============================================================ */
.nav-logo { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav-logo-icon { width: 26px; height: 26px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 13px; }

/* ============================================================
   MOBILE NAV HAMBURGER BUTTON BASE — brands.html + creators.html.
   (brands.html adds a local color override on top of this.)
============================================================ */
.mob-nav-btn { display: none; background: none; border: none; font-size: 22px; cursor: pointer; }

/* ============================================================
   GHOST BUTTON BASE — brands.html + creators.html.
   Border color / hover alpha values differ slightly per page and
   are kept as local overrides in each file's own <style> block.
============================================================ */
.btn-ghost { background: transparent; color: white; padding: 15px 36px; border-radius: var(--radius); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-block; }