/* ==========================================================================
   Garden Faery — shared stylesheet
   Tokens, reset, base typography, nav, footer. Per-page <style> blocks handle
   everything else. Change palette values here and the whole site updates.
   ========================================================================== */

/* --- Reset --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* --- Tokens ---
   Primary names are the source of truth. Legacy aliases map old pages
   (--accent-1, --text-primary, etc.) onto the primary tokens so existing
   CSS keeps working without a rewrite.
*/
:root {
  /* Primary palette — pulled from the warm dahlia/zinnia rainbow look. The
     deep wine replaces the old plum as the brand anchor; coral, peach,
     butter, and rose carry the warm florals. Sage stays as the one green
     note. Legacy --plum / --pollen-gold / --petal-pink names are kept as
     aliases below so older pages keep rendering correctly. */
  --wine:    #5a1230;
  --wine-soft: rgba(90, 18, 48, 0.78);
  --rose:    #c2557a;
  --coral:   #e8896f;
  --peach:   #f7d5b9;
  --butter:  #f0c878;
  --cream:   #faf5ee;

  /* Aliases so existing pages keep working with the new palette underneath. */
  --plum: var(--wine);
  --plum-soft: var(--wine-soft);
  --petal-pink: var(--rose);
  --petal-pink-light: var(--peach);
  --pollen-gold: var(--butter);
  --spring-sage: #9bbd85;       /* kept — single green nod */
  --sage-light: #e0ecd2;
  --leaf-green: #5ea040;        /* kept — for any inline botanical SVGs */

  /* Neutrals + utility */
  --white: #ffffff;
  --gray-100: #f3eee5;
  --gray-200: #e3dccf;
  --gray-400: #a89c91;
  --gray-600: #6e5f55;
  --red: #a03020;
  --red-light: #f0d4d4;
  --radius: 12px;
  --shadow: 0 2px 14px rgba(90, 18, 48, 0.08);
  --shadow-hover: 0 6px 18px rgba(90, 18, 48, 0.14);

  /* Moon-page tokens */
  --moon: #8a6b9e;
  --moon-light: #d5c6df;

  /* Food-guide extensions (semantic names for the growing-guide categories) */
  --food-rose: var(--petal-pink);
  --food-rose-light: #f3e3ed;
  --perennial-green: #6b8f5e;
  --annual-amber: #c9873a;
  --semi-blue: #7a92a5;

  /* Legacy aliases */
  --text-primary: var(--plum);
  --text-secondary: var(--plum-soft);
  --bg: var(--cream);
  --accent-1: var(--petal-pink);
  --accent-2: var(--spring-sage);
  --highlight: var(--pollen-gold);
  --sage: var(--spring-sage);
  --gray: var(--gray-600);

  /* Fonts — 2026 brand refresh.
     Headings: Fraunces (warm modern serif, replaces Lora).
     Body:     Inter (clean modern sans, replaces Nunito).
     Wordmark: Elsie Swash Caps (unchanged, brand-locked). */
  --font-heading: 'Fraunces', 'Lora', Georgia, serif;
  --font-body: 'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Base typography --- */
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--bg); color: var(--text-primary); line-height: 1.6; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--text-primary); line-height: 1.2; }

/* --- Nav --- */
.site-nav { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 54px; background: var(--bg); border-bottom: 2px solid var(--accent-1); }
.nav-logo { font-family: 'Elsie Swash Caps', serif; font-size: 22px; font-weight: 900; color: var(--text-primary); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.nav-logo-img { height: 32px; width: auto; flex-shrink: 0; }
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a, .nav-group-toggle { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text-secondary); text-decoration: none; padding: 6px 14px; border: none; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; background: none; cursor: pointer; line-height: 1.4; }
.nav-links a:hover, .nav-group-toggle:hover { color: var(--text-primary); }
.nav-links a.active, .nav-group.active > .nav-group-toggle { color: var(--text-primary); border-bottom-color: var(--accent-1); }
.nav-group { position: relative; }
.nav-group-toggle .caret { display: inline-block; margin-left: 4px; font-size: 10px; transition: transform 0.2s; }
.nav-group:hover .caret, .nav-group.open .caret { transform: rotate(180deg); }
/* Anchor the menu to the right edge of the nav-group so it grows leftward —
   important because the Guides dropdown lives on the right side of the nav
   and its longest item ("Succession Planting Seed Kit") would otherwise be
   clipped by the viewport. */
.nav-group-menu { display: none; position: absolute; top: 100%; right: 0; left: auto; background: var(--bg); border: 1px solid var(--accent-1); border-radius: 10px; padding: 4px 0; min-width: 200px; box-shadow: 0 8px 20px rgba(90, 18, 48,0.15); z-index: 101; }
/* Bridge the click-target to the menu so the cursor doesn't drop the :hover state crossing the gap. */
.nav-group::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav-group:hover .nav-group-menu, .nav-group.open .nav-group-menu, .nav-group:focus-within .nav-group-menu { display: block; }
.nav-group-menu a { display: block; padding: 9px 18px; border-bottom: none !important; white-space: nowrap; }
.nav-group-menu a:hover { background: rgba(194, 85, 122,0.12); color: var(--text-primary); }
.nav-group-menu a.active { color: var(--text-primary); background: rgba(194, 85, 122,0.08); border-bottom: none; }
.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger svg { width: 26px; height: 26px; stroke: var(--text-primary); }
@media (max-width: 600px) {
  .hamburger { display: block; }
  .nav-links { display: none; position: absolute; top: 54px; left: 0; right: 0; flex-direction: column; background: var(--bg); border-bottom: 2px solid var(--accent-1); padding: 8px 0; gap: 0; align-items: stretch; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 24px; font-size: 15px; border-bottom: none; }
  .nav-links a.active { border-bottom: none; color: var(--text-primary); background: rgba(194, 85, 122,0.1); }
  .nav-group { width: 100%; display: flex; flex-direction: column; }
  .nav-group-toggle { padding: 14px 24px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); opacity: 0.6; cursor: default; pointer-events: none; text-align: left; width: 100%; border-bottom: none; }
  .nav-group-toggle .caret { display: none; }
  .nav-group.active > .nav-group-toggle { background: none; border: none; color: var(--text-secondary); }
  .nav-group-menu { display: block; position: static; background: none; border: none; padding: 0 0 6px; box-shadow: none; min-width: 0; margin: 0; }
  .nav-group-menu a { padding: 10px 36px; font-size: 14px; }
  .nav-group-menu a.active { background: rgba(194, 85, 122,0.1); }
}

/* --- Footer --- */
footer { text-align: center; padding: 20px 20px 24px; font-size: 14px; font-weight: 600; color: var(--accent-1); background: var(--text-primary); }
footer a { color: var(--accent-1); text-decoration: none; }
footer a:hover { text-decoration: underline; }
.social-links { display: flex; justify-content: center; gap: 16px; margin-top: 10px; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); transition: background 0.2s, transform 0.2s; }
.social-links a:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.social-links svg { width: 18px; height: 18px; fill: var(--accent-1); }

/* --- Buttons (shared) ---
   Single coral pill for primary CTAs and a wine-on-cream secondary.
   Per-page button classes (.cta-btn, .form-btn, .newsletter-btn, .hero-cta)
   are also restyled to match — these utility classes are for new buttons. */
.btn { display: inline-block; padding: 14px 30px; border: 2px solid transparent; border-radius: 999px; font-family: var(--font-body); font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; letter-spacing: 0.01em; line-height: 1.2; }
.btn-primary { background: var(--coral); color: var(--wine); box-shadow: 0 3px 14px rgba(232, 137, 111, 0.35); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(232, 137, 111, 0.45); background: var(--coral); color: var(--wine); }
.btn-secondary { background: var(--cream); color: var(--wine); border-color: var(--wine); }
.btn-secondary:hover { background: var(--wine); color: var(--cream); }
.btn-ghost { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.6); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: rgba(255,255,255,0.25); }

/* --- Section eyebrow (uppercase, letterspaced label above headings) --- */
.eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.18em; color: var(--coral); font-weight: 700; font-size: 0.78rem; margin-bottom: 8px; font-family: var(--font-body); }

/* --- Logo mask utility ---
   For places that need the faery silhouette in a non-default brand color
   (e.g. peach on a wine background, cream on a dark hero). The shape comes
   from garden-faery-logo.svg and the color comes from the element's
   `background-color` (or `color`, since we set it to currentColor). Sized
   via width/height. Example:
     <span class="gf-mark" style="width:32px;height:32px;color:var(--peach)"></span>
*/
.gf-mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url(garden-faery-logo.svg) no-repeat center / contain;
          mask: url(garden-faery-logo.svg) no-repeat center / contain;
}

/* --- Visual refresh: pull pre-existing per-page button classes into the
   coral-pill brand. Per-page <style> blocks defined these earlier with their
   own colors / radii; this override unifies them without touching every page.
   .hero-cta is already updated inline in index.html so it's excluded here. */
.cta-btn, .form-btn, .newsletter-btn, .ig-follow-btn, .modal-btn.primary, .contact-plug-btn:not(.secondary), button.btn-primary:not([disabled]), a.btn-primary {
  background: var(--coral) !important;
  color: var(--wine) !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  padding: 13px 28px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 0.98rem !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 3px 14px rgba(232, 137, 111, 0.35) !important;
  transition: transform 0.12s, box-shadow 0.15s !important;
  text-decoration: none !important;
}
.cta-btn:hover, .form-btn:hover, .newsletter-btn:hover, .ig-follow-btn:hover, .modal-btn.primary:hover, .contact-plug-btn:not(.secondary):hover, button.btn-primary:not([disabled]):hover, a.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 18px rgba(232, 137, 111, 0.45) !important;
  background: var(--coral) !important;
}

