/* HRS-1 17 Oct 2026: Resource Finder strip. Own file, CSS only; does not touch uploads/pfh-hox/*. Words and links unchanged. Fixes the label sliding over the heading (ox.js .ox-sx scrub on .ox-strip__k). Finished state is the default; motion only under .ox-mo with scroll-timeline support and no reduced motion. */
.ox .ox-strip{position:relative;isolation:isolate;overflow:clip;margin:clamp(12px,1.6vw,24px);border-radius:var(--r-lg);padding-block:clamp(36px,4vw,60px);background:radial-gradient(60% 90% at 100% 50%,rgba(63,191,132,.42),transparent 70%),radial-gradient(40% 70% at 0 0,rgba(255,255,255,.10),transparent 70%),linear-gradient(135deg,#2E7D5B,#1F5E43);box-shadow:var(--sh-lg)}
/* map graphic: a dot grid (the county list), a pin with radar rings (nearest place) */
.ox .ox-strip::before{content:"";position:absolute;z-index:-1;inset:0 0 0 38%;background:radial-gradient(circle,rgba(255,255,255,.22) 1.4px,transparent 1.8px) 0 0/22px 22px;-webkit-mask:radial-gradient(70% 90% at 75% 50%,#000,transparent 75%);mask:radial-gradient(70% 90% at 75% 50%,#000,transparent 75%)}
.ox .ox-strip::after{content:"";position:absolute;z-index:-1;right:clamp(-120px,-6vw,-40px);top:50%;width:min(560px,60vw);aspect-ratio:1;translate:0 -50%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 46px,rgba(255,255,255,.16) 47px 48px,transparent 49px 92px);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
.ox .ox-strip__in{position:relative}
/* the label: no scrub, a pill with an "open today" dot */
.ox-mo .ox-strip .ox-sx{animation:none;translate:none}
.ox-mo .ox-strip .ox-strip__k.ox-rv{transform:none}
.ox .ox-strip__k{display:inline-flex;align-items:center;gap:9px;margin-bottom:14px;padding:7px 14px 6px;border-radius:999px;background:rgba(11,23,41,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:14px;letter-spacing:.08em}
.ox .ox-strip__k::before{content:"";width:9px;height:9px;border-radius:50%;background:#C2F2D8;box-shadow:0 0 0 0 rgba(194,242,216,.7);flex:none}
.ox .ox-strip .ox-h2{text-wrap:balance}
.ox .ox-strip__body p{text-wrap:pretty}
/* the three food banks as map-pin chips */
.ox .ox-strip__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 8px;margin-top:14px}
.ox .ox-strip a:not(.ox-btn){display:inline-flex;align-items:center;gap:7px;margin:0;padding:7px 13px 7px 10px;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);text-decoration:none;font-size:15px;line-height:1.2;transition:background-color .25s,translate .25s cubic-bezier(.22,1,.36,1)}
.ox .ox-strip a:not(.ox-btn)::before{content:"";width:14px;height:14px;flex:none;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/contain no-repeat}
.ox .ox-strip a:not(.ox-btn):hover{background:rgba(255,255,255,.22);translate:0 -2px}
.ox .ox-strip a:not(.ox-btn):focus-visible{outline:3px solid #fff;outline-offset:3px}
/* the button: rounded, with a light sweep */
.ox .ox-strip .ox-btn--ink{position:relative;overflow:clip;border-radius:999px;padding-inline:26px;box-shadow:0 14px 30px -14px rgba(11,23,41,.8)}
.ox .ox-strip .ox-btn--ink::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);translate:-120% 0;pointer-events:none}
@media (max-width:767px){
  .ox .ox-strip{border-radius:22px}
  .ox .ox-strip::before{inset:auto 0 0 0;height:55%;-webkit-mask:radial-gradient(90% 90% at 80% 100%,#000,transparent 75%);mask:radial-gradient(90% 90% at 80% 100%,#000,transparent 75%)}
  .ox .ox-strip::after{top:auto;bottom:-140px;right:-120px;translate:none;width:380px}
  .ox .ox-strip__k{font-size:12.5px}
  .ox .ox-strip a:not(.ox-btn){font-size:14px}
  .ox .ox-strip .ox-btn--ink{padding-inline:18px;font-size:14px;white-space:nowrap}
}
@media (max-width:360px){.ox .ox-strip .ox-btn--ink{white-space:normal}}
/* motion */
@keyframes hrs-live{0%{box-shadow:0 0 0 0 rgba(194,242,216,.7)}100%{box-shadow:0 0 0 10px rgba(194,242,216,0)}}
@keyframes hrs-radar{from{background-size:100% 100%;opacity:1}to{background-size:140% 140%;opacity:.55}}
@keyframes hrs-sweep{0%,62%{translate:-120% 0}100%{translate:120% 0}}
@keyframes hrs-in{from{scale:.94;opacity:.5}to{scale:1;opacity:1}}
@keyframes hrs-pop{from{scale:.6;opacity:.3}to{scale:1;opacity:1}}
@keyframes hrs-rise{from{translate:0 22px;opacity:.35}to{translate:0 0;opacity:1}}
@keyframes hrs-map{from{background-position:0 22px}to{background-position:0 -22px}}
@media (prefers-reduced-motion:no-preference){
  .ox-mo .ox-strip__k::before{animation:hrs-live 1.8s ease-out infinite}
  .ox-mo .ox-strip::after{background-position:center;animation:hrs-radar 3.2s ease-out infinite alternate}
  .ox-mo .ox-strip .ox-btn--ink::after{animation:hrs-sweep 4.5s ease-in-out infinite}
}
@supports (animation-timeline:view()){@media (prefers-reduced-motion:no-preference){
  .ox-mo .ox-strip{animation:hrs-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  .ox-mo .ox-strip::before{animation:hrs-map linear both;animation-timeline:view();animation-range:cover}
  .ox-mo .ox-strip .ox-strip__k.ox-sx{animation:hrs-pop linear both;animation-timeline:view();animation-range:entry 30% entry 100%}
  .ox-mo .ox-strip a:not(.ox-btn){animation:hrs-rise linear both;animation-timeline:view();animation-range:entry 10% entry 90%}
  .ox-mo .ox-strip a:not(.ox-btn):nth-of-type(2){animation-range:entry 25% entry 100%}
  .ox-mo .ox-strip a:not(.ox-btn):nth-of-type(3){animation-range:entry 40% cover 15%}
}}
@media (prefers-reduced-motion:reduce){.ox .ox-strip a:not(.ox-btn){transition:none}}