/*
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 and Maroubra, Sydney. Full Site Editing, no page builder required.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0.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);display:inline-block}

/* =========================================================
   SIGNATURE: The Service Board
   ========================================================= */
.sb-board{background:var(--wp--preset--color--cream);color:var(--wp--preset--color--cocoa);
  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);
  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--cocoa-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--cocoa-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 ---------- */
.sb-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1.2rem,3vw,2.5rem);align-items:center}
.sb-logos a,.sb-logos>span{background:var(--wp--preset--color--white);border-radius:12px;padding:1rem;
  display:grid;place-items:center;border:1px solid var(--wp--preset--color--line);min-height:96px;
  transition:transform .16s,box-shadow .16s}
.sb-logos a:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(23,56,61,.12)}
.sb-logos img{max-height:56px;width:auto;object-fit:contain;margin:0 auto;display:block}

/* ---------- 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}

/* ---------- Header ---------- */
.sb-header{position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(23,56,61,.05);
  border-bottom:1px solid var(--wp--preset--color--line)}
.sb-header .wp-block-site-logo img{max-height:54px;width:auto}
.sb-header .wp-block-navigation a{font-weight:600;text-decoration:none}
.sb-header .wp-block-navigation a:hover{color:var(--wp--preset--color--brand-deep)}

/* ---------- 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}