/*
Theme Name: Street Buffet
Theme URI: https://streetbuffet.org.au/
Author: HostSavers for The Schaffa Foundation
Author URI: https://hostsavers.net/
Description: A purpose-built WordPress block theme for Street Buffet by The Schaffa Foundation, feeding people experiencing homelessness in Woolloomooloo, Sydney. Full Site Editing, no page builder required.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 4.6.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: streetbuffet
Tags: full-site-editing, block-patterns, charity, non-profit, accessibility-ready, block-styles, custom-colors, wide-blocks
*/

/* =========================================================
   Street Buffet — theme styles
   Design tokens live in theme.json. This file carries the
   pieces the block system cannot express on its own.
   ========================================================= */

body { -webkit-font-smoothing: antialiased; }
a { text-underline-offset: 0.18em; }

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(textarea):focus-visible,
:where(.wp-block-button__link):focus-visible {
  outline: 3px solid var(--wp--preset--color--brand);
  outline-offset: 2px;
}

/* ---------- Skip link ---------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--wp--preset--color--brand);
  color:#08343A;padding:12px 20px;font-weight:700;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- Eyebrow ---------- */
.sb-eyebrow{font-family:var(--wp--preset--font-family--body);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.65em}
.sb-eyebrow::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--wp--preset--color--coral-deep);display:inline-block}

/* =========================================================
   SIGNATURE: The Service Board
   ========================================================= */
.sb-board{background:var(--wp--preset--color--cream);color:var(--wp--preset--color--ink);
  border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(23,56,61,.28)}
.sb-board__head{background:var(--wp--preset--color--brand);color:#08343A;padding:14px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sb-board__head .sb-title{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.05rem}
.sb-board__status{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5em;opacity:.95}
.sb-board__status::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--wp--preset--color--gold);animation:sb-pulse 2.4s ease-out infinite}
@keyframes sb-pulse{0%{box-shadow:0 0 0 0 rgba(8,52,58,.5)}70%{box-shadow:0 0 0 10px rgba(8,52,58,0)}100%{box-shadow:0 0 0 0 rgba(8,52,58,0)}}
@media (prefers-reduced-motion: reduce){.sb-board__status::before{animation:none}}

.sb-service{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:18px 20px;
  border-bottom:1px solid var(--wp--preset--color--line);color:inherit;text-decoration:none}
.sb-service:last-of-type{border-bottom:0}
a.sb-service:hover{background:var(--wp--preset--color--cream-2)}
.sb-service__day{width:54px;height:54px;border-radius:50%;background:var(--wp--preset--color--coral-deep);
  color:#fff;display:grid;place-items:center;font-family:var(--wp--preset--font-family--display);
  font-weight:900;font-size:.82rem;flex:0 0 auto;text-transform:uppercase}
.sb-service__where{font-family:var(--wp--preset--font-family--display);font-weight:700;
  font-size:1.32rem;display:block;line-height:1.2}
.sb-service__meta{font-size:.85rem;color:var(--wp--preset--color--soft);display:block;margin-top:2px}
.sb-service__time{font-family:var(--wp--preset--font-family--display);font-weight:900;font-size:1.35rem;
  color:var(--wp--preset--color--brand-deep);white-space:nowrap}
.sb-board__foot{background:var(--wp--preset--color--cream-2);padding:12px 20px;font-size:.85rem;
  color:var(--wp--preset--color--soft);text-align:center}
@media (max-width:560px){
  .sb-service{grid-template-columns:auto 1fr}
  .sb-service__time{grid-column:2;font-size:1.15rem}
}

