/* ─── Kurtz Farms — theme + shared styles ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Karla:wght@400;500;600;700&display=swap');

:root {
  --cream: #f5f3ec;
  --cream-2: #edeade;
  --ink: #26301f;
  --ink-soft: #4d5743;
  --muted: #7d8472;
  --green-deep: #2d5016;
  --green-mid: #51722f;
  --olive: #7a9b4e;
  --gold: #c9a227;
  --gold-deep: #a07f14;
  --rust: #a4552a;
  --line: #d9d4c2;
  --card: #fbfaf5;
  --on-brand: #f5f3ec;        /* text on filled brand-green surfaces */
  --heading: var(--green-deep); /* heading / text-green (lightens in dark mode) */
  --shadow: 0 1px 2px rgba(38,48,31,0.06), 0 4px 14px rgba(38,48,31,0.07);
  --radius: 10px;
  --font-display: "Bitter", Georgia, serif;
  --font-body: "Karla", "Helvetica Neue", Helvetica, sans-serif;
}

/* Theme: Homestead — warmer browns */
[data-theme="homestead"] {
  --cream: #faf6ee;
  --cream-2: #f1e9da;
  --ink: #33291d;
  --ink-soft: #5b4d3a;
  --muted: #8a7c66;
  --green-deep: #6b3a1f;
  --green-mid: #8a5527;
  --olive: #8a8456;
  --gold: #b8702e;
  --gold-deep: #96581f;
  --rust: #a4552a;
  --line: #e0d5c0;
  --card: #fdfaf4;
}

/* Theme: Modern Farm — cooler, crisper */
[data-theme="modern"] {
  --cream: #f7f8f5;
  --cream-2: #eceee7;
  --ink: #1f2a22;
  --ink-soft: #44523f;
  --muted: #76806e;
  --green-deep: #1a3c2a;
  --green-mid: #2f6644;
  --olive: #5d8a52;
  --gold: #c9a227;
  --gold-deep: #a07f14;
  --rust: #c06030;
  --line: #dde0d6;
  --card: #ffffff;
  --radius: 6px;
  --font-display: "Karla", "Helvetica Neue", sans-serif;
}

/* ── Dark mode (applies over any theme) ── */
/* Dark mode — refined warm-charcoal + sage + gold.
   Green is demoted to a quiet accent; headings are near-white, not lime. */
[data-mode="dark"] {
  --cream: #14171a;        /* app background — warm neutral charcoal */
  --cream-2: #1e2329;      /* inset / nested surface */
  --ink: #e9e7df;          /* primary text, warm off-white */
  --ink-soft: #a7adac;     /* secondary text */
  --muted: #757c7b;        /* tertiary / muted */
  --green-deep: #294a36;   /* brand fill: buttons, chips, date badges (toned forest) */
  --green-mid: #79b06a;    /* links & gains — muted sage, not lime */
  --olive: #8a9a66;
  --gold: #d7b85f;         /* the one hero accent */
  --gold-deep: #e7c976;
  --rust: #d88a5c;
  --line: #2b3138;         /* hairline borders */
  --card: #1a1f24;         /* card surface */
  --on-brand: #eef1e7;
  --heading: #f1efe8;      /* near-white headings (key fix) */
  --shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px rgba(0,0,0,0.45);
}
/* Deep, grounded sidebar — almost black with a green undertone */
[data-mode="dark"] .portal-sidebar,
[data-mode="dark"] .portal-bottomnav { background: #11161300; background-color: #121814; border-right: 1px solid #20272160; }
[data-mode="dark"] .portal-bottomnav { border-top: 1px solid #20272160; border-right: none; }
/* Primary buttons stay legible & modern: solid sage with dark text */
[data-mode="dark"] .btn { background: var(--green-mid); color: #10140e; }
[data-mode="dark"] .btn--gold { background: var(--gold); color: #1a1407; }
[data-mode="dark"] .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
[data-mode="dark"] .btn--ghost:hover { background: rgba(255,255,255,0.05); }
/* Cards get a touch of separation from the bg */
[data-mode="dark"] .card { border-color: #262c33; }
[data-mode="dark"] .tag { background: rgba(255,255,255,0.06); color: var(--ink-soft); }
[data-mode="dark"] .tag--green { color: var(--green-mid); background: rgba(121,176,106,0.15); }
[data-mode="dark"] .tag--gold { color: var(--gold-deep); background: rgba(215,184,95,0.15); }
[data-mode="dark"] .tag--rust { color: var(--rust); background: rgba(216,138,92,0.15); }
[data-mode="dark"] ::selection { background: var(--gold); color: #1a1407; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.15; text-wrap: pretty; }

/* ── Shared bits ── */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.btn {
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  border: none; border-radius: calc(var(--radius) - 3px);
  padding: 12px 22px; cursor: pointer;
  background: var(--green-deep); color: var(--on-brand);
  transition: filter .15s ease, transform .1s ease;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--ghost { background: transparent; color: var(--heading); border: 1.5px solid var(--heading); }
.btn--ghost:hover { background: rgba(122,155,78,0.12); filter: none; }

/* Portal sidebar nav */
.portal-navbtn:hover { background: rgba(245,243,236,0.08) !important; color: var(--on-brand) !important; }
.portal-navbtn:hover svg { color: rgba(245,243,236,0.9); }
.portal-navbtn[data-active="1"]:hover { background: rgba(245,243,236,0.14) !important; }

/* Public nav — collapses to a tap menu on phones */
.public-nav-toggle { display: none; }
@media (max-width: 720px) {
  .public-nav-toggle { display: inline-flex; align-items: center; }
  .public-nav-links {
    display: none !important; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch !important; justify-content: flex-start !important;
    gap: 2px !important; background: var(--card); border-top: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 8px clamp(20px,5vw,64px) 16px; z-index: 60;
  }
  .public-nav-links[data-open="1"] { display: flex !important; }
  .public-nav-links a { padding: 12px 2px; border-bottom: 1px solid var(--line); }
  .public-nav-links .btn { margin-top: 10px; text-align: center; }
}
/* Keep the hero seal from clipping off the left edge on small screens */
@media (max-width: 600px) {
  .hero-badge { left: 6px !important; top: -12px !important; width: 104px !important; height: 104px !important; }
}

.tag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 99px;
  background: var(--cream-2); color: var(--ink-soft);
}
.tag--green { background: rgba(122,155,78,0.18); color: var(--green-deep); }
.tag--gold { background: rgba(201,162,39,0.16); color: var(--gold-deep); }
.tag--rust { background: rgba(164,85,42,0.14); color: var(--rust); }
[data-mode="dark"] .tag--green { color: var(--green-mid); }

.up { color: var(--green-mid); font-weight: 700; }
.down { color: var(--rust); font-weight: 700; }

/* striped placeholder for imagery */
.ph {
  background: repeating-linear-gradient(45deg, var(--cream-2), var(--cream-2) 10px, var(--card) 10px, var(--card) 20px);
  border: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px;
}

::selection { background: var(--gold); color: #fff; }

/* scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }