/* ============================================================
   Farmsted, shared site styles (logo, mobile nav, helpers)
   ============================================================ */

/* ── Animated brand logo (Home → Farm → sted) ── */
.fs-logo{
  font-family:var(--font-display);
  font-size:22px;
  letter-spacing:-.02em;
  color:#fff;
  display:inline-flex;
  align-items:baseline;
  text-decoration:none;
  line-height:1.1;
  cursor:pointer;
}
.fs-logo-swap{
  position:relative;
  display:inline-block;
  overflow:hidden;
  height:1.1em;
  vertical-align:baseline;
}
.fs-logo-home{
  display:block;
  position:relative;
  white-space:nowrap;
  opacity:1;
  transform:translateY(0);
  transition:transform 380ms cubic-bezier(0.4,0,1,1), opacity 260ms ease;
}
.fs-logo-farm{
  position:absolute;
  top:0;
  right:0;
  white-space:nowrap;
  opacity:0;
  transform:translateY(112%);
  transition:transform 420ms cubic-bezier(0.34,1.56,0.64,1), opacity 260ms ease;
}
.fs-logo-strike{
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:2px;
  background:rgba(255,255,255,0.85);
  transform:translateY(-50%) scaleX(0);
  transform-origin:right center;
  transition:transform 240ms ease-in;
  pointer-events:none;
}
.fs-logo.is-strike .fs-logo-strike{
  transform:translateY(-50%) scaleX(1);
  transform-origin:left center;
  transition:transform 360ms ease-out;
}
.fs-logo.is-farm .fs-logo-home{
  opacity:0;
  transform:translateY(112%);
}
.fs-logo.is-farm .fs-logo-farm{
  opacity:1;
  transform:translateY(0);
}

/* ── Injected mobile navigation ── */
.fs-burger{
  display:none;
  width:40px;
  height:40px;
  border:none;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  padding:0;
}
.fs-burger span{
  display:block;
  width:22px;
  height:1.5px;
  background:rgba(255,255,255,.85);
  transition:transform .3s ease, opacity .3s ease;
}
.fs-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.fs-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.fs-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.fs-mobile-menu{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:min(82vw,340px);
  background:var(--green-950);
  z-index:1000;
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(0.16,1,0.3,1);
  padding:88px 32px 40px;
  display:flex;
  flex-direction:column;
  gap:6px;
  box-shadow:-24px 0 60px rgba(0,0,0,.4);
}
.fs-mobile-menu.open{transform:translateX(0)}
.fs-mobile-menu a{
  color:rgba(255,255,255,.72);
  font-size:20px;
  font-family:var(--font-display);
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-decoration:none;
  transition:color .2s ease;
}
.fs-mobile-menu a:hover{color:#fff}
.fs-mobile-menu .fs-mobile-cta{
  margin-top:20px;
  background:var(--lime-400);
  color:var(--green-900);
  border:none;
  border-radius:var(--radius-full);
  text-align:center;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  padding:15px 24px;
}
.fs-scrim{
  position:fixed;
  inset:0;
  background:rgba(7,22,16,.55);
  z-index:999;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.fs-scrim.open{opacity:1;visibility:visible}

@media (max-width:768px){
  .fs-burger{display:flex}
  /* Hide the header CTA on mobile, the burger menu carries it instead */
  nav > a:not(.fs-logo){display:none!important}
}

/* ── Landing page responsive card swap ── */
.fs-desktop{display:block}
.fs-mobile{display:none}
@media (max-width:860px){
  .fs-desktop{display:none}
  .fs-mobile{display:block}
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .ha{animation:none!important}
  .fs-logo-home,.fs-logo-farm,.fs-logo-strike{transition:none!important}
}

:focus-visible{outline:2px solid var(--lime-400);outline-offset:3px}
html{scroll-behavior:smooth}
img{max-width:100%}