/* --- Utilities --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* --- Botanical decorations ---
   Usage: <svg class="botanical"><use href="botanicals.svg#leaf-fern"/></svg>
   Size/color modifiers via .botanical--lg, .botanical--sage, etc.
*/
.botanical { display: inline-block; width: 48px; height: 48px; color: var(--spring-sage); flex-shrink: 0; vertical-align: middle; }
.botanical--sm  { width: 28px; height: 28px; }
.botanical--lg  { width: 80px; height: 80px; }
.botanical--xl  { width: 120px; height: 120px; }
.botanical--leaf  { color: var(--leaf-green); }
.botanical--sage  { color: var(--spring-sage); }
.botanical--rose  { color: var(--petal-pink); }
.botanical--gold  { color: var(--pollen-gold); }
.botanical--plum  { color: var(--plum); }
.botanical-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 28px 0; opacity: 0.85; }
.botanical-divider { display: block; margin: 36px auto; color: var(--spring-sage); width: 180px; height: 32px; opacity: 0.8; }

/* --- Meadow ---
   Wind-blown grass + sprouting flowers, generated by shared.js and dropped
   in just above the footer on any page that has one. */
.meadow {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 1;   /* shorter meadow so it hugs the footer */
  min-height: 110px;     /* floor on very narrow screens */
  max-height: 200px;     /* keep it sensible on ultra-wide screens */
  margin-top: 32px;
  overflow: hidden;
  pointer-events: none;
  /* The dark plum footer sits immediately below, so the meadow looks
     like it is growing out of the soil/ground. */
}
.meadow svg {
  display: block;
  width: 100%;
  height: 100%;
}
.meadow .blade,
.meadow .flower-base,
.meadow .flower-head {
  transform-box: fill-box;
  transform-origin: bottom center;
  will-change: transform;
}
.meadow .blade       { animation: gf-sway 5.4s ease-in-out infinite; }
.meadow .flower-base { animation: gf-flower-base-sway 7.2s ease-in-out infinite; }
.meadow .flower-head { animation: gf-flower-head-sway 6.1s ease-in-out infinite; }

/* Blade variants — keep the existing 6 timings */
.meadow .blade.sway-2 { animation-duration: 4.2s; animation-delay: -1.0s; }
.meadow .blade.sway-3 { animation-duration: 5.7s; animation-delay: -2.1s; }
.meadow .blade.sway-4 { animation-duration: 6.4s; animation-delay: -0.4s; }
.meadow .blade.sway-5 { animation-duration: 4.8s; animation-delay: -2.8s; }
.meadow .blade.sway-6 { animation-duration: 5.3s; animation-delay: -1.6s; }
.meadow .blade.windy  { animation-name: gf-sway-strong; }

/* Flower stem (base) variants — gentle rocking at the ground */
.meadow .flower-base.sway-2 { animation-duration: 8.4s; animation-delay: -1.7s; }
.meadow .flower-base.sway-3 { animation-duration: 6.5s; animation-delay: -3.3s; }

/* Flower head variants — more dramatic sway up top, out of phase with base
   so the stem appears to bend rather than rotate rigidly */
.meadow .flower-head.sway-h2 { animation-duration: 5.2s; animation-delay: -2.4s; }
.meadow .flower-head.sway-h3 { animation-duration: 7.0s; animation-delay: -0.8s; }

@keyframes gf-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50%      { transform: rotate( 2.5deg); }
}
@keyframes gf-sway-strong {
  0%, 100% { transform: rotate(-4.5deg); }
  50%      { transform: rotate( 4.5deg); }
}
/* Base rocks gently in a lazy arc, loosely asymmetric so it doesn't feel
   like a clock pendulum. */
@keyframes gf-flower-base-sway {
  0%   { transform: rotate(-2deg); }
  22%  { transform: rotate( 1deg); }
  48%  { transform: rotate( 3deg); }
  72%  { transform: rotate(-0.5deg); }
  100% { transform: rotate(-2deg); }
}
/* Head adds a bigger, different-phase motion so the top tracks out further
   than the base — which is what stems do in real wind. */
