/* ============================================================
   Wildflower Hub — shared theme
   Ported directly from the Ledger's forest/moss/parchment book
   aesthetic so every page in the hub feels like one object.
   Fonts: Cormorant Garamond (display/italic), Caveat (handwritten
   accent), Nunito (body/UI).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Caveat:wght@500;600&family=Nunito:wght@400;600;700&display=swap');

:root{
  --parchment: #F6F0DE;
  --parchment-line: #ddd0ab;
  --moss: #5C7A52;
  --moss-deep: #3B5636;
  --forest: #2F4232;
  --clay: #C97B5A;
  --lavender: #A78BC9;
  --honey: #D6A94A;
  --bark: #46392C;
  --muted: #8a7d64;
  --card-shadow: rgba(70,57,44,0.14);
}

*{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

html, body{ margin:0; padding:0; }

body{
  background: var(--forest);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(214,169,74,0.10), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(167,139,201,0.12), transparent 45%);
  font-family:'Nunito', sans-serif;
  color: var(--bark);
  min-height:100vh;
  padding: 32px 16px 64px;
}

/* ---------- ambient floral overlay + fireflies/stars (whole site) ---------- */
.floral-overlay{
  position:fixed; inset:0; z-index:0;
  background-image: url('floral-lines.png');
  background-repeat: repeat;
  background-size: 640px auto;
  opacity: 0.22;
  pointer-events:none;
}
.page-bg{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.page-stars span{
  position:absolute; border-radius:50%; background:#F6F0DE;
  animation: twinkle 5s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{ opacity:0.25; } 50%{ opacity:0.85; } }
.page-fireflies span{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,244,214,0.9), rgba(255,244,214,0));
  box-shadow: 0 0 7px 2px rgba(214,169,74,0.5);
  animation: flicker 6s ease-in-out infinite;
}
@keyframes flicker{ 0%,100%{ opacity:0.15; transform:scale(0.8);} 50%{ opacity:0.9; transform:scale(1.15);} }

/* ---------- book / cover / pages shell (every page uses this) ---------- */
.book{ width:100%; max-width:900px; margin:0 auto; animation: bookIn 0.7s ease-out; position:relative; z-index:1; }
@keyframes bookIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }

.cover{
  background: linear-gradient(160deg, var(--moss), var(--moss-deep));
  border-radius: 22px 22px 4px 4px;
  padding: 16px 28px;
  color: #F6F0DE;
  box-shadow: 0 16px 38px rgba(0,0,0,0.38);
  position:relative; overflow:hidden;
}

.pages{
  background: var(--parchment);
  padding: 26px 30px 34px;
  box-shadow: 0 18px 40px var(--card-shadow), inset 0 0 70px rgba(70,57,44,0.05);
  border-radius: 4px 4px 22px 22px;
  position:relative;
}

h1, h2, h3, h4{ font-family:'Cormorant Garamond', serif; font-weight:600; color: var(--forest); margin:0 0 0.3em; }
h1{ font-size: 2rem; font-style:italic; }
.accent-script{ font-family:'Caveat', cursive; color: var(--clay); font-size:1.25em; line-height:1; }

a{ color: var(--clay); text-decoration:none; }
a:hover{ color: var(--moss-deep); text-decoration:underline; }
a:focus-visible, button:focus-visible, .card:focus-visible{ outline: 3px solid var(--moss-deep); outline-offset: 2px; }

/* ---------- nav (lives inside .cover) ---------- */
.hub-nav{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
.hub-nav__brand{
  font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.35rem; font-weight:600;
  display:flex; align-items:center; gap:8px; color:#F6F0DE;
}
.hub-nav__links{ display:flex; flex-wrap:wrap; gap:2px; }
.hub-nav__links a{
  font-family:'Nunito', sans-serif; font-weight:700; font-size:0.82rem; color: rgba(246,240,222,0.8);
  padding:6px 12px; border-radius:999px; transition: background 0.15s ease, color 0.15s ease;
}
.hub-nav__links a:hover{ background: rgba(246,240,222,0.14); color:#fff; text-decoration:none; }
.hub-nav__links a.is-active{ background: var(--honey); color: var(--forest); }

/* ---------- cards / grid (landing dashboard) ---------- */
.card{
  background:#fffdf8; border:1px solid var(--parchment-line); border-radius:16px;
  padding:16px 18px; box-shadow: 0 3px 10px rgba(70,57,44,0.05);
}
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:14px; }
.module-card{ display:flex; flex-direction:column; gap:6px; text-decoration:none; color:var(--bark); }
.module-card:hover{ text-decoration:none; border-color: var(--moss); transform: translateY(-2px); transition: transform 0.15s ease; }
.module-card__eyebrow{ font-family:'Caveat',cursive; font-size:15px; color: var(--muted); }
.module-card__stat{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:29px; color: var(--forest); font-variant-numeric: tabular-nums; }
.module-card__headline{ font-size:11.5px; color:#a89b7d; }

.empty-note{ font-size:12px; color: var(--muted); padding:6px 0 14px; }

/* ---------- divider ---------- */
.vine-row{ display:block; width:100%; height:22px; margin:0 auto; opacity:0.55; }
.vine-row svg{ width:100%; height:100%; display:block; }
.vine-divider{ height:1px; background: linear-gradient(90deg, transparent, var(--parchment-line), transparent); margin:24px 0; border:none; }

@media (max-width:560px){
  h1{ font-size:1.7rem; }
  .cover{ padding:14px 18px; }
  .pages{ padding:20px 16px 26px; }
}