/* ---------- Tally ---------- */
.sb-tally{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.sb-tally__num{font-family:var(--wp--preset--font-family--display);font-weight:900;letter-spacing:-.03em;
  line-height:.9;font-size:clamp(3.2rem,9vw,6rem);color:var(--wp--preset--color--brand-deep)}
.sb-tally__unit{font-family:var(--wp--preset--font-family--display);font-weight:700;font-size:1.3rem}

/* ---------- Pillar cards ---------- */
.sb-pillar,
.wp-block-group.is-style-sb-pillar{background:var(--wp--preset--color--white);border-radius:14px;padding:1.8rem;
  border:1px solid var(--wp--preset--color--line);box-shadow:0 6px 20px rgba(23,56,61,.06);
  transition:transform .18s,box-shadow .18s;height:100%}
.sb-pillar:hover,
.wp-block-group.is-style-sb-pillar:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(23,56,61,.12)}
.sb-pillar h3{margin-top:0;color:var(--wp--preset--color--brand-deep)}

/* ---------- Stat cards ---------- */
.sb-stat,
.wp-block-group.is-style-sb-stat{background:rgba(255,255,255,.08);border-radius:14px;padding:1.3rem;
  border:1px solid rgba(255,255,255,.16);height:100%}
.sb-stat__fig{font-family:var(--wp--preset--font-family--display);font-weight:900;
  font-size:clamp(2rem,5vw,2.4rem);line-height:1;color:var(--wp--preset--color--gold);display:block;margin-bottom:.4rem}
.sb-stat__src{font-size:.7rem;opacity:.6;margin-top:.6rem;display:block}

/* ---------- Supporter logos ----------
   Every business gets a real card: logo, name, and what they give — not a
   thin tile of white space around a tiny image. Minimum two columns even
   on the narrowest phones, so nobody sees one lonely logo per screen. */
.sb-logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(.9rem,2vw,1.4rem);align-items:stretch}
.sb-logos a,.sb-logos>span{
  background:var(--wp--preset--color--white);border-radius:14px;
  padding:1.3rem 1.2rem 1.1rem;display:flex;flex-direction:column;align-items:center;
  gap:.7rem;text-align:center;text-decoration:none;
  border:1px solid var(--wp--preset--color--line);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.sb-logos a:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(23,56,61,.14);
  border-color:var(--wp--preset--color--brand)}
.sb-logos__mark{width:100%;height:76px;display:grid;place-items:center}
.sb-logos img{max-height:76px;max-width:100%;width:auto;object-fit:contain;display:block}
.sb-logos__name{font-weight:700;font-size:.92rem;color:var(--wp--preset--color--brand-ink);
  line-height:1.3}