@keyframes gf-flower-head-sway {
  0%   { transform: rotate(-5deg); }
  18%  { transform: rotate( 2deg); }
  42%  { transform: rotate( 6deg); }
  65%  { transform: rotate(-1deg); }
  85%  { transform: rotate(-4deg); }
  100% { transform: rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .meadow .blade,
  .meadow .flower-base,
  .meadow .flower-head { animation: none; }
}

/* --- Bee ---
   A small friendly bee that buzzes around the viewport and periodically
   lands on a meadow flower. Driven by shared.js (Web Animations API).
   Skipped entirely if prefers-reduced-motion is set. */
.gf-bee {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 30px;
  pointer-events: auto;
  cursor: pointer;
  z-index: 9;
  transform: translate(-100px, -100px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
/* Transparent "halo" around the bee so the click target is bigger than
   the 36x30 visual — makes the bee much easier to catch in flight. */
.gf-bee::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
}
/* While the bee is perched on a primary CTA, let clicks pass through to
   the button underneath so the bee never blocks the call-to-action. */
.gf-bee.on-cta {
  pointer-events: none;
  cursor: default;
}
.gf-bee-wrap {
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transform: scaleX(var(--face, 1));
}
.gf-bee-wrap.wiggling {
  animation: gf-bee-wiggle 0.6s cubic-bezier(0.36, 0, 0.32, 1.4);
}
.gf-bee svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.gf-bee .wing {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.gf-bee.flying .wing {
  animation: gf-wing-beat 80ms linear infinite;
}
.gf-bee.landed .wing {
  animation: gf-wing-rest 2.4s ease-in-out infinite;
}
@keyframes gf-wing-beat {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.25); }
}
@keyframes gf-wing-rest {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96%      { transform: scaleY(0.4); }
}
@keyframes gf-bee-wiggle {
  0%   { transform: scaleX(var(--face, 1)) scale(1)    rotate(0deg); }
  20%  { transform: scaleX(var(--face, 1)) scale(1.28) rotate(-12deg); }
  45%  { transform: scaleX(var(--face, 1)) scale(1.28) rotate(12deg); }
  65%  { transform: scaleX(var(--face, 1)) scale(1.22) rotate(-7deg); }
  85%  { transform: scaleX(var(--face, 1)) scale(1.12) rotate(3deg); }
  100% { transform: scaleX(var(--face, 1)) scale(1)    rotate(0deg); }
}

/* Speech bubble that appears above (or below) the bee when clicked.
   z-index is well above the sticky nav so it's never hidden. */
.gf-bee-tip {
  position: fixed;
  background: #fff;
  color: var(--plum, #5a1230);
  font-family: var(--font-body, 'Nunito', sans-serif);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 14px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  transform: translate(-50%, calc(-100% - 16px));
  animation: gf-bee-tip 1.8s ease-out forwards;
}
.gf-bee-tip::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}
/* When the bee is near the top of the viewport we flip the bubble below
   the bee so it doesn't get clipped or hidden by the sticky nav. */
.gf-bee-tip.below {
  transform: translate(-50%, calc(100% + 16px));
  animation-name: gf-bee-tip-below;
}
.gf-bee-tip.below::after {
  bottom: auto;
  top: -6px;
  border-top-color: transparent;
  border-bottom: 6px solid #fff;
  border-top: 0;
}
@keyframes gf-bee-tip {
  0%   { opacity: 0; transform: translate(-50%, calc(-100% - 6px))  scale(0.6); }
  12%  { opacity: 1; transform: translate(-50%, calc(-100% - 18px)) scale(1.05); }
  20%  {             transform: translate(-50%, calc(-100% - 16px)) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, calc(-100% - 16px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-100% - 28px)) scale(0.95); }
}
@keyframes gf-bee-tip-below {
  0%   { opacity: 0; transform: translate(-50%, calc(100% + 6px))  scale(0.6); }
  12%  { opacity: 1; transform: translate(-50%, calc(100% + 18px)) scale(1.05); }
  20%  {             transform: translate(-50%, calc(100% + 16px)) scale(1); }
  80%  { opacity: 1; transform: translate(-50%, calc(100% + 16px)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(100% + 28px)) scale(0.95); }
}

/* Petal puff that fans out from the bee on click */
.gf-bee-particle {
  position: fixed;
  pointer-events: none;
  z-index: 8;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  margin-top: -8px;
  animation: gf-bee-particle 1.3s ease-out forwards;
  will-change: transform, opacity;
}
.gf-bee-particle svg { display: block; width: 100%; height: 100%; overflow: visible; }
@keyframes gf-bee-particle {
  0%   { opacity: 0; transform: translate(0, 0)                                 scale(0.3) rotate(0deg); }
  15%  { opacity: 1; transform: translate(calc(var(--dx, 0) * 0.3), calc(var(--dy, -30px) * 0.3)) scale(1) rotate(calc(var(--rot, 180deg) * 0.3)); }
  100% { opacity: 0; transform: translate(var(--dx, 0), calc(var(--dy, -50px) - 20px))            scale(0.7) rotate(var(--rot, 360deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .gf-bee,
  .gf-bee-tip,
  .gf-bee-particle { display: none !important; }
}