/* Good food / Closer connections: animated route and interactive connection cards. */
#local-food{--fc-green:#173b25;--fc-cream:#f8f8f0;--fc-sage:#6c8361;--fc-line:#cbd5c4}
#local-food.food{padding-bottom:clamp(1.25rem,2.5vw,2rem)}

/* Route strip: wheat photo stays as the painterly backdrop. */
#local-food .food-route{display:block;position:relative;height:240px;max-width:1280px;margin:0 auto 1.5rem;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#173b2512 0%,#173b2530 45%,#0f2418a8 100%),url('../assets/scene-one-wheat.jpg') center 62%/cover;box-shadow:inset 0 0 0 1px #f8f8f01f}
#local-food .food-route::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 0%,#f6e7b833 0%,transparent 55%);mix-blend-mode:soft-light}
#local-food .food-route-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#local-food .food-route-shadow,#local-food .food-route-base,#local-food .food-route-trail{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
#local-food .food-route-shadow{stroke:#0f2418;stroke-opacity:.35;stroke-width:7;filter:blur(3px)}
#local-food .food-route-base{stroke:var(--fc-cream);stroke-opacity:.75;stroke-width:2;stroke-dasharray:1 9;animation:fc-march 1.1s linear infinite}
#local-food .food-route-trail{stroke:#f3e6b4;stroke-width:3;stroke-opacity:0;filter:drop-shadow(0 0 4px #f6e7b8aa)}
#local-food .food-route-anchors,#local-food .food-route-produce{display:none}
#local-food .food-route.is-live .food-route-anchors,#local-food .food-route.is-live .food-route-produce{display:inline}
#local-food .food-route.is-live .food-route-trail{stroke-opacity:.95}
#local-food .food-route-anchor{fill:var(--fc-cream);stroke:var(--fc-green);stroke-width:2;transform-box:fill-box;transform-origin:center;transition:fill .4s ease}
#local-food .food-route-anchor.is-active{fill:#f3e6b4;animation:fc-pulse 1.4s ease-out infinite}
#local-food .produce{filter:drop-shadow(0 3px 4px #0f241866)}
#local-food .produce-halo{fill:var(--fc-cream);stroke:var(--fc-green);stroke-opacity:.3;stroke-width:1}

#local-food .food-route-stops{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
#local-food .food-route-stop{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
#local-food .food-route-stop[data-route-stop="0"]{--x:12%;--y:74.8%;--shift:-50%}
#local-food .food-route-stop[data-route-stop="1"]{--x:50%;--y:45.2%;--shift:-50%}
#local-food .food-route-stop[data-route-stop="2"]{--x:88%;--y:74.8%;--shift:-50%}
#local-food .food-route-stop span{position:absolute;left:0;bottom:22px;white-space:nowrap;transform:translateX(var(--shift));transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#local-food .food-route-stop.is-passed span{background:#173b25d9;border-color:#f3e6b4b3}
#local-food .food-route-stop.is-active span,#local-food .food-route-stop.is-hover span{background:var(--fc-cream);color:var(--fc-green);border-color:var(--fc-cream);box-shadow:0 0 0 4px #f8f8f033,0 8px 22px #0f241855;transform:translateX(var(--shift)) translateY(-3px) scale(1.06)}

@keyframes fc-march{to{stroke-dashoffset:-10}}
@keyframes fc-pulse{0%{transform:scale(1)}45%{transform:scale(1.55)}100%{transform:scale(1)}}

/* Connection cards */
#local-food .connection-map{align-items:stretch}
#local-food .connection-map.has-open{align-items:start}
#local-food .connection-map .connection-arrow{align-self:center;display:flex;align-items:center;justify-content:center;color:var(--fc-sage)}
#local-food .connection-map.has-open .connection-arrow{align-self:start;margin-top:calc(var(--fc-card-h,140px)/2 - 8px)}
#local-food .connection-arrow svg{display:block;width:2.6rem;height:1rem;overflow:visible}
#local-food .connection-arrow path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#local-food .connection-arrow-line{stroke-dasharray:4 5;animation:fc-flow .9s linear infinite}
#local-food .connection-arrow-head{animation:fc-nudge 1.8s ease-in-out infinite}
#local-food .connection-arrow:nth-of-type(2) path{animation-delay:-.45s}
@keyframes fc-flow{to{stroke-dashoffset:-9}}
@keyframes fc-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}