.sb-logos__give{font-size:.78rem;color:var(--sb-soft, #5F7C80);line-height:1.35}

@media(max-width:560px){
  .sb-logos{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .sb-logos a,.sb-logos>span{padding:1.1rem .9rem .9rem}
  .sb-logos__mark{height:60px}
  .sb-logos img{max-height:60px}
  .sb-logos__name{font-size:.85rem}
}

/* ---------- Buttons ---------- */
.wp-block-button__link{transition:transform .14s,box-shadow .14s;box-shadow:0 6px 18px rgba(244,121,91,.28)}
.wp-block-button__link:hover{transform:translateY(-2px)}
.is-style-sb-hivis .wp-block-button__link{background:var(--wp--preset--color--brand);color:#08343A;
  font-weight:700;box-shadow:0 6px 18px rgba(245,185,66,.32)}
.is-style-sb-outline .wp-block-button__link{background:transparent;color:currentColor;
  border:2px solid currentColor;font-weight:700;box-shadow:none}
.is-style-sb-outline .wp-block-button__link:hover{background:#fff;color:var(--wp--preset--color--brand-deep);border-color:#fff}

/* On the teal "Pull up a chair" band, the hi-vis button's own brand-teal
   fill matches the section background and disappears. Give it the same
   white treatment the outline buttons already use on hover, so all three
   buttons read as one consistent set at a glance. */
.has-brand-background-color .is-style-sb-hivis .wp-block-button__link{
  background:#fff;color:var(--wp--preset--color--brand-deep);
  box-shadow:0 6px 18px rgba(14,63,69,.18);
}
.has-brand-background-color .is-style-sb-hivis .wp-block-button__link:hover{
  background:var(--wp--preset--color--gold);color:#402A00;
}

/* ---------- Header ---------- */

/* ---------- Post cards ---------- */
.sb-postcard>li,.sb-postcard .wp-block-post{background:var(--wp--preset--color--white);border-radius:14px;
  overflow:hidden;border:1px solid var(--wp--preset--color--line);box-shadow:0 6px 20px rgba(23,56,61,.06);
  transition:transform .18s,box-shadow .18s}
.sb-postcard>li:hover,.sb-postcard .wp-block-post:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(23,56,61,.12)}
.sb-postcard .wp-block-post-featured-image{margin:0}
.sb-postcard .wp-block-post-featured-image img{aspect-ratio:3/2;object-fit:cover;width:100%}
.sb-postcard .wp-block-post-date,
.sb-postcard .wp-block-post-title,
.sb-postcard .wp-block-post-excerpt{padding-inline:1.3rem}
.sb-postcard .wp-block-post-date{padding-top:1.2rem}
.sb-postcard .wp-block-post-excerpt{padding-bottom:1.4rem}
.sb-postcard .wp-block-post-title{margin-block:.5rem}
.sb-postcard .wp-block-post-title a{text-decoration:none}
.sb-postcard .wp-block-post-title a:hover{color:var(--wp--preset--color--brand-deep)}

/* ---------- Footer ---------- */
.sb-footer a{text-decoration:none}
.sb-footer a:hover{text-decoration:underline;color:var(--wp--preset--color--gold)}
.sb-footer .wp-block-site-logo img{background:#fff;border-radius:10px;padding:6px}

/* ---------- Utility ---------- */
.sb-rule{height:1px;background:currentColor;opacity:.18;border:0}
.sb-measure{max-width:60ch}

/* ---------- Photo grid (who we are) ---------- */
.sb-photogrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,1.6rem)}
.sb-photogrid img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%;
  box-shadow:0 12px 32px rgba(23,56,61,.14)}
@media (max-width:560px){.sb-photogrid{grid-template-columns:1fr 1fr;gap:.8rem}}

/* ---------- Stat cards with photos (impact) ---------- */
.sb-statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:clamp(1.2rem,2.5vw,1.8rem)}
.sb-statcard{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;overflow:hidden}
.sb-statcard img{aspect-ratio:16/10;object-fit:cover;width:100%;display:block}
.sb-statcard__body{padding:1.2rem}
.sb-statcard__body p{margin:0;font-size:.93rem;opacity:.92}

/* ---------- Story section backdrop ---------- */
.sb-story{position:relative;overflow:hidden}
.sb-story::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background:radial-gradient(700px 340px at 12% 0%, rgba(61,192,200,.28), transparent 60%),
             radial-gradient(600px 300px at 88% 100%, rgba(244,121,91,.22), transparent 60%)}
.sb-story > *{position:relative;z-index:2}

/* =========================================================
   FOOTER — force readable link colour.
   theme.json sets links to brand-deep globally, which is
   unreadable on the dark footer. These win by specificity.
   ========================================================= */
.sb-footer,
.sb-footer p,
.sb-footer li{ color: var(--wp--preset--color--cream); }
.sb-footer a,
.sb-footer a:visited,
.sb-footer p a,
.sb-footer .wp-block-paragraph a{
  color: var(--wp--preset--color--cream) !important;
  text-decoration: none;
  opacity: .9;
}
/* The blanket footer link colour above also caught the social icons'
   own <a> tags, forcing them cream — invisible against their cream
   circle background. Social icons need their own dark colour back. */
