/* HFM Fall Theme — LOCAL PREVIEW ONLY, never deployed without approval.
   Calgary fall: golden aspen + deep russet + evergreen, expressed inside the
   site's existing neubrutalist language (square-ish corners, 3px borders,
   hard offset shadows). Loaded AFTER the Tailwind sheet so :root overrides win. */

/* ---------- Palette override (re-themes nav, footer, buttons, headings site-wide) ---------- */
:root {
  --color-forest: #59301b;   /* was #1b3022 dark green → deep russet: nav bg, headings, btn-primary */
  --color-moss:   #7a4322;   /* was #2d4a35 → lighter russet: btn-primary hover */
  --color-olive:  #d9a036;   /* was #5c7a3e → aspen gold: accent words, wordmark span, link hovers */
  --color-cream:  #f8f0dd;   /* was beige → slightly warmer cream */
  --color-bark:   #3c2415;   /* unchanged — already a fall brown (body copy) */
  --color-rust:   #c4582a;   /* unchanged — burnt orange badges are already fall */
  --color-sand:   #eadfc4;   /* was #e8dcc8 → warmer golden sand */
  --color-soot:   #221510;   /* was #1b1b1b → brown-black: announcement bar, footer, shadows */
  --shadow-hard: 4px 4px 0px #221510;
  --shadow-hard-hover: 6px 6px 0px #221510;
  --fall-ever: #2f5d3a;      /* evergreen — used only in falling leaves + banner border */
}

/* Retint the one compiled utility whose shadow hex is baked in literally */
.hover\:shadow-\[4px_4px_0px_\#1B1B1B\]:hover { box-shadow: 4px 4px 0px #221510; }

/* ---------- Primary buttons ----------
   Quiet leaf-ish radius (two opposite corners) + HFM hard shadow.
   No clip-art leaf glyph on CTAs. */
.btn-primary, .btn-outline, a[href="/contact"][class*="border-"] {
  border-radius: 0.85em 0.2em 0.85em 0.2em;
}
.btn-primary:hover { transform: translate(-1px, -1px); }

/* ---------- Fall promo banner (injected by fall-patches.js) ---------- */
#fall-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;                    /* below nav (50) and mobile sticky call bar */
  background: var(--color-soot);
  color: var(--color-cream);
  text-align: center;
  padding: 0.45em 1em;
  font-size: 0.88rem;
  line-height: 1.35;
  letter-spacing: 0.2px;
  border-top: 3px solid var(--fall-ever);
}
#fall-banner strong { color: var(--color-olive); }
#fall-banner a { color: var(--color-olive); text-decoration: underline; margin-left: 0.5em; }
@media (max-width: 767px) {
  #fall-banner {
    bottom: 62px;                 /* clear the mobile sticky call bar */
    padding: 0.32em 0.75em;
    font-size: 0.72rem;
    line-height: 1.25;
    letter-spacing: 0;
  }
}

/* ---------- Falling leaves (quiet accent; injected by fall-patches.js) ---------- */
#fall-leaves {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;                    /* above content wash, well below nav/banner/CTAs */
}
.fall-leaf {
  position: absolute;
  top: -6vh;
  will-change: transform;
  animation-name: fall-drop, fall-sway;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-direction: normal, alternate;
}
.fall-leaf svg { display: block; width: 100%; height: 100%; }
@keyframes fall-drop {
  from { transform: translateY(-8vh) rotate(0deg); }
  to   { transform: translateY(115vh) rotate(220deg); }
}
@keyframes fall-sway {
  from { margin-left: -2vw; }
  to   { margin-left: 2vw; }
}
@media (prefers-reduced-motion: reduce) {
  #fall-leaves { display: none; }
}