#local-food .connection-card{position:relative;min-height:0;border-radius:16px;cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease,border-color .35s ease,background-color .35s ease}
#local-food .connection-card:hover,#local-food .connection-card:focus-within{border-color:#8ca583;box-shadow:0 18px 36px #1d392722}
#local-food .connection-card.hub:hover,#local-food .connection-card.hub:focus-within{box-shadow:0 22px 44px #1d392740}
@media(prefers-reduced-motion:no-preference){
  html:not([data-motion=reduce]) #local-food .connection-card:hover,html:not([data-motion=reduce]) #local-food .connection-card:focus-within{transform:translateY(-6px)}
  html:not([data-motion=reduce]) #local-food .connection-card.hub:hover,html:not([data-motion=reduce]) #local-food .connection-card.hub:focus-within{transform:translateY(-15px)}
}
@media(prefers-reduced-motion:no-preference) and (max-width:600px){
  html:not([data-motion=reduce]) #local-food .connection-card.hub:hover,html:not([data-motion=reduce]) #local-food .connection-card.hub:focus-within{transform:translateY(-6px)}
}
#local-food .connection-card h3{margin-bottom:.5rem}
#local-food .connection-toggle{all:unset;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;font:inherit;color:inherit;line-height:inherit;letter-spacing:inherit}
#local-food .connection-toggle::after{content:'';position:absolute;inset:0;border-radius:16px;z-index:1}
#local-food .connection-toggle:focus-visible{outline:none}
#local-food .connection-toggle:focus-visible::after{outline:2px solid var(--fc-green);outline-offset:3px}
#local-food .hub .connection-toggle:focus-visible::after{outline-color:#8ca583}
#local-food .connection-plus{position:relative;flex:none;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid currentColor;opacity:.55;transition:transform .35s ease,opacity .35s ease,background-color .35s ease}
#local-food .connection-plus::before,#local-food .connection-plus::after{content:'';position:absolute;left:50%;top:50%;width:.7rem;height:1.5px;margin:-.75px 0 0 -.35rem;background:currentColor;border-radius:1px;transition:transform .35s ease}
#local-food .connection-plus::after{transform:rotate(90deg)}
#local-food .connection-card:hover .connection-plus,#local-food .connection-card:focus-within .connection-plus{opacity:1}
#local-food .connection-toggle[aria-expanded="true"] .connection-plus{transform:rotate(180deg);opacity:1}
#local-food .connection-toggle[aria-expanded="true"] .connection-plus::after{transform:rotate(0deg)}
#local-food .connection-detail{position:relative;z-index:2;cursor:auto;margin-top:1rem;padding-top:1rem;border-top:1px dashed #9aab8e}
#local-food .hub .connection-detail{border-top-color:#f3f5e64d}
#local-food .connection-detail p{margin:0;opacity:.9}
#local-food .connection-detail.is-entering{animation:fc-open .4s cubic-bezier(.2,.7,.2,1)}
@keyframes fc-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media(max-width:800px){
  #local-food .food-route{height:220px}
}
@media(max-width:600px){
  #local-food .food-route{height:200px}
  #local-food .food-route-stop[data-route-stop="0"]{--x:15%;--y:80%;--shift:-28%}
  #local-food .food-route-stop[data-route-stop="1"]{--x:50%;--y:46%}
  #local-food .food-route-stop[data-route-stop="2"]{--x:85%;--y:80%;--shift:-74%}
  #local-food .food-route-stop span{bottom:19px}
  #local-food .connection-map .connection-arrow,#local-food .connection-map.has-open .connection-arrow{align-self:center;justify-self:center;margin-top:0}
  #local-food .connection-arrow svg{width:2rem}
}

/* Reduced motion: system setting or the site toggle (html[data-motion=reduce]). */
@media(prefers-reduced-motion:reduce){
  #local-food .food-route-base,#local-food .food-route-anchor.is-active,#local-food .connection-arrow path,#local-food .connection-detail.is-entering{animation:none}
  #local-food .connection-card,#local-food .food-route-stop span{transition:none}
}
html[data-motion=reduce] #local-food .food-route-base,html[data-motion=reduce] #local-food .food-route-anchor.is-active,html[data-motion=reduce] #local-food .connection-arrow path,html[data-motion=reduce] #local-food .connection-detail.is-entering{animation:none}
html[data-motion=reduce] #local-food .connection-card,html[data-motion=reduce] #local-food .food-route-stop span{transition:none}