.sb-footer .wp-block-social-links .wp-social-link,
.sb-footer .wp-block-social-links .wp-social-link a,
.sb-footer .wp-block-social-links .wp-social-link a:visited{
  color: var(--wp--preset--color--brand-ink) !important;
  opacity: 1;
}
.sb-footer .wp-block-social-links .wp-social-link svg,
.sb-footer .wp-block-social-links .wp-social-link svg path{
  fill: var(--wp--preset--color--brand-ink) !important;
}
.sb-footer a:hover,
.sb-footer a:focus-visible{
  color: var(--wp--preset--color--gold) !important;
  opacity: 1;
  text-decoration: underline;
}
.sb-footer h6,
.sb-footer .wp-block-heading{ color: var(--wp--preset--color--gold) !important; }
.sb-footer .wp-block-social-links .wp-social-link{ background: var(--wp--preset--color--cream); }

/* Same problem on any dark section */
.sb-story a, .has-brand-ink-background-color a, .has-brand-deep-background-color a{
  color: var(--wp--preset--color--gold);
}

/* =========================================================
   FOOTER — slimmer
   ========================================================= */
.sb-footer{font-size:.95rem}
.sb-footer__logo img{max-height:96px;width:auto;height:auto}
.sb-footer .wp-block-columns{gap:clamp(1.5rem,4vw,3rem)}
.sb-footer h6,.sb-footer .wp-block-heading{margin-bottom:.6rem;font-size:.72rem}
.sb-footer p{margin-block:.3rem}
.sb-footer__bot{opacity:.78;gap:10px}
.sb-footer__bot p{margin:0}
@media (max-width:600px){
  .sb-footer__logo img{max-height:82px}
  .sb-footer__bot{flex-direction:column;align-items:flex-start}
}


/* =========================================================
   Buttons — match the HostSavers house style
   ========================================================= */
.wp-block-button__link,.wp-element-button{
  border-radius:10px !important;
  box-shadow:none !important;
  padding:.95rem 1.9rem;
  font-weight:700;
}
.wp-block-button__link:hover{transform:translateY(-1px)}
.is-style-sb-outline .wp-block-button__link{border-width:1.5px}

/* =========================================================
   TYPOGRAPHY SYSTEM
   One scale, applied consistently. Display face carries the
   headings; body face carries everything you actually read.
   ========================================================= */
:root{
  --sb-ink:#17383D;
  --sb-soft:#5F7C80;
  --sb-deep:#14666E;
  --sb-measure:64ch;
}

body{
  font-size:clamp(1rem, .97rem + .18vw, 1.09rem);
  line-height:1.7;
  letter-spacing:-.003em;
  text-rendering:optimizeLegibility;
}

/* Headings: tighter tracking as size grows, never below 1.05 line-height */
h1,.wp-block-post-title,
.wp-block-heading.has-display-font-size{
  font-size:clamp(2.3rem, 1.55rem + 3.2vw, 4rem);
  line-height:1.06; letter-spacing:-.028em; font-weight:800;
}
h2,.wp-block-heading[class*="xx-large"]{
  font-size:clamp(1.85rem, 1.35rem + 2.1vw, 3rem);
  line-height:1.12; letter-spacing:-.022em; font-weight:800;
}
h3{ font-size:clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  line-height:1.25; letter-spacing:-.015em; font-weight:700; }
h4{ font-size:clamp(1.12rem, 1.03rem + .4vw, 1.3rem);
  line-height:1.3; letter-spacing:-.01em; font-weight:700; }
h5{ font-size:1.05rem; line-height:1.4; font-weight:700; letter-spacing:-.005em; }
h6,.sb-eyebrow{
  font-family:var(--wp--preset--font-family--body);
  font-size:.72rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; line-height:1.4;
}

/* Balance short headings, avoid orphans in body copy */
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* Readable measure everywhere prose appears */
main p:not([class*="has-text-align-center"]),
main li{ max-width:var(--sb-measure); }
main .has-text-align-center{ margin-inline:auto; }
.sb-measure{ max-width:var(--sb-measure) }

/* Lead paragraph */
.has-large-font-size{
  font-size:clamp(1.12rem, 1.02rem + .45vw, 1.32rem) !important;
  line-height:1.62; letter-spacing:-.008em;
}
.has-small-font-size{ font-size:.92rem !important; line-height:1.6 }

/* Vertical rhythm */
main h2{ margin-top:0 }
main p + h2, main p + h3, main ul + h2, main ul + h3{ margin-top:2.2em }
main h2 + p, main h3 + p{ margin-top:.7em }
main p{ margin-block:0 1.1em }

/* Links inside prose */
main p a, main li a{ text-underline-offset:.2em; text-decoration-thickness:1px }

/* =========================================================
   COLOUR ISOLATION
   Components must never inherit text colour from a parent
   section. This was making the service board render white
   text on a cream card inside the hero cover block.
   ========================================================= */
.sb-board,
.sb-board *,
.sbc-needs, .sbc-needs *,
.sbc-services, .sbc-services *,
.sbc-svc, .sbc-svc *,
.sbc-form, .sbc-form *,
.sbc-form-wrap, .sbc-form-wrap *,
.sbc-don, .sbc-don *,
.sbc-bank, .sbc-bank *,
.sbc-wcard, .sbc-wcard *,
.sbc-tile, .sbc-tile *,
.sbc-rel__card, .sbc-rel__card *,
.sbn__card, .sbn__card *,
.sbn__lead, .sbn__lead *,
.sb-pillar, .sb-pillar *{
  --wp--preset--color--white:#FFFFFF; /* keep white available, stop it cascading as text */
  box-sizing:border-box; /* a width:100% field with its own padding/border
    needs this or it renders wider than its card and bleeds past the edge —
    happened to the form fields once already, so it's enforced everywhere
    a card can hold an input. */
}
.sb-board{ color:var(--sb-ink) !important; background:var(--wp--preset--color--cream) }
.sb-service{ color:var(--sb-ink) }
.sb-service__where{ color:var(--sb-ink) !important }
.sb-service__meta{ color:var(--sb-soft) !important }
.sb-service__time{ color:var(--sb-deep) !important }
.sb-board__foot{ color:var(--sb-soft) !important }
.sb-board__head,.sb-board__head *{ color:#08343A !important }

/* Same protection for the plugin components */
.sbc-needs{ color:var(--sb-ink) }
.sbc-need__name{ color:var(--sb-ink) }
.sbc-need__num{ color:var(--sb-soft) }
.sbc-svc__body h3{ color:var(--sb-ink) }
.sbc-svc__meta{ color:var(--sb-soft) }
.sbc-form, .sbc-form label, .sbc-form legend{ color:var(--sb-ink) }
.sbc-bank dd{ color:var(--sb-ink) }
.sbc-bank dt,.sbc-bank p{ color:var(--sb-soft) }

/* Dark sections: guarantee light text and readable links */
.has-brand-ink-background-color,
.has-brand-deep-background-color,
.sb-story, .sb-footer{ color:var(--wp--preset--color--cream) }
.has-brand-ink-background-color h1,.has-brand-ink-background-color h2,
.has-brand-ink-background-color h3,.has-brand-deep-background-color h1,
.has-brand-deep-background-color h2,.has-brand-deep-background-color h3,
.sb-story h1,.sb-story h2,.sb-story h3{ color:#fff }

/* Cover blocks: headings and copy stay legible over imagery */
.wp-block-cover .wp-block-heading,
.wp-block-cover h1,.wp-block-cover h2{ color:#fff }
.wp-block-cover p:not([class*="has-"]){ color:#E6F4F5 }

/* Minimum contrast for muted text */
.has-soft-color{ color:#4F6A6E !important }

/* =========================================================
   WIDTH & MEASURE FIXES
   Copy inside a wide column shouldn't be clamped to the
   narrow prose measure — that was making the "Who we are"
   text a thin ribbon beside a huge empty gutter.
   ========================================================= */
main .sb-wide-copy,
main .wp-block-column p{ max-width:none }
main .wp-block-column .sb-measure{ max-width:var(--sb-measure) }
.wp-block-columns{ align-items:flex-start }

/* Form fields must never render as pills, whatever else loads */
.sbc-form input[type=text],.sbc-form input[type=email],.sbc-form input[type=tel],
.sbc-form input[type=number],.sbc-form input[type=url],.sbc-form select,.sbc-form textarea{
  border-radius:12px !important;
}
.sbc-form textarea{ min-height:132px !important }
.sbc-btn{ border-radius:12px !important }

/* =========================================================
   HOMEPAGE ACTION ROUTES
   ========================================================= */
.sb-routes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.sb-route{display:flex;flex-direction:column;gap:.45rem;background:#fff;border:1px solid var(--wp--preset--color--line);
  border-radius:16px;padding:1.7rem 1.6rem 1.5rem;text-decoration:none;color:var(--sb-ink);
  transition:transform .2s,box-shadow .2s,border-color .2s;box-shadow:0 1px 3px rgba(23,56,61,.05)}
.sb-route:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(23,56,61,.13);
  border-color:var(--wp--preset--color--brand)}
.sb-route__k{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--wp--preset--color--brand-deep)}
.sb-route strong{font-family:var(--wp--preset--font-family--display);font-size:1.45rem;
  line-height:1.2;letter-spacing:-.02em;color:var(--wp--preset--color--brand-ink)}
.sb-route__d{color:var(--sb-soft);font-size:.96rem;line-height:1.6;flex:1}
.sb-route__go{font-weight:700;color:var(--wp--preset--color--brand-deep);margin-top:.6rem}
.sb-route:hover .sb-route__go{color:var(--wp--preset--color--coral-deep)}
.sb-route--primary{background:linear-gradient(158deg,var(--wp--preset--color--brand-deep),var(--wp--preset--color--brand-ink));
  border-color:transparent;color:#fff}
.sb-route--primary .sb-route__k{color:var(--wp--preset--color--gold)}
.sb-route--primary strong{color:#fff}
.sb-route--primary .sb-route__d{color:#CFE7EA}
.sb-route--primary .sb-route__go{color:var(--wp--preset--color--gold)}
.sb-route--primary:hover .sb-route__go{color:#fff}
.sb-route--tertiary{background:var(--wp--preset--color--cream-2);border-color:var(--wp--preset--color--gold)}
.sb-route--tertiary .sb-route__k{color:var(--wp--preset--color--coral-deep)}
.sb-route--tertiary .sb-route__go{color:var(--wp--preset--color--coral-deep)}
.sb-route--tertiary:hover{border-color:var(--wp--preset--color--coral-deep)}
.sb-route--tertiary:hover .sb-route__go{color:var(--wp--preset--color--brand-deep)}
@media(max-width:860px){.sb-routes{grid-template-columns:1fr}}

/* =========================================================
   FORM SURFACES
   Cards need something to sit on, or the inputs disappear.
   ========================================================= */
.sbc-don .sbc-form,
.sbc-form-wrap .sbc-form,
.sbc-contact .sbc-form{
  background:#fff;
  border:1px solid #C9D6DC;
  border-top:4px solid var(--wp--preset--color--brand);
  box-shadow:0 6px 24px rgba(14,63,69,.09);
}

/* Field borders must be visible on every background */
.sbc-form input[type=text],.sbc-form input[type=email],.sbc-form input[type=tel],
.sbc-form input[type=number],.sbc-form input[type=url],.sbc-form select,.sbc-form textarea{
  border:1.5px solid #C9D6DC !important;
  background:#F4F8F9 !important;
  border-radius:12px !important;
}
.sbc-form input:hover,.sbc-form select:hover,.sbc-form textarea:hover{
  border-color:var(--wp--preset--color--brand) !important;
}
.sbc-form input:focus,.sbc-form select:focus,.sbc-form textarea:focus{
  border-color:var(--wp--preset--color--brand-deep) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(61,192,200,.28) !important;
}
/* Submit button must always be visible */
.sbc-btn{
  background:var(--wp--preset--color--coral-deep) !important;
  color:#fff !important;
  border-radius:12px !important;
}
.sbc-btn:hover{ background:var(--wp--preset--color--brand-deep) !important }

/* =========================================================
   STAT CARD (meals served, inside Who we are)
   ========================================================= */
.sb-statcard{
  display:block;
  background:linear-gradient(155deg, var(--wp--preset--color--brand-deep), var(--wp--preset--color--brand-ink));
  color:#fff;border-radius:16px;padding:1.6rem 1.7rem;
  box-shadow:0 10px 30px rgba(14,63,69,.18);
}
.sb-statcard__n{
  display:block;font-family:var(--wp--preset--font-family--display);
  font-weight:900;font-size:clamp(2.6rem,6vw,3.6rem);line-height:.95;
  letter-spacing:-.03em;color:var(--wp--preset--color--gold);
}
.sb-statcard__l{
  display:block;font-family:var(--wp--preset--font-family--display);
  font-weight:700;font-size:1.15rem;margin-top:.45rem;color:#fff;
}
.sb-statcard__d{
  display:block;font-size:.94rem;color:#CFE7EA;margin-top:.6rem;line-height:1.55;
}

/* =========================================================
   WHO WE ARE — copy column
   A deliberate two-tier type scale (serif lead line, then
   body copy) instead of body text that happens to start big
   and shrink. Ink instead of pure black, a gold rule to give
   the column its own edge next to the stat card, and an
   inline highlight that echoes the stat card's gold number.
   ========================================================= */
.sb-story-col{
  border-left:3px solid var(--wp--preset--color--gold);
  padding-left:clamp(1.3rem,2.5vw,2rem);
}
.sb-wide-copy{
  color:var(--wp--preset--color--ink);
}
.sb-wide-copy.has-large-font-size{
  font-family:var(--wp--preset--font-family--display);
  font-style:italic;
  font-weight:500;
  color:var(--wp--preset--color--brand-deep);
  font-size:clamp(1.4rem, 1.1rem + 1.1vw, 1.85rem) !important;
  line-height:1.42;
  letter-spacing:-.012em;
  margin-bottom:.9em;
}
.sb-wide-copy:not(.has-large-font-size){
  font-family:var(--wp--preset--font-family--body);
  font-size:1.05rem;
  line-height:1.75;
}
.sb-highlight{
  color:var(--wp--preset--color--coral-deep);
  font-weight:700;
}

/* =========================================================
   FUND-A-THING CARDS (volunteer page financial CTA)
   ========================================================= */
.sb-fund{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.9rem,2vw,1.3rem)}
.sb-fund__card{display:flex;flex-direction:column;gap:.4rem;background:#fff;
  border:1.5px solid #C9D6DC;border-radius:16px;padding:1.5rem 1.4rem;
  text-decoration:none;color:var(--sb-ink);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.sb-fund__card:hover{transform:translateY(-4px);border-color:var(--wp--preset--color--brand);
  box-shadow:0 18px 36px rgba(14,63,69,.13)}
.sb-fund__amt{font-family:var(--wp--preset--font-family--display);font-weight:900;
  font-size:2rem;line-height:1;color:var(--wp--preset--color--brand-deep)}
.sb-fund__what{font-weight:750;font-size:1.05rem;color:var(--wp--preset--color--brand-ink)}
.sb-fund__d{font-size:.92rem;color:var(--sb-soft);line-height:1.55;flex:1}
.sb-fund__go{font-weight:700;font-size:.92rem;color:var(--wp--preset--color--coral-deep);margin-top:.6rem}
@media(max-width:820px){.sb-fund{grid-template-columns:1